:root {
    --font-sans: var(--gui-font-sans);
    --bg: #eef3f8;
    --bg-alt: #f7fafc;
    --panel: rgba(255, 255, 255, 0.92);
    --panel-strong: #ffffff;
    --panel-border: rgba(10, 54, 92, 0.12);
    --text: #0e2237;
    --text-soft: #5d7388;
    --brand: #0b5d8f;
    --brand-strong: #0a476c;
    --accent: #1ba5a7;
    --accent-soft: rgba(27, 165, 167, 0.14);
    --success: #1d8a58;
    --warning: #b57712;
    --danger: #b64646;
    --shadow: 0 20px 50px rgba(7, 36, 62, 0.12);
    --shadow-soft: 0 12px 30px rgba(7, 36, 62, 0.08);
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --sidebar-width: 280px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --control-height: 2.75rem;
    --content-max-width: 160rem;
}

html[data-theme="dark"] {
    --bg: #09141f;
    --bg-alt: #0f1e2d;
    --panel: rgba(15, 30, 45, 0.94);
    --panel-strong: #13273a;
    --panel-border: rgba(164, 198, 221, 0.12);
    --text: #f2f7fb;
    --text-soft: #9fb6c8;
    --brand: #4fa8df;
    --brand-strong: #3c83ad;
    --accent: #39c3bf;
    --accent-soft: rgba(57, 195, 191, 0.18);
    --success: #4db67b;
    --warning: #d0a040;
    --danger: #f27b7b;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.22);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at top right, rgba(27, 165, 167, 0.14), transparent 24rem),
        linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 42%, var(--bg) 100%);
    color: var(--text);
    font-family: var(--font-sans);
}

body {
    line-height: 1.5;
}

a {
    color: inherit;
    text-decoration: none;
}

button, input, select {
    font: inherit;
}

.hidden {
    display: none !important;
}

.eyebrow {
    margin: 0 0 0.2rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.muted-copy {
    margin: 0;
    color: var(--text-soft);
}

.primary-button,
.secondary-button,
.icon-button,
.toolbar-button {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.primary-button {
    background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    color: #fff;
    padding: 0.9rem 1.2rem;
    font-weight: 700;
    box-shadow: var(--shadow-soft);
}

.secondary-button,
.toolbar-button {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    color: var(--text);
    padding: 0.78rem 1rem;
}

.primary-button:hover,
.secondary-button:hover,
.toolbar-button:hover,
.icon-button:hover {
    transform: translateY(-1px);
}

.icon-button {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    color: var(--text);
}

.icon-button::before {
    content: none;
    display: none;
}

.sidebar-toggle::before {
    content: "";
    display: block;
    width: 1.05rem;
    height: 0.9rem;
    border: 0;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    box-shadow: 0 0.33rem 0 0 currentColor inset;
    transform: none;
}

#detailDrawerClose,
#popupWindowClose {
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 1;
    color: #dc2626;
    border-color: rgba(220, 38, 38, 0.18);
    background: rgba(254, 242, 242, 0.98);
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.12);
}

#detailDrawerClose:hover,
#detailDrawerClose:focus-visible,
#popupWindowClose:hover,
#popupWindowClose:focus-visible {
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.98);
    border-color: rgba(185, 28, 28, 0.24);
}

#detailDrawerClose::before,
#popupWindowClose::before {
    content: none;
}

#detailDrawerClose span,
#popupWindowClose span {
    display: block;
    line-height: 1;
    transform: translateY(-0.04rem);
}

.login-body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 2rem;
}

.login-shell {
    display: grid;
    grid-template-columns: minmax(20rem, 29rem) minmax(22rem, 32rem);
    gap: 2rem;
    width: min(100%, 72rem);
}

.login-panel,
.showcase-card,
.sidebar,
.topbar,
.notification-strip,
.content-card,
.chart-card,
.table-shell,
.detail-drawer__panel {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.login-panel,
.showcase-card {
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.login-brand {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 1.3rem;
    background: linear-gradient(145deg, var(--brand-strong), var(--accent));
    color: #fff;
    font-weight: 800;
    box-shadow: var(--shadow-soft);
}

.brand-mark.small {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 1rem;
    flex-shrink: 0;
}

.login-form {
    display: grid;
    gap: 0.8rem;
}

.login-form input,
.toolbar-search,
.toolbar-select {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--panel-border);
    background: var(--panel-strong);
    color: var(--text);
    padding: 0.9rem 1rem;
    outline: none;
}

.login-form input:focus,
.toolbar-search:focus,
.toolbar-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.toolbar-search.is-filled,
.search-field.search-field--filled .toolbar-search {
    border-color: #47c86b;
    box-shadow: 0 0 0 3px rgba(71, 200, 107, 0.14);
}

.toolbar-search.is-filled:focus,
.search-field.search-field--filled .toolbar-search:focus {
    border-color: #2dbb58;
    box-shadow: 0 0 0 4px rgba(71, 200, 107, 0.2);
}

.notice-card {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}

.notice-card.warning {
    background: rgba(181, 119, 18, 0.12);
    color: var(--warning);
}

.notice-card.danger {
    background: rgba(182, 70, 70, 0.12);
    color: var(--danger);
}

.feature-list {
    margin: 1rem 0 0;
    padding-left: 1.1rem;
    color: var(--text-soft);
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100vh;
}

.app-shell.sidebar-collapsed {
    grid-template-columns: 5.3rem minmax(0, 1fr);
}

.sidebar {
    margin: 1.1rem;
    border-radius: calc(var(--radius-lg) + 0.3rem);
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-head,
.brand-lockup,
.topbar,
.topbar__left,
.topbar__right,
.mode-switch,
.user-pill,
.toolbar-row,
.toolbar-actions,
.dataset-tabs,
.metric-grid,
.chart-grid,
.dashboard-grid,
.summary-cards,
.detail-grid {
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.sidebar-head {
    justify-content: space-between;
}

.brand-copy h1,
.login-panel h1 {
    margin: 0;
    font-size: 1.5rem;
}

.brand-wordmark {
    display: inline-block;
    position: relative;
    color: #0b74c7;
    font-weight: 900;
    letter-spacing: -0.04em;
    filter: drop-shadow(0 8px 18px rgba(11, 116, 199, 0.18));
}

.brand-wordmark::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.14em;
    height: 0.16em;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 215, 255, 0.38), rgba(77, 212, 122, 0.32), rgba(251, 113, 133, 0.3));
    filter: blur(0.18rem);
    opacity: 0.9;
    pointer-events: none;
}

.brand-wordmark--compact {
    letter-spacing: -0.02em;
}

/* Brand assets supplied with the application. */
.company-logo {
    display: block;
    width: clamp(7.5rem, 10vw, 10.5rem);
    height: 2.45rem;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 0.35rem;
}

.sidebar-page-logo {
    display: block;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 auto;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--panel-border), 0 0.35rem 0.85rem rgba(0, 0, 0, 0.28);
}

.app-shell.sidebar-collapsed .sidebar-page-logo {
    margin-inline: auto;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .brand-wordmark {
        background: linear-gradient(92deg, #00d7ff 0%, #0b74c7 26%, #42d96b 54%, #f59e0b 78%, #fb7185 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

.sidebar-nav {
    display: grid;
    gap: 0.35rem;
}

.nav-link {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0.9rem;
    border-radius: 16px;
    color: var(--text-soft);
}

.nav-link__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 14px;
    background: var(--bg-alt);
    border: 1px solid var(--panel-border);
}

.nav-link__icon svg,
.metric-card .nav-link__icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.nav-link.active {
    background: linear-gradient(135deg, rgba(11, 93, 143, 0.16), rgba(27, 165, 167, 0.12));
    color: var(--text);
}

.nav-link.active .nav-link__icon {
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
}

.sidebar-foot {
    margin-top: auto;
    padding: 1rem;
    border-radius: 18px;
    background: rgba(11, 93, 143, 0.08);
}

.sidebar-foot__label,
.sidebar-foot__value {
    margin: 0;
}

.sidebar-foot__label {
    color: var(--text-soft);
    font-size: 0.82rem;
}

.sidebar-foot__value {
    font-weight: 700;
}

.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .nav-link__label,
.app-shell.sidebar-collapsed .sidebar-foot {
    display: none;
}

.workspace {
    padding: 1.1rem 1.1rem 1.1rem 0;
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.topbar,
.notification-strip,
.content-card,
.chart-card,
.table-shell {
    border-radius: var(--radius-lg);
}

.topbar {
    justify-content: space-between;
    padding: 1rem 1.4rem;
}

.topbar__right {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.mode-switch {
    background: var(--bg-alt);
    padding: 0.25rem;
    border-radius: 999px;
}

.mode-switch button {
    border: 0;
    background: transparent;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    color: var(--text-soft);
    cursor: pointer;
    font-weight: 700;
}

.mode-switch button.active {
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
}

.user-pill {
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: var(--bg-alt);
}

.user-pill strong,
.user-pill span {
    display: block;
}

.user-pill span {
    color: var(--text-soft);
    font-size: 0.85rem;
}

.notification-strip {
    padding: 0.9rem 1rem;
}

.notification-strip.warning {
    border-color: rgba(181, 119, 18, 0.22);
    background: rgba(181, 119, 18, 0.11);
}

.notification-strip.info {
    border-color: rgba(11, 116, 199, 0.2);
    background: rgba(11, 116, 199, 0.1);
}

.notification-strip.success {
    border-color: rgba(31, 181, 109, 0.22);
    background: rgba(31, 181, 109, 0.11);
}

.content-stage {
    min-width: 0;
    display: grid;
    gap: 1rem;
}

.loading-state {
    min-height: 18rem;
    display: grid;
    place-items: center;
    gap: 1rem;
    text-align: center;
}

.loading-state p {
    margin: 0;
    color: var(--text-soft);
    font-weight: 700;
}

.spinner {
    --cisco-bar-width: 0.28rem;
    --cisco-bar-fill: linear-gradient(180deg, var(--brand) 0%, var(--accent) 100%);
    position: relative;
    width: 4.4rem;
    height: 3.2rem;
    display: block;
    background-repeat: no-repeat;
    background-image:
        var(--cisco-bar-fill),
        var(--cisco-bar-fill),
        var(--cisco-bar-fill),
        var(--cisco-bar-fill),
        var(--cisco-bar-fill),
        var(--cisco-bar-fill),
        var(--cisco-bar-fill),
        var(--cisco-bar-fill),
        var(--cisco-bar-fill);
    background-position:
        0.18rem 100%,
        0.66rem 100%,
        1.14rem 100%,
        1.62rem 100%,
        2.10rem 100%,
        2.58rem 100%,
        3.06rem 100%,
        3.54rem 100%,
        4.02rem 100%;
    background-size:
        var(--cisco-bar-width) 0.64rem,
        var(--cisco-bar-width) 1rem,
        var(--cisco-bar-width) 1.48rem,
        var(--cisco-bar-width) 1.96rem,
        var(--cisco-bar-width) 2.42rem,
        var(--cisco-bar-width) 1.96rem,
        var(--cisco-bar-width) 1.48rem,
        var(--cisco-bar-width) 1rem,
        var(--cisco-bar-width) 0.64rem;
    filter: drop-shadow(0 0.35rem 0.9rem rgba(11, 93, 143, 0.16));
    animation: ciscoBarWave 1.15s cubic-bezier(0.37, 0, 0.22, 1) infinite;
}

.spinner::after {
    content: "";
    position: absolute;
    left: 0.35rem;
    right: 0.35rem;
    bottom: -0.2rem;
    height: 0.22rem;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(11, 93, 143, 0.2) 20%, rgba(27, 165, 167, 0.38) 50%, rgba(11, 93, 143, 0.2) 80%, transparent 100%);
    filter: blur(0.08rem);
    opacity: 0.9;
}

.content-card,
.chart-card,
.table-shell {
    padding: 1.25rem;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem;
}

.metric-card {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    box-shadow: var(--shadow-soft);
}

.metric-card__value {
    margin: 0.3rem 0 0;
    font-size: 1.75rem;
    font-weight: 800;
}

.metric-card__label {
    margin: 0;
    color: var(--text-soft);
}

.dashboard-grid,
.chart-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.chart-card__head,
.table-head,
.detail-drawer__head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.table-toolbar {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.toolbar-row {
    justify-content: space-between;
    flex-wrap: wrap;
}

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

details.toolbar-button {
    padding: 0;
}

details.toolbar-button > summary {
    list-style: none;
    padding: 0.78rem 1rem;
}

details.toolbar-button > summary::-webkit-details-marker {
    display: none;
}

#columnChooserBody {
    padding: 0 1rem 1rem;
    min-width: 14rem;
}

.toolbar-search {
    min-width: min(25rem, 100%);
}

.dataset-tabs {
    flex-wrap: wrap;
    margin: 0.5rem 0 1rem;
}

.dataset-tab {
    border: 1px solid var(--panel-border);
    background: transparent;
    color: var(--text-soft);
    border-radius: 999px;
    padding: 0.6rem 0.9rem;
    cursor: pointer;
}

.dataset-tab.active {
    background: var(--accent-soft);
    color: var(--text);
}

.table-wrap {
    overflow: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--panel-border);
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 48rem;
}

th,
td {
    padding: 0.78rem 0.85rem;
    border-bottom: 1px solid var(--panel-border);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

th {
    position: sticky;
    top: 0;
    background: var(--panel-strong);
    z-index: 1;
    font-size: 0.83rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-soft);
}

tr {
    transition: background 140ms ease;
}

tbody tr:hover {
    background: rgba(11, 93, 143, 0.05);
    cursor: pointer;
}

.sortable {
    cursor: pointer;
}

.sortable::after {
    content: " [sort]";
    color: var(--text-soft);
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.status-pill,
.flag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.3rem 0.62rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.status-pill.good { background: rgba(29, 138, 88, 0.13); color: var(--success); }
.status-pill.warn { background: rgba(181, 119, 18, 0.13); color: var(--warning); }
.status-pill.bad { background: rgba(182, 70, 70, 0.13); color: var(--danger); }
.status-pill.soft { background: var(--accent-soft); color: var(--brand); }

.status-pill--ping {
    padding-inline: 0.72rem;
    box-shadow: inset 0 0 0 1px rgba(15, 40, 79, 0.04);
}

.status-pill__dot {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, currentColor 18%, transparent);
    flex: 0 0 auto;
}

.ping-summary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: 0.4rem;
}

.ping-summary__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.ping-summary__item strong {
    color: var(--text);
    font-size: 0.84rem;
}

.flag-pill {
    background: var(--bg-alt);
    color: var(--text);
}

/* Outcome colors shared by live Automation and Agentic result summaries. */
.automation-center__progress-metrics .is-warning,
.agentic-run-results__metrics .is-warning {
    color: var(--warning);
}

.automation-center__progress-metrics .is-blocked,
.agentic-run-results__metrics .is-blocked {
    color: #c4a7ff;
}

/* Enterprise identity, MFA, recovery, and account-security workspace. */
.login-form--enterprise {
    gap: 0.72rem;
}

.enterprise-auth-card {
    display: grid;
    gap: 0.8rem;
    padding: clamp(0.9rem, 2vw, 1.15rem);
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.enterprise-auth-card__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.enterprise-auth-card__head h2 {
    margin: 0.1rem 0 0;
    font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.enterprise-auth-card__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
    border-radius: 0.8rem;
    color: #fff;
    background: linear-gradient(145deg, #2563eb, #7c3aed);
    font-weight: 750;
}

.enterprise-auth-steps {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.enterprise-auth-steps li {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem;
    padding: 0.62rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}

.enterprise-auth-steps li > span {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    font-size: 0.76rem;
    font-weight: 800;
}

.enterprise-auth-steps li div {
    min-width: 0;
    display: grid;
    gap: 0.24rem;
}

.enterprise-auth-steps small,
.enterprise-auth-note {
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.enterprise-auth-steps code {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--accent);
    font-size: 0.82rem;
    letter-spacing: 0.11em;
}

.enterprise-auth-enrollment {
    display: grid;
    grid-template-columns: minmax(13rem, 0.78fr) minmax(0, 1.35fr);
    align-items: stretch;
    gap: 0.75rem;
}

.enterprise-auth-existing-account {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.68rem 0.75rem;
    border: 1px solid color-mix(in srgb, #22c55e 38%, var(--border));
    border-radius: 0.8rem;
    background: color-mix(in srgb, #22c55e 8%, var(--surface-strong));
}

.enterprise-auth-existing-account__icon {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 1.75rem;
    border-radius: 50%;
    color: #dcfce7;
    background: #15803d;
    font-size: 0.78rem;
    font-weight: 900;
}

.enterprise-auth-existing-account div {
    display: grid;
    gap: 0.16rem;
}

.enterprise-auth-existing-account strong {
    color: var(--text);
    font-size: 0.82rem;
}

.enterprise-auth-existing-account span:last-child {
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.4;
}

.enterprise-auth-qr-panel {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
    border-radius: 0.9rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 8%, var(--surface-strong)), var(--surface-strong));
}

.enterprise-auth-qr-frame {
    position: relative;
    width: min(100%, 14rem);
    aspect-ratio: 1;
    padding: 0.55rem;
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.2);
}

.enterprise-auth-qr-frame img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.25rem;
    image-rendering: pixelated;
}

.enterprise-auth-qr-corners {
    position: absolute;
    inset: 0.3rem;
    pointer-events: none;
    border: 2px solid transparent;
    border-top-color: #60a5fa;
    border-bottom-color: #8b5cf6;
    border-radius: 0.65rem;
}

.enterprise-auth-scan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
}

.enterprise-auth-qr-unavailable {
    color: var(--warning);
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

.enterprise-auth-steps--scan li {
    height: 100%;
}

.enterprise-auth-manual-key {
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--surface-strong) 72%, transparent);
}

.enterprise-auth-manual-key summary {
    padding: 0.68rem 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 750;
}

.enterprise-auth-manual-key__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding: 0 0.78rem 0.72rem;
}

.enterprise-auth-manual-key code {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: var(--accent);
    font-size: 0.78rem;
    letter-spacing: 0.1em;
}

@media (max-width: 720px) {
    .enterprise-auth-enrollment {
        grid-template-columns: 1fr;
    }

    .enterprise-auth-qr-frame {
        width: min(100%, 13rem);
    }
}

.enterprise-code-shell input {
    text-align: center;
    font-size: 1.18rem !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.34em;
}

.enterprise-auth-actions,
.login-security-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.enterprise-auth-actions .primary-button {
    flex: 1 1 12rem;
}

.enterprise-auth-actions .enterprise-auth-switch-account {
    flex: 0 1 auto;
    white-space: nowrap;
}

.login-security-links {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.login-security-links a,
.text-button {
    color: var(--accent);
}

.text-button {
    border: 0;
    padding: 0.25rem 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.account-security-body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 32rem),
        var(--background);
}

.account-security-shell {
    width: min(70rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(1rem, 4vw, 3rem) 0;
}

.account-security-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.account-security-header h1 {
    margin: 0.18rem 0;
    font-size: clamp(1.55rem, 4vw, 2.35rem);
}

.account-security-header p {
    margin: 0;
    color: var(--text-muted);
}

.account-security-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.75fr);
    gap: 1rem;
}

.account-security-card {
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

.account-security-form {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.account-security-form input {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    color: var(--text);
    background: var(--surface-strong);
}

.account-security-card--summary {
    display: grid;
    align-content: start;
    gap: 0.6rem;
}

.account-security-card--summary > div {
    display: grid;
    gap: 0.18rem;
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
}

.account-security-card--summary span,
.account-security-card--summary p {
    color: var(--text-muted);
    font-size: 0.78rem;
}

@media (max-width: 720px) {
    .account-security-grid {
        grid-template-columns: 1fr;
    }

    .account-security-header {
        align-items: stretch;
        flex-direction: column;
    }

    .enterprise-auth-actions > * {
        width: 100%;
    }
}

/* Tenant-scoped Agentic target table. */
.agentic-device-picker-window .popup-window__body {
    overflow: auto;
}

.agentic-device-picker .agentic-target-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.agentic-target-cascade {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--surface-muted) 88%, transparent);
}

.agentic-target-cascade > label > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.agentic-target-cascade > label > span svg {
    width: 0.9rem;
    height: 0.9rem;
    color: var(--brand);
}

.agentic-device-picker .agentic-target-alert {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--border));
    border-radius: 0.75rem;
    color: var(--text);
    background: color-mix(in srgb, var(--danger) 10%, var(--surface));
}

.agentic-target-alert__icon {
    width: 2rem;
    min-width: 2rem;
    max-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    max-height: 2rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
    border-radius: 0.6rem;
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, var(--surface));
}

.agentic-device-picker .agentic-target-alert__icon > svg {
    width: 1rem !important;
    min-width: 1rem !important;
    max-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    max-height: 1rem !important;
}

.agentic-target-alert__copy {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.agentic-target-alert__copy strong,
.agentic-target-alert__copy small {
    min-width: 0;
    overflow-wrap: anywhere;
}

.agentic-target-alert__copy strong {
    font-size: 0.78rem;
}

.agentic-target-alert__copy small {
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.agentic-device-picker .agentic-target-alert > .toolbar-button,
.agentic-device-picker .agentic-target-alert > .toolbar-button > svg {
    flex: 0 0 auto;
}

.agentic-device-picker .agentic-target-alert > .toolbar-button > svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
}

.agentic-target-table-shell {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.agentic-target-table-toolbar {
    min-height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-muted);
}

.agentic-target-search {
    width: min(100%, 48rem);
    flex: 1 1 20rem;
    min-width: 12rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.agentic-target-search > svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--brand);
}

.agentic-target-search input {
    width: 100%;
}

.agentic-target-selected-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
}

.agentic-target-selected-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--brand);
}

.agentic-target-selected-toggle__count {
    min-width: 1.35rem;
    padding: 0.08rem 0.28rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 12%, var(--surface));
    color: var(--brand);
    font-size: 0.78em;
    text-align: center;
}

.agentic-target-selected-toggle.is-active {
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--surface));
    color: var(--brand);
}

.agentic-target-selected-toggle:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.agentic-target-selected-toggle:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.agentic-target-table-wrap {
    max-height: min(55vh, 38rem);
    overflow: auto;
}

.agentic-target-table {
    min-width: 78rem;
}

.agentic-target-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface);
}

.agentic-target-table th,
.agentic-target-table td {
    vertical-align: middle;
}

.agentic-target-table tbody tr {
    cursor: default;
    transition: background 140ms ease, box-shadow 140ms ease;
}

.agentic-target-table tbody tr:hover,
.agentic-target-table tbody tr:focus-within {
    background: color-mix(in srgb, var(--brand) 8%, var(--surface));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--brand) 78%, white 8%);
}

.agentic-target-table tbody tr.is-selected {
    background: color-mix(in srgb, var(--success) 10%, var(--surface));
    box-shadow: inset 3px 0 0 var(--success);
}

.agentic-target-device,
.agentic-target-customer,
.agentic-target-dc,
.agentic-vendor-badge {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.agentic-target-device > span:last-child {
    min-width: 0;
}

.agentic-target-device strong,
.agentic-target-device small {
    display: block;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentic-target-device small {
    margin-top: 0.15rem;
    color: var(--muted);
}

.agentic-target-device small svg {
    width: 0.75rem;
    height: 0.75rem;
    vertical-align: -0.12rem;
    color: var(--warning);
}

.agentic-target-device__icon {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    flex: 0 0 2rem;
    border: 1px solid color-mix(in srgb, var(--brand) 36%, var(--border));
    border-radius: 0.62rem;
    color: color-mix(in srgb, var(--brand) 82%, white 12%);
    background: color-mix(in srgb, var(--brand) 15%, var(--surface));
}

.agentic-target-device__icon svg,
.agentic-target-customer svg,
.agentic-vendor-badge svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.agentic-target-customer svg {
    color: #60a5fa;
}

.agentic-vendor-badge svg {
    color: #a78bfa;
}

.agentic-target-dc .country-flag-icon {
    width: 1.35rem;
    min-width: 1.35rem;
    height: 0.95rem;
    margin: 0;
}

.agentic-target-table .automation-ios-badge {
    min-height: 2rem;
    white-space: nowrap;
}

.agentic-device-picker__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.agentic-device-picker__footer .table-pagination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: max-content;
    white-space: nowrap;
}

.agentic-device-picker__footer .table-pagination > .icon-button {
    display: inline-grid;
    flex: 0 0 auto;
}

.agentic-target-pagination > .icon-button {
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    place-items: center;
}

.agentic-target-pagination > .icon-button > svg {
    width: 0.92rem;
    height: 0.92rem;
    display: block;
}

.agentic-target-pagination__double {
    width: 1.18rem;
    height: 0.92rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.agentic-target-pagination__double svg {
    width: 0.78rem;
    min-width: 0.78rem;
    height: 0.78rem;
    display: block;
}

.agentic-target-pagination__double svg + svg {
    margin-inline-start: -0.34rem;
}

.agentic-target-pagination__status {
    min-width: 6.6rem;
    color: var(--text);
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

.agentic-target-table tbody tr[data-agentic-device-history] {
    cursor: pointer;
}

.agentic-target-table tbody tr[data-agentic-device-history]:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand) 70%, transparent);
    outline-offset: -2px;
}

/* Stronger semantic topbar icons for dark mode. */
html[data-theme="dark"] .topbar .topbar-utility-button--circle {
    border-color: color-mix(in srgb, currentColor 36%, #334155);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 5px 14px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .topbar .topbar-utility-button--circle .topbar-utility-button__icon {
    width: 1.48rem;
    height: 1.48rem;
    border: 1px solid color-mix(in srgb, currentColor 62%, transparent);
    filter: saturate(1.45) brightness(1.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 9px color-mix(in srgb, currentColor 26%, transparent);
}

html[data-theme="dark"] .topbar .topbar-utility-button--circle .topbar-utility-button__icon svg {
    width: 0.94rem;
    height: 0.94rem;
    stroke-width: 2.35;
    filter: drop-shadow(0 0 3px currentColor);
}

html[data-theme="dark"] .topbar .topbar-utility-button--circle[data-feature="assigned"] { color: #78c7ff; border-color: rgba(120, 199, 255, 0.52); background: linear-gradient(180deg, rgba(27, 78, 126, 0.62), rgba(14, 35, 63, 0.96)); }
html[data-theme="dark"] .topbar .topbar-utility-button--circle[data-feature="help"] { color: #c2a7ff; border-color: rgba(194, 167, 255, 0.52); background: linear-gradient(180deg, rgba(80, 56, 145, 0.6), rgba(34, 25, 66, 0.96)); }
html[data-theme="dark"] .topbar .topbar-utility-button--circle[data-feature="alerts"] { color: #ffc45f; border-color: rgba(255, 196, 95, 0.55); background: linear-gradient(180deg, rgba(118, 74, 18, 0.62), rgba(57, 36, 14, 0.96)); }
html[data-theme="dark"] .topbar .topbar-utility-button--circle[data-feature="profile"] { color: #62e7ad; border-color: rgba(98, 231, 173, 0.5); background: linear-gradient(180deg, rgba(24, 104, 75, 0.62), rgba(13, 52, 39, 0.96)); }

html[data-theme="dark"] .topbar .topbar-utility-button--circle[data-feature="assigned"] .topbar-utility-button__icon { color: #8fd2ff; background: rgba(49, 145, 229, 0.38); }
html[data-theme="dark"] .topbar .topbar-utility-button--circle[data-feature="help"] .topbar-utility-button__icon { color: #cbb4ff; background: rgba(139, 92, 246, 0.4); }
html[data-theme="dark"] .topbar .topbar-utility-button--circle[data-feature="alerts"] .topbar-utility-button__icon { color: #ffcc70; background: rgba(234, 147, 25, 0.4); }
html[data-theme="dark"] .topbar .topbar-utility-button--circle[data-feature="profile"] .topbar-utility-button__icon { color: #71eeb8; background: rgba(30, 181, 122, 0.38); }

html[data-theme="dark"] .topbar .topbar-utility-button--circle .topbar-utility-button__badge {
    border-color: #0b1220;
    color: #f8fafc;
    background: #334155;
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.42), 0 4px 12px rgba(0, 0, 0, 0.45);
}

html[data-theme="dark"] .topbar .topbar-utility-button--circle .topbar-utility-button__badge--danger { background: #c2414b; }
html[data-theme="dark"] .topbar .topbar-utility-button--circle .topbar-utility-button__badge--warning { color: #111827; background: #f6b94f; }
html[data-theme="dark"] .topbar .topbar-utility-button--circle .topbar-utility-button__badge--brand { background: #397ad1; }
html[data-theme="dark"] .topbar .topbar-utility-button--circle .topbar-utility-button__badge--profile { background: #21875d; }

@media (max-width: 900px) {
    .agentic-device-picker .agentic-target-tabs {
        grid-template-columns: 1fr;
    }
    .agentic-target-table-toolbar,
    .agentic-device-picker__footer {
        align-items: stretch;
        flex-direction: column;
    }
    .agentic-device-picker__footer .table-pagination {
        align-self: center;
    }
    .agentic-device-picker__footer .toolbar-actions {
        justify-content: stretch !important;
    }
    .agentic-device-picker .agentic-target-alert {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .agentic-device-picker .agentic-target-alert > .toolbar-button {
        width: 100%;
        grid-column: 1 / -1;
        justify-content: center;
    }
}

/* Automation frames: final override so native bottom-right resizing wins over
   the shared content-card overflow rule and the inner GUI reflows safely. */
.automation-center__selection-card.automation-center__selection-card--resizable {
    position: relative;
    min-width: min(24rem, 100%);
    min-height: 22rem;
    max-width: calc(100vw - 4rem);
    max-height: 82vh;
    overflow: auto;
    resize: both;
    container-type: inline-size;
    scrollbar-gutter: stable;
}

@media (max-width: 52rem) {
    .automation-center__selection-card.automation-center__selection-card--resizable {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        resize: vertical;
    }
}

/* Shared enterprise tables keep their column context while the body scrolls. */
:where(.table-wrap, .device-command-table-wrap, .compact-table-shell, .automation-center__table-wrap) table thead th {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--surface-muted);
    box-shadow: inset 0 -1px 0 var(--border-strong);
}

/* Keep the hidden file control out of the Agentic composer grid. */
.app-shell[data-view-kind="agentic_network"] .agentic-composer__input {
    grid-template-columns: 2.5rem minmax(12rem, 1fr) 2.5rem 2.5rem;
    width: min(100%, 72rem);
}

.app-shell[data-view-kind="agentic_network"] #agenticAttachmentInput {
    display: none !important;
}

.app-shell[data-view-kind="agentic_network"] .agentic-upload-button { grid-column: 1; }
.app-shell[data-view-kind="agentic_network"] #agenticPromptInput { grid-column: 2; width: 100%; min-width: 0; }
.app-shell[data-view-kind="agentic_network"] .agentic-send-button,
.app-shell[data-view-kind="agentic_network"] .agentic-inline-stop { grid-column: 3; }
.app-shell[data-view-kind="agentic_network"] .agentic-voice-button { grid-column: 4; }

.automation-center__device-row {
    cursor: pointer;
}

.automation-center__device-row:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.automation-center__device-actions,
.automation-center__command-groups {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.automation-center__device-actions .icon-button {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.42rem;
    color: var(--brand);
}

.automation-center__device-actions .icon-button::before {
    content: none !important;
    display: none !important;
}

.automation-center__device-actions .icon-button > svg {
    display: block;
    width: 1rem !important;
    min-width: 1rem !important;
    max-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    max-height: 1rem !important;
}

.automation-center__device-action {
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.36rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--action-color) 62%, var(--panel-border));
    border-radius: 999px;
    color: var(--action-color);
    background: color-mix(in srgb, var(--action-color) 10%, var(--surface));
    font: inherit;
    font-size: 0.68rem;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.automation-center__device-action::before {
    content: none !important;
    display: none !important;
}

.automation-center__device-action:hover,
.automation-center__device-action:focus-visible {
    background: color-mix(in srgb, var(--action-color) 18%, var(--surface));
    border-color: var(--action-color);
    transform: translateY(-1px);
}

.automation-center__device-action > span,
.automation-center__device-action svg {
    width: 0.9rem;
    height: 0.9rem;
}

.automation-center__device-action--putty { --action-color: #67c1f5; }
.automation-center__device-action--rdp { --action-color: #aa8cf5; }
.automation-center__device-action--https { --action-color: #79cba8; }

.automation-ios-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-width: max-content;
    color: var(--text);
}

.automation-ios-badge > span {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--ios-color) 62%, var(--panel-border));
    border-radius: 0.55rem;
    color: var(--ios-color);
    background: color-mix(in srgb, var(--ios-color) 13%, var(--surface));
}

.automation-ios-badge svg {
    width: 0.92rem;
    height: 0.92rem;
}

.automation-ios-badge strong {
    font-size: 0.72rem;
    white-space: nowrap;
}

.automation-command-description {
    min-width: 15rem;
    max-width: 26rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.automation-center__command-groups {
    padding: 0 1rem 0.65rem;
}

.automation-center__confirmation-lists,
.automation-device-history__charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.automation-center__confirmation-devices {
    grid-column: 1 / -1;
    min-width: 0;
}

.automation-center__confirmation-lists {
    grid-template-columns: minmax(0, 1fr);
}

.automation-center__confirmation-table {
    max-height: 14rem;
    margin-top: 0.55rem;
    overflow: auto;
    scrollbar-gutter: stable;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
}

.automation-center__confirmation-table th,
.automation-center__confirmation-table td {
    white-space: nowrap;
}

.automation-center__confirmation-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--panel-strong);
}

.automation-center__confirmation-table tbody tr:hover {
    background: color-mix(in srgb, var(--brand) 7%, var(--surface));
}

.automation-center__confirmation-command-table .automation-command-description {
    min-width: 13rem;
    max-width: 24rem;
    white-space: normal;
}

.automation-center__confirmation-action-head,
.automation-center__confirmation-action {
    width: 4rem;
    text-align: center;
}

.automation-center__confirmation-remove {
    width: 2rem !important;
    height: 2rem !important;
    margin: 0 auto;
    padding: 0.42rem;
    border-color: color-mix(in srgb, var(--danger) 40%, var(--panel-border));
    color: var(--danger);
    border-radius: 0.62rem;
}

.automation-center__confirmation-remove::before {
    content: none !important;
    display: none !important;
}

.automation-center__confirmation-remove > svg {
    display: block;
    width: 1rem !important;
    height: 1rem !important;
}

.automation-center__confirmation-list-head,
.automation-device-history__toolbar,
.automation-history-command-list > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.automation-center__review-list {
    max-height: 18rem;
    display: grid;
    gap: 0.45rem;
    margin-top: 0.55rem;
    overflow: auto;
}

.automation-center__review-list article {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface-muted);
}

.automation-center__review-list article div,
.automation-center__review-list code {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.automation-center__review-list small {
    display: block;
    margin-top: 0.2rem;
    color: var(--muted);
}

.automation-device-history {
    display: grid;
    gap: 0.72rem;
}

.popup-window--wide.automation-device-history-window .popup-window__dialog {
    width: min(82rem, calc(100vw - 1.5rem));
}

.automation-device-history-window .popup-window__body {
    padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(9rem + env(safe-area-inset-bottom, 0px));
}

.automation-device-history__toolbar {
    align-items: stretch;
}

.automation-device-history__toolbar .toolbar-search {
    flex: 1 1 24rem;
}

.automation-device-history-window .popup-window__head-main {
    flex: 1 1 20rem;
}

.automation-device-history-window .popup-window__head-actions {
    flex: 1 1 36rem;
}

.automation-device-history__header-meta {
    width: 100%;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0.55rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.automation-device-history__header-chip {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 3.15rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface-muted);
}

.automation-device-history__header-chip > span:last-child {
    min-width: max-content;
}

.automation-device-history__header-chip small {
    display: block;
    margin-bottom: 0.12rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.automation-device-history__header-chip strong,
.automation-device-history__header-chip code {
    color: var(--text);
    white-space: nowrap;
}

.automation-device-history__header-chip-icon,
.automation-device-history__header-flag {
    width: 2rem;
    height: 2rem;
    display: grid;
    flex: 0 0 2rem;
    place-items: center;
    border-radius: 0.55rem;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 14%, var(--surface));
}

.automation-device-history__header-chip-icon svg,
.automation-device-history__header-flag > svg {
    width: 1rem;
    height: 1rem;
}

.automation-device-history__header-ios {
    min-width: 8.8rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
}

.automation-device-history__header-meta > .automation-device-history__header-chip:first-child {
    min-width: 10.25rem;
}

.automation-device-history__header-location {
    min-width: 10rem;
}

.automation-device-history__header-health,
.automation-device-history__header-severity {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    padding: 0.38rem 0.5rem;
}

.automation-device-history__header-health > span,
.automation-device-history__header-severity > span {
    display: grid;
    align-content: center;
}

.automation-device-history__header-health .automation-device-health {
    min-width: 6.35rem;
    min-height: 1.7rem;
    padding: 0.12rem 0.18rem;
    border: 0;
    background: transparent;
}

.automation-device-history__header-health .automation-device-health small {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.6rem !important;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
}

.automation-device-history__header-severity .automation-device-severity {
    min-height: 1.7rem;
    padding: 0.25rem 0.48rem;
    white-space: nowrap;
}

.automation-device-history__header-location .country-flag-icon {
    width: 1.55rem;
    min-width: 1.55rem;
    height: 1.05rem;
    margin: 0;
}

.automation-device-history__metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem;
}

.automation-device-history__metrics article,
.automation-device-history__charts > article,
.automation-device-history__commands {
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface);
}

.automation-device-history__metrics small,
.automation-device-history__metrics strong {
    display: block;
}

.automation-device-history__metrics small {
    margin-bottom: 0.3rem;
    color: var(--muted);
}

.automation-history-chart {
    width: 100%;
    height: 7.25rem;
    min-height: 0;
    display: block;
}

.automation-history-chart line {
    stroke: var(--border-strong);
}

.automation-history-chart__grid {
    opacity: 0.45;
    stroke-dasharray: 4 5;
}

.automation-history-chart text {
    fill: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 0.7rem;
}

.automation-history-chart__value {
    font-weight: 700;
}

.automation-history-chart polyline {
    fill: none;
    stroke: var(--brand);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.automation-history-chart circle {
    fill: var(--success);
    stroke: var(--surface);
    stroke-width: 3;
}

.automation-history-chart--agentic polyline,
.automation-history-series--agentic polyline {
    stroke: #a78bfa;
    stroke-dasharray: 7 4;
}

.automation-history-chart--agentic circle,
.automation-history-series--agentic circle {
    fill: #c4b5fd;
}

.automation-history-line-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0.5rem 0; color: var(--text-muted); font-size: 0.75rem; }
.automation-history-line-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.automation-history-line-legend i { width: 1.25rem; border-top: 3px solid var(--brand); }
.automation-history-line-legend .is-agentic i { border-top: 3px dashed #a78bfa; }

.automation-device-history__charts--agentic > article {
    border-color: color-mix(in srgb, #a78bfa 38%, var(--border));
    background: color-mix(in srgb, #a78bfa 5%, var(--surface));
}

.automation-history-donut {
    position: relative;
    width: 9rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: 1rem auto;
    border-radius: 50%;
    background: conic-gradient(var(--success) 0 var(--history-pass), var(--danger) var(--history-pass) 100%);
}

.automation-history-donut::before {
    content: "";
    width: 65%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--surface);
}

.automation-history-donut span {
    position: absolute;
    z-index: 1;
    text-align: center;
}

.automation-history-donut strong,
.automation-history-donut small {
    display: block;
}

.automation-command-severity {
    white-space: nowrap;
}

.automation-command-severity svg {
    width: 1rem !important;
    height: 1rem !important;
    flex: 0 0 1rem;
}

.automation-history-legend,
.automation-history-sources {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem 0.9rem;
}

.automation-history-legend i {
    width: 0.7rem;
    height: 0.7rem;
    display: inline-block;
    margin-right: 0.3rem;
    border-radius: 50%;
}

.automation-history-legend .is-pass { background: var(--success); }
.automation-history-legend .is-fail { background: var(--danger); }

.automation-device-history__command-table {
    max-height: 14rem;
    overflow: auto;
    scrollbar-gutter: stable;
}

.automation-device-history__command-table table {
    min-width: 42rem;
    margin: 0;
}

.automation-device-history__command-table th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--panel-strong);
}

.automation-device-history__command-table th:not(:first-child),
.automation-device-history__command-table td:not(:first-child) {
    width: 8rem;
    text-align: center;
}

.automation-device-history__command-table code {
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
}

.automation-device-history__agentic-count {
    color: #a78bfa;
    font-weight: 800;
}

.automation-device-history__table {
    max-height: 22rem;
    margin-bottom: 0.5rem;
}

.automation-device-history__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--surface-muted) 86%, transparent);
}

.automation-device-history__range {
    min-width: 0;
    display: flex;
    flex: 1 1 42rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.automation-device-history__range-buttons,
.automation-device-history__toolbar > .toolbar-actions {
    min-width: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.automation-device-history__range-buttons .toolbar-button,
.automation-device-history__toolbar > .toolbar-actions .toolbar-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.automation-device-history__range-buttons .toolbar-button.is-active {
    border-color: color-mix(in srgb, var(--success) 64%, var(--border));
    color: var(--success);
    background: color-mix(in srgb, var(--success) 13%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 20%, transparent);
}

.automation-device-history__custom-range {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
}

.automation-device-history__custom-range.hidden {
    display: none;
}

.automation-device-history__custom-range label {
    display: grid;
    gap: 0.2rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.automation-device-history__custom-range input {
    min-height: 2.25rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    color: var(--text);
    background: var(--surface);
    color-scheme: dark;
}

.automation-device-history__flash-cards {
    display: grid;
    grid-auto-flow: initial;
    grid-template-columns: repeat(6, minmax(9rem, 1fr));
    gap: 0.65rem;
    overflow: visible;
}

.automation-device-history__flash-cards .metric-card {
    min-width: 0;
    min-height: 6.4rem;
    padding: 0.65rem;
    border-radius: 0.8rem;
}

.automation-device-history__flash-cards .metric-card__icon,
.automation-device-history__flash-cards .metric-card__icon svg {
    width: 2rem;
    height: 2rem;
}

.automation-device-history__flash-cards .metric-card__meta {
    margin-top: auto;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.automation-device-history__context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.automation-device-history__context > span,
.automation-history-sources > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    background: var(--surface-muted);
}

.automation-device-history__context svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--brand);
}

.automation-device-history__charts > article,
.automation-device-history__commands,
.automation-device-history__runs,
.automation-device-history__activity {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.82rem;
    background: var(--surface);
}

.automation-device-history__charts--reports {
    grid-template-columns: minmax(24rem, 1.45fr) repeat(2, minmax(14rem, 0.78fr));
    gap: 0.65rem;
}

.automation-device-history__charts--reports > article {
    min-height: 13rem;
    padding: 0.62rem;
}

.automation-device-history__charts--reports h3 {
    margin: 0.18rem 0 0.28rem;
    font-size: 0.96rem;
}

.automation-device-history__charts--reports .muted-copy {
    margin: 0 0 0.28rem;
    font-size: 0.7rem;
}

.automation-device-history__time-series {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
}

.automation-device-history__activity-tabs {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.7rem 0 0.55rem;
    padding: 0.28rem;
    border: 1px solid var(--border);
    border-radius: 0.72rem;
    background: var(--surface-muted);
    overflow-x: auto;
    scrollbar-width: thin;
}

.automation-device-history__activity-tabs > button {
    flex: 0 0 auto;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 2.25rem;
    padding: 0.38rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
}

.automation-device-history__activity-tabs > button.is-active {
    color: var(--text-strong);
    border-color: var(--border-strong);
    background: var(--surface);
    box-shadow: 0 0.25rem 0.75rem color-mix(in srgb, #020617 18%, transparent);
}

.automation-device-history__activity-tabs svg {
    width: 0.92rem;
    height: 0.92rem;
    color: var(--brand);
}

.automation-device-history__activity-tabs strong,
.automation-device-history__activity-tabs em {
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-style: normal;
    background: color-mix(in srgb, var(--brand) 13%, transparent);
}

.automation-device-history__activity-tabs em {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 13%, transparent);
}

.automation-device-history__activity-pane[hidden] {
    display: none;
}

.automation-device-history__activity-subhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.automation-device-history__activity-subhead h4 {
    margin: 0;
    color: var(--text-strong);
    font-size: 0.92rem;
}

.automation-device-history__activity-subhead span {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.automation-device-history__activity .compact-table-shell {
    margin-top: 0.5rem;
}

.automation-device-history__activity-section--commands .table-wrap {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
}

.automation-device-history__activity-section--runs .table-wrap {
    max-height: none;
    overflow-x: auto;
    overflow-y: visible;
}

.automation-device-history__activity-section--commands .automation-device-history__command-table,
.automation-device-history__activity-section--runs .automation-device-history__table {
    max-height: none;
    overflow: visible;
    scrollbar-gutter: auto;
}

.automation-device-history__activity-section--commands tr.is-blocked > td {
    background: color-mix(in srgb, var(--warning) 11%, var(--surface));
}

.automation-device-history__activity-section--commands tr.is-blocked > td:first-child {
    box-shadow: inset 3px 0 0 var(--warning);
}

.automation-device-history__activity-section--runs tr.is-running > td {
    background: color-mix(in srgb, #2f81ff 9%, var(--surface));
}

.automation-device-history__activity-section--runs tr.is-running .automation-result-status {
    animation: automation-history-running-pulse 1.7s ease-in-out infinite;
}

.automation-device-history__activity-section--runs tr.is-blocked > td {
    background: color-mix(in srgb, var(--warning) 11%, var(--surface));
}

.automation-device-history__activity-section--runs tr.is-blocked > td:first-child {
    box-shadow: inset 3px 0 0 var(--warning);
}

.automation-device-history__outcome .donut-chart {
    grid-area: donut;
    width: min(100%, 7.35rem);
    margin: 0.2rem auto;
}

.automation-device-history__outcome .donut-chart__hint {
    display: none;
}

.automation-device-history__outcome .automation-history-legend {
    grid-area: legend;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
    align-content: center;
    gap: 0.3rem;
}

.automation-device-history__outcome .legend-row {
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 0.3rem 0.42rem;
    border-radius: 0.55rem;
    background: var(--surface-muted);
}

.automation-device-history__outcome .legend-row strong {
    margin-left: auto;
}

.automation-device-history__outcome {
    display: grid;
    grid-template-columns: minmax(6.8rem, 0.72fr) minmax(8rem, 1fr);
    grid-template-areas:
        "head head"
        "donut legend"
        "sources sources";
    align-items: center;
    column-gap: 0.55rem;
}

.automation-device-history__outcome > div:first-child {
    grid-area: head;
}

.automation-device-history__outcome > .empty-state {
    grid-column: 1 / -1;
    min-height: 6rem;
}

.automation-device-history__outcome .automation-history-sources {
    grid-area: sources;
}

.automation-device-context-tab {
    display: grid;
    gap: 0.7rem;
    padding-top: 0.2rem;
}

.automation-device-context-tab__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--border));
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--brand) 7%, var(--surface-muted));
}

.automation-device-context-tab__head :is(p, h3) {
    margin: 0;
}

.automation-device-context-tab__head h3 {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    margin: 0.16rem 0 0.24rem;
}

.automation-device-context-tab__head h3 svg {
    width: 1rem;
    height: 1rem;
    color: var(--brand);
}

.automation-device-context-tab__head > div:last-child {
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
}

.automation-device-context-tab__role {
    display: grid;
    gap: 0.18rem;
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 750;
    text-transform: uppercase;
}

.automation-device-context-tab__metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}

.automation-device-context-tab__metrics article {
    min-width: 0;
    display: grid;
    gap: 0.24rem;
    padding: 0.58rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    background: var(--surface-muted);
}

.automation-device-context-tab__metrics small {
    color: var(--text-muted);
    font-size: 0.65rem;
}

.automation-device-context-tab__metrics strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.automation-device-context-tab__table {
    max-height: 24rem;
    border: 1px solid var(--border);
    border-radius: 0.72rem;
    overflow: auto;
}

.automation-device-context-tab__table table {
    min-width: 70rem;
}

.automation-device-context-tab__table td > small {
    display: block;
    margin-top: 0.16rem;
    color: var(--text-muted);
}

.automation-device-context-tab__summary {
    min-width: 18rem;
    white-space: normal;
}

.automation-device-context-tab__version {
    border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--border));
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--surface-muted);
}

.automation-device-context-tab__version > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem;
    border-bottom: 1px solid var(--border);
}

.automation-device-context-tab__version :is(p, h4) {
    margin: 0;
}

.automation-device-context-tab__version h4 {
    margin: 0.16rem 0 0.22rem;
}

.automation-device-context-tab__version pre {
    max-height: 28rem;
    margin: 0;
    padding: 0.8rem;
    overflow: auto;
    color: var(--text);
    background: color-mix(in srgb, #020617 72%, var(--surface));
    font: 0.72rem/1.55 var(--font-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.automation-device-history__commands .compact-table-shell,
.automation-device-history__runs .compact-table-shell {
    margin-top: 0.75rem;
}

.automation-device-history__commands .table-wrap {
    max-height: 18rem;
}

.automation-device-history__runs .table-wrap {
    max-height: 28rem;
}

.automation-device-history__runs tr.is-running > td {
    background: color-mix(in srgb, #2f81ff 9%, var(--surface));
}

.automation-device-history__runs tr.is-running .automation-result-status {
    animation: automation-history-running-pulse 1.7s ease-in-out infinite;
}

.automation-device-history__runs tr.is-blocked > td {
    background: color-mix(in srgb, var(--warning) 11%, var(--surface));
}

.automation-device-history__runs tr.is-blocked > td:first-child {
    box-shadow: inset 3px 0 0 var(--warning);
}

@keyframes automation-history-running-pulse {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .automation-device-history__runs tr.is-running .automation-result-status {
        animation: none;
    }
}

/* Keep Send, Stop, and Voice distinct while a diagnostic runs. */
html .app-shell[data-view-kind=agentic_network] .agentic-composer__input.is-running {
    grid-template-columns: auto minmax(10rem, 1fr) repeat(3, 2.15rem) !important;
}
html .app-shell[data-view-kind=agentic_network] .agentic-composer__input.is-running .agentic-send-button { grid-column: 3; }
html .app-shell[data-view-kind=agentic_network] .agentic-composer__input.is-running .agentic-inline-stop { grid-column: 4; }
html .app-shell[data-view-kind=agentic_network] .agentic-composer__input.is-running .agentic-voice-button { grid-column: 5; }

@media (max-width: 48rem) {
    html .app-shell[data-view-kind=agentic_network] .agentic-composer__input.is-running {
        grid-template-columns: minmax(0, 1fr) repeat(3, 2.15rem) !important;
        grid-template-areas: 'tools tools tools tools' 'prompt action stop voice';
    }
    html .app-shell[data-view-kind=agentic_network] .agentic-composer__input.is-running .agentic-send-button { grid-area: action; }
    html .app-shell[data-view-kind=agentic_network] .agentic-composer__input.is-running .agentic-inline-stop { grid-area: stop; }
    html .app-shell[data-view-kind=agentic_network] .agentic-composer__input.is-running .agentic-voice-button { grid-area: voice; }
}

@media (max-width: 900px) {
    .automation-center__confirmation-lists,
    .automation-device-history__charts { grid-template-columns: minmax(0, 1fr); }
    .automation-device-history__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .automation-device-history__toolbar { align-items: stretch; flex-direction: column; }
    .automation-device-history-window .popup-window__head-actions { flex-basis: 100%; }
    .automation-device-history__header-meta { justify-content: flex-start; }
    .automation-device-history__flash-cards { grid-template-columns: repeat(3, minmax(8.5rem, 1fr)); }
    .automation-device-history__range,
    .automation-device-history__toolbar > .toolbar-actions { width: 100%; }
    .automation-device-context-tab__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .automation-device-context-tab__head { flex-direction: column; }
    .automation-device-context-tab__head > div:last-child { width: 100%; flex-wrap: wrap; }
}

@media (max-width: 1180px) and (min-width: 901px) {
    .automation-device-history__charts--reports {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .automation-device-history__time-series {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .automation-device-history__header-meta {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .automation-device-history__header-chip {
        width: 100%;
    }

    .automation-device-history__flash-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .automation-device-history__custom-range { width: 100%; flex-wrap: wrap; }
    .automation-device-history__custom-range label { flex: 1 1 8.5rem; }
    .automation-device-history__custom-range input { width: 100%; }
    .automation-device-history__outcome .automation-history-legend { grid-template-columns: minmax(0, 1fr); }
    .automation-device-history__outcome {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "donut" "legend" "sources";
    }
    .automation-device-context-tab__metrics { grid-template-columns: minmax(0, 1fr); }
}

.dc-flag-pill {
    gap: 0.42rem;
    white-space: nowrap;
}

.dc-flag-pill .country-flag-icon {
    width: 1.35rem;
    min-width: 1.35rem;
    height: 0.95rem;
    margin-right: 0;
    vertical-align: middle;
}

.empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-soft);
}

.bar-list,
.mini-list {
    display: grid;
    gap: 0.8rem;
}

.bar-row {
    display: grid;
    gap: 0.35rem;
}

.bar-row__head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-soft);
    font-size: 0.9rem;
}

.bar-row__track {
    overflow: hidden;
    height: 0.75rem;
    border-radius: 999px;
    background: var(--bg-alt);
}

.bar-row__fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

.detail-drawer {
    position: fixed;
    inset: 0;
    display: none;
    background: rgba(4, 13, 23, 0.38);
    z-index: 140;
}

.detail-drawer.open {
    display: block;
}

.detail-drawer__panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(34rem, 100%);
    border-radius: 2rem 0 0 2rem;
    overflow: hidden;
    animation: drawerIn 180ms ease;
}

body:has(.detail-drawer.open) {
    overflow: hidden;
}

.detail-drawer__head {
    position: relative;
    z-index: 2;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--panel-border);
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    backdrop-filter: blur(16px);
}

.detail-drawer__head h3 {
    margin-bottom: 0;
}

#detailDrawerCopy {
    flex: 0 0 auto;
    color: color-mix(in srgb, #7f91ff 88%, var(--text));
}

#detailDrawerCopy > svg {
    display: block !important;
    width: 1.15rem !important;
    min-width: 1.15rem !important;
    height: 1.15rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    fill: none !important;
    stroke: currentColor !important;
}

#detailDrawerCopy:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, #7f91ff 62%, var(--panel-border));
    background: color-mix(in srgb, #7f91ff 12%, var(--panel));
}

#detailDrawerClose {
    flex: 0 0 auto;
    position: sticky;
    top: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-color: color-mix(in srgb, #cf222e 26%, var(--panel-border));
    color: #cf222e;
    background: color-mix(in srgb, #cf222e 7%, var(--panel));
}

.detail-drawer__content {
    min-height: 0;
    padding: 1rem 1.25rem 2rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.detail-drawer[data-detail-mode="jira-issue"] .detail-drawer__panel {
    width: min(64rem, calc(100% - 1rem));
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.detail-item {
    padding: 0.9rem;
    border-radius: 16px;
    background: var(--bg-alt);
    border: 1px solid var(--panel-border);
}

.detail-item__label {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.82rem;
}

.detail-item__value {
    margin: 0.2rem 0 0;
    font-weight: 700;
    word-break: break-word;
}

.mobile-only {
    display: none;
}

@keyframes ciscoBarWave {
    0%,
    100% {
        background-size:
            var(--cisco-bar-width) 0.64rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 2.42rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 0.64rem;
    }

    11.11% {
        background-size:
            var(--cisco-bar-width) 1.4rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 2.42rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 0.64rem;
    }

    22.22% {
        background-size:
            var(--cisco-bar-width) 0.64rem,
            var(--cisco-bar-width) 1.76rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 2.42rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 0.64rem;
    }

    33.33% {
        background-size:
            var(--cisco-bar-width) 0.64rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 2.24rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 2.78rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 0.64rem;
    }

    44.44% {
        background-size:
            var(--cisco-bar-width) 0.64rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 2.72rem,
            var(--cisco-bar-width) 2.42rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 0.64rem;
    }

    55.55% {
        background-size:
            var(--cisco-bar-width) 0.64rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 2.42rem,
            var(--cisco-bar-width) 2.72rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 0.64rem;
    }

    66.66% {
        background-size:
            var(--cisco-bar-width) 0.64rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 2.42rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 2.24rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 0.64rem;
    }

    77.77% {
        background-size:
            var(--cisco-bar-width) 0.64rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 2.42rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1.76rem,
            var(--cisco-bar-width) 0.64rem;
    }

    88.88% {
        background-size:
            var(--cisco-bar-width) 0.64rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 2.42rem,
            var(--cisco-bar-width) 1.96rem,
            var(--cisco-bar-width) 1.48rem,
            var(--cisco-bar-width) 1rem,
            var(--cisco-bar-width) 1.4rem;
    }
}

@keyframes drawerIn {
    from { transform: translateX(1rem); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@media (max-width: 1080px) {
    .dashboard-grid,
    .chart-grid,
    .login-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: fixed;
        inset: 1rem auto 1rem 1rem;
        width: min(18rem, calc(100vw - 2rem));
        z-index: 30;
        transform: translateX(-120%);
        transition: transform 160ms ease;
    }

    .app-shell.mobile-sidebar-open .sidebar {
        transform: translateX(0);
    }

    .workspace {
        padding: 1rem;
    }

    .mobile-only {
        display: grid;
    }

    table {
        min-width: 38rem;
    }
}

@media (max-width: 680px) {
    .login-body {
        padding: 1rem;
    }

    .login-panel,
    .showcase-card,
    .topbar,
    .content-card,
    .chart-card,
    .table-shell {
        padding: 1rem;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }
}

:root {
    --font-sans: var(--gui-font-sans);
    --bg: #edf3fb;
    --bg-alt: #f8fbff;
    --panel: rgba(255, 255, 255, 0.92);
    --panel-strong: #ffffff;
    --panel-border: rgba(15, 40, 79, 0.1);
    --text: #0f2238;
    --text-soft: #5d7188;
    --brand: #0f6db1;
    --brand-strong: #0b4d80;
    --accent: #1aa99d;
    --accent-soft: rgba(26, 169, 157, 0.12);
    --success: #14804e;
    --warning: #b26d16;
    --danger: #ba4545;
    --shadow: 0 24px 64px rgba(11, 36, 70, 0.12);
    --shadow-soft: 0 14px 36px rgba(11, 36, 70, 0.08);
}

html[data-theme="dark"] {
    --bg: #07111b;
    --bg-alt: #0d1a28;
    --panel: rgba(14, 27, 41, 0.92);
    --panel-strong: #112335;
    --panel-border: rgba(150, 186, 214, 0.12);
    --text: #eff6fd;
    --text-soft: #9fb6cb;
    --brand: #52a8e0;
    --brand-strong: #2d6f99;
    --accent: #2fd3c2;
    --accent-soft: rgba(47, 211, 194, 0.15);
    --success: #44c57d;
    --warning: #efb04c;
    --danger: #ff8b8b;
}

.notice-card.info {
    background: rgba(15, 109, 177, 0.1);
    color: var(--brand);
}

.workspace {
    grid-template-rows: auto auto 1fr auto;
}

.workspace-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.8rem;
    margin-top: 0.2rem;
}

.footer-pill {
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: 18px;
    padding: 0.9rem 1rem;
    box-shadow: var(--shadow-soft);
}

.footer-pill__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 0.2rem;
}

.progress-overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(6, 14, 23, 0.42);
    z-index: 60;
}

.progress-overlay__card {
    min-width: 18rem;
    padding: 1.4rem 1.6rem;
    border-radius: 22px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    text-align: center;
}

.progress-overlay__card p {
    margin: 0.8rem 0 0;
}

.progress-overlay__status {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: radial-gradient(circle at 30% 30%, rgba(187, 247, 208, 0.95), rgba(34, 197, 94, 0.92));
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.22);
}

.progress-overlay__status::before {
    content: "";
    width: 1.6rem;
    height: 0.9rem;
    border-left: 4px solid #ffffff;
    border-bottom: 4px solid #ffffff;
    transform: rotate(-45deg) translateY(-0.08rem);
}

.progress-overlay.is-complete .progress-overlay__card {
    border-color: rgba(34, 197, 94, 0.26);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
}

.progress-overlay.is-complete .progress-overlay__status {
    animation: progress-overlay-success 0.7s ease;
}

/* Compact Infrastructure workflow navigation. */
.infra-workflow { display: grid; gap: 1rem; overflow: hidden; }
.infra-workflow__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.infra-workflow__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.infra-workflow__action {
    --workflow-accent: #388bfd;
    position: relative; min-width: 0; min-height: 6.4rem; padding: 0.9rem;
    display: grid; grid-template-columns: 2.65rem minmax(0, 1fr); align-items: center; gap: 0.75rem;
    overflow: hidden; border: 1px solid var(--line); border-radius: 0.9rem; color: var(--text);
    background: linear-gradient(145deg, color-mix(in srgb, var(--workflow-accent) 7%, var(--panel)) 0%, var(--panel) 72%);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06); text-align: left; cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.infra-workflow__action::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--workflow-accent); }
.infra-workflow__action::after { content: ">"; position: absolute; top: 0.55rem; right: 0.7rem; color: color-mix(in srgb, var(--workflow-accent) 72%, var(--muted)); font-weight: 800; }
.infra-workflow__action:hover, .infra-workflow__action:focus-visible { border-color: color-mix(in srgb, var(--workflow-accent) 58%, var(--line)); box-shadow: 0 12px 26px color-mix(in srgb, var(--workflow-accent) 16%, transparent); transform: translateY(-2px); }
.infra-workflow__action--automation { --workflow-accent: #2da44e; }
.infra-workflow__action--circuit { --workflow-accent: #bf8700; }
.infra-workflow__action--history { --workflow-accent: #8250df; }
.infra-workflow__icon { width: 2.65rem; height: 2.65rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--workflow-accent) 35%, transparent); border-radius: 0.75rem; color: var(--workflow-accent); background: color-mix(in srgb, var(--workflow-accent) 12%, var(--panel)); }
.infra-workflow__icon svg { width: 1.25rem; height: 1.25rem; }
.infra-workflow__copy { min-width: 0; display: grid; gap: 0.18rem; }
.infra-workflow__copy small { color: var(--workflow-accent); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.infra-workflow__copy strong { font-size: 0.94rem; line-height: 1.2; }
.infra-workflow__copy > span { color: var(--muted); font-size: 0.76rem; line-height: 1.35; }
.infra-workflow__context { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.infra-circuit-sidebar { scroll-margin-top: 1rem; }
.infra-circuit-sidebar.is-workflow-target { animation: infra-workflow-target 1.8s ease; }
@keyframes infra-workflow-target { 0%, 100% { box-shadow: var(--shadow); } 28% { box-shadow: 0 0 0 3px rgba(191, 135, 0, 0.28), 0 18px 38px rgba(191, 135, 0, 0.16); } }
html[data-theme="dark"] .infra-workflow__action { border-color: #30363d; background: linear-gradient(145deg, color-mix(in srgb, var(--workflow-accent) 10%, #0d1117) 0%, #0d1117 72%); box-shadow: 0 8px 20px rgba(1, 4, 9, 0.28); }
html[data-theme="dark"] .infra-workflow__action:hover, html[data-theme="dark"] .infra-workflow__action:focus-visible { border-color: color-mix(in srgb, var(--workflow-accent) 64%, #30363d); }
@media (max-width: 1180px) { .infra-workflow__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .infra-workflow__head { align-items: stretch; flex-direction: column; } .infra-workflow__grid { grid-template-columns: minmax(0, 1fr); } .infra-workflow__action { min-height: 5.6rem; } }

/* Keep the Infrastructure workflow inside the available content width. */
.infra-workflow { width: 100%; max-width: 100%; overflow: visible; }
.infra-workflow__head > div,
.infra-workflow__copy { min-width: 0; max-width: 100%; }
.infra-workflow__head .muted-copy,
.infra-workflow__copy > span { white-space: normal; overflow-wrap: anywhere; }
.infra-workflow__grid { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); width: 100%; max-width: 100%; }
.infra-workflow__action { width: 100%; max-width: 100%; overflow: visible; }

.mra-live-impact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.mra-live-impact p {
    margin: 0.3rem 0 0;
}

.mra-live-impact__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.mra-live-impact__meta span {
    padding: 0.35rem 0.65rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 750;
    white-space: nowrap;
}

.mra-live-impact-grid {
    margin-bottom: 1rem;
}

.mra-host-impact-card {
    margin-bottom: 1rem;
}

.mra-host-impact-card .compact-table-shell {
    margin-top: 0.35rem;
}

.mra-impact-state {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.mra-impact-state__icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
}

.mra-impact-state__icon svg {
    width: 100%;
    height: 100%;
}

.mra-impact-percent {
    display: grid;
    gap: 0.3rem;
    min-width: 5.5rem;
    font-variant-numeric: tabular-nums;
}

.mra-impact-percent__track {
    width: 100%;
    height: 0.3rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--danger) 13%, var(--panel-border));
}

.mra-impact-percent__track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--warning), var(--danger));
}

.mra-impact-age {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .mra-live-impact {
        align-items: flex-start;
        flex-direction: column;
    }

    .mra-live-impact__meta {
        justify-content: flex-start;
    }
}

/* ServiceNow workspace: compact modules, dashboard-native charts, and readable evidence tables. */
.integration-module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.integration-module-card {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    min-height: 5.25rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border-soft);
    border-radius: 0.9rem;
    color: var(--text-primary);
    background: linear-gradient(145deg, color-mix(in srgb, var(--accent-primary) 8%, var(--surface-raised)), var(--surface-raised));
    text-align: left;
    overflow: hidden;
}

button.integration-module-card {
    cursor: pointer;
}

button.integration-module-card:hover,
button.integration-module-card:focus-visible {
    border-color: color-mix(in srgb, var(--accent-primary) 58%, var(--border-soft));
    transform: translateY(-1px);
}

.integration-module-card__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.65rem;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 17%, var(--surface-raised));
}

.integration-module-card__icon svg,
.integration-module-card__open svg {
    width: 1.1rem;
    height: 1.1rem;
}

.integration-module-card__body {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.integration-module-card__label {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.integration-module-card__value {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.2;
}

.integration-module-card__body small {
    color: var(--text-muted);
    font-size: 0.73rem;
    line-height: 1.35;
    white-space: normal;
}

.integration-module-card__open {
    color: var(--accent-primary);
}

.integration-readiness-card {
    grid-template-columns: 1.85rem minmax(0, 1fr);
    min-height: 3.6rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.7rem;
}

.integration-workspace__readiness {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    overflow-x: visible !important;
}

.integration-readiness-card .integration-module-card__icon {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.55rem;
}

.integration-readiness-card .integration-module-card__icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.integration-readiness-card .integration-module-card__body {
    gap: 0.08rem;
}

.integration-readiness-card .integration-module-card__label {
    font-size: 0.64rem;
}

.integration-readiness-card .integration-module-card__value {
    font-size: 0.88rem;
}

.integration-readiness-card .integration-module-card__body small {
    font-size: 0.66rem;
    line-height: 1.25;
}

.servicenow-donut-card .donut-card__body {
    min-height: 15rem;
}

.servicenow-donut-card .donut-chart {
    min-width: 12rem;
}

.servicenow-donut-card .donut-legend {
    max-height: 14.8rem;
    overflow-y: auto;
}

.servicenow-series {
    min-width: 0;
    padding-top: 0.5rem;
}

.servicenow-series svg {
    height: clamp(15rem, 22vw, 19rem);
    overflow: hidden;
}

.servicenow-series__grid {
    stroke: color-mix(in srgb, var(--border-soft) 75%, transparent);
    stroke-width: 1;
    stroke-dasharray: 4 5;
}

.servicenow-series__tick {
    fill: var(--text-muted);
    font-size: 0.68rem;
}

.servicenow-table-controls--compact {
    justify-content: flex-end;
    margin-block: 0.65rem;
}

.servicenow-table-controls--compact .toolbar-search {
    flex: 0 1 26rem;
}

.table-sort-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.table-sort-button:hover,
.table-sort-button.is-active {
    color: var(--accent-primary);
}

.table-sort-button svg {
    width: 0.85rem;
    height: 0.85rem;
}

.servicenow-engineer-cell {
    min-width: 15rem;
}

.servicenow-engineer-cell > strong,
.servicenow-performance-table .table-cell-note {
    display: block;
}

.servicenow-performance-table .table-cell-note {
    margin-top: 0.25rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: normal;
}

.servicenow-icon-label__icon {
    display: inline-grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.35rem;
    color: var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary) 13%, transparent);
}

.servicenow-icon-label__icon svg {
    width: 0.85rem;
    height: 0.85rem;
}

.servicenow-sla-cell {
    display: grid;
    gap: 0.22rem;
    min-width: 8.5rem;
}

.servicenow-sla-cell small {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.admin-servicenow-rules > .servicenow-rules-card {
    margin-top: 0.85rem;
    border-color: var(--border-soft);
    background: var(--surface-raised);
}

html[data-theme="light"] .integration-module-card {
    color: #172033;
    border-color: #cfd8e6;
    background: linear-gradient(145deg, #ffffff, #f3f6fb);
    box-shadow: 0 6px 16px rgba(37, 55, 82, 0.07);
}

@media (max-width: 1120px) {
    .integration-module-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .integration-module-grid {
        grid-template-columns: 1fr;
    }
    .integration-module-card {
        min-height: 4.75rem;
    }
    .servicenow-donut-card .donut-card__body {
        min-height: 0;
    }
    .servicenow-series svg {
        height: 14rem;
    }
}

.jira-ai-report {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
    padding: 1rem;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--panel-border));
    border-radius: var(--radius-md);
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 8%, var(--panel)), var(--panel));
}

.jira-ai-report .toolbar-button svg,
.jira-ai-report .primary-button svg,
.email-analytics .primary-button svg,
.email-compose button svg {
    width: 1.1rem;
    height: 1.1rem;
    flex: 0 0 1.1rem;
    stroke-width: 2.2;
}

.jira-ai-report__controls {
    display: grid;
    grid-template-columns: repeat(3, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.jira-ai-report__controls label,
.email-compose__grid label,
.email-compose__reply label,
.email-analytics__range {
    display: grid;
    gap: 0.3rem;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.jira-ai-report__score-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(10.5rem, 1fr));
    gap: 0.65rem;
    min-width: 0;
    overflow-x: auto;
}

.jira-ai-score-card {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 6.4rem;
    padding: 0.8rem;
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--brand);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
}

.jira-ai-report,
.jira-ai-report :is(button, input, select, table) {
    font-family: var(--sidebar-font-sans, system-ui, Arial, sans-serif);
}

.jira-ai-score-card--score { --jira-card-color: #7c3aed; }
.jira-ai-score-card--volume { --jira-card-color: #0c66e4; }
.jira-ai-score-card--risk { --jira-card-color: #e5484d; }
.jira-ai-score-card--deadline { --jira-card-color: #f59e0b; }
.jira-ai-score-card--fresh { --jira-card-color: #0f9f7a; }

.jira-ai-score-card[class*="jira-ai-score-card--"] {
    border-left-color: var(--jira-card-color);
    background: linear-gradient(145deg, color-mix(in srgb, var(--jira-card-color) 8%, var(--panel-strong)), var(--panel-strong));
}

.jira-ai-score-card[class*="jira-ai-score-card--"] > span {
    background: linear-gradient(135deg, color-mix(in srgb, var(--jira-card-color) 88%, white), var(--jira-card-color));
    box-shadow: 0 0.6rem 1.3rem color-mix(in srgb, var(--jira-card-color) 25%, transparent);
}

.jira-ai-score-card[class*="jira-ai-score-card--"] small {
    color: color-mix(in srgb, var(--jira-card-color) 78%, var(--text));
    font-size: 0.76rem;
    font-weight: 760;
    letter-spacing: 0.025em;
}

.jira-ai-score-card[class*="jira-ai-score-card--"] strong {
    font-family: var(--sidebar-font-sans, system-ui, Arial, sans-serif);
    font-weight: 820;
    letter-spacing: -0.025em;
}

.jira-ai-score-card > span {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    color: #fff;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    box-shadow: 0 0.6rem 1.3rem color-mix(in srgb, var(--brand) 28%, transparent);
}

.jira-ai-score-card > span svg {
    width: 1.3rem;
    height: 1.3rem;
    stroke-width: 2.3;
}

.jira-ai-score-card div {
    display: grid;
    min-width: 0;
}

.jira-ai-score-card small,
.jira-ai-score-card em {
    color: var(--text-soft);
    font-size: 0.72rem;
    font-style: normal;
}

.jira-ai-score-card strong {
    color: var(--text);
    font-size: 1.35rem;
    line-height: 1.15;
}

.jira-ai-provenance {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.jira-ai-provenance-card {
    --jira-provenance-color: #64748b;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--jira-provenance-color) 38%, var(--panel-border));
    border-left: 3px solid var(--jira-provenance-color);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--jira-provenance-color) 7%, var(--panel-strong));
}

.jira-ai-provenance-card--high { --jira-provenance-color: #0f9f7a; }
.jira-ai-provenance-card--moderate { --jira-provenance-color: #0c66e4; }
.jira-ai-provenance-card--low { --jira-provenance-color: #f59e0b; }
.jira-ai-provenance-card--neutral { --jira-provenance-color: #64748b; }
.jira-ai-provenance-card--policy { --jira-provenance-color: #7c3aed; }

.jira-ai-provenance-card > span {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    color: #fff;
    border-radius: 0.65rem;
    background: var(--jira-provenance-color);
}

.jira-ai-provenance-card > span svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jira-ai-provenance-card > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.jira-ai-provenance-card small,
.jira-ai-provenance-card em {
    color: var(--text-soft);
    font-size: 0.72rem;
    font-style: normal;
}

.jira-ai-provenance-card strong {
    color: var(--text);
    font-size: 0.92rem;
}

.jira-ai-provenance-card :is(p, ul) {
    margin: 0.25rem 0 0;
    color: var(--text-soft);
    font-size: 0.72rem;
    line-height: 1.4;
}

.jira-ai-provenance-card ul {
    padding-left: 1rem;
}

.jira-ai-status-strip,
.email-analytics__categories {
    display: flex;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
    overflow-x: auto;
}

.jira-ai-status-chip,
.email-analytics__categories span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel-strong);
    font-size: 0.76rem;
}

.jira-ai-status-chip {
    --jira-status-color: #64748b;
    border-color: color-mix(in srgb, var(--jira-status-color) 42%, var(--panel-border));
    background: color-mix(in srgb, var(--jira-status-color) 9%, var(--panel-strong));
}

.jira-ai-status-chip--done { --jira-status-color: #0f9f7a; }
.jira-ai-status-chip--new { --jira-status-color: #0c66e4; }
.jira-ai-status-chip--progress { --jira-status-color: #f59e0b; }
.jira-ai-status-chip--review { --jira-status-color: #7c3aed; }
.jira-ai-status-chip--risk { --jira-status-color: #e5484d; }
.jira-ai-status-chip--neutral { --jira-status-color: #64748b; }

.jira-ai-status-chip strong {
    color: color-mix(in srgb, var(--jira-status-color) 82%, var(--text));
    font-family: var(--sidebar-font-sans, system-ui, Arial, sans-serif);
    font-weight: 780;
}

.jira-ai-status-chip em,
.email-analytics__categories strong {
    color: #fff;
    min-width: 1.45rem;
    padding: 0.1rem 0.35rem;
    text-align: center;
    font-size: 0.7rem;
    font-style: normal;
    border-radius: 999px;
    background: var(--jira-status-color, var(--brand));
}

.jira-ai-analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.jira-ai-analysis-card,
.email-analytics__panel {
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--panel-strong) 82%, transparent);
}

.jira-ai-analysis-card--ai { --jira-analysis-color: #7c3aed; }
.jira-ai-analysis-card--risk { --jira-analysis-color: #e5484d; }
.jira-ai-analysis-card--positive { --jira-analysis-color: #0f9f7a; }
.jira-ai-analysis-card--action { --jira-analysis-color: #0c66e4; }

.jira-ai-analysis-card[class*="jira-ai-analysis-card--"] {
    border-top: 3px solid var(--jira-analysis-color);
    background: linear-gradient(155deg, color-mix(in srgb, var(--jira-analysis-color) 7%, var(--panel-strong)), var(--panel-strong) 55%);
}

.jira-ai-analysis-card[class*="jira-ai-analysis-card--"] h4 {
    color: color-mix(in srgb, var(--jira-analysis-color) 86%, var(--text));
    font-size: 1rem;
    font-weight: 820;
    letter-spacing: -0.012em;
}

.jira-ai-analysis-card[class*="jira-ai-analysis-card--"] h4 svg {
    color: var(--jira-analysis-color);
    stroke-width: 2.7;
}

.jira-ai-analysis-card[class*="jira-ai-analysis-card--"] li {
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.58;
}

.jira-ai-analysis-card h4 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.jira-ai-analysis-card h4 svg {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--accent);
    stroke-width: 2.3;
}

.jira-ai-analysis-card ul,
.email-analytics__panel ul {
    margin: 0.65rem 0 0;
    padding-left: 1.2rem;
    color: var(--text-soft);
}

.jira-ai-methodology {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.jira-ai-methodology span {
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    color: var(--text-soft);
    background: var(--accent-soft);
    font-size: 0.75rem;
}

.jira-ai-report__subhead {
    margin-top: 0.3rem;
}

.jira-ai-report__table {
    max-width: 100%;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
}

.jira-evaluation-exclusions,
.jira-score-audit,
.jira-user-evidence {
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
}

.jira-evaluation-exclusions > summary,
.jira-user-evidence > summary {
    display: grid;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    list-style: none;
}

.jira-evaluation-exclusions > summary {
    grid-template-columns: 2.35rem minmax(0, 1fr) auto;
    padding: 0.8rem;
}

.jira-evaluation-exclusions > summary::-webkit-details-marker,
.jira-user-evidence > summary::-webkit-details-marker {
    display: none;
}

.jira-evaluation-exclusions__icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    color: #f59e0b;
    border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent);
    border-radius: 0.7rem;
    background: color-mix(in srgb, #f59e0b 14%, var(--panel));
}

.jira-evaluation-exclusions__icon svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke-width: 2.6;
}

.jira-evaluation-exclusions > summary span:nth-child(2) {
    display: grid;
    gap: 0.15rem;
}

.jira-evaluation-exclusions > summary strong {
    color: var(--text);
    font-size: 0.94rem;
    font-weight: 800;
}

.jira-evaluation-exclusions > summary small,
.jira-evaluation-exclusions > summary em {
    color: var(--text-soft);
    font-size: 0.74rem;
    font-style: normal;
}

.jira-evaluation-exclusions > summary em {
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    color: #f59e0b;
    background: color-mix(in srgb, #f59e0b 13%, var(--panel));
}

.jira-evaluation-exclusions__body {
    display: grid;
    gap: 0.65rem;
    padding: 0.8rem;
    border-top: 1px solid var(--panel-border);
}

.jira-evaluation-exclusions__toolbar {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) auto auto auto;
    gap: 0.55rem;
}

.jira-evaluation-exclusions__table-wrap,
.jira-score-formula__table-wrap,
.jira-user-evidence__tickets {
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--panel-border);
    border-radius: 0.65rem;
}

.jira-evaluation-exclusions__table-wrap {
    max-height: 22rem;
}

.jira-evaluation-exclusions__table,
.jira-score-formula__table,
.jira-user-evidence__tickets table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
}

.jira-evaluation-exclusions__table th,
.jira-score-formula__table th,
.jira-user-evidence__tickets th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.55rem;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    background: #172b4d;
}

.jira-evaluation-exclusions__table td,
.jira-score-formula__table td,
.jira-user-evidence__tickets td {
    padding: 0.48rem 0.55rem;
    color: var(--text);
    border-top: 1px solid var(--panel-border);
    vertical-align: top;
}

.jira-evaluation-exclusions__table tr.is-excluded td {
    color: var(--text-soft);
    text-decoration-color: #e5484d;
    background: color-mix(in srgb, #e5484d 9%, var(--panel));
}

.jira-evaluation-toggle input {
    width: 1rem;
    height: 1rem;
    accent-color: #0f9f7a;
}

.jira-score-audit {
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
    border-top: 3px solid #0c66e4;
}

.jira-score-formula__expression {
    display: grid;
    gap: 0.35rem;
    padding: 0.7rem;
    color: var(--text);
    font-size: 0.86rem;
    line-height: 1.45;
    border-radius: 0.65rem;
    background: color-mix(in srgb, #0c66e4 8%, var(--panel));
}

.jira-score-formula__expression strong {
    color: #0c66e4;
    font-family: "Cascadia Code", Consolas, monospace;
}

.jira-score-formula__normalization {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.jira-score-formula__normalization > span {
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.55rem;
    background: color-mix(in srgb, #0c66e4 5%, var(--panel));
}

.jira-score-formula__normalization small {
    color: var(--text-soft);
    font-size: 0.7rem;
}

.jira-score-formula__normalization strong {
    color: var(--text);
    font-size: 0.86rem;
}

.jira-score-formula__table tr.is-not-applicable td {
    color: var(--text-soft);
    background: color-mix(in srgb, #64748b 6%, var(--panel));
}

.jira-score-formula__table th {
    background: #0c66e4;
}

.jira-score-formula__table code {
    color: color-mix(in srgb, #7c3aed 85%, var(--text));
    font-size: 0.72rem;
    white-space: nowrap;
}

.jira-score-audit__rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.jira-score-audit__rules span {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--text-soft);
    font-size: 0.76rem;
}

.jira-score-audit__rules svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 0.95rem;
    color: #0f9f7a;
    stroke-width: 2.6;
}

.jira-user-evidence-list {
    display: grid;
    gap: 0.55rem;
}

.jira-user-evidence {
    border-left: 3px solid #7c3aed;
}

.jira-user-evidence > summary {
    grid-template-columns: 1.8rem minmax(10rem, 1fr) auto auto;
    padding: 0.72rem 0.8rem;
}

.jira-user-evidence > summary > span {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    color: #a78bfa;
    border-radius: 0.5rem;
    background: color-mix(in srgb, #7c3aed 16%, var(--panel));
}

.jira-user-evidence > summary svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.7;
}

.jira-user-evidence > summary strong {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 800;
}

.jira-user-evidence > summary em {
    color: #a78bfa;
    font-size: 0.86rem;
    font-style: normal;
    font-weight: 800;
}

.jira-user-evidence > summary small {
    color: var(--text-soft);
    font-size: 0.73rem;
}

.jira-user-evidence__body {
    display: grid;
    gap: 0.75rem;
    padding: 0.8rem;
    border-top: 1px solid var(--panel-border);
}

.jira-user-evidence__body h5 {
    margin: 0.25rem 0 0;
    color: var(--text);
    font-size: 0.84rem;
}

.jira-user-evidence__tickets {
    max-height: 24rem;
}

.jira-user-evidence__tickets th {
    background: #403294;
}

html[data-theme="light"] .jira-ai-score-card[class*="jira-ai-score-card--"] small,
html[data-theme="light"] .jira-ai-analysis-card[class*="jira-ai-analysis-card--"] h4 {
    color: color-mix(in srgb, var(--jira-card-color, var(--jira-analysis-color)) 72%, #172b4d);
}

@media (max-width: 1100px) {
    .jira-evaluation-exclusions__toolbar {
        grid-template-columns: 1fr 1fr;
    }

    .jira-evaluation-exclusions__toolbar .toolbar-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .jira-evaluation-exclusions__toolbar,
    .jira-score-audit__rules,
    .jira-ai-provenance,
    .jira-score-formula__normalization {
        grid-template-columns: 1fr;
    }

    .jira-user-evidence > summary {
        grid-template-columns: 1.8rem minmax(0, 1fr);
    }

    .jira-user-evidence > summary :is(em, small) {
        grid-column: 2;
    }
}

.jira-ai-email {
    display: grid;
    grid-template-columns: minmax(16rem, 0.8fr) minmax(28rem, 2fr);
    align-items: end;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--panel-border);
}

.jira-ai-email__controls {
    display: grid;
    grid-template-columns: minmax(12rem, 1.2fr) minmax(12rem, 1fr) 5rem auto auto;
    gap: 0.55rem;
    align-items: center;
}

.email-analytics,
.email-compose {
    display: grid;
    gap: 1rem;
}

.email-analytics__setup {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--warning) 45%, var(--panel-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--warning) 8%, var(--panel));
}

.email-analytics__setup > span {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    color: #fff;
    border-radius: 50%;
    background: var(--brand);
}

.email-analytics__setup svg {
    width: 1.5rem;
    height: 1.5rem;
    stroke-width: 2.3;
}

.email-analytics__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 0.8fr);
    gap: 0.8rem;
}

.email-analytics__panel h4,
.email-analytics__panel h5 {
    margin: 0.3rem 0;
}

.email-analytics-chart {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    height: 15rem;
    padding: 1rem 0.25rem 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--panel-border);
}

.email-analytics-chart__day {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 0.25rem;
    flex: 1 0 1.8rem;
    min-width: 1.8rem;
    text-align: center;
}

.email-analytics-chart__bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 100%;
}

.email-analytics-chart__bars i {
    width: 28%;
    min-height: 2px;
    border-radius: 0.2rem 0.2rem 0 0;
}

.email-analytics-chart .received,
.email-analytics-chart__legend .received::before { background: #2f8df4; }
.email-analytics-chart .urgent,
.email-analytics-chart__legend .urgent::before { background: #f05b72; }
.email-analytics-chart .reply,
.email-analytics-chart__legend .reply::before { background: #f59f31; }

.email-analytics-chart__day small {
    color: var(--text-soft);
    font-size: 0.62rem;
    transform: rotate(-35deg);
}

.email-analytics-chart__legend {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 0.75rem;
    color: var(--text-soft);
    font-size: 0.75rem;
}

.email-analytics-chart__legend span::before {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.35rem;
    content: "";
    border-radius: 50%;
}

.email-compose__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.email-compose__wide {
    grid-column: 1 / -1;
}

.email-compose__reply {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--panel-border);
}

@media (max-width: 1100px) {
    .jira-ai-report__controls,
    .email-analytics__grid,
    .jira-ai-email {
        grid-template-columns: 1fr;
    }

    .jira-ai-email__controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .jira-ai-analysis-grid,
    .email-compose__grid,
    .email-compose__reply,
    .jira-ai-email__controls {
        grid-template-columns: 1fr;
    }

    .email-compose__wide {
        grid-column: auto;
    }
}

/* Professional VM console identity with a dedicated cyan-blue accent. */
.sidebar [data-view-id="vm_explorer"] .nav-link__icon {
    color: #38bdf8 !important;
    background: linear-gradient(145deg, rgba(56, 189, 248, 0.18), rgba(14, 116, 144, 0.08)) !important;
    border: 1px solid rgba(56, 189, 248, 0.34) !important;
    box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.04), 0 5px 14px rgba(2, 132, 199, 0.12) !important;
}

.sidebar [data-view-id="vm_explorer"] .nav-link__icon svg {
    width: 1.18rem;
    height: 1.18rem;
    stroke-width: 2.15;
}

.sidebar [data-view-id="vm_explorer"]:hover .nav-link__icon,
.sidebar [data-view-id="vm_explorer"].active .nav-link__icon {
    color: #e0f2fe !important;
    background: linear-gradient(145deg, #0284c7, #0e7490) !important;
    border-color: rgba(125, 211, 252, 0.72) !important;
    box-shadow: 0 7px 18px rgba(2, 132, 199, 0.3) !important;
}

/* Keep the complete horizontal location summary inside one responsive popup. */
.world-map-leaflet__canvas .world-map-leaflet__popup .leaflet-popup-content {
    width: min(46rem, calc(100vw - 7rem)) !important;
    max-width: calc(100vw - 7rem) !important;
    margin: 0.8rem 0.9rem;
}

.world-map-maplibre__canvas .world-map-maplibre__popup .maplibregl-popup-content {
    width: min(36rem, calc(100vw - 7rem));
    max-width: min(36rem, calc(100vw - 7rem));
}

.world-map-leaflet__popup .world-map-leaflet__info-window {
    width: 100%;
    min-width: 0;
}

.world-map-leaflet__popup .world-map-leaflet__info-window-grid {
    width: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(96, 165, 250, 0.72) rgba(148, 163, 184, 0.12);
}

.world-map-leaflet__popup .world-map-leaflet__info-window-cell {
    flex: 1 0 6.35rem;
}

@media (max-width: 760px) {
    .world-map-leaflet__canvas .world-map-leaflet__popup .leaflet-popup-content {
        width: calc(100vw - 4.5rem) !important;
        max-width: calc(100vw - 4.5rem) !important;
    }

    .world-map-maplibre__canvas .world-map-maplibre__popup .maplibregl-popup-content {
        width: min(30rem, calc(100vw - 4.5rem));
        max-width: min(30rem, calc(100vw - 4.5rem));
    }
}

/* Meeting media controls use distinct professional icons and action colors. */
.meeting-history-action {
    border-width: 1px !important;
}

.meeting-history-action--play { color: #3fb950 !important; border-color: rgba(63, 185, 80, 0.38) !important; background: rgba(46, 160, 67, 0.12) !important; }
.meeting-history-action--pause { color: #d29922 !important; border-color: rgba(210, 153, 34, 0.4) !important; background: rgba(187, 128, 9, 0.12) !important; }
.meeting-history-action--stop { color: #f85149 !important; border-color: rgba(248, 81, 73, 0.4) !important; background: rgba(218, 54, 51, 0.12) !important; }
.meeting-history-action--download { color: #58a6ff !important; border-color: rgba(88, 166, 255, 0.4) !important; background: rgba(47, 129, 247, 0.12) !important; }
.meeting-history-action--view { color: #bc8cff !important; border-color: rgba(188, 140, 255, 0.4) !important; background: rgba(137, 87, 229, 0.12) !important; }

.meeting-history-action:not(:disabled):hover {
    color: #ffffff !important;
    filter: brightness(1.18);
    transform: translateY(-1px);
}

.meeting-history-action:disabled {
    opacity: 0.34;
    filter: grayscale(0.35);
}

/* Sidebar group arrows occupy a dedicated right-edge column instead of
   wrapping below the icon and label. */
.sidebar .nav-group__toggle {
    grid-template-columns: 2.1rem minmax(0, 1fr) 1rem !important;
    align-items: center;
}

.sidebar .nav-group__toggle .nav-link__label {
    min-width: 0;
    padding-right: 0;
}

.sidebar .nav-group__toggle .nav-group__chevron {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    justify-self: end;
    margin: 0 0.16rem 0 0;
}

.app-shell.sidebar-collapsed .sidebar .nav-group__toggle {
    grid-template-columns: 1fr !important;
}

.app-shell.sidebar-collapsed .sidebar .nav-group__toggle .nav-group__chevron {
    display: none;
}

/* AI summaries stay readable and cannot stretch the meeting history table. */
.meeting-history-table__summary-cell {
    width: 20rem;
    min-width: 20rem;
    max-width: 20rem;
    white-space: normal !important;
}

.meeting-history-table__summary-content {
    display: grid;
    justify-items: start;
    gap: 0.55rem;
    width: 100%;
    min-width: 0;
}

.meeting-history-table__summary-content .meeting-history-table__summary {
    display: -webkit-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.38;
    white-space: normal !important;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.meeting-ai-summary-button {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 2rem;
    padding: 0.38rem 0.62rem;
    border: 1px solid rgba(188, 140, 255, 0.42);
    border-radius: 0.65rem;
    background: rgba(137, 87, 229, 0.13);
    color: #bc8cff;
    font-size: 0.72rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
}

.meeting-ai-summary-button > span:first-child {
    display: inline-grid;
    place-items: center;
}

.meeting-ai-summary-button svg {
    width: 0.95rem;
    height: 0.95rem;
    stroke-width: 2.25;
}

.meeting-ai-summary-button:not(:disabled):hover {
    border-color: rgba(216, 180, 254, 0.72);
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #ffffff;
    transform: translateY(-1px);
}

.meeting-ai-summary-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.meeting-summary-card__body {
    max-width: 78ch;
    font-size: 0.88rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .meeting-history-table__summary-cell {
        width: 16rem;
        min-width: 16rem;
        max-width: 16rem;
    }
}

/* Strong, high-contrast icon treatment for the Jira record-detail sidebar. */
.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__detail-item {
    grid-template-columns: 2.35rem minmax(0, 1fr) 2.35rem;
    gap: 0.72rem;
}

.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__item-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-width: 1px;
    border-radius: 0.72rem;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 20%, transparent), 0 5px 12px color-mix(in srgb, currentColor 16%, transparent);
}

.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__item-icon svg {
    width: 1.34rem;
    height: 1.34rem;
    stroke-width: 2.8;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, currentColor 48%, transparent));
}

.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__item-icon--blue { color: #2f81f7; background: color-mix(in srgb, #0969da 24%, var(--panel)); }
.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__item-icon--violet { color: #a371f7; background: color-mix(in srgb, #8250df 24%, var(--panel)); }
.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__item-icon--teal { color: #16c7bd; background: color-mix(in srgb, #0a7f75 25%, var(--panel)); }
.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__item-icon--green { color: #3fb950; background: color-mix(in srgb, #2da44e 24%, var(--panel)); }
.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__item-icon--rose { color: #f85149; background: color-mix(in srgb, #cf222e 24%, var(--panel)); }
.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__item-icon--amber { color: #d29922; background: color-mix(in srgb, #d29922 25%, var(--panel)); }

.detail-drawer[data-detail-mode="jira-issue"] :is(.jira-drawer__copy-item, .jira-drawer__copy-record, .jira-drawer__actions button) svg {
    width: 1.12rem !important;
    height: 1.12rem !important;
    stroke-width: 2.55;
}

.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__copy-item {
    width: 2.35rem;
    height: 2.35rem;
    border-color: color-mix(in srgb, #8c959f 54%, var(--border));
    color: #d0d7de;
    background: color-mix(in srgb, var(--surface-muted) 82%, #000000);
}

.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__section .eyebrow .icon-inline,
.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__hero .icon-inline,
.detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__quick-facts .icon-inline {
    width: 1.08rem;
    height: 1.08rem;
    stroke-width: 2.7;
    filter: drop-shadow(0 1px 1px currentColor);
}

.detail-drawer[data-detail-mode="jira-issue"].open #detailDrawerClose svg {
    width: 1.28rem;
    height: 1.28rem;
    stroke-width: 2.7;
}

.jira-changelog-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); }
.jira-changelog-table { width: 100%; min-width: 58rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 0.78rem; }
.jira-changelog-table th, .jira-changelog-table td { padding: 0.68rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--text-soft); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.jira-changelog-table th { position: sticky; top: 0; z-index: 1; color: var(--text); background: var(--surface-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; }
.jira-changelog-table th:nth-child(1) { width: 15rem; }
.jira-changelog-table th:nth-child(2) { width: 6.5rem; }
.jira-changelog-table th:nth-child(3) { width: 8rem; }
.jira-changelog-table th:nth-child(4) { width: 11rem; }
.jira-changelog-table th:nth-child(5), .jira-changelog-table th:nth-child(6) { width: 11rem; }
.jira-changelog-table tbody tr:last-child td { border-bottom: 0; }
.jira-changelog-table tbody tr:hover td { background: color-mix(in srgb, #2f81f7 7%, var(--surface)); }
.jira-changelog-table time { color: var(--text); font-weight: 700; white-space: nowrap; }
.jira-changelog-table__field { display: inline-flex; padding: 0.2rem 0.46rem; border-radius: 999px; color: #58a6ff; background: color-mix(in srgb, #0969da 14%, transparent); font-weight: 750; text-transform: capitalize; }
.jira-changelog-table .jira-relative-age { white-space: nowrap; }

.jira-action-ticket-table-wrap { width: 100%; max-height: 22rem; overflow: auto; border: 1px solid var(--border); border-radius: 0.8rem; background: var(--surface); }
.jira-action-ticket-table { width: 100%; min-width: 58rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 0.76rem; }
.jira-action-ticket-table th, .jira-action-ticket-table td { padding: 0.56rem 0.65rem; border-bottom: 1px solid var(--border); color: var(--text-soft); text-align: left; vertical-align: middle; }
.jira-action-ticket-table th { position: sticky; top: 0; z-index: 2; color: var(--text); background: var(--surface-muted); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.jira-action-ticket-table th:nth-child(1) { width: 3rem; }
.jira-action-ticket-table th:nth-child(2) { width: 10rem; }
.jira-action-ticket-table th:nth-child(3) { width: 8.5rem; }
.jira-action-ticket-table th:nth-child(4) { width: 6rem; }
.jira-action-ticket-table th:nth-child(5) { width: 7rem; }
.jira-action-ticket-table tbody tr:last-child td { border-bottom: 0; }
.jira-action-ticket-table tbody tr:hover td { background: color-mix(in srgb, #2f81f7 7%, var(--surface)); }
.jira-action-ticket-table tbody tr.is-selected td { background: color-mix(in srgb, #0969da 12%, var(--surface)); }
.jira-action-ticket-table__check { text-align: center !important; }
.jira-action-ticket-table input[type="checkbox"] { width: 1.08rem; height: 1.08rem; accent-color: #0969da; cursor: pointer; }
.jira-action-ticket-table td strong { color: #58a6ff; }
.jira-action-ticket-table__summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jira-bulk-inline-status { width: 100%; margin: 0.7rem 0 0; }
.jira-bulk-inline-status[hidden] { display: none !important; }

@keyframes progress-overlay-success {
    0% {
        transform: scale(0.72);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.42);
    }
    60% {
        transform: scale(1.08);
        box-shadow: 0 0 0 14px rgba(34, 197, 94, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.metric-card {
    position: relative;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.metric-card::before {
    content: "";
    position: absolute;
    inset: auto -2rem -2rem auto;
    width: 8rem;
    height: 8rem;
    border-radius: 999px;
    opacity: 0.18;
    background: currentColor;
}

.metric-card:hover,
.chart-card:hover,
.table-shell:hover,
.content-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 64px rgba(11, 36, 70, 0.14);
}

.metric-card--ocean { color: #0f6db1; background: linear-gradient(145deg, rgba(15, 109, 177, 0.12), transparent), var(--panel); }
.metric-card--sun { color: #c88213; background: linear-gradient(145deg, rgba(200, 130, 19, 0.12), transparent), var(--panel); }
.metric-card--sky { color: #1579c0; background: linear-gradient(145deg, rgba(21, 121, 192, 0.1), transparent), var(--panel); }
.metric-card--mint { color: #13937f; background: linear-gradient(145deg, rgba(19, 147, 127, 0.12), transparent), var(--panel); }
.metric-card--violet { color: #6d4de8; background: linear-gradient(145deg, rgba(109, 77, 232, 0.12), transparent), var(--panel); }
.metric-card--rose { color: #d14f7e; background: linear-gradient(145deg, rgba(209, 79, 126, 0.12), transparent), var(--panel); }

.metric-card__icon {
    width: 3rem;
    height: 3rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
}

.dashboard-grid--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-grid--dual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.chart-controls {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    flex-wrap: wrap;
}

.compact-search,
.compact-select {
    min-width: 10rem;
    width: auto;
}

.donut-card__body {
    display: grid;
    grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

.donut-chart {
    display: grid;
    place-items: center;
}

.donut-chart__svg {
    width: 12rem;
    height: 12rem;
}

.donut-chart__total {
    fill: var(--text);
    font-size: 0.76rem;
    font-weight: 800;
}

.donut-chart__label {
    fill: var(--text-soft);
    font-size: 0.34rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.donut-legend {
    display: grid;
    gap: 0.65rem;
}

.legend-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.8rem;
    border-radius: 14px;
    background: var(--bg-alt);
    border: 1px solid var(--panel-border);
}

.legend-row--action {
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease;
}

.legend-row--action:hover {
    transform: translateX(2px);
    border-color: rgba(15, 109, 177, 0.24);
}

.legend-row__dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 999px;
}

.legend-row__dot--0 { background: #0f7abf; }
.legend-row__dot--1 { background: #18a999; }
.legend-row__dot--2 { background: #f59e0b; }
.legend-row__dot--3 { background: #ef4444; }
.legend-row__dot--4 { background: #7c3aed; }
.legend-row__dot--5 { background: #14b8a6; }
.legend-row__dot--6 { background: #fb7185; }
.legend-row__dot--7 { background: #2563eb; }

.legend-row__label {
    color: var(--text);
}

.world-map-card {
    display: block;
}

.dashboard-grid--map > .chart-card {
    grid-column: 1 / -1;
}

.world-map {
    min-width: 0;
}

.world-map__shell {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 8.6;
    min-height: clamp(19rem, 34vw, 28rem);
    padding-right: clamp(17rem, 23vw, 21rem);
    border-radius: 1.3rem;
    overflow: hidden;
    border: 1px solid rgba(101, 149, 223, 0.24);
    background:
        radial-gradient(circle at top left, rgba(132, 176, 241, 0.18), transparent 26%),
        radial-gradient(circle at bottom right, rgba(92, 143, 219, 0.16), transparent 30%),
        linear-gradient(180deg, #f7fbff, #eef5ff 48%, #e7f0fc);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 18px 42px rgba(67, 112, 184, 0.14);
}

.world-map__shell::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), transparent 14%),
        linear-gradient(90deg, rgba(76, 128, 214, 0.06), transparent 14%, transparent 86%, rgba(76, 128, 214, 0.04));
    pointer-events: none;
}

.world-map__shell svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.world-map__hud {
    position: absolute;
    top: 0.72rem;
    left: 0.72rem;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    max-width: calc(100% - clamp(18rem, 24vw, 22rem));
}

.world-map__hud-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(120, 164, 233, 0.24);
    background: rgba(255, 255, 255, 0.78);
    color: #17406d;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(77, 120, 194, 0.12);
}

.world-map__ocean {
    fill: #f5faff;
}

.world-map__grid line {
    stroke: rgba(117, 164, 235, 0.2);
    stroke-width: 0.22;
}

.world-map__land-shadow {
    fill: rgba(72, 115, 190, 0.12);
    transform: translate(0.36px, 0.5px);
}

.world-map__land {
    fill: #5b8edd;
    stroke: rgba(181, 214, 255, 0.96);
    stroke-width: 0.34;
    filter: drop-shadow(0 8px 14px rgba(71, 118, 194, 0.16));
}

.world-map__scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        180deg,
        rgba(58, 110, 198, 0.035) 0,
        rgba(58, 110, 198, 0.035) 1px,
        transparent 1px,
        transparent 8px
    );
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

.world-map__pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    gap: 0.14rem;
    min-width: 7.2rem;
    padding: 0.46rem 0.58rem 0.5rem 2.05rem;
    border-radius: 1rem;
    border: 1px solid color-mix(in srgb, var(--pin-color, #60a5fa) 52%, rgba(255, 255, 255, 0.92));
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), color-mix(in srgb, var(--pin-color, #60a5fa) 16%, rgba(255, 255, 255, 0.92)));
    color: #15375e;
    box-shadow: 0 16px 34px rgba(71, 118, 194, 0.18);
    backdrop-filter: blur(14px);
    text-align: left;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    cursor: pointer;
    z-index: 2;
}

.world-map__pin:hover,
.world-map__pin:focus-visible,
.world-map__pin.is-active {
    transform: translate(-50%, -54%) scale(1.02);
    box-shadow: 0 20px 40px rgba(71, 118, 194, 0.22);
    border-color: color-mix(in srgb, var(--pin-color, #60a5fa) 72%, rgba(255, 255, 255, 0.98));
    outline: none;
}

.world-map__pin-marker {
    position: absolute;
    left: 0.68rem;
    top: 50%;
    width: 0.96rem;
    height: 0.96rem;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
}

.world-map__pin-pulse {
    position: absolute;
    inset: -0.54rem;
    border-radius: 999px;
    background: var(--pin-glow, rgba(96, 165, 250, 0.4));
    opacity: 0.52;
    animation: worldMapPulse 2.8s ease-in-out infinite;
    animation-delay: var(--pin-delay, 0s);
}

.world-map__pin-core {
    position: relative;
    z-index: 1;
    width: 0.82rem;
    height: 0.82rem;
    border-radius: 999px;
    background: var(--pin-color, #60a5fa);
    transform: scale(var(--pin-scale, 1));
    box-shadow:
        0 0 0 0.18rem color-mix(in srgb, var(--pin-color, #60a5fa) 32%, transparent),
        0 0 18px var(--pin-glow, rgba(96, 165, 250, 0.42));
}

.world-map__pin-code {
    font-size: 0.68rem;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 800;
}

.world-map__pin-meta {
    font-size: 0.54rem;
    line-height: 1.16;
    color: rgba(28, 64, 106, 0.84);
}

.world-map__inspector {
    position: absolute;
    left: 0.72rem;
    bottom: 0.72rem;
    z-index: 3;
    width: clamp(13.5rem, 21vw, 17rem);
    display: grid;
    gap: 0.46rem;
    padding: 0.76rem 0.84rem;
    border-radius: 1.05rem;
    border: 1px solid rgba(120, 164, 233, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(244, 249, 255, 0.86)),
        rgba(247, 250, 255, 0.88);
    box-shadow: 0 18px 36px rgba(77, 120, 194, 0.16);
    backdrop-filter: blur(16px);
}

.world-map__inspector h4 {
    margin: 0.04rem 0 0;
    font-size: 1rem;
    line-height: 1.08;
    color: #16365d;
}

.world-map__inspector-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
}

.world-map__inspector-stats .detail-item {
    padding: 0.48rem 0.54rem;
}

.world-map__glossary {
    position: absolute;
    top: 0.72rem;
    right: 0.72rem;
    bottom: 0.72rem;
    width: clamp(16.5rem, 22vw, 20rem);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0.58rem;
    padding: 0.76rem;
    border-radius: 1.05rem;
    border: 1px solid rgba(120, 164, 233, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 250, 255, 0.9)),
        rgba(250, 252, 255, 0.92);
    box-shadow: 0 18px 36px rgba(77, 120, 194, 0.16);
    backdrop-filter: blur(16px);
    overflow: hidden;
    z-index: 2;
}

.world-map__glossary-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.world-map__glossary-head h4 {
    margin: 0.08rem 0 0;
    font-size: 0.96rem;
    line-height: 1.08;
    color: #173860;
}

.world-map__glossary-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.34rem;
    flex-wrap: wrap;
}

.world-map-card__legend {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.world-map-card__legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.44rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(120, 164, 233, 0.2);
    background: rgba(255, 255, 255, 0.74);
    color: #173860;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.world-map-card__legend-chip::before {
    content: "";
    width: 0.56rem;
    height: 0.56rem;
    border-radius: 999px;
    background: #ffffff;
    box-shadow:
        0 0 0 1px color-mix(in srgb, currentColor 34%, rgba(255, 255, 255, 0.9)),
        0 0 0 0.16rem color-mix(in srgb, currentColor 26%, transparent);
}

.world-map-card__legend-chip--americas {
    color: #34d399;
}

.world-map-card__legend-chip--emea {
    color: #60a5fa;
}

.world-map-card__legend-chip--apjc {
    color: #a78bfa;
}

.world-map-card__list {
    display: grid;
    gap: 0.55rem;
    min-height: 0;
    padding-right: 0.12rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.world-map-card__list::-webkit-scrollbar {
    width: 0.52rem;
}

.world-map-card__list::-webkit-scrollbar-track {
    background: rgba(115, 158, 226, 0.12);
    border-radius: 999px;
}

.world-map-card__list::-webkit-scrollbar-thumb {
    background: rgba(76, 128, 214, 0.48);
    border-radius: 999px;
}

.world-map-card__list-item {
    appearance: none;
    text-align: left;
    background: rgba(255, 255, 255, 0.82);
    width: 100%;
    border-left: 0.22rem solid rgba(148, 163, 184, 0.32);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    cursor: pointer;
}

.world-map-card__pin-indicator {
    display: inline-block;
    width: 0.58rem;
    height: 0.58rem;
    margin-right: 0.42rem;
    border-radius: 999px;
    background: #ffffff;
    vertical-align: middle;
    box-shadow:
        0 0 0 1px rgba(148, 163, 184, 0.42),
        0 0 0 0.16rem rgba(148, 163, 184, 0.12);
}

.world-map-card__pin-indicator--americas {
    box-shadow:
        0 0 0 1px rgba(52, 211, 153, 0.58),
        0 0 0 0.16rem rgba(52, 211, 153, 0.16);
}

.world-map-card__pin-indicator--emea {
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.58),
        0 0 0 0.16rem rgba(96, 165, 250, 0.16);
}

.world-map-card__pin-indicator--apjc {
    box-shadow:
        0 0 0 1px rgba(167, 139, 250, 0.58),
        0 0 0 0.16rem rgba(167, 139, 250, 0.16);
}

.world-map-card__list-item:hover,
.world-map-card__list-item:focus-visible,
.world-map-card__list-item.is-active {
    transform: translateX(2px);
    box-shadow: 0 14px 28px rgba(7, 36, 62, 0.1);
    outline: none;
}

.world-map-card__list-item--americas {
    border-left-color: #34d399;
}

.world-map-card__list-item--emea {
    border-left-color: #60a5fa;
}

.world-map-card__list-item--apjc {
    border-left-color: #a78bfa;
}

@keyframes worldMapPulse {
    0%, 100% {
        opacity: 0.38;
        transform: scale(0.9);
    }
    50% {
        opacity: 0.74;
        transform: scale(1.16);
    }
}

.loading-state--compact {
    min-height: 8rem;
}

.toolbar-row--stack {
    align-items: flex-start;
}

.advanced-search {
    display: grid;
    gap: 0.7rem;
    width: 100%;
}

.advanced-search__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    width: 100%;
}

.advanced-search__controls .toolbar-search {
    flex: 1 1 15rem;
}

.chip-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-chip {
    border: 1px solid rgba(15, 109, 177, 0.16);
    background: rgba(15, 109, 177, 0.1);
    color: var(--brand);
    border-radius: 999px;
    padding: 0.42rem 0.8rem;
    cursor: pointer;
}

.saved-view {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.8rem;
}

.filter-card {
    display: grid;
    gap: 0.45rem;
    padding: 0.8rem;
    border-radius: 16px;
    background: var(--bg-alt);
    border: 1px solid var(--panel-border);
}

.filter-card__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-soft);
}

.filter-select {
    min-height: 7.5rem;
}

.chooser-item {
    display: block;
    margin: 0.4rem 0;
}

.pagination__actions {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    flex-wrap: wrap;
}

.pagination__page {
    min-width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: var(--panel);
    color: var(--text);
    cursor: pointer;
}

.pagination__page.active,
.toolbar-button.active {
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
    border-color: transparent;
}

.pagination__ellipsis {
    color: var(--text-soft);
    padding: 0 0.25rem;
}

.table-wrap--compact table {
    min-width: 100%;
}

.table-shell--mini {
    margin-top: 1rem;
}

.date-range {
    display: flex;
    gap: 0.8rem;
    align-items: end;
    flex-wrap: wrap;
}

.date-range label,
.admin-form label {
    display: grid;
    gap: 0.35rem;
}

.admin-form {
    display: grid;
    gap: 0.9rem;
}

.cli-panel {
    margin: 0;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: #07111b;
    color: #d7ebff;
    border: 1px solid rgba(132, 173, 214, 0.14);
    overflow: auto;
    min-height: 12rem;
    white-space: pre-wrap;
}

.detail-drawer__actions {
    margin-bottom: 1rem;
}

.detail-drawer__actions .detail-drawer__device-launches {
    margin-top: 0.35rem;
}

.sortable::after {
    content: " [sort]";
    color: var(--text-soft);
    font-size: 0.75rem;
}

@media (max-width: 1200px) {
    .dashboard-grid--triple {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .dashboard-grid--triple,
    .dashboard-grid--dual,
    .donut-card__body {
        grid-template-columns: 1fr;
    }

    .world-map__shell {
        aspect-ratio: 16 / 10.4;
        min-height: 26rem;
        padding-right: 0;
        padding-bottom: 14rem;
    }

    .world-map__hud {
        max-width: calc(100% - 1.44rem);
    }

    .world-map__glossary {
        top: auto;
        left: 0.72rem;
        right: 0.72rem;
        bottom: 0.72rem;
        width: auto;
        height: 12.2rem;
    }

    .world-map__inspector {
        width: clamp(12rem, 42vw, 15rem);
        bottom: 13.6rem;
    }
}

@media (max-width: 680px) {
    .workspace-footer,
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .world-map__shell {
        aspect-ratio: 16 / 11.8;
        min-height: 24rem;
        padding-bottom: 12.2rem;
    }

    .world-map__hud {
        gap: 0.28rem;
    }

    .world-map__hud-chip {
        font-size: 0.58rem;
        padding: 0.28rem 0.46rem;
    }

    .world-map__pin {
        min-width: 0;
        padding: 0.34rem 0.42rem 0.38rem 1.7rem;
    }

    .world-map__pin-meta {
        display: none;
    }

    .world-map__inspector {
        left: 0.64rem;
        right: 0.64rem;
        width: auto;
        bottom: 11.7rem;
    }

    .world-map__inspector-stats {
        grid-template-columns: 1fr;
    }

    .world-map__glossary {
        height: 10.75rem;
        padding: 0.64rem;
    }

    .chart-controls,
    .saved-view,
    .advanced-search__controls,
    .date-range {
        width: 100%;
    }

    .compact-search,
    .compact-select {
        width: 100%;
    }
}


:root {
    --font-sans: var(--gui-font-sans);
    --bg: #eef2f7;
    --bg-alt: #f6f8fb;
    --panel: rgba(255, 255, 255, 0.96);
    --panel-strong: #ffffff;
    --panel-border: rgba(14, 30, 52, 0.1);
    --text: #0f1726;
    --text-soft: #627086;
    --brand: #0d8dff;
    --brand-strong: #0b6fc9;
    --accent: #11b8a4;
    --accent-soft: rgba(17, 184, 164, 0.12);
    --success: #1fb56d;
    --warning: #d18b12;
    --danger: #f04f5a;
    --shell-bg: linear-gradient(180deg, #090b0f 0%, #0d1218 100%);
    --shell-surface: rgba(11, 14, 19, 0.96);
    --shell-surface-strong: rgba(16, 20, 28, 0.98);
    --shell-border: rgba(255, 255, 255, 0.08);
    --shell-text: #f7f8fb;
    --shell-text-soft: rgba(235, 239, 247, 0.7);
    --shell-accent: #19b4ff;
    --shadow: 0 24px 64px rgba(8, 15, 28, 0.12);
    --shadow-soft: 0 16px 36px rgba(8, 15, 28, 0.08);
}

html[data-theme="dark"] {
    --bg: #0b111a;
    --bg-alt: #0f1824;
    --panel: rgba(17, 24, 34, 0.96);
    --panel-strong: #141d28;
    --panel-border: rgba(186, 206, 227, 0.12);
    --text: #eff5fb;
    --text-soft: #9eb0c4;
    --brand: #3aa1ff;
    --brand-strong: #2284db;
    --accent: #20cab2;
    --accent-soft: rgba(32, 202, 178, 0.14);
}

html,
body {
    background:
        radial-gradient(circle at top right, rgba(13, 141, 255, 0.12), transparent 22rem),
        radial-gradient(circle at bottom left, rgba(17, 184, 164, 0.12), transparent 18rem),
        linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
}

body {
    color: var(--text);
}

.workspace {
    padding: 1rem 1rem 1.15rem 0;
    grid-template-rows: auto auto 1fr auto;
    gap: 0.85rem;
    min-height: 100vh;
}

.sidebar,
.topbar {
    background: var(--shell-bg);
    color: var(--shell-text);
    border-color: var(--shell-border);
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.28);
}

.sidebar {
    margin: 0.9rem;
    padding: 1rem 0.9rem;
    gap: 0.9rem;
    overflow: hidden;
}

.brand-tagline {
    margin: 0.15rem 0 0;
    color: var(--shell-text-soft);
    font-size: 0.78rem;
}

.brand-copy .eyebrow,
.topbar .eyebrow,
.sidebar-section__title {
    color: var(--shell-accent);
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 24;
    padding: 0.7rem 1.1rem;
    min-height: 4.5rem;
    border-radius: 1.15rem;
}

.topbar .muted-copy,
.topbar .user-pill span {
    color: var(--shell-text-soft);
}

.topbar__right {
    gap: 0.65rem;
}

.mode-switch {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid var(--shell-border);
}

.mode-switch button {
    color: var(--shell-text-soft);
}

.mode-switch button.active {
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
}

.user-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--shell-text);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 1rem;
    min-height: 0;
}

.sidebar-nav__section {
    display: grid;
    gap: 0.45rem;
}

.sidebar-nav__section--secondary {
    margin-top: auto;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-section__title {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.nav-link {
    grid-template-columns: 2.65rem minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.76rem 0.8rem;
    color: var(--shell-text-soft);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}

.nav-link__icon {
    width: 2.65rem;
    height: 2.65rem;
    color: var(--shell-text);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.06);
}

.nav-link__label strong,
.nav-link__label .muted-copy {
    display: block;
}

.nav-link__label .muted-copy {
    font-size: 0.76rem;
    color: var(--shell-text-soft);
}

.nav-link__runtime-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    margin: 0.28rem 0 0.2rem;
    padding: 0.16rem 0.56rem;
    border-radius: 999px;
    border: 1px solid rgba(248, 81, 73, 0.3);
    background: rgba(248, 81, 73, 0.14);
    color: #ffb4af;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.nav-link__runtime-indicator::before {
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: currentColor;
}

.nav-link__runtime-indicator.is-recording::before {
    animation: meeting-sidebar-rec-pulse 1.1s ease-in-out infinite;
}

.nav-link__runtime-indicator.is-paused {
    border-color: rgba(210, 153, 34, 0.34);
    background: rgba(210, 153, 34, 0.14);
    color: #f2cc60;
}

@keyframes meeting-sidebar-rec-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(0.8);
    }
}

.nav-link.active {
    color: var(--shell-text);
    border-color: rgba(25, 180, 255, 0.3);
    background: linear-gradient(135deg, rgba(13, 141, 255, 0.22), rgba(17, 184, 164, 0.12));
}

.nav-link.active .nav-link__icon {
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--accent));
    border-color: transparent;
}

.sidebar-foot {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.sidebar-foot__label {
    color: var(--shell-text-soft);
}

.sidebar-foot__value {
    color: var(--shell-text);
}

.sidebar-utility {
    margin-top: 0.85rem;
}

.sidebar-utility__row {
    display: flex;
    gap: 0.55rem;
}

.sidebar-utility__caption {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: var(--shell-text-soft);
}

.icon-button {
    background: var(--panel);
    border-color: var(--panel-border);
    color: var(--text);
}

.icon-button svg,
.nav-link__icon svg,
.metric-card__icon svg,
.icon-inline svg {
    width: 1.05rem;
    height: 1.05rem;
}

.icon-button--inline {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.95rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon-button--inline::before {
    content: none;
}

#mobileSidebarToggle::before,
.sidebar-toggle::before {
    width: 1.05rem;
    height: 0.9rem;
    border: 0;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    box-shadow: 0 0.33rem 0 0 currentColor inset;
    transform: none;
}

.workspace-footer {
    position: sticky;
    bottom: 0;
    z-index: 22;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    padding: 0.45rem;
    border-radius: 1.1rem;
    background: var(--shell-bg);
    border: 1px solid var(--shell-border);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14);
}

.footer-pill {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

.footer-pill__label {
    color: var(--shell-text-soft);
}

.footer-pill strong {
    color: var(--shell-text);
}

.content-card,
.chart-card,
.table-shell,
.notification-strip {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 252, 255, 0.96));
    border-color: var(--panel-border);
    box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .content-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .table-shell,
html[data-theme="dark"] .notification-strip {
    background: linear-gradient(180deg, rgba(18, 27, 39, 0.98), rgba(15, 23, 34, 0.96));
}

.metric-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.metric-card {
    padding: 1rem 1rem 1.1rem;
    border-radius: 1.35rem;
}

.metric-card__header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.metric-card__icon {
    width: 2.8rem;
    height: 2.8rem;
}

.metric-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.metric-card__value {
    font-size: 2rem;
}

.metric-card--slate { color: #475569; background: linear-gradient(145deg, rgba(71, 85, 105, 0.12), transparent), var(--panel); }
.metric-card--amber { color: #d18b12; background: linear-gradient(145deg, rgba(209, 139, 18, 0.14), transparent), var(--panel); }

.dashboard-grid--stretch {
    align-items: stretch;
}

.dashboard-grid--stretch > .chart-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.dashboard-grid--stretch > .chart-card .table-widget {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.dashboard-grid--stretch > .chart-card .table-wrap--compact {
    flex: 1 1 auto;
    min-height: 0;
    max-height: clamp(20rem, 42vh, 28rem);
    overflow: auto;
    position: relative;
}

.dashboard-grid--stretch > .chart-card .table-wrap--compact thead th {
    top: 0;
    z-index: 2;
}

.chart-card,
.content-card,
.table-shell {
    border-radius: 1.35rem;
}

.chart-card:hover,
.content-card:hover,
.table-shell:hover,
.metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 60px rgba(9, 18, 35, 0.16);
}

.toolbar-search,
.toolbar-select {
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.86);
}

html[data-theme="dark"] .toolbar-search,
html[data-theme="dark"] .toolbar-select {
    background: rgba(18, 28, 41, 0.92);
}

.toolbar-button--icon {
    padding: 0;
    min-width: 2.5rem;
    min-height: 2.5rem;
}

details.toolbar-button--icon > summary {
    list-style: none;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    cursor: pointer;
}

details.toolbar-button--icon > summary::-webkit-details-marker {
    display: none;
}

.filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.filter-card {
    gap: 0.6rem;
    padding: 0.95rem;
    border-radius: 1rem;
}

.filter-card__head,
.filter-card__actions,
.compact-table__toolbar,
.table-widget__toolbar,
.table-widget__footer,
.table-widget__nav,
.selection-flash__badges,
.selection-flash__grid,
.diagram-flow,
.diagram-metrics {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.filter-card__head {
    justify-content: space-between;
}

.filter-card__actions .toolbar-button {
    padding: 0.45rem 0.7rem;
    border-radius: 0.85rem;
}

.filter-checklist {
    max-height: 14rem;
    overflow: auto;
    display: grid;
    gap: 0.45rem;
    padding-right: 0.25rem;
}

.filter-option,
.chooser-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.55rem;
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .filter-option,
html[data-theme="dark"] .chooser-item {
    background: rgba(255, 255, 255, 0.04);
}

.column-chooser__list {
    max-height: 14rem;
    overflow: auto;
    margin-top: 0.65rem;
    display: grid;
    gap: 0.4rem;
}

.selection-flash {
    margin-bottom: 1rem;
    background:
        radial-gradient(circle at top right, rgba(13, 141, 255, 0.12), transparent 12rem),
        linear-gradient(180deg, rgba(8, 18, 32, 0.04), transparent),
        var(--panel);
}

.selection-flash__badges {
    margin: 0.6rem 0 0.85rem;
}

.selection-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    background: rgba(13, 141, 255, 0.1);
    color: var(--brand);
    font-size: 0.82rem;
}

.selection-badge__value {
    display: inline-block;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.selection-stat {
    min-width: 8rem;
    flex: 1 1 8rem;
    padding: 0.75rem 0.8rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--panel-border);
}

html[data-theme="dark"] .selection-stat {
    background: rgba(255, 255, 255, 0.04);
}

.selection-stat span {
    display: block;
    color: var(--text-soft);
    font-size: 0.8rem;
}

.selection-stat strong {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.05rem;
}

.donut-card__body {
    grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
    align-items: start;
}

.donut-chart__svg {
    width: 12.8rem;
    height: 12.8rem;
}

.donut-chart__segment {
    cursor: pointer;
    transform-origin: 60px 60px;
    transition: stroke-width 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.donut-chart__segment.is-active {
    stroke-width: 21;
    filter: drop-shadow(0 0 8px rgba(13, 141, 255, 0.25));
}

.donut-chart__hint {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    text-align: center;
    color: var(--text-soft);
}

.donut-legend {
    max-height: 22rem;
    overflow: auto;
    padding-right: 0.2rem;
}

.legend-row {
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.legend-row:hover,
.legend-row.is-active {
    transform: translateY(-2px);
    border-color: rgba(13, 141, 255, 0.26);
    box-shadow: 0 12px 22px rgba(13, 141, 255, 0.08);
    background: rgba(13, 141, 255, 0.06);
}

.table-widget,
.compact-table-shell {
    display: grid;
    gap: 0.8rem;
}

.table-widget__toolbar,
.compact-table__toolbar,
.table-widget__footer {
    justify-content: space-between;
}

.table-widget__nav .icon-button {
    width: 2.3rem;
    height: 2.3rem;
}

.table--compact {
    min-width: 100%;
}

.table--compact th,
.table--compact td {
    white-space: nowrap;
}

.risk-stack {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-size: 0.76rem;
    color: var(--text-soft);
}

.risk-stack span {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    background: rgba(15, 23, 38, 0.06);
}

html[data-theme="dark"] .risk-stack span {
    background: rgba(255, 255, 255, 0.06);
}

.risk-negative {
    color: var(--danger);
}

.risk-warning {
    color: var(--warning);
}

.risk-positive {
    color: var(--success);
}

[data-static-sort],
[data-dashboard-sort],
[data-dashboard-sort-oversub],
[data-certificate-health-sort-column] {
    cursor: pointer;
}

.is-sorted-asc::after {
    content: " [asc]";
}

.is-sorted-desc::after {
    content: " [desc]";
}

.detail-item--action {
    display: grid;
    gap: 0.55rem;
}

.diagram-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(19rem, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.diagram-card {
    padding: 1rem;
    border-radius: 1.15rem;
    border: 1px solid var(--panel-border);
    background:
        radial-gradient(circle at top right, rgba(13, 141, 255, 0.12), transparent 9rem),
        linear-gradient(180deg, rgba(17, 184, 164, 0.06), transparent),
        var(--panel);
}

.diagram-card--interactive {
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.diagram-card--interactive:hover,
.diagram-card--interactive:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
    border-color: rgba(59, 130, 246, 0.26);
}

.diagram-card__head h3 {
    margin: 0;
}

.diagram-card__dc-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.65rem;
    padding: 0.4rem 0.82rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(17, 184, 164, 0.18), rgba(47, 129, 255, 0.14));
    border: 1px solid rgba(17, 184, 164, 0.22);
    color: #0f766e;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

html[data-theme="dark"] .diagram-card__dc-badge {
    color: #9ae6d8;
    background: linear-gradient(135deg, rgba(17, 184, 164, 0.22), rgba(47, 129, 255, 0.18));
}

.diagram-flow {
    margin: 1rem 0 0.75rem;
    justify-content: center;
}

.diagram-node {
    min-width: 5.7rem;
    padding: 0.7rem 0.85rem;
    border-radius: 1rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--panel-border);
}

html[data-theme="dark"] .diagram-node {
    background: rgba(255, 255, 255, 0.06);
}

.diagram-node span {
    display: block;
    color: var(--text-soft);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.diagram-node strong {
    display: block;
    margin-top: 0.2rem;
}

.diagram-node--accent {
    background: linear-gradient(135deg, rgba(13, 141, 255, 0.12), rgba(17, 184, 164, 0.16));
}

.diagram-arrow {
    width: 2.5rem;
    height: 2px;
    background: linear-gradient(90deg, rgba(13, 141, 255, 0.25), rgba(17, 184, 164, 0.7));
    position: relative;
}

.diagram-arrow::after {
    content: "";
    position: absolute;
    right: -0.05rem;
    top: -0.24rem;
    width: 0.55rem;
    height: 0.55rem;
    border-top: 2px solid rgba(17, 184, 164, 0.8);
    border-right: 2px solid rgba(17, 184, 164, 0.8);
    transform: rotate(45deg);
}

.diagram-metrics {
    color: var(--text-soft);
    font-size: 0.82rem;
}

.dataset-tabs--modern {
    gap: 0.55rem;
}

.workspace-footer,
.topbar,
.sidebar {
    backdrop-filter: blur(16px);
}

.app-shell.sidebar-collapsed .sidebar {
    padding-inline: 0.55rem;
}

.app-shell.sidebar-collapsed .sidebar-head {
    justify-content: center;
}

.app-shell.sidebar-collapsed .brand-copy,
.app-shell.sidebar-collapsed .nav-link__label,
.app-shell.sidebar-collapsed .sidebar-foot__label,
.app-shell.sidebar-collapsed .sidebar-foot__value,
.app-shell.sidebar-collapsed .sidebar-utility__caption,
.app-shell.sidebar-collapsed .sidebar-section__title,
.app-shell.sidebar-collapsed .brand-tagline {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-nav__section,
.app-shell.sidebar-collapsed .sidebar-nav__section--secondary {
    justify-items: center;
}

.app-shell.sidebar-collapsed .nav-link {
    grid-template-columns: 1fr;
    justify-items: center;
    width: 100%;
    padding: 0.6rem 0.4rem;
}

.app-shell.sidebar-collapsed .sidebar-utility__row {
    justify-content: center;
}

.app-shell.sidebar-collapsed .sidebar-foot {
    padding: 0.75rem 0.35rem;
}

.sortable::after {
    content: " [sort]";
    color: var(--text-soft);
}

@media (max-width: 1080px) {
    .dashboard-grid--triple,
    .dashboard-grid--dual,
    .workspace-footer {
        grid-template-columns: 1fr;
    }

    .donut-card__body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .workspace {
        padding: 0.85rem;
    }

    .workspace-footer {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .workspace-footer {
        grid-template-columns: 1fr;
    }

    .topbar {
        padding: 0.75rem 0.9rem;
    }

    .sidebar {
        inset: 0.8rem auto 0.8rem 0.8rem;
        width: min(18rem, calc(100vw - 1.6rem));
    }
}

.app-shell {
    background: linear-gradient(135deg, #02060b 0%, #08111d 100%);
}

.workspace {
    padding: 0;
    gap: 0;
    grid-template-rows: auto auto 1fr auto;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(245, 248, 252, 0.98), rgba(235, 242, 250, 0.98));
}

.content-stage {
    padding: 1rem 1rem 0.85rem;
    min-height: 0;
    overflow: auto;
    background: linear-gradient(180deg, rgba(245, 248, 252, 0.98), rgba(235, 242, 250, 0.98));
}

.sidebar,
.topbar,
.workspace-footer {
    margin: 0;
    border-radius: 0;
    backdrop-filter: none;
    background: #04080f;
    color: #eef6ff;
}

.sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    min-height: 100vh;
    padding: 0.85rem 0.75rem;
    gap: 0.8rem;
    overflow: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.09);
}

.topbar {
    min-height: 3rem;
    padding: 0.32rem 0.8rem;
    border-left: 0;
    border-right: 0;
}

.workspace-footer {
    min-height: 4.25rem;
    height: 4.25rem;
    align-items: stretch;
    grid-auto-rows: 1fr;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    border-left: 0;
    border-right: 0;
}

.topbar__right {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.topbar-search {
    width: min(25rem, 38vw);
    min-width: 12rem;
}

.topbar-search .search-field {
    width: 100%;
}

#refreshIntervalSelect {
    min-width: 5.4rem;
}

.topbar-sync {
    display: grid;
    gap: 0.14rem;
    min-width: 12.5rem;
    padding: 0.38rem 0.78rem;
    border-radius: 0.82rem;
    border: 1px solid rgba(125, 211, 252, 0.22);
    background:
        linear-gradient(135deg, rgba(14, 116, 144, 0.18), rgba(37, 99, 235, 0.16)),
        rgba(7, 12, 21, 0.9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    line-height: 1.05;
}

.topbar-sync__label {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(191, 219, 254, 0.78);
}

.topbar-sync__value {
    font-size: 0.76rem;
    font-weight: 700;
    color: rgba(226, 232, 240, 0.88);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.topbar-sync.is-ready .topbar-sync__value {
    color: #f8fbff;
}

.footer-pill,
.sidebar-foot,
.nav-link,
.nav-link__icon,
.mode-switch,
.mode-switch button,
.user-pill,
.icon-button,
.icon-button--inline,
.toolbar-button,
.content-card,
.chart-card,
.table-shell,
.metric-card {
    border-radius: 0.7rem;
}

.footer-pill {
    min-height: 3.1rem;
    padding: 0.5rem 0.7rem;
}

.sidebar-foot {
    padding: 0.8rem 0.75rem;
}

.sidebar-toggle::before,
#mobileSidebarToggle::before {
    content: none;
}

.sidebar-toggle svg,
#mobileSidebarToggle svg {
    width: 1.05rem;
    height: 1.05rem;
}

.nav-link {
    position: relative;
    background: rgba(255, 255, 255, 0.025);
}

.nav-link__icon {
    color: var(--nav-accent, var(--shell-text));
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.nav-link.active {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.nav-link.active .nav-link__icon {
    color: #fff;
    background: linear-gradient(135deg, var(--nav-accent, var(--brand)), rgba(255, 255, 255, 0.28));
}

.app-shell.sidebar-collapsed .nav-link::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 0.55rem);
    top: 50%;
    transform: translateY(-50%);
    padding: 0.45rem 0.65rem;
    border-radius: 0.55rem;
    background: rgba(4, 12, 20, 0.96);
    color: #eff6ff;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
    transition: opacity 140ms ease;
    z-index: 30;
}

.app-shell.sidebar-collapsed .nav-link:hover::after {
    opacity: 1;
}

.app-shell.sidebar-collapsed .sidebar {
    padding-inline: 0.4rem;
}

.app-shell.sidebar-collapsed .nav-link {
    padding: 0.6rem 0.25rem;
}

.app-shell.sidebar-collapsed .nav-link__icon {
    margin-inline: auto;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

html[data-theme="dark"] .workspace,
html[data-theme="dark"] .content-stage {
    background: linear-gradient(180deg, rgba(12, 20, 32, 0.98), rgba(18, 30, 46, 0.98));
}

.brand-copy h1 {
    font-size: 1.82rem;
}

.brand-tagline {
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.topbar .eyebrow {
    font-size: 0.86rem;
}

.table-widget__toolbar,
.compact-table__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.75rem;
    width: 100%;
}

.table-widget__toolbar .toolbar-search,
.compact-table__toolbar .toolbar-search {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.table-widget__meta,
.table-widget__rows {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.table-widget__meta {
    justify-content: space-between;
    width: 100%;
}

.table-widget__rows span {
    color: var(--text-soft);
    font-size: 0.8rem;
}

.table-widget__rows select {
    min-width: 4.4rem;
}

.table-widget__footer {
    align-items: center;
    gap: 0.9rem;
}

.dashboard-drilldown {
    display: grid;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.dashboard-drilldown__body {
    display: grid;
    gap: 0.75rem;
}

.table-head--inline {
    align-items: center;
}

.donut-chart__segment {
    translate: 0 0;
    transition: stroke-width 180ms ease, filter 180ms ease, opacity 180ms ease, translate 180ms ease;
    will-change: translate, filter;
}

.donut-chart__segment:hover,
.donut-chart__segment.is-active {
    translate: var(--raise-x, 0px) var(--raise-y, 0px);
    stroke-width: 21;
    filter: drop-shadow(0 10px 10px rgba(13, 141, 255, 0.22));
}

.legend-row,
.filter-option,
.chooser-item,
.selection-badge,
.selection-stat,
.detail-item,
.diagram-card,
.diagram-node {
    border-radius: 0.7rem;
}

.legend-row__dot {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.donut-chart__segment {
    opacity: 0.98;
}

.donut-glossary {
    margin-top: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.04);
}

.donut-glossary > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 0.85rem;
    cursor: pointer;
    font-weight: 700;
}

.donut-glossary > summary::-webkit-details-marker {
    display: none;
}

.donut-glossary__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0 0.85rem 0.55rem;
}

.donut-glossary__list {
    display: grid;
    gap: 0.45rem;
    max-height: 11rem;
    overflow: auto;
    padding: 0 0.85rem 0.85rem;
}

.donut-glossary__item {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.48rem 0.55rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.02);
}

.donut-glossary__item.is-active {
    border-color: rgba(47, 129, 255, 0.3);
    background: rgba(47, 129, 255, 0.08);
}

.donut-glossary__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-name-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    font-weight: 700;
}

.vm-name-pill--firewall {
    background: rgba(255, 92, 112, 0.12);
    color: #d93655;
}

.vm-name-pill--router {
    background: rgba(47, 129, 255, 0.12);
    color: #1f6fe5;
}

.vm-name-pill--sdwan {
    background: rgba(21, 199, 168, 0.12);
    color: #109782;
}

.vm-name-pill--application {
    background: rgba(255, 176, 32, 0.16);
    color: #c67808;
}

.peering-searchbox {
    flex: 1 1 20rem;
    min-width: 0;
}

.toolbar-row--peering {
    align-items: stretch;
}

.toolbar-row--soft {
    justify-content: flex-start;
}

.selection-flash {
    background:
        radial-gradient(circle at top right, rgba(47, 129, 255, 0.16), transparent 12rem),
        radial-gradient(circle at bottom left, rgba(21, 199, 168, 0.14), transparent 14rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 252, 0.96));
}

html[data-theme="dark"] .selection-flash {
    background:
        radial-gradient(circle at top right, rgba(47, 129, 255, 0.2), transparent 12rem),
        radial-gradient(circle at bottom left, rgba(21, 199, 168, 0.18), transparent 14rem),
        linear-gradient(180deg, rgba(18, 27, 39, 0.98), rgba(15, 23, 34, 0.96));
}

.selection-stat:nth-child(1) {
    border-color: rgba(47, 129, 255, 0.18);
    background: linear-gradient(180deg, rgba(47, 129, 255, 0.08), rgba(255, 255, 255, 0.78));
}

.selection-stat:nth-child(2) {
    border-color: rgba(21, 199, 168, 0.18);
    background: linear-gradient(180deg, rgba(21, 199, 168, 0.08), rgba(255, 255, 255, 0.78));
}

.selection-stat:nth-child(3) {
    border-color: rgba(255, 176, 32, 0.2);
    background: linear-gradient(180deg, rgba(255, 176, 32, 0.1), rgba(255, 255, 255, 0.78));
}

.selection-stat:nth-child(4) {
    border-color: rgba(143, 107, 255, 0.2);
    background: linear-gradient(180deg, rgba(143, 107, 255, 0.1), rgba(255, 255, 255, 0.78));
}

html[data-theme="dark"] .selection-stat:nth-child(1),
html[data-theme="dark"] .selection-stat:nth-child(2),
html[data-theme="dark"] .selection-stat:nth-child(3),
html[data-theme="dark"] .selection-stat:nth-child(4) {
    background: rgba(255, 255, 255, 0.05);
}

.search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-field .toolbar-search {
    width: 100%;
    padding-right: 2.8rem;
}

.search-field__clear {
    position: absolute;
    right: 0.28rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border-radius: 0.6rem;
}

.sort-indicator {
    display: inline-grid;
    gap: 0.12rem;
    margin-left: 0.45rem;
    vertical-align: middle;
}

.sort-indicator__up,
.sort-indicator__down {
    width: 0;
    height: 0;
    border-left: 0.28rem solid transparent;
    border-right: 0.28rem solid transparent;
    opacity: 0.34;
}

.sort-indicator__up {
    border-bottom: 0.38rem solid currentColor;
}

.sort-indicator__down {
    border-top: 0.38rem solid currentColor;
}

.sort-indicator.is-active .sort-indicator__up.active,
.sort-indicator.is-active .sort-indicator__down.active {
    opacity: 1;
}

table thead th,
.table--compact thead th {
    background: #04080f;
    color: #eef6ff;
    border-color: rgba(255, 255, 255, 0.08);
}

table thead th span,
.table--compact thead th span {
    vertical-align: middle;
}

.nav-link {
    border-color: rgba(255, 255, 255, 0.05);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
}

.nav-link:hover {
    border-color: rgba(79, 140, 255, 0.24);
    background: linear-gradient(135deg, rgba(79, 140, 255, 0.14), rgba(21, 199, 168, 0.08));
}

.nav-link__icon {
    border-radius: 0.85rem;
}

.topbar,
.sidebar,
.workspace-footer,
.sidebar-foot,
.user-pill,
.mode-switch {
    background: #04080f;
}

.sidebar-foot,
.user-pill,
.mode-switch,
.icon-button,
.toolbar-button,
.toolbar-select,
.toolbar-search {
    border-color: rgba(255, 255, 255, 0.08);
}

.topbar .toolbar-search,
.topbar .toolbar-select {
    background: rgba(255, 255, 255, 0.04);
    color: #eef6ff;
}

.topbar .toolbar-search::placeholder {
    color: rgba(238, 246, 255, 0.58);
}

@media (max-width: 960px) {
    .topbar__right {
        gap: 0.45rem;
    }

    .topbar-search {
        width: min(14rem, 42vw);
        min-width: 10rem;
    }
}

@media (max-width: 860px) {
    .workspace {
        grid-template-rows: auto auto 1fr auto;
    }

    .content-stage {
        padding: 0.85rem;
    }
}

@media (max-width: 640px) {
    .workspace-footer {
        height: auto;
        padding: 0.5rem 0.75rem;
    }

    .sidebar {
        inset: 0 auto 0 0;
        width: min(18rem, calc(100vw - 3rem));
    }
}

.toolbar-search,
.search-field .toolbar-search {
    border-color: rgba(71, 85, 105, 0.3);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}

html[data-theme="dark"] .toolbar-search,
html[data-theme="dark"] .search-field .toolbar-search {
    border-color: rgba(148, 163, 184, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.search-field__clear {
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.topbar__right {
    gap: 0.45rem;
}

.topbar-search {
    width: min(22rem, 34vw);
}

#globalResetButton {
    flex-shrink: 0;
}

.content-stage {
    padding: 0.72rem 0.78rem 0.6rem;
    gap: 0.75rem;
}

.content-card,
.chart-card,
.table-shell {
    padding: 0.95rem;
}

.metric-grid,
.dashboard-grid,
.summary-cards {
    gap: 0.75rem;
}

.chart-card__head,
.table-head,
.detail-drawer__head,
.table-toolbar {
    gap: 0.75rem;
}

.table-toolbar {
    margin-bottom: 0.75rem;
}

th,
td,
.table--compact th,
.table--compact td {
    padding: 0.64rem 0.72rem;
}

.metric-card {
    padding: 0.82rem 0.88rem 0.94rem;
}

.donut-card__body {
    grid-template-columns: minmax(10.75rem, 12rem) minmax(0, 1fr);
    gap: 0.8rem;
}

.donut-card__footer {
    margin-top: 0.68rem;
}

.donut-glossary {
    margin-top: 0;
}

.donut-chart__svg {
    width: 11.4rem;
    height: 11.4rem;
}

.legend-row {
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.legend-row__metrics,
.table-widget__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.legend-row__value {
    min-width: 4.6rem;
    padding: 0.24rem 0.55rem;
    border-radius: 999px;
    text-align: center;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--legend-color, rgba(47, 129, 255, 0.22));
    color: var(--legend-color, #2f81ff);
}

html[data-theme="dark"] .legend-row__value {
    background: rgba(255, 255, 255, 0.06);
}

.legend-row__share {
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.nav-link.active {
    position: relative;
    overflow: hidden;
}

.nav-link.active::before {
    content: "";
    position: absolute;
    left: 0.12rem;
    top: 0.45rem;
    bottom: 0.45rem;
    width: 0.22rem;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--nav-accent, #2f81ff), rgba(255, 255, 255, 0.92));
    box-shadow: 0 0 14px rgba(47, 129, 255, 0.28);
}

.nav-group {
    display: grid;
    gap: 0.4rem;
}

.nav-group__toggle {
    width: 100%;
    text-align: left;
    position: relative;
}

.nav-group__toggle .nav-link__label {
    padding-right: 1.5rem;
}

.nav-group__chevron {
    width: 0.72rem;
    height: 0.72rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    justify-self: end;
    margin-right: 0.18rem;
    transition: transform 180ms ease;
    opacity: 0.8;
}

.nav-group.is-open .nav-group__chevron {
    transform: rotate(225deg);
}

.nav-group__items {
    display: none;
    gap: 0.38rem;
    margin-left: 1.2rem;
    padding-left: 0.75rem;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-group.is-open .nav-group__items {
    display: grid;
}

.nav-link--child {
    padding-block: 0.62rem;
    background: rgba(255, 255, 255, 0.015);
}

.nav-link--child .nav-link__icon {
    width: 2.28rem;
    height: 2.28rem;
}

.nav-group.is-active > .nav-group__toggle {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}

.nav-group.is-active > .nav-group__toggle .nav-link__icon {
    color: #fff;
    background: linear-gradient(135deg, var(--nav-accent, var(--brand)), rgba(255, 255, 255, 0.28));
}

.app-shell.sidebar-collapsed .nav-group__items {
    display: none !important;
}

.app-shell.sidebar-collapsed .nav-group__toggle .nav-link__label {
    padding-right: 0;
}

.app-shell.sidebar-collapsed .nav-group__chevron {
    display: none;
}

.donut-card__body--single {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    min-height: 13rem;
    padding-top: 0.15rem;
}

.donut-card__body--single .donut-chart {
    display: grid;
    justify-items: center;
    width: 100%;
}

.donut-card__body--single .donut-chart__hint {
    margin-top: 0.4rem;
    text-align: center;
}

.chart-controls {
    align-items: flex-start;
}

.chart-controls .donut-glossary {
    margin-top: 0;
    min-width: min(18rem, 100%);
    flex: 1 1 14rem;
}

.chart-controls .donut-glossary > summary {
    min-height: 2.38rem;
    padding: 0.55rem 0.72rem;
    border-radius: 0.78rem;
    font-size: 0.82rem;
}

.chart-controls .donut-glossary__actions {
    padding-top: 0.05rem;
}

.chart-controls .donut-glossary__list {
    max-height: 10rem;
}

@media (max-width: 960px) {
    .topbar-search {
        width: min(13rem, 38vw);
    }
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    background:
        radial-gradient(circle at top right, rgba(13, 111, 177, 0.12), transparent 26rem),
        linear-gradient(180deg, #0d1620 0%, #111c28 22%, var(--bg) 22%, var(--bg) 100%);
}

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

.workspace {
    padding: 0;
    gap: 0;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.sidebar,
.topbar,
.workspace-footer {
    border-radius: 0;
    box-shadow: none;
}

.sidebar {
    margin: 0;
    padding: 0.8rem 0.78rem 0.72rem;
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0.78rem;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-head {
    align-items: center;
    gap: 0.55rem;
}

.sidebar-nav {
    min-height: 0;
    overflow: auto;
    align-content: start;
    padding-right: 0.12rem;
}

.sidebar-nav__section--secondary {
    margin-top: 0.7rem;
}

.sidebar-foot {
    margin-top: 0;
    display: grid;
    gap: 0.45rem;
    align-content: start;
    flex-shrink: 0;
}

.sidebar-foot__value {
    line-height: 1.15;
}

.sidebar-utility {
    margin-top: 0.15rem;
}

.sidebar-utility__row {
    align-items: center;
    justify-content: flex-start;
}

.brand-copy h1 {
    font-size: 1.7rem;
    line-height: 1;
}

.brand-tagline {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 12;
    min-height: 3.05rem;
    padding: 0.42rem 0.8rem;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    align-items: center;
}

.topbar__left {
    flex: 0 0 auto;
    min-width: 0;
    gap: 0.45rem;
}

.topbar .eyebrow,
#viewSubtitle {
    display: none;
}

#viewTitle {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.topbar__right {
    gap: 0.35rem;
    align-items: center;
}

.topbar-search {
    width: min(20rem, 30vw);
}

.topbar .toolbar-search,
.topbar .toolbar-select,
.user-pill,
.topbar-sync,
.mode-switch {
    min-height: 2.4rem;
    border-radius: 0.78rem;
}

.content-stage {
    min-height: 0;
    overflow: auto;
    padding: 0.62rem 0.68rem 0.62rem;
    gap: 0.82rem;
}

.content-card,
.chart-card,
.table-shell {
    padding: 0.84rem;
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.95)),
        var(--panel-strong);
    box-shadow: 0 6px 14px rgba(6, 14, 23, 0.06);
    backdrop-filter: none;
    isolation: isolate;
}

html[data-theme="dark"] .content-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .table-shell {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94)),
        var(--panel-strong);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
}

.content-card:hover,
.chart-card:hover,
.table-shell:hover,
.metric-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(7, 36, 62, 0.1);
}

html[data-theme="dark"] .content-card:hover,
html[data-theme="dark"] .chart-card:hover,
html[data-theme="dark"] .table-shell:hover,
html[data-theme="dark"] .metric-card:hover {
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32);
}

.chart-card__head,
.table-head,
.detail-drawer__head,
.table-toolbar {
    gap: 0.62rem;
}

.metric-grid,
.dashboard-grid,
.summary-cards {
    gap: 0.62rem;
}

.metric-card {
    position: relative;
    overflow: hidden;
    padding: 0.92rem 0.92rem 0.98rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02)),
        linear-gradient(145deg, rgba(15, 109, 177, 0.08), transparent),
        var(--panel);
    box-shadow: 0 14px 28px rgba(6, 14, 23, 0.1);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.metric-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 42%);
    pointer-events: none;
    opacity: 0.9;
}

.metric-card:hover {
    transform: translateY(-3px);
    border-color: rgba(79, 140, 255, 0.3);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04)),
        linear-gradient(145deg, rgba(15, 109, 177, 0.14), transparent),
        var(--panel);
    box-shadow: 0 18px 36px rgba(6, 14, 23, 0.14);
}

.metric-card__header,
.metric-card__value,
.metric-card__label {
    position: relative;
    z-index: 1;
}

.selection-flash {
    border-radius: 1rem;
    border: 1px solid rgba(79, 140, 255, 0.16);
    background:
        linear-gradient(135deg, rgba(79, 140, 255, 0.09), rgba(21, 199, 168, 0.07)),
        var(--panel);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.selection-flash:hover {
    transform: translateY(-3px);
    border-color: rgba(79, 140, 255, 0.26);
    background:
        linear-gradient(135deg, rgba(79, 140, 255, 0.15), rgba(21, 199, 168, 0.12)),
        var(--panel);
    box-shadow: 0 18px 34px rgba(6, 14, 23, 0.14);
}

.selection-stat {
    border-radius: 0.92rem;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.selection-stat:hover {
    background: rgba(79, 140, 255, 0.08);
    border-color: rgba(79, 140, 255, 0.22);
    transform: translateY(-1px);
}

.workspace-footer {
    position: sticky;
    bottom: 0;
    z-index: 11;
    padding: 0.42rem 0.62rem;
    margin: 0;
    gap: 0.42rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-pill {
    min-height: 3.05rem;
    padding: 0.46rem 0.62rem;
    border-radius: 0.78rem;
    box-shadow: none;
}

.footer-pill__label {
    margin-bottom: 0.08rem;
    font-size: 0.68rem;
}

.donut-chart__segment {
    filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.06));
}

.chart-countline {
    display: flex;
    gap: 0.38rem;
    flex-wrap: wrap;
    margin: 0.32rem 0 0;
}

.chart-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.24rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-soft);
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.chart-count-badge--total {
    color: var(--brand);
    background: rgba(79, 140, 255, 0.12);
    border-color: rgba(79, 140, 255, 0.18);
}

.dashboard-drilldown__cards {
    margin-bottom: 0.18rem;
}

.login-system-user {
    display: grid;
    gap: 0.16rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.92rem;
    background: rgba(15, 109, 177, 0.08);
    border: 1px solid rgba(15, 109, 177, 0.12);
}

.login-system-user__label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
}

.login-system-user__value {
    font-size: 1rem;
    line-height: 1.2;
}

.peering-disabled {
    min-height: 14rem;
}

@media (max-width: 960px) {
    body {
        overflow: auto;
    }

    .app-shell,
    .workspace {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .content-stage {
        overflow: visible;
    }

    .workspace-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .workspace-footer {
        grid-template-columns: 1fr;
    }

    .topbar-search {
        width: min(12rem, 48vw);
    }
}

/* Active workspace polish overrides */

.sidebar,
.topbar,
.workspace-footer {
    background:
        linear-gradient(180deg, rgba(2, 6, 14, 0.98), rgba(7, 13, 24, 0.98)),
        #040812;
    border-radius: 0;
}

.content-stage {
    padding: 0.48rem 0.56rem calc(5.9rem + env(safe-area-inset-bottom, 0px));
    gap: 0.56rem;
    scroll-padding-bottom: 6rem;
}

.content-card,
.chart-card,
.table-shell {
    padding: 0.74rem 0.78rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)),
        var(--panel);
}

.metric-card__icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f8fbff;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 24px rgba(5, 10, 20, 0.16);
}

.metric-card__icon svg,
.metric-card__icon img {
    width: 1.2rem;
    height: 1.2rem;
}

.metric-card--ocean .metric-card__icon {
    background: linear-gradient(135deg, #2f81ff, #12b5ff);
}

.metric-card--sky .metric-card__icon {
    background: linear-gradient(135deg, #38bdf8, #60a5fa);
}

.metric-card--mint .metric-card__icon {
    background: linear-gradient(135deg, #15c7a8, #4ade80);
}

.metric-card--sun .metric-card__icon {
    background: linear-gradient(135deg, #ffb020, #f97316);
}

.metric-card--violet .metric-card__icon {
    background: linear-gradient(135deg, #8f6bff, #6366f1);
}

.metric-card--rose .metric-card__icon {
    background: linear-gradient(135deg, #ff6b8c, #ef476f);
}

.metric-card--amber .metric-card__icon {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.metric-card--slate .metric-card__icon {
    background: linear-gradient(135deg, #475569, #0f172a);
}

.donut-chart__svg {
    overflow: hidden;
    display: block;
    width: min(100%, 12.2rem);
    height: auto;
    aspect-ratio: 1 / 1;
    margin-inline: auto;
}

.donut-chart__segment {
    cursor: default;
    filter: drop-shadow(0 10px 14px rgba(5, 10, 20, 0.1));
}

.donut-chart__slice-label {
    font-size: 0.42rem;
    font-weight: 800;
    fill: #ffffff;
    stroke: rgba(5, 10, 20, 0.78);
    stroke-width: 2.6px;
    paint-order: stroke fill;
    letter-spacing: 0.02em;
    pointer-events: none;
}

#peeringCustomerSelect {
    min-width: 15rem;
    flex: 0 0 15rem;
}

.donut-legend {
    max-height: 18rem;
    overflow: auto;
    padding-right: 0.18rem;
}

.legend-row {
    border-radius: 0.88rem;
}

.donut-chart {
    width: min(100%, 12.4rem);
    padding: 0.08rem 0 0.14rem;
    box-sizing: border-box;
    justify-items: center;
    margin-inline: auto;
    overflow: hidden;
}

.donut-card,
.donut-card__body,
.donut-card__body--single {
    overflow: hidden;
}

.donut-chart__svg {
    overflow: hidden;
}

.donut-chart__segment {
    stroke-width: 18;
}

.donut-chart__segment:hover,
.donut-chart__segment.is-active {
    translate: calc(var(--raise-x, 0px) * 0.52) calc(var(--raise-y, 0px) * 0.52);
    stroke-width: 19;
    filter: drop-shadow(0 3px 6px rgba(13, 141, 255, 0.12));
}

.table-widget,
.table-widget--modern,
.compact-table-shell {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04)),
        var(--panel);
    box-shadow: 0 16px 36px rgba(6, 14, 23, 0.08);
    overflow: hidden;
}

.table-widget__toolbar,
.compact-table__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.55rem;
    padding: 0 0 0.58rem;
}

.table-widget__meta,
.table-widget__actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.table-widget__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    flex-wrap: wrap;
    padding: 0.68rem 0.2rem 0.1rem;
}

.table-widget__nav {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.table-wrap {
    overflow: auto;
    border-radius: 0.96rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] .table-wrap {
    background: rgba(2, 6, 23, 0.7);
    border-color: rgba(148, 163, 184, 0.16);
}

.table-wrap table,
.table--compact {
    width: 100%;
    min-width: max(100%, 700px);
    border-collapse: separate;
    border-spacing: 0;
}

.table-wrap thead th,
.table--compact thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.74rem 0.82rem;
    background:
        linear-gradient(180deg, rgba(2, 6, 14, 0.98), rgba(7, 13, 24, 0.98)),
        #040812;
    color: #f8fbff;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-wrap thead th span,
.table--compact thead th span {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
}

.table-wrap tbody td,
.table--compact tbody td {
    padding: 0.74rem 0.82rem;
    vertical-align: top;
    border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.table-wrap tbody tr:nth-child(even),
.table--compact tbody tr:nth-child(even) {
    background: rgba(148, 163, 184, 0.04);
}

.table-wrap tbody tr:hover,
.table--compact tbody tr:hover {
    background: rgba(47, 129, 255, 0.08);
}

.table--compact tbody tr.wxcce-vm-change__cert-row--active td {
    background: rgba(50, 168, 82, 0.07);
    border-bottom-color: rgba(50, 168, 82, 0.18);
}

.table--compact tbody tr.wxcce-vm-change__cert-row--watch td {
    background: rgba(11, 116, 199, 0.07);
    border-bottom-color: rgba(11, 116, 199, 0.18);
}

.table--compact tbody tr.wxcce-vm-change__cert-row--expiring td {
    background: rgba(245, 158, 11, 0.1);
    border-bottom-color: rgba(245, 158, 11, 0.24);
}

.table--compact tbody tr.wxcce-vm-change__cert-row--expired td {
    background: rgba(225, 29, 72, 0.1);
    border-bottom-color: rgba(225, 29, 72, 0.24);
}

.table--compact tbody tr.wxcce-vm-change__cert-row--unknown td {
    background: rgba(100, 116, 139, 0.08);
    border-bottom-color: rgba(100, 116, 139, 0.18);
}

.table--compact tbody tr.wxcce-vm-change__cert-row-detail td {
    padding-top: 0.45rem;
    color: #64748b;
}

.table--compact tbody tr.wxcce-vm-change__cert-row:hover td {
    background: rgba(47, 129, 255, 0.1);
}

.wxcce-vm-change__certificate-charts {
    margin: 0.85rem 0 1rem;
}

.wxcce-vm-change__cert-pager {
    margin-top: 0.85rem;
}

.infra-ios-xe-hld__protocol-summary-cell {
    display: grid;
    gap: 0.18rem;
    min-width: 7.5rem;
}

.infra-ios-xe-hld__protocol-summary-cell strong {
    color: #0f172a;
}

.infra-ios-xe-hld__protocol-uptime {
    font-size: 0.72rem;
    font-weight: 700;
}

.infra-ios-xe-hld__protocol-uptime--good {
    color: #166534;
}

.infra-ios-xe-hld__protocol-uptime--issue {
    color: #b45309;
}

.infra-ios-xe-hld__protocol-uptime--soft {
    color: #64748b;
}

.infra-ios-xe-hld__route-code {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.4rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(248, 250, 252, 0.94);
    color: #0f172a;
    font-weight: 700;
    cursor: help;
}

.table-wrap tbody tr.infra-ios-xe-hld__route-health-row--good,
.table--compact tbody tr.infra-ios-xe-hld__route-health-row--good {
    background: rgba(220, 252, 231, 0.68);
}

.table-wrap tbody tr.infra-ios-xe-hld__route-health-row--issue,
.table--compact tbody tr.infra-ios-xe-hld__route-health-row--issue {
    background: rgba(254, 243, 199, 0.82);
}

.table-wrap tbody tr.infra-ios-xe-hld__route-health-row--good:hover,
.table--compact tbody tr.infra-ios-xe-hld__route-health-row--good:hover {
    background: rgba(187, 247, 208, 0.84);
}

.table-wrap tbody tr.infra-ios-xe-hld__route-health-row--issue:hover,
.table--compact tbody tr.infra-ios-xe-hld__route-health-row--issue:hover {
    background: rgba(253, 230, 138, 0.9);
}

.table-wrap tbody tr:last-child td,
.table--compact tbody tr:last-child td {
    border-bottom: 0;
}

.global-search-summary,
.global-search-section {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)),
        var(--panel);
    box-shadow: 0 12px 28px rgba(6, 14, 23, 0.08);
}

.global-search-summary {
    margin-bottom: 0.7rem;
}

.global-search-section {
    padding: 0.72rem;
    margin-bottom: 0.7rem;
}

.global-search-row {
    border-radius: 0.9rem;
    transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.global-search-row:hover {
    transform: translateY(-1px);
    background: rgba(47, 129, 255, 0.08);
}

@media (max-width: 960px) {
    .content-stage {
        padding-bottom: 1rem;
    }

    .table-wrap table,
    .table--compact {
        min-width: 620px;
    }
}

/* Shared alignment and overflow fixes */

.workspace {
    position: relative;
    min-width: 0;
}

.workspace > *,
.content-stage > *,
.table-shell,
.chart-card,
.content-card,
.table-head,
.chart-card__head,
.table-toolbar,
.table-searchband,
.table-searchband__main,
.table-searchband__side,
.toolbar-row,
.toolbar-actions,
.advanced-search,
.advanced-search__controls,
.saved-view,
#datasetVisuals,
.selection-flash,
.selection-flash__hero,
.selection-flash__grid,
.dashboard-grid,
.metric-grid,
.summary-cards {
    min-width: 0;
}

.chart-card__head,
.table-head,
.toolbar-row,
.toolbar-actions {
    flex-wrap: wrap;
}

.content-stage {
    overflow-y: auto;
    overflow-x: hidden;
}

.table-toolbar--filters {
    margin-bottom: 0.48rem;
}

.table-toolbar--filters .filter-grid {
    width: 100%;
}

.filter-grid--dropdown,
.table-filter-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.55rem;
}

.table-filter-strip {
    margin-bottom: 0.75rem;
}

.table-filter {
    position: relative;
    margin: 0;
}

.table-filter[open] {
    z-index: 16;
}

.table-filter__summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    min-width: min(15rem, 100%);
    padding: 0.42rem 0.78rem 0.42rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.88)),
        var(--panel);
    box-shadow: 0 12px 26px rgba(8, 15, 25, 0.06);
    cursor: pointer;
    color: var(--text);
}

.table-filter__summary::-webkit-details-marker {
    display: none;
}

.table-filter__summary-label {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.table-filter__summary-values {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.table-filter__token {
    display: inline-flex;
    align-items: center;
    max-width: 7.25rem;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-filter__token--all {
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}

.table-filter__token--count {
    background: rgba(100, 116, 139, 0.12);
    color: var(--text-soft);
}

.table-filter__summary-caret {
    width: 0.62rem;
    height: 0.62rem;
    margin-left: auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
    transition: transform 160ms ease;
}

.table-filter[open] .table-filter__summary-caret {
    transform: rotate(225deg);
}

.table-filter__panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    width: min(22rem, 84vw);
    padding: 0.95rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.97)),
        var(--panel);
    box-shadow: 0 28px 56px rgba(8, 15, 25, 0.16);
    display: grid;
    gap: 0.72rem;
}

.table-filter__panel-head,
.table-filter__panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.table-filter__panel-head h4 {
    margin: 0.08rem 0 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}

.table-filter__panel-searchrow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    align-items: center;
}

.table-filter__mode-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    min-width: 5.8rem;
    padding: 0.68rem 0.82rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.table-filter__search {
    min-width: 0;
}

.table-filter__options {
    display: grid;
    gap: 0.42rem;
    max-height: 15rem;
    overflow: auto;
    padding-right: 0.2rem;
}

.table-filter__option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.54rem 0.62rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.82);
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.table-filter__option:hover {
    border-color: rgba(37, 99, 235, 0.28);
    background: rgba(239, 246, 255, 0.92);
    transform: translateY(-1px);
}

.table-filter__option input {
    margin: 0;
    accent-color: #2563eb;
}

.table-filter__option span {
    min-width: 0;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-filter__empty {
    padding: 0.8rem 0.18rem;
}

.table-filter__panel-spacer {
    flex: 1 1 auto;
}

.table-filter__panel-button {
    padding: 0.55rem 0.78rem;
}

.table-filter__apply {
    padding: 0.62rem 0.95rem;
}

html[data-theme="dark"] .table-filter__summary {
    border-color: rgba(148, 163, 184, 0.22);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.9)),
        var(--panel);
}

html[data-theme="dark"] .table-filter__token {
    background: rgba(148, 163, 184, 0.12);
}

html[data-theme="dark"] .table-filter__token--all {
    background: rgba(59, 130, 246, 0.2);
    color: #bfdbfe;
}

html[data-theme="dark"] .table-filter__panel {
    border-color: rgba(148, 163, 184, 0.18);
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.96)),
        var(--panel);
}

html[data-theme="dark"] .table-filter__mode-chip,
html[data-theme="dark"] .table-filter__option {
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .table-filter__option:hover {
    border-color: rgba(59, 130, 246, 0.28);
    background: rgba(30, 41, 59, 0.78);
}

@media (max-width: 900px) {
    .table-filter__summary {
        min-width: min(13rem, 100%);
    }

    .table-filter__panel {
        width: min(20rem, 92vw);
    }
}

.table-searchband {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.72rem;
    padding: 0.82rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.05)),
        var(--panel);
    box-shadow: 0 12px 28px rgba(6, 14, 23, 0.08);
}

html[data-theme="dark"] .table-searchband {
    border-color: rgba(148, 163, 184, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        var(--panel);
}

.table-searchband__main {
    flex: 1 1 28rem;
    display: grid;
    gap: 0.62rem;
}

.table-searchband__side {
    flex: 1 1 18rem;
    display: flex;
    justify-content: flex-end;
}

.table-searchband__side .toolbar-actions {
    width: 100%;
    justify-content: flex-end;
}

.table-searchband .advanced-search {
    width: 100%;
}

.table-searchband .advanced-search__controls {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.table-searchband .advanced-search__controls .toolbar-search {
    flex: 1 1 14rem;
    min-width: 12rem;
}

.table-searchband .saved-view {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    flex-wrap: wrap;
}

.dataset-footer-summary {
    margin-top: 0.95rem;
}

.dataset-footer-summary__cards {
    align-items: stretch;
}

.dataset-footer-summary__cards .metric-card {
    min-width: 10rem;
}

.dataset-footer-summary__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.dataset-footer-summary__tags .muted-copy {
    margin-top: 0.1rem;
}

.infra-circuit-sidebar {
    margin-top: 1rem;
}

.infra-circuit-sidebar__layout {
    display: grid;
    grid-template-columns: minmax(18rem, 23rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.infra-circuit-sidebar__controls,
.infra-circuit-sidebar__results {
    display: grid;
    gap: 0.8rem;
}

.infra-circuit-sidebar__label {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.infra-circuit-sidebar__textarea {
    width: 100%;
    min-height: 12rem;
    resize: vertical;
    padding: 0.92rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(96, 165, 250, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.94));
    color: var(--text);
    font: inherit;
    line-height: 1.5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

html[data-theme="dark"] .infra-circuit-sidebar__textarea {
    border-color: rgba(96, 165, 250, 0.2);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.96));
}

.infra-circuit-sidebar__textarea:focus {
    outline: none;
    border-color: rgba(37, 99, 235, 0.56);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

.infra-circuit-sidebar__meta {
    margin: -0.15rem 0 0;
}

.infra-circuit-sidebar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.infra-circuit-sidebar__actions .toolbar-button {
    flex: 1 1 10rem;
    justify-content: center;
}

.infra-circuit-sidebar__automation {
    display: grid;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(96, 165, 250, 0.18);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.74), rgba(248, 250, 252, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 14px 24px rgba(15, 23, 42, 0.05);
}

html[data-theme="dark"] .infra-circuit-sidebar__automation {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.96));
    border-color: rgba(96, 165, 250, 0.16);
}

.infra-circuit-sidebar__automation-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.infra-circuit-sidebar__automation-head h4 {
    margin: 0.18rem 0 0.28rem;
    font-size: 1rem;
}

.infra-circuit-sidebar__automation-head .muted-copy {
    margin: 0;
}

.infra-circuit-sidebar__automation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.infra-circuit-sidebar__automation-actions .toolbar-button {
    flex: 1 1 10rem;
    justify-content: center;
}

.infra-circuit-sidebar__table-actions {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(96, 165, 250, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 250, 252, 0.98));
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.05);
}

html[data-theme="dark"] .infra-circuit-sidebar__table-actions {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.98));
    border-color: rgba(96, 165, 250, 0.14);
}

.infra-circuit-sidebar__table-actions-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.infra-circuit-sidebar__table-actions-meta h4 {
    margin: 0.18rem 0 0.28rem;
    font-size: 1rem;
}

.infra-circuit-sidebar__table-actions-meta .muted-copy {
    margin: 0;
}

.infra-circuit-sidebar__table-actions-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.infra-circuit-sidebar__table-actions-buttons .toolbar-button {
    flex: 1 1 10rem;
    justify-content: center;
}

.infra-circuit-sidebar__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
}

.infra-circuit-sidebar__metric {
    display: grid;
    gap: 0.28rem;
    padding: 0.88rem 0.96rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 250, 252, 0.92));
    box-shadow: 0 12px 22px rgba(6, 14, 23, 0.05);
}

html[data-theme="dark"] .infra-circuit-sidebar__metric {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.94));
    border-color: rgba(148, 163, 184, 0.16);
}

.infra-circuit-sidebar__metric-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.infra-circuit-sidebar__metric-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
}

.infra-circuit-sidebar__notice {
    margin-top: 0.1rem;
}

.infra-circuit-sidebar__run-results {
    display: grid;
    gap: 0.95rem;
}

.infra-circuit-sidebar__run-results-block {
    display: grid;
    gap: 0.75rem;
}

.infra-circuit-sidebar__run-results-copy {
    margin: -0.2rem 0 0;
}

.infra-circuit-sidebar__results > .compact-table-shell,
.infra-circuit-sidebar__results > .notice-card,
.infra-circuit-sidebar__results > .empty-state,
.infra-circuit-sidebar__results > .loading-state,
.infra-circuit-sidebar__results > .infra-circuit-sidebar__run-results {
    min-height: 100%;
}

@media (max-width: 1100px) {
    .infra-circuit-sidebar__layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 680px) {
    .infra-circuit-sidebar__metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .infra-circuit-sidebar__actions .toolbar-button {
        flex: 1 1 100%;
    }

    .infra-circuit-sidebar__automation-head {
        flex-direction: column;
    }

    .infra-circuit-sidebar__automation-actions .toolbar-button {
        flex: 1 1 100%;
    }

    .infra-circuit-sidebar__table-actions-meta {
        flex-direction: column;
    }

    .infra-circuit-sidebar__table-actions-buttons .toolbar-button {
        flex: 1 1 100%;
    }
}

.toolbar-button--action {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    padding: 0.72rem 0.94rem;
    border-radius: 0.9rem;
    font-weight: 700;
}

.toolbar-button--all,
.toolbar-button--clear {
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}

.toolbar-button--all {
    border-color: rgba(11, 116, 199, 0.18);
    background: linear-gradient(180deg, rgba(11, 116, 199, 0.08), rgba(11, 116, 199, 0.03));
    color: #0b5d8f;
}

.toolbar-button--all:hover,
.toolbar-button--all:focus-visible {
    border-color: rgba(11, 116, 199, 0.28);
    background: linear-gradient(180deg, rgba(11, 116, 199, 0.14), rgba(11, 116, 199, 0.05));
}

.toolbar-button--clear {
    border-color: rgba(220, 38, 38, 0.16);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
    color: #b42318;
}

.toolbar-button--clear:hover,
.toolbar-button--clear:focus-visible {
    border-color: rgba(220, 38, 38, 0.24);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.05));
}

.toolbar-button__icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
}

.toolbar-button--all .toolbar-button__icon,
.toolbar-button--clear .toolbar-button__icon {
    width: 1.18rem;
    height: 1.18rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.18rem;
}

.toolbar-button--all .toolbar-button__icon {
    background: rgba(11, 116, 199, 0.12);
    color: #0b74c7;
}

.toolbar-button--clear .toolbar-button__icon {
    background: rgba(239, 68, 68, 0.12);
    color: #d7263d;
}

.toolbar-button__icon svg {
    width: 1rem;
    height: 1rem;
}

.peering-suggestion-open__arrow {
    color: currentColor;
    transition: transform 160ms ease;
}

.peering-suggestion-open:hover .peering-suggestion-open__arrow,
.peering-suggestion-open:focus-visible .peering-suggestion-open__arrow {
    transform: translate(0.12rem, -0.12rem);
}

.toolbar-button--all .toolbar-button__icon svg,
.toolbar-button--clear .toolbar-button__icon svg {
    width: 0.82rem;
    height: 0.82rem;
}

.toolbar-button--diagram {
    border-color: rgba(91, 33, 182, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    box-shadow: 0 12px 26px rgba(59, 130, 246, 0.1);
}

.toolbar-button--diagram:hover,
.toolbar-button--diagram:focus-visible {
    border-color: rgba(79, 70, 229, 0.26);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 255, 0.96));
    box-shadow: 0 14px 28px rgba(79, 70, 229, 0.16);
}

.toolbar-button--diagram .toolbar-button__icon {
    width: 1.42rem;
    height: 1.42rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.18rem;
    background:
        linear-gradient(135deg, #0ea5e9 0%, #2563eb 38%, #7c3aed 72%, #ec4899 100%);
    color: #ffffff;
    box-shadow:
        0 10px 18px rgba(79, 70, 229, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.26);
}

.toolbar-button--diagram .toolbar-button__icon svg {
    width: 0.88rem;
    height: 0.88rem;
}

.notice-card--inline {
    margin-bottom: 0.62rem;
}

.selection-flash {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 0.78rem;
    overflow: hidden;
}

.selection-flash__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.selection-flash__title {
    min-width: 0;
}

.selection-flash__emblem {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.56rem 0.74rem;
    border-radius: 0.95rem;
    background: rgba(4, 8, 18, 0.08);
    border: 1px solid rgba(79, 140, 255, 0.18);
    font-size: 0.82rem;
    font-weight: 700;
}

html[data-theme="dark"] .selection-flash__emblem {
    background: rgba(255, 255, 255, 0.05);
}

.selection-flash__emblem-icon,
.selection-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.82rem;
    color: #ffffff;
    background: linear-gradient(135deg, #2f81ff, #12b5ff);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 18px rgba(47, 129, 255, 0.22);
    flex-shrink: 0;
}

.selection-stat:nth-child(2) .selection-stat__icon { background: linear-gradient(135deg, #15c7a8, #22c55e); box-shadow: 0 8px 18px rgba(21, 199, 168, 0.22); }
.selection-stat:nth-child(3) .selection-stat__icon { background: linear-gradient(135deg, #8f6bff, #6366f1); box-shadow: 0 8px 18px rgba(99, 102, 241, 0.22); }
.selection-stat:nth-child(4) .selection-stat__icon { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 8px 18px rgba(245, 158, 11, 0.22); }
.selection-stat:nth-child(5) .selection-stat__icon { background: linear-gradient(135deg, #ff6b8c, #ef476f); box-shadow: 0 8px 18px rgba(239, 71, 111, 0.22); }
.selection-stat:nth-child(6n) .selection-stat__icon { background: linear-gradient(135deg, #38bdf8, #2563eb); box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22); }

.selection-flash__emblem-icon svg,
.selection-stat__icon svg {
    stroke-width: 2.35;
}

.selection-flash__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.55rem;
}

.selection-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.selection-stat__content {
    min-width: 0;
}

.donut-card .chart-card__head {
    align-items: flex-start;
}

.donut-card__body--single {
    min-height: 13rem;
    align-items: flex-start;
    padding-top: 0;
}

.donut-card__body--single .donut-chart {
    align-self: flex-start;
    padding-top: 0.04rem;
    margin-top: 0;
}

.donut-card .chart-controls {
    width: 100%;
    justify-content: flex-end;
    align-items: flex-start;
    row-gap: 0.5rem;
}

.donut-card .chart-controls .search-field,
.donut-card .chart-controls .toolbar-search {
    flex: 1 1 11.5rem;
    min-width: 11rem;
}

.donut-card .chart-controls .donut-glossary {
    flex: 1 1 14rem;
}

.donut-chart__svg {
    width: min(100%, 12.2rem);
}

.donut-chart {
    width: min(100%, 12.4rem);
}

.mini-dataset-collapse {
    border-radius: 1rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.5);
    overflow: hidden;
}

html[data-theme="dark"] .mini-dataset-collapse {
    background: rgba(2, 6, 23, 0.56);
    border-color: rgba(148, 163, 184, 0.14);
}

.mini-dataset-collapse__summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.8rem 0.9rem;
    cursor: pointer;
}

.mini-dataset-collapse__summary::-webkit-details-marker {
    display: none;
}

.mini-dataset-collapse__summary h3 {
    margin: 0.08rem 0 0;
}

.mini-dataset-collapse__body {
    padding: 0 0.72rem 0.72rem;
}

.table-wrap,
.compact-table-shell,
.donut-card,
.donut-card__body,
.donut-chart,
.chart-card,
.table-shell,
.content-card {
    max-width: 100%;
}

.metric-card,
.selection-flash,
.chart-card,
.table-shell,
.content-card,
.donut-card,
.compact-table-shell,
.table-wrap {
    border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .selection-flash,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .table-shell,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .donut-card,
html[data-theme="dark"] .compact-table-shell,
html[data-theme="dark"] .table-wrap {
    border-color: rgba(148, 163, 184, 0.2);
}

.scroll-cue {
    position: absolute;
    right: 1rem;
    bottom: 4.95rem;
    z-index: 15;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 1.9rem;
    padding: 0.32rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(79, 140, 255, 0.24);
    background: rgba(4, 8, 18, 0.92);
    color: #f8fbff;
    box-shadow: 0 6px 16px rgba(5, 10, 20, 0.2);
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.1;
    white-space: nowrap;
}

.scroll-cue__icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
}

.scroll-cue__icon svg {
    width: 1rem;
    height: 1rem;
}

.scroll-cue:not(.hidden) {
    animation: scroll-cue-bob 1.6s ease-in-out infinite;
}

@keyframes scroll-cue-bob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4px);
    }
}

@media (max-width: 960px) {
    .table-searchband__side {
        width: 100%;
        justify-content: flex-start;
    }

    .table-searchband__side .toolbar-actions {
        justify-content: flex-start;
    }

    .scroll-cue {
        right: 0.8rem;
        bottom: 1rem;
    }
}

/* Final shared polish */

.topbar .eyebrow {
    display: inline-flex !important;
    align-items: center;
    gap: 0.38rem;
    margin: 0 0 0.12rem;
    padding: 0.16rem 0.56rem;
    border-radius: 999px;
    border: 1px solid rgba(79, 140, 255, 0.22);
    background: linear-gradient(135deg, rgba(47, 129, 255, 0.16), rgba(21, 199, 168, 0.08));
    color: #dbeafe;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.topbar .eyebrow,
.brand-tagline {
    position: relative;
    overflow: hidden;
}

.topbar .eyebrow::after,
.brand-tagline::after {
    content: "";
    position: absolute;
    inset: -35% auto -35% -30%;
    width: 32%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.48), transparent);
    transform: skewX(-22deg);
    animation: easyclick-banner-sheen 3.6s linear infinite;
    pointer-events: none;
}

@keyframes easyclick-banner-sheen {
    from {
        left: -35%;
    }
    to {
        left: 122%;
    }
}

.brand-tagline {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0;
}

.nav-link {
    position: relative;
    overflow: hidden;
}

.nav-link__icon {
    color: #f8fbff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.04)),
        linear-gradient(135deg, var(--nav-accent, #2f81ff), rgba(12, 18, 32, 0.96));
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 22px rgba(5, 10, 20, 0.16);
}

.nav-link.active {
    box-shadow: inset 3px 0 0 var(--nav-accent, #2f81ff);
}

.nav-link.active .nav-link__icon {
    transform: translateY(-1px) scale(1.02);
}

.sidebar-utility .icon-button {
    color: #f8fbff;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
        linear-gradient(135deg, #2f81ff, #12b5ff);
    border-color: rgba(255, 255, 255, 0.14);
}

.metric-card,
.selection-flash,
.chart-card,
.table-shell,
.content-card,
.donut-card,
.compact-table-shell,
.table-wrap {
    border-width: 1px;
    border-style: solid;
}

.metric-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04)),
        linear-gradient(145deg, rgba(47, 129, 255, 0.1), transparent),
        var(--panel);
}

.metric-card:hover {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.05)),
        linear-gradient(145deg, rgba(47, 129, 255, 0.16), rgba(21, 199, 168, 0.08)),
        var(--panel);
}

.metric-card--empty {
    border-color: rgba(100, 116, 139, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02)),
        linear-gradient(145deg, rgba(100, 116, 139, 0.08), transparent),
        var(--panel);
}

.metric-card--empty .metric-card__badge,
.metric-card--empty .metric-card__label {
    color: #64748b;
}

.metric-card--empty .metric-card__icon {
    background: linear-gradient(135deg, #64748b, #475569);
}

.summary-cards--row {
    grid-auto-flow: column;
    grid-auto-columns: minmax(10.75rem, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 0.12rem;
}

.summary-cards--customer360 .metric-card {
    min-width: 10.75rem;
}

.customer360-results-stack {
    display: grid;
    gap: 1.15rem;
    padding-bottom: clamp(5.5rem, 12vh, 8rem);
}

.customer360-datasets {
    display: grid;
    gap: 1rem;
    padding-bottom: 1rem;
}

.customer360-overview-shell {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.customer360-overview__panel {
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.customer360-overview__summary {
    border-radius: 1.25rem;
    border: 1px solid rgba(37, 99, 235, 0.16);
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(14, 165, 233, 0.08)),
        rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.customer360-overview__summary:hover {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.16), rgba(14, 165, 233, 0.12)),
        rgba(255, 255, 255, 0.98);
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
}

.customer360-overview__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding-top: 0.4rem;
    align-items: start;
}

.customer360-overview__panel {
    height: 100%;
    border: 0;
    border-radius: 1.15rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.09);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.customer360-overview__panel:hover {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.09), rgba(14, 165, 233, 0.08)),
        rgba(255, 255, 255, 0.96);
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.12);
}

.customer360-overview__tshoot-cards {
    margin-bottom: 0.75rem;
}

.customer360-overview__notice {
    margin-top: 0.35rem;
}

.customer360-accordion {
    --customer360-accent-rgb: 37, 99, 235;
    border-radius: 1.25rem;
    border: 1px solid rgba(var(--customer360-accent-rgb), 0.18);
    background:
        linear-gradient(180deg, rgba(var(--customer360-accent-rgb), 0.08), rgba(var(--customer360-accent-rgb), 0.03)),
        rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.customer360-accordion:hover {
    background:
        linear-gradient(180deg, rgba(var(--customer360-accent-rgb), 0.14), rgba(var(--customer360-accent-rgb), 0.06)),
        rgba(255, 255, 255, 0.94);
    transform: translateY(-2px);
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12);
    border-color: rgba(var(--customer360-accent-rgb), 0.28);
}

.customer360-accordion__summary {
    position: relative;
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    cursor: pointer;
    background:
        linear-gradient(135deg, rgba(var(--customer360-accent-rgb), 0.12), rgba(var(--customer360-accent-rgb), 0.05)),
        rgba(255, 255, 255, 0.68);
    transition: background 160ms ease, transform 160ms ease;
}

.customer360-accordion__summary-main,
.mini-dataset-collapse__summary-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.customer360-accordion__summary-icon,
.mini-dataset-collapse__summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.95rem;
    flex: 0 0 auto;
    background: rgba(var(--customer360-accent-rgb, 47, 129, 255), 0.14);
    color: rgb(var(--customer360-accent-rgb, 47, 129, 255));
    box-shadow: inset 0 0 0 1px rgba(var(--customer360-accent-rgb, 47, 129, 255), 0.12);
}

.customer360-accordion__summary-icon svg,
.mini-dataset-collapse__summary-icon svg {
    width: 1.08rem;
    height: 1.08rem;
}

.customer360-accordion__summary::-webkit-details-marker {
    display: none;
}

.customer360-accordion__summary:hover {
    background:
        linear-gradient(135deg, rgba(var(--customer360-accent-rgb), 0.18), rgba(var(--customer360-accent-rgb), 0.08)),
        rgba(255, 255, 255, 0.8);
}

.customer360-accordion__summary::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.62rem;
    height: 0.62rem;
    border-right: 2px solid rgba(var(--customer360-accent-rgb), 0.72);
    border-bottom: 2px solid rgba(var(--customer360-accent-rgb), 0.72);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 180ms ease;
}

.customer360-accordion[open] > .customer360-accordion__summary::after {
    transform: translateY(-40%) rotate(225deg);
}

.customer360-accordion__summary h3 {
    margin: 0.08rem 1.75rem 0 0;
}

.customer360-accordion__body {
    padding: 0.15rem 0.85rem 0.85rem;
}

.customer360-accordion--customer {
    --customer360-accent-rgb: 37, 99, 235;
}

.customer360-accordion--tshoot {
    --customer360-accent-rgb: 15, 118, 110;
}

.customer360-accordion--change {
    --customer360-accent-rgb: 217, 119, 6;
}

.customer360-accordion--candidates {
    --customer360-accent-rgb: 124, 58, 237;
}

.customer360-dataset-shell {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.customer360-dataset-accordion {
    --customer360-dataset-accent-rgb: 47, 129, 255;
    border-radius: 1.15rem;
    border: 1px solid rgba(var(--customer360-dataset-accent-rgb), 0.16);
    background:
        linear-gradient(180deg, rgba(var(--customer360-dataset-accent-rgb), 0.1), rgba(var(--customer360-dataset-accent-rgb), 0.03)),
        rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.customer360-dataset-accordion:hover {
    background:
        linear-gradient(180deg, rgba(var(--customer360-dataset-accent-rgb), 0.16), rgba(var(--customer360-dataset-accent-rgb), 0.08)),
        rgba(255, 255, 255, 0.94);
    transform: translateY(-2px);
    border-color: rgba(var(--customer360-dataset-accent-rgb), 0.24);
    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.1);
}

.customer360-dataset-summary {
    --customer360-accent-rgb: var(--customer360-dataset-accent-rgb);
    border-radius: 1.1rem;
    background:
        linear-gradient(135deg, rgba(var(--customer360-dataset-accent-rgb), 0.16), rgba(var(--customer360-dataset-accent-rgb), 0.06)),
        rgba(255, 255, 255, 0.76);
}

.customer360-dataset-summary:hover {
    background:
        linear-gradient(135deg, rgba(var(--customer360-dataset-accent-rgb), 0.24), rgba(var(--customer360-dataset-accent-rgb), 0.1)),
        rgba(255, 255, 255, 0.88);
}

.customer360-dataset-summary .status-pill {
    color: rgb(var(--customer360-dataset-accent-rgb));
    background: rgba(var(--customer360-dataset-accent-rgb), 0.12);
}

.customer360-dataset-accordion--vms,
.customer360-dataset-summary--vms {
    --customer360-dataset-accent-rgb: 37, 99, 235;
}

.customer360-dataset-accordion--vm-hits,
.customer360-dataset-summary--vm-hits {
    --customer360-dataset-accent-rgb: 79, 70, 229;
}

.customer360-dataset-accordion--mra,
.customer360-dataset-summary--mra {
    --customer360-dataset-accent-rgb: 14, 165, 233;
}

.customer360-dataset-accordion--cube,
.customer360-dataset-summary--cube {
    --customer360-dataset-accent-rgb: 217, 119, 6;
}

.customer360-dataset-accordion--rtr-cube,
.customer360-dataset-summary--rtr-cube {
    --customer360-dataset-accent-rgb: 15, 118, 110;
}

.customer360-dataset-accordion--apic-sdwan,
.customer360-dataset-summary--apic-sdwan {
    --customer360-dataset-accent-rgb: 124, 58, 237;
}

.customer360-dataset-body {
    padding-top: 0.1rem;
}

html[data-theme="dark"] .customer360-overview__summary,
html[data-theme="dark"] .customer360-accordion__summary,
html[data-theme="dark"] .customer360-dataset-summary {
    background-blend-mode: screen, normal;
}

html[data-theme="dark"] .customer360-overview__summary {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.12)),
        rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] .customer360-accordion,
html[data-theme="dark"] .customer360-dataset-accordion,
html[data-theme="dark"] .customer360-overview__panel {
    background-color: rgba(15, 23, 42, 0.88);
}

html[data-theme="dark"] .customer360-overview__panel {
    background: rgba(15, 23, 42, 0.88);
}

html[data-theme="dark"] .customer360-overview__panel:hover {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.14)),
        rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] .customer360-accordion {
    background:
        linear-gradient(180deg, rgba(var(--customer360-accent-rgb), 0.14), rgba(var(--customer360-accent-rgb), 0.06)),
        rgba(15, 23, 42, 0.88);
}

html[data-theme="dark"] .customer360-accordion__summary {
    background:
        linear-gradient(135deg, rgba(var(--customer360-accent-rgb), 0.2), rgba(var(--customer360-accent-rgb), 0.08)),
        rgba(15, 23, 42, 0.84);
}

html[data-theme="dark"] .customer360-dataset-accordion {
    background:
        linear-gradient(180deg, rgba(var(--customer360-dataset-accent-rgb), 0.16), rgba(var(--customer360-dataset-accent-rgb), 0.06)),
        rgba(15, 23, 42, 0.88);
}

html[data-theme="dark"] .customer360-accordion__summary-icon,
html[data-theme="dark"] .mini-dataset-collapse__summary-icon {
    background: rgba(var(--customer360-accent-rgb, 79, 168, 223), 0.18);
    color: rgb(var(--customer360-accent-rgb, 126, 198, 238));
    box-shadow: inset 0 0 0 1px rgba(var(--customer360-accent-rgb, 79, 168, 223), 0.14);
}

html[data-theme="dark"] .customer360-dataset-summary:hover,
html[data-theme="dark"] .customer360-accordion__summary:hover,
html[data-theme="dark"] .customer360-overview__summary:hover {
    filter: brightness(1.05);
}

html[data-theme="dark"] .customer360-accordion:hover {
    background:
        linear-gradient(180deg, rgba(var(--customer360-accent-rgb), 0.2), rgba(var(--customer360-accent-rgb), 0.08)),
        rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] .customer360-dataset-accordion:hover {
    background:
        linear-gradient(180deg, rgba(var(--customer360-dataset-accent-rgb), 0.22), rgba(var(--customer360-dataset-accent-rgb), 0.08)),
        rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] #customer360Results .table-shell--mini:hover,
html[data-theme="dark"] #customer360Results .detail-item--action:hover {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(14, 165, 233, 0.12)),
        rgba(15, 23, 42, 0.92);
}

html[data-theme="dark"] #peeringResults .content-card:hover {
    background:
        radial-gradient(circle at top right, rgba(47, 129, 255, 0.18), transparent 10rem),
        radial-gradient(circle at bottom left, rgba(21, 199, 168, 0.16), transparent 12rem),
        linear-gradient(180deg, rgba(18, 27, 39, 0.98), rgba(15, 23, 34, 0.96));
}

html[data-theme="dark"] #peeringResults .detail-item:hover {
    background:
        linear-gradient(135deg, rgba(47, 129, 255, 0.16), rgba(21, 199, 168, 0.1)),
        rgba(15, 23, 42, 0.88);
}

html[data-theme="dark"] #peeringResults .dataset-tab:hover:not(.active) {
    background: linear-gradient(135deg, rgba(47, 129, 255, 0.18), rgba(21, 199, 168, 0.12));
    border-color: rgba(96, 165, 250, 0.2);
    color: #eff6ff;
}

html[data-theme="dark"] .peering-dc-panel__button:hover,
html[data-theme="dark"] .peering-dc-panel__button:focus-visible {
    background: linear-gradient(135deg, rgba(47, 129, 255, 0.2), rgba(21, 199, 168, 0.14));
    border-color: rgba(96, 165, 250, 0.22);
}

.customer-tshoot-button {
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(47, 129, 255, 0.16), rgba(17, 184, 164, 0.18));
    color: var(--text);
    box-shadow: 0 10px 22px rgba(47, 129, 255, 0.12);
}

.mini-dataset-collapse__summary {
    position: relative;
    padding-right: 2.4rem;
    transition: background 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.mini-dataset-collapse__summary:hover {
    background: rgba(47, 129, 255, 0.07);
    transform: translateY(-1px);
}

.mini-dataset-collapse__summary::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.58rem;
    height: 0.58rem;
    border-right: 2px solid rgba(71, 85, 105, 0.72);
    border-bottom: 2px solid rgba(71, 85, 105, 0.72);
    transform: translateY(-65%) rotate(45deg);
    transition: transform 180ms ease;
}

.mini-dataset-collapse[open] > .mini-dataset-collapse__summary::after {
    transform: translateY(-35%) rotate(-135deg);
}

.donut-card__body--single {
    display: grid;
    align-items: start;
    justify-items: center;
    padding-top: 0.08rem;
}

.donut-chart {
    width: min(100%, 13.15rem);
}

.donut-chart__svg {
    width: min(100%, 13rem);
}

.donut-chart__slice-label {
    font-size: 0.46rem;
}

@media (max-width: 980px) {
    .customer360-overview__body {
        grid-template-columns: 1fr;
    }

    .ai-assistant__statusbar {
        grid-template-columns: 1fr;
    }
}

/* Professional login and donut reliability overrides */

html.login-page,
html:has(body.login-body),
body.login-body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.login-body {
    display: grid;
    place-items: start center;
    align-content: start;
    min-height: 100dvh;
    padding: clamp(1rem, 2vw, 1.4rem);
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at top left, rgba(13, 141, 255, 0.16), transparent 24rem),
        radial-gradient(circle at bottom right, rgba(17, 184, 164, 0.16), transparent 22rem),
        linear-gradient(135deg, #07111b 0%, #0d1723 48%, #111c2a 100%);
}

.login-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.login-atmosphere__glow,
.login-atmosphere__grid,
.login-atmosphere__shooting-stars,
.login-atmosphere__orbit,
.login-floating-facts {
    position: absolute;
    inset: 0;
}

.login-atmosphere__glow {
    filter: blur(28px);
    opacity: 0.7;
}

.login-atmosphere__glow--a {
    inset: 6% auto auto 4%;
    width: 32rem;
    height: 32rem;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.22), transparent 68%);
    animation: login-atmosphere-pulse 9s ease-in-out infinite;
}

.login-atmosphere__glow--b {
    inset: auto 8% 10% auto;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.2), transparent 66%);
    animation: login-atmosphere-pulse 10.5s ease-in-out infinite 1.2s;
}

.login-atmosphere__glow--c {
    inset: 28% auto auto 38%;
    width: 22rem;
    height: 22rem;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.14), transparent 70%);
    animation: login-atmosphere-pulse 12s ease-in-out infinite 2.1s;
}

.login-atmosphere__grid {
    opacity: 0.3;
    background-image:
        linear-gradient(90deg, rgba(125, 211, 252, 0.08) 1px, transparent 1px),
        linear-gradient(180deg, rgba(125, 211, 252, 0.06) 1px, transparent 1px);
    background-size: 2.6rem 2.6rem;
    mask-image: radial-gradient(circle at center, black 36%, transparent 86%);
}

.login-atmosphere__shooting-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.92;
}

.login-atmosphere__shooting-star {
    --login-shooting-top: 18%;
    --login-shooting-left: 10%;
    --login-shooting-delay: 0s;
    --login-shooting-duration: 9.4s;
    --login-shooting-length: 11rem;
    --login-shooting-size: 0.18rem;
    --login-shooting-angle: -20deg;
    position: absolute;
    top: var(--login-shooting-top);
    left: var(--login-shooting-left);
    width: var(--login-shooting-length);
    height: var(--login-shooting-size);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(224, 242, 254, 0.82) 34%, rgba(125, 211, 252, 0.98) 72%, rgba(255, 255, 255, 0.96));
    box-shadow:
        0 0 14px rgba(125, 211, 252, 0.28),
        0 0 28px rgba(59, 130, 246, 0.18);
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--login-shooting-angle)) scaleX(0.68);
    transform-origin: right center;
    filter: blur(0.02rem);
    animation: login-shooting-star-travel var(--login-shooting-duration) linear infinite;
    animation-delay: var(--login-shooting-delay);
}

.login-atmosphere__shooting-star::before,
.login-atmosphere__shooting-star::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
    pointer-events: none;
}

.login-atmosphere__shooting-star::before {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.98) 0%, rgba(186, 230, 253, 0.96) 42%, rgba(56, 189, 248, 0.12) 100%);
    box-shadow:
        0 0 0 0.16rem rgba(125, 211, 252, 0.1),
        0 0 1.4rem rgba(56, 189, 248, 0.36);
}

.login-atmosphere__shooting-star::after {
    width: 2.6rem;
    height: 0.08rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(125, 211, 252, 0), rgba(186, 230, 253, 0.92), rgba(255, 255, 255, 0.98));
    filter: blur(0.03rem);
}

.login-atmosphere__shooting-star--a {
    --login-shooting-top: 12%;
    --login-shooting-left: -12%;
    --login-shooting-delay: 0.6s;
    --login-shooting-duration: 10.8s;
    --login-shooting-length: 12rem;
    --login-shooting-angle: -16deg;
}

.login-atmosphere__shooting-star--b {
    --login-shooting-top: 24%;
    --login-shooting-left: 8%;
    --login-shooting-delay: 3.1s;
    --login-shooting-duration: 12.4s;
    --login-shooting-length: 9.5rem;
    --login-shooting-angle: -24deg;
}

.login-atmosphere__shooting-star--c {
    --login-shooting-top: 38%;
    --login-shooting-left: -18%;
    --login-shooting-delay: 6.2s;
    --login-shooting-duration: 11.6s;
    --login-shooting-length: 13.5rem;
    --login-shooting-angle: -12deg;
}

.login-atmosphere__shooting-star--d {
    --login-shooting-top: 18%;
    --login-shooting-left: 42%;
    --login-shooting-delay: 8.8s;
    --login-shooting-duration: 13.2s;
    --login-shooting-length: 8.8rem;
    --login-shooting-angle: -28deg;
}

.login-atmosphere__shooting-star--e {
    --login-shooting-top: 8%;
    --login-shooting-left: 54%;
    --login-shooting-delay: 11.4s;
    --login-shooting-duration: 14.6s;
    --login-shooting-length: 10.5rem;
    --login-shooting-angle: -18deg;
}

.login-atmosphere__orbit {
    position: absolute;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 24px 56px rgba(2, 6, 14, 0.34));
}

.login-atmosphere__orbit--primary {
    inset: 8% 14% auto auto;
    width: min(36rem, 42vw);
    opacity: 0.92;
}

.login-atmosphere__orbit--secondary {
    inset: auto auto 10% 7%;
    width: min(20rem, 24vw);
    opacity: 0.74;
    filter: drop-shadow(0 18px 38px rgba(2, 6, 14, 0.28));
}

.login-atmosphere__orbit--tertiary {
    inset: 16% auto auto 11%;
    width: min(14rem, 18vw);
    opacity: 0.62;
    filter: drop-shadow(0 14px 28px rgba(2, 6, 14, 0.24));
}

.login-atmosphere__orbit::before,
.login-atmosphere__orbit::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

.login-atmosphere__orbit::before {
    inset: 9%;
    border: 1px solid rgba(96, 165, 250, 0.12);
    border-top-color: rgba(96, 165, 250, 0.48);
    border-right-color: rgba(45, 212, 191, 0.36);
    transform: rotate(8deg);
}

.login-atmosphere__orbit::after {
    inset: 18%;
    border: 1px dashed rgba(244, 114, 182, 0.16);
    opacity: 0.55;
    transform: rotate(-18deg);
}

.login-atmosphere__orbit-ring {
    --login-orbit-tilt: 0deg;
    position: absolute;
    inset: auto;
    border-radius: 50%;
    border: 1px solid rgba(125, 211, 252, 0.18);
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.02), transparent 62%),
        conic-gradient(from 90deg, rgba(56, 189, 248, 0.02), rgba(56, 189, 248, 0.26), rgba(45, 212, 191, 0.1), rgba(251, 191, 36, 0.16), rgba(56, 189, 248, 0.02));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 0 20px rgba(56, 189, 248, 0.08);
    animation: login-atmosphere-orbit-spin 18s linear infinite;
}

.login-atmosphere__orbit-ring--outer {
    --login-orbit-tilt: -12deg;
    width: 100%;
    height: 100%;
    animation-duration: 22s;
}

.login-atmosphere__orbit-ring--mid {
    --login-orbit-tilt: 22deg;
    width: 74%;
    height: 74%;
    border-color: rgba(251, 191, 36, 0.18);
    animation-duration: 16s;
    animation-direction: reverse;
}

.login-atmosphere__orbit-ring--inner {
    --login-orbit-tilt: -30deg;
    width: 48%;
    height: 48%;
    border-color: rgba(168, 85, 247, 0.2);
    animation-duration: 11.5s;
}

.login-atmosphere__orbit-core {
    position: absolute;
    width: 22%;
    height: 22%;
    min-width: 4.8rem;
    min-height: 4.8rem;
    display: grid;
    place-items: center;
    gap: 0.2rem;
    border-radius: 50%;
    border: 1px solid rgba(125, 211, 252, 0.2);
    background:
        radial-gradient(circle at 30% 30%, rgba(125, 211, 252, 0.28), transparent 48%),
        linear-gradient(180deg, rgba(7, 17, 28, 0.92), rgba(10, 20, 32, 0.88));
    box-shadow:
        0 0 0 0.45rem rgba(56, 189, 248, 0.08),
        0 18px 40px rgba(2, 6, 14, 0.26);
    animation: login-atmosphere-core-pulse 7.4s ease-in-out infinite;
}

.login-atmosphere__orbit-core--mini {
    min-width: 3.45rem;
    min-height: 3.45rem;
    width: 26%;
    height: 26%;
}

.login-atmosphere__orbit-core--micro {
    min-width: 2.8rem;
    min-height: 2.8rem;
    width: 28%;
    height: 28%;
}

.login-atmosphere__orbit-core-mark {
    color: #eff6ff;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 0.16em;
}

.login-atmosphere__orbit-core-copy {
    color: rgba(191, 219, 254, 0.76);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.login-atmosphere__orbit-core--mini .login-atmosphere__orbit-core-mark {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
}

.login-atmosphere__orbit-core--mini .login-atmosphere__orbit-core-copy {
    font-size: 0.44rem;
}

.login-atmosphere__orbit-core--micro .login-atmosphere__orbit-core-mark {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
}

.login-atmosphere__orbit--secondary .login-atmosphere__orbit-ring--outer {
    animation-duration: 14.5s;
}

.login-atmosphere__orbit--secondary .login-atmosphere__orbit-ring--mid {
    animation-duration: 10.8s;
}

.login-atmosphere__orbit--tertiary .login-atmosphere__orbit-ring--outer {
    animation-duration: 9.4s;
}

.login-atmosphere__orbit--tertiary .login-atmosphere__orbit-ring--inner {
    animation-duration: 6.8s;
    animation-direction: reverse;
}

.login-atmosphere__packet {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.7rem;
    min-height: 1.25rem;
    padding: 0.1rem 0.48rem;
    border-radius: 999px;
    color: #eff6ff;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 22px rgba(14, 165, 233, 0.28);
}

.login-atmosphere__packet--sky {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.94), rgba(59, 130, 246, 0.96));
}

.login-atmosphere__packet--mint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.94), rgba(45, 212, 191, 0.96));
    animation-delay: 2.2s;
}

.login-atmosphere__packet--amber {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.96), rgba(251, 191, 36, 0.94));
    animation-delay: 1.4s;
    animation-duration: 10.6s;
}

.login-atmosphere__packet--rose {
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.94), rgba(236, 72, 153, 0.94));
    animation-delay: 4.4s;
    animation-duration: 11.2s;
}

.login-atmosphere__packet--violet {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.94), rgba(168, 85, 247, 0.96));
    animation-delay: 3s;
    animation-duration: 9.1s;
}

.login-atmosphere__packet--ocean {
    background: linear-gradient(135deg, rgba(15, 118, 110, 0.92), rgba(8, 145, 178, 0.96));
}

.login-atmosphere__packet--north {
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
}

.login-atmosphere__packet--south {
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%);
}

.login-atmosphere__packet--east {
    left: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.login-atmosphere__packet--west {
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

.login-atmosphere__packet--north-east {
    left: 84%;
    top: 16%;
    transform: translate(-50%, -50%);
}

.login-atmosphere__packet--south-west {
    left: 16%;
    top: 84%;
    transform: translate(-50%, -50%);
}

.login-floating-facts {
    position: absolute;
}

.login-floating-fact {
    --login-fact-x: 8%;
    --login-fact-y: 10%;
    --login-fact-drift-x: 10px;
    --login-fact-drift-y: 14px;
    --login-fact-rotate: 4deg;
    --login-fact-delay: 0s;
    position: absolute;
    left: var(--login-fact-x);
    top: var(--login-fact-y);
    width: min(16rem, 26vw);
    min-width: 13rem;
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid rgba(125, 211, 252, 0.16);
    background: linear-gradient(180deg, rgba(7, 17, 28, 0.84), rgba(10, 20, 32, 0.7));
    box-shadow:
        0 24px 56px rgba(2, 6, 14, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(14px);
    transform: translate(-50%, -50%) rotate(var(--login-fact-rotate));
    opacity: 0;
    visibility: hidden;
    animation: login-floating-card-drift 12s ease-in-out infinite;
    animation-delay: var(--login-fact-delay);
}

.login-floating-fact.is-ready {
    opacity: 0.94;
    visibility: visible;
}

.login-floating-fact::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--login-fact-glow, rgba(56, 189, 248, 0.2)), transparent 58%);
    opacity: 0.9;
    z-index: -1;
}

.login-floating-fact::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 0.95rem;
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 999px;
    background: var(--login-fact-dot, linear-gradient(135deg, #38bdf8, #22d3ee));
    box-shadow: 0 0 0 0.22rem var(--login-fact-ring, rgba(56, 189, 248, 0.14));
}

.login-floating-fact__eyebrow {
    display: inline-flex;
    margin-bottom: 0.38rem;
    padding-left: 1rem;
    color: var(--login-fact-text, #cbd5f5);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.login-floating-fact strong {
    display: block;
    margin: 0;
    color: rgba(241, 245, 249, 0.94);
    font-size: 0.83rem;
    line-height: 1.38;
}

.login-floating-fact[data-accent="sky"] {
    --login-fact-glow: rgba(56, 189, 248, 0.2);
    --login-fact-dot: linear-gradient(135deg, #38bdf8, #60a5fa);
    --login-fact-ring: rgba(56, 189, 248, 0.18);
    --login-fact-text: #bae6fd;
}

.login-floating-fact[data-accent="mint"] {
    --login-fact-glow: rgba(45, 212, 191, 0.18);
    --login-fact-dot: linear-gradient(135deg, #2dd4bf, #34d399);
    --login-fact-ring: rgba(45, 212, 191, 0.16);
    --login-fact-text: #a7f3d0;
}

.login-floating-fact[data-accent="amber"] {
    --login-fact-glow: rgba(251, 191, 36, 0.18);
    --login-fact-dot: linear-gradient(135deg, #fbbf24, #f59e0b);
    --login-fact-ring: rgba(251, 191, 36, 0.16);
    --login-fact-text: #fde68a;
}

.login-floating-fact[data-accent="rose"] {
    --login-fact-glow: rgba(251, 113, 133, 0.18);
    --login-fact-dot: linear-gradient(135deg, #fb7185, #f43f5e);
    --login-fact-ring: rgba(251, 113, 133, 0.16);
    --login-fact-text: #fecdd3;
}

.login-floating-fact[data-accent="violet"] {
    --login-fact-glow: rgba(168, 85, 247, 0.18);
    --login-fact-dot: linear-gradient(135deg, #a855f7, #8b5cf6);
    --login-fact-ring: rgba(168, 85, 247, 0.16);
    --login-fact-text: #ddd6fe;
}

.login-floating-fact[data-accent="ocean"] {
    --login-fact-glow: rgba(14, 165, 233, 0.16);
    --login-fact-dot: linear-gradient(135deg, #0891b2, #0ea5e9);
    --login-fact-ring: rgba(14, 165, 233, 0.16);
    --login-fact-text: #bfdbfe;
}

.login-shell--professional {
    position: relative;
    z-index: 1;
    width: min(100%, 78rem);
    grid-template-columns: minmax(21rem, 33rem) minmax(22rem, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.login-panel--professional,
.showcase-card--professional {
    position: relative;
    overflow: hidden;
    border-radius: 1.55rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.92)),
        var(--panel);
    box-shadow: 0 30px 80px rgba(3, 9, 18, 0.26);
}

html[data-theme="dark"] .login-panel--professional,
html[data-theme="dark"] .showcase-card--professional {
    background:
        linear-gradient(180deg, rgba(15, 24, 35, 0.96), rgba(10, 18, 27, 0.94)),
        var(--panel);
}

.login-panel--professional {
    padding: 2rem;
}

.login-panel__hero {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.login-subtitle {
    margin: 0.32rem 0 0;
    color: var(--text-soft);
    max-width: 34rem;
}

.network-fun {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: 1.15rem;
    border: 1px solid rgba(125, 211, 252, 0.18);
    background: linear-gradient(135deg, rgba(11, 25, 44, 0.06), rgba(17, 184, 164, 0.08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 16px 34px rgba(15, 23, 42, 0.1);
}

.network-fun::before,
.network-fun::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.network-fun::before {
    background-image:
        linear-gradient(90deg, rgba(125, 211, 252, 0.12) 1px, transparent 1px),
        linear-gradient(180deg, rgba(125, 211, 252, 0.09) 1px, transparent 1px);
    background-size: 1.2rem 1.2rem;
    opacity: 0.38;
}

.network-fun::after {
    background:
        radial-gradient(circle at 18% 24%, rgba(59, 130, 246, 0.2), transparent 22%),
        radial-gradient(circle at 82% 70%, rgba(16, 185, 129, 0.18), transparent 20%);
}

.network-fun__track {
    position: relative;
    min-height: 5rem;
    padding: 1rem 1rem 0.85rem;
}

.network-fun__track::before,
.network-fun__track::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    border-radius: 999px;
    pointer-events: none;
}

.network-fun__track::before {
    top: calc(50% - 1px);
    height: 2px;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.14), rgba(56, 189, 248, 0.82), rgba(16, 185, 129, 0.78), rgba(56, 189, 248, 0.14));
}

.network-fun__track::after {
    top: calc(50% - 0.42rem);
    height: 0.84rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.62) 0.08rem, transparent 0.1rem);
    background-size: 1.6rem 0.84rem;
    opacity: 0.34;
}

.network-fun__node {
    position: absolute;
    top: 50%;
    translate: -50% -50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.35rem;
    min-height: 2.2rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.22);
    background: rgba(255, 255, 255, 0.88);
    color: #0f172a;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
    animation: network-node-float 4.8s ease-in-out infinite;
}

.network-fun__node::before {
    content: "";
    width: 0.46rem;
    height: 0.46rem;
    margin-right: 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #38bdf8, #10b981);
    box-shadow: 0 0 0 0.16rem rgba(56, 189, 248, 0.16);
}

.network-fun__node--a { left: 12%; animation-delay: 0s; }
.network-fun__node--b { left: 36%; animation-delay: 0.6s; }
.network-fun__node--c { left: 64%; animation-delay: 1.1s; }
.network-fun__node--d { left: 88%; animation-delay: 1.7s; }

.network-fun__packet {
    position: absolute;
    top: 50%;
    left: 8%;
    translate: -50% -50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    min-height: 1.25rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.96), rgba(59, 130, 246, 0.96));
    color: #eff6ff;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 8px 16px rgba(14, 165, 233, 0.28);
    animation: network-packet-run 5.3s linear infinite;
}

.network-fun__packet--beta {
    animation-delay: 1.4s;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.96), rgba(20, 184, 166, 0.96));
}

.network-fun__packet--gamma {
    animation-delay: 2.7s;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.94), rgba(168, 85, 247, 0.96));
}

.network-fun__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.network-fun__chip,
.network-fun__caption {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: #1e293b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58);
}

.network-fun__chip::before,
.network-fun__caption::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.42rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0ea5e9, #10b981);
}

.network-fun--login {
    margin-top: 0.15rem;
}

.network-fun--workspace {
    flex: 0 1 16rem;
    min-width: 14rem;
    margin-left: 1rem;
    border-color: rgba(125, 211, 252, 0.22);
    background: linear-gradient(135deg, rgba(5, 14, 27, 0.9), rgba(7, 20, 36, 0.78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 30px rgba(3, 9, 18, 0.2);
}

.network-fun--workspace::before {
    opacity: 0.2;
}

.network-fun--workspace::after {
    background:
        radial-gradient(circle at 20% 26%, rgba(59, 130, 246, 0.32), transparent 24%),
        radial-gradient(circle at 80% 74%, rgba(20, 184, 166, 0.24), transparent 22%);
}

.network-fun--workspace .network-fun__track {
    min-height: 3.05rem;
    padding: 0.72rem 0.8rem 0.35rem;
}

.network-fun--workspace .network-fun__track::before,
.network-fun--workspace .network-fun__track::after {
    left: 0.8rem;
    right: 0.8rem;
}

.network-fun--workspace .network-fun__node {
    min-width: 3rem;
    min-height: 1.65rem;
    padding: 0.24rem 0.48rem;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(125, 211, 252, 0.18);
    color: #f8fbff;
    font-size: 0.58rem;
    box-shadow: 0 8px 16px rgba(2, 6, 14, 0.28);
}

.network-fun--workspace .network-fun__node::before {
    width: 0.34rem;
    height: 0.34rem;
    margin-right: 0.3rem;
}

.network-fun--workspace .network-fun__node--a { left: 16%; }
.network-fun--workspace .network-fun__node--b { left: 48%; }
.network-fun--workspace .network-fun__node--c { left: 82%; }

.network-fun--workspace .network-fun__packet {
    min-width: 1.9rem;
    min-height: 1rem;
    font-size: 0.52rem;
    box-shadow: 0 6px 14px rgba(14, 165, 233, 0.22);
}

.network-fun--workspace .network-fun__caption {
    margin: 0 0.8rem 0.62rem;
    background: rgba(255, 255, 255, 0.1);
    color: #eff6ff;
}

.network-fun--workspace .network-fun__caption::before {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

html[data-theme="dark"] .network-fun--login {
    background: linear-gradient(135deg, rgba(6, 14, 24, 0.9), rgba(8, 24, 33, 0.78));
    border-color: rgba(125, 211, 252, 0.18);
}

html[data-theme="dark"] .network-fun__node {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(125, 211, 252, 0.18);
    color: #eff6ff;
}

html[data-theme="dark"] .network-fun__chip,
html[data-theme="dark"] .network-fun__caption {
    background: rgba(15, 23, 42, 0.84);
    color: #e2e8f0;
}

@keyframes network-packet-run {
    0% {
        left: 6%;
        opacity: 0;
        scale: 0.85;
    }
    8% {
        opacity: 1;
        scale: 1;
    }
    88% {
        opacity: 1;
        scale: 1;
    }
    100% {
        left: 94%;
        opacity: 0;
        scale: 0.85;
    }
}

@keyframes network-node-float {
    0%,
    100% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, calc(-50% - 0.16rem));
    }
}

@keyframes login-atmosphere-orbit-spin {
    from {
        transform: rotate(var(--login-orbit-tilt));
    }
    to {
        transform: rotate(calc(var(--login-orbit-tilt) + 360deg));
    }
}

@keyframes login-floating-card-drift {
    0%,
    100% {
        transform: translate(-50%, -50%) rotate(var(--login-fact-rotate));
    }
    50% {
        transform: translate(calc(-50% + var(--login-fact-drift-x)), calc(-50% + var(--login-fact-drift-y))) rotate(calc(var(--login-fact-rotate) + 1.6deg));
    }
}

@keyframes login-atmosphere-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.52;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.8;
    }
}

@keyframes login-atmosphere-core-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0.45rem rgba(56, 189, 248, 0.08),
            0 18px 40px rgba(2, 6, 14, 0.26);
    }
    50% {
        transform: scale(1.06);
        box-shadow:
            0 0 0 0.8rem rgba(56, 189, 248, 0.1),
            0 22px 44px rgba(2, 6, 14, 0.3);
    }
}

@keyframes login-shooting-star-travel {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(var(--login-shooting-angle)) scaleX(0.68);
    }
    4% {
        opacity: 0;
    }
    9% {
        opacity: 0.94;
        transform: translate3d(4vw, 1.1vh, 0) rotate(var(--login-shooting-angle)) scaleX(1);
    }
    24% {
        opacity: 0.96;
        transform: translate3d(38vw, 9vh, 0) rotate(var(--login-shooting-angle)) scaleX(1);
    }
    36% {
        opacity: 0;
        transform: translate3d(56vw, 13vh, 0) rotate(var(--login-shooting-angle)) scaleX(0.82);
    }
    100% {
        opacity: 0;
        transform: translate3d(56vw, 13vh, 0) rotate(var(--login-shooting-angle)) scaleX(0.82);
    }
}

.login-kickers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.login-badge {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.32rem 0.78rem;
    border-radius: 999px;
    background: rgba(13, 141, 255, 0.12);
    border: 1px solid rgba(13, 141, 255, 0.18);
    color: var(--brand);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.login-badge--muted {
    background: rgba(15, 23, 42, 0.06);
    border-color: rgba(15, 23, 42, 0.08);
    color: var(--text-soft);
}

.login-form--professional {
    gap: 0.95rem;
}

.login-input-shell {
    position: relative;
}

.launcher-password-shell input {
    padding-right: 6.8rem;
}

.launcher-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    translate: 0 -50%;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-height: 2.1rem;
    padding: 0.22rem 0.56rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.88);
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.launcher-password-toggle:hover,
.launcher-password-toggle:focus-visible {
    border-color: rgba(14, 165, 233, 0.34);
    background: rgba(240, 249, 255, 0.96);
    color: var(--text);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 0 0 3px rgba(14, 165, 233, 0.12);
}

html[data-theme="dark"] .launcher-password-toggle {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(71, 85, 105, 0.42);
    color: #dbeafe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .launcher-password-toggle:hover,
html[data-theme="dark"] .launcher-password-toggle:focus-visible {
    border-color: rgba(56, 189, 248, 0.42);
    background: rgba(8, 47, 73, 0.92);
    color: #e0f2fe;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.launcher-password-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
}

.launcher-password-toggle__icon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-input-shell--readonly {
    display: flex;
    align-items: center;
}

.login-locked-value {
    width: 100%;
    min-height: 3.2rem;
    display: flex;
    align-items: center;
    padding: 0.9rem 6.3rem 0.9rem 1rem;
    border-radius: 0.95rem;
    border: 1px solid var(--panel-border);
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.96), rgba(240, 246, 255, 0.92));
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

html[data-theme="dark"] .login-locked-value {
    background: linear-gradient(180deg, rgba(18, 28, 41, 0.96), rgba(14, 22, 32, 0.92));
}

.login-locked-value:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.login-input-shell input[readonly] {
    padding-right: 6.3rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, rgba(248, 250, 255, 0.96), rgba(240, 246, 255, 0.92));
    cursor: default;
}

html[data-theme="dark"] .login-input-shell input[readonly] {
    background: linear-gradient(180deg, rgba(18, 28, 41, 0.96), rgba(14, 22, 32, 0.92));
}

.login-input-shell__meta {
    position: absolute;
    top: 50%;
    right: 0.8rem;
    translate: 0 -50%;
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.58rem;
    border-radius: 999px;
    background: rgba(17, 184, 164, 0.12);
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.login-system-user {
    gap: 0.28rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(13, 141, 255, 0.08), rgba(17, 184, 164, 0.06));
    border: 1px solid rgba(13, 141, 255, 0.12);
}

.login-progress {
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: 60;
    display: grid;
    gap: 0.85rem;
    width: min(92vw, 30rem);
    max-height: min(88vh, 42rem);
    overflow: auto;
    padding: 1.2rem 1.1rem 1.08rem;
    border-radius: 1.45rem;
    border: 1px solid rgba(13, 141, 255, 0.14);
    background: linear-gradient(180deg, rgba(244, 248, 255, 0.98), rgba(236, 245, 255, 0.94));
    box-shadow: 0 36px 80px -34px rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.login-progress::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at top, rgba(13, 141, 255, 0.12), transparent 24rem),
        linear-gradient(180deg, rgba(7, 17, 27, 0.24), rgba(7, 17, 27, 0.52));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

html[data-theme="dark"] .login-progress {
    background: linear-gradient(180deg, rgba(12, 20, 30, 0.98), rgba(14, 25, 38, 0.95));
    border-color: rgba(88, 166, 255, 0.24);
    box-shadow: 0 22px 48px -32px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .login-progress::before {
    background:
        radial-gradient(circle at top, rgba(56, 189, 248, 0.12), transparent 24rem),
        linear-gradient(180deg, rgba(2, 6, 12, 0.38), rgba(2, 6, 12, 0.68));
}

.login-progress__hero {
    display: grid;
    justify-items: center;
    gap: 1rem;
    text-align: center;
}

.login-progress__spinner-wrap {
    position: relative;
    display: grid;
    place-items: center;
    width: 8.75rem;
    height: 8.75rem;
    margin-top: 0.1rem;
    isolation: isolate;
    filter: drop-shadow(0 16px 26px rgba(13, 141, 255, 0.18));
    animation: login-progress-float 3.2s ease-in-out infinite;
}

.login-progress__spinner-wrap::before {
    content: "";
    position: absolute;
    inset: 0.7rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(13, 141, 255, 0.12) 0%, rgba(13, 141, 255, 0) 72%);
    z-index: 0;
}

.login-progress__spinner-orbit {
    position: absolute;
    border-radius: 999px;
    border-style: solid;
    border-color: rgba(13, 141, 255, 0.18);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.login-progress__spinner-orbit--outer {
    inset: 0;
    border-width: 0.3rem;
    border-top-color: rgba(13, 141, 255, 0.94);
    border-right-color: rgba(17, 184, 164, 0.82);
    animation-name: login-progress-spin;
    animation-duration: 1.05s;
}

.login-progress__spinner-orbit--inner {
    inset: 0.95rem;
    border-width: 0.2rem;
    border-left-color: rgba(17, 184, 164, 0.94);
    border-bottom-color: rgba(13, 141, 255, 0.78);
    animation-name: login-progress-spin-reverse;
    animation-duration: 1.45s;
}

.login-progress__spinner-core {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    gap: 0.28rem;
    width: 5.55rem;
    height: 5.55rem;
    padding: 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(13, 141, 255, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 245, 255, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

html[data-theme="dark"] .login-progress__spinner-core {
    border-color: rgba(88, 166, 255, 0.24);
    background: linear-gradient(180deg, rgba(18, 31, 47, 0.98), rgba(12, 22, 34, 0.96));
}

.login-progress__spinner-step {
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.login-progress__spinner-title {
    color: var(--text);
    font-size: 0.76rem;
    line-height: 1.2;
    text-align: center;
}

.login-progress__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
}

.login-progress__head h3 {
    margin: 0.1rem 0 0.24rem;
    font-size: 1rem;
    line-height: 1.2;
}

.login-progress__head .muted-copy {
    margin: 0;
}

.login-progress__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.34rem 0.66rem;
    border-radius: 999px;
    background: rgba(13, 141, 255, 0.12);
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.login-progress__steps {
    display: grid;
    gap: 0.58rem;
    max-height: min(42vh, 18rem);
    overflow: auto;
    padding-right: 0.14rem;
}

.login-progress__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.68rem;
    padding: 0.72rem 0.8rem;
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(148, 163, 184, 0.12);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

html[data-theme="dark"] .login-progress__step {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(148, 163, 184, 0.16);
}

.login-progress__step.is-active {
    border-color: rgba(13, 141, 255, 0.28);
    background: rgba(13, 141, 255, 0.08);
    box-shadow: 0 10px 30px -24px rgba(13, 141, 255, 0.55);
    transform: translateY(-1px);
}

.login-progress__step.is-done {
    border-color: rgba(17, 184, 164, 0.22);
    background: rgba(17, 184, 164, 0.08);
}

.login-progress__status {
    position: relative;
    display: inline-flex;
    width: 0.95rem;
    height: 0.95rem;
    margin-top: 0.18rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.3);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.55);
}

.login-progress__step.is-active .login-progress__status {
    background: rgba(13, 141, 255, 0.92);
    box-shadow: 0 0 0 4px rgba(13, 141, 255, 0.16);
}

.login-progress__step.is-done .login-progress__status {
    background: rgba(17, 184, 164, 0.96);
    box-shadow: 0 0 0 4px rgba(17, 184, 164, 0.14);
}

.login-progress__step.is-done .login-progress__status::after {
    content: "";
    position: absolute;
    left: 0.27rem;
    top: 0.16rem;
    width: 0.24rem;
    height: 0.42rem;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(40deg);
}

.login-progress__copy {
    min-width: 0;
}

.login-progress__copy strong {
    display: block;
    font-size: 0.88rem;
    line-height: 1.2;
}

.login-progress__copy small {
    display: block;
    margin-top: 0.18rem;
    color: var(--text-soft);
    line-height: 1.4;
}

.login-submit-button[disabled] {
    opacity: 0.94;
    cursor: wait;
}

.login-is-submitting .login-showcase {
    opacity: 0.72;
}

body.login-is-submitting {
    overflow: hidden;
}

.login-is-submitting .login-shell--professional {
    pointer-events: none;
}

.login-is-submitting .login-progress {
    pointer-events: auto;
}

@keyframes login-progress-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes login-progress-spin-reverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes login-progress-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-0.26rem);
    }
}

@keyframes login-progress-slide {
    0% {
        transform: translateX(-28%);
    }
    50% {
        transform: translateX(116%);
    }
    100% {
        transform: translateX(210%);
    }
}

.login-footnote {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.login-footnote p {
    margin: 0;
    color: var(--text-soft);
}

.login-showcase {
    display: grid;
    align-self: start;
}

.showcase-card--professional {
    padding: 2rem;
}

.showcase-card--professional h2 {
    margin: 0.2rem 0 0.45rem;
    font-size: clamp(1.4rem, 2vw, 1.9rem);
    line-height: 1.12;
}

.login-showcase__grid {
    display: grid;
    gap: 0.8rem;
    margin-top: 1.25rem;
}

.login-showcase__card {
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.14));
}

html[data-theme="dark"] .login-showcase__card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.login-showcase__eyebrow {
    display: inline-block;
    margin-bottom: 0.42rem;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.login-showcase__card strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 1rem;
    line-height: 1.35;
}

.login-showcase__card p {
    margin: 0;
}

.donut-chart {
    overflow: visible;
}

.donut-chart__svg {
    overflow: visible;
}

.donut-chart__segment {
    transition: translate 160ms ease, stroke-width 160ms ease, filter 160ms ease, opacity 160ms ease;
}

@media (max-width: 1080px) {
    .login-shell--professional {
        grid-template-columns: 1fr;
    }

    .login-atmosphere__orbit--primary {
        inset: 4% 5% auto auto;
        width: min(25rem, 44vw);
    }

    .login-atmosphere__orbit--secondary {
        inset: auto auto 8% 4%;
        width: min(15rem, 24vw);
    }

    .login-atmosphere__orbit--tertiary {
        inset: 10% auto auto 6%;
        width: min(10rem, 14vw);
    }

    .login-atmosphere__shooting-star--d,
    .login-atmosphere__shooting-star--e {
        display: none;
    }

    .login-floating-fact {
        width: min(14rem, 30vw);
        min-width: 11.5rem;
    }

    .network-fun--workspace {
        display: none;
    }
}

@media (max-width: 640px) {
    .login-body {
        padding: 1rem;
    }

    .login-panel--professional,
    .showcase-card--professional {
        padding: 1.25rem;
    }

    .login-locked-value,
    .login-input-shell input[readonly] {
        padding-right: 5.4rem;
    }

    .network-fun__chips {
        gap: 0.35rem;
    }

    .network-fun__chip {
        width: 100%;
        justify-content: center;
    }

    .login-atmosphere__orbit,
    .login-atmosphere__shooting-stars,
    .login-floating-facts {
        display: none;
    }

    .login-progress {
        width: min(calc(100vw - 1.2rem), 30rem);
        max-height: min(90vh, 40rem);
        padding: 1rem 0.95rem 0.95rem;
    }
}

@media (max-height: 860px) {
    .login-panel--professional,
    .showcase-card--professional {
        padding: 1.5rem;
    }

    .login-panel__hero {
        gap: 0.8rem;
        margin-bottom: 1rem;
    }

    .network-fun__track {
        min-height: 4.35rem;
        padding-bottom: 0.7rem;
    }

    .network-fun__chips {
        gap: 0.35rem;
        padding-top: 0;
    }

    .network-fun__chip {
        font-size: 0.64rem;
    }

    .login-showcase__grid {
        gap: 0.65rem;
        margin-top: 1rem;
    }

    .login-showcase__card {
        padding: 0.88rem 0.95rem;
    }

    .login-progress__spinner-wrap {
        width: 7.8rem;
        height: 7.8rem;
    }

    .login-progress__spinner-core {
        width: 4.95rem;
        height: 4.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-atmosphere__glow,
    .login-atmosphere__shooting-star,
    .login-atmosphere__orbit-ring,
    .login-atmosphere__orbit-core,
    .login-atmosphere__packet,
    .login-floating-fact,
    .network-fun__node,
    .network-fun__packet {
        animation: none;
    }
}

/* Final footer layout overrides */

.app-shell,
.workspace {
    height: 100dvh;
    min-height: 100dvh;
}

.workspace {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.content-stage {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
}

.workspace-footer {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    align-self: end;
    z-index: 24;
}

@media (max-width: 960px) {
    .app-shell,
    .workspace {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .content-stage {
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* Final donut stability overrides */

.donut-card,
.donut-card__body,
.donut-card__body--single,
.donut-chart,
.donut-chart__svg {
    overflow: visible !important;
}

.donut-chart {
    display: grid;
    place-items: center;
    isolation: isolate;
}

.donut-chart__svg {
    display: block;
}

.donut-chart__segment {
    translate: none !important;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
}

.donut-chart__segment:hover,
.donut-chart__segment.is-active {
    translate: none !important;
    stroke-width: 19;
    filter: drop-shadow(0 4px 10px rgba(13, 141, 255, 0.18));
}

/* Final popup and workspace interaction overrides */

.donut-glossary-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
    padding: 0.4rem 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.95rem;
    background: rgba(255, 255, 255, 0.62);
    white-space: nowrap;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
}

html[data-theme="dark"] .donut-glossary-trigger {
    background: rgba(15, 23, 42, 0.72);
}

.donut-glossary-trigger__button {
    font-weight: 700;
    flex: 0 0 auto;
}

.donut-glossary-trigger__action {
    flex: 0 0 auto;
    min-width: auto;
    padding-inline: 0.68rem;
}

.popup-window {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(14px);
}

.popup-window.hidden {
    display: none;
}

.popup-window__dialog {
    position: relative;
    width: min(940px, 100%);
    max-height: min(88vh, 960px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border-radius: 1.35rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
    overflow: hidden;
}

.device-command-popup-window .popup-window__dialog {
    width: min(92vw, 1480px);
    min-width: min(1040px, 100%);
    min-height: min(760px, 92vh);
    max-height: 94vh;
    resize: both;
    overflow: hidden;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.device-command-popup-window--running .popup-window__dialog {
    border-color: rgba(248, 113, 113, 0.78);
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.18), 0 24px 60px rgba(127, 29, 29, 0.28);
    animation: device-command-popup-alert 1.1s ease-in-out infinite;
}

.device-command-popup-window--finished .popup-window__dialog {
    border-color: rgba(74, 222, 128, 0.78);
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.14), 0 24px 60px rgba(20, 83, 45, 0.22);
}

.device-command-popup-window--attention .popup-window__dialog {
    border-color: rgba(251, 191, 36, 0.72);
    box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.12), 0 24px 60px rgba(120, 53, 15, 0.2);
}

@keyframes device-command-popup-alert {
    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.12), 0 24px 60px rgba(127, 29, 29, 0.2);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.22), 0 26px 64px rgba(153, 27, 27, 0.3);
    }
}

html[data-theme="dark"] .popup-window__dialog {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.95));
}

.popup-window--wide .popup-window__dialog {
    width: min(1220px, 100%);
}

.popup-window--right {
    place-items: stretch end;
    padding: 0;
}

.popup-window--right .popup-window__dialog {
    width: min(38rem, calc(100vw - 0.75rem));
    height: 100vh;
    max-height: 100vh;
    border-radius: 1.8rem 0 0 1.8rem;
    border-right: 0;
    animation: drawerIn 180ms ease;
}

.popup-window--right .popup-window__head {
    padding: 1rem 1.15rem 0.95rem;
}

.popup-window--right .popup-window__body {
    padding: 1rem 1.15rem 1.25rem;
}

.popup-window__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
}

.popup-window__head-main {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.popup-window__head-actions {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
}

.popup-window__body {
    min-height: 0;
    overflow: auto;
    padding: 1rem 1.1rem 1.2rem;
}

.popup-window__scroll-nav {
    position: absolute;
    right: 1.35rem;
    bottom: 1.35rem;
    z-index: 12;
    display: grid;
    gap: 0.45rem;
    padding: 0.42rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(12px);
}

.popup-window__scroll-nav.hidden {
    display: none;
}

.popup-window__scroll-button {
    width: 2.65rem;
    height: 2.65rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(79, 70, 229, 0.24);
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(145deg, #2563eb, #7c3aed);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.22);
    cursor: pointer;
}

.popup-window__scroll-button svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.popup-window__scroll-button:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.popup-window__scroll-button:disabled {
    opacity: 0.34;
    cursor: default;
    box-shadow: none;
}

html[data-theme="dark"] .popup-window__scroll-nav {
    border-color: rgba(139, 148, 158, 0.28);
    background: rgba(13, 17, 23, 0.94);
    box-shadow: 0 14px 34px rgba(1, 4, 9, 0.52);
}

.popup-window__head .icon-button {
    font-size: 1.7rem;
    line-height: 1;
}

.popup-window--jira-confirmation .popup-window__dialog {
    width: min(58rem, calc(100vw - 2rem));
    max-height: min(90dvh, 58rem);
    border-color: rgba(99, 102, 241, 0.32);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.08);
}

.popup-window--jira-confirmation .popup-window__head {
    color: #ffffff;
    border-bottom-color: rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(circle at 84% 10%, rgba(129, 140, 248, 0.4), transparent 34%),
        linear-gradient(135deg, #0f3d91 0%, #245fc7 52%, #5145cd 100%);
}

.popup-window--jira-confirmation .popup-window__head .eyebrow,
.popup-window--jira-confirmation .popup-window__head .muted-copy {
    color: rgba(255, 255, 255, 0.76);
}

.popup-window--jira-confirmation .popup-window__head .icon-button {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(15, 23, 42, 0.18);
}

.popup-window--jira-confirmation .popup-window__body {
    padding: 0;
    background: linear-gradient(180deg, rgba(238, 242, 255, 0.58), rgba(248, 250, 252, 0.96));
}

.jira-confirmation {
    display: grid;
    gap: 1rem;
    padding: 1.1rem;
    color: var(--text);
}

.jira-confirmation__hero {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.07));
}

.jira-confirmation__hero > div {
    min-width: 0;
}

.jira-confirmation__hero h3,
.jira-confirmation__hero p,
.jira-confirmation__section-head h4,
.jira-confirmation__section-head p,
.jira-confirmation__notice p,
.jira-confirmation__actions small {
    margin: 0;
}

.jira-confirmation__hero h3 {
    margin-top: 0.14rem;
    font-size: clamp(1.18rem, 2vw, 1.48rem);
}

.jira-confirmation__hero > div > p:last-child {
    margin-top: 0.35rem;
    color: var(--text-soft);
    line-height: 1.5;
}

.jira-confirmation__brand {
    width: 3.6rem;
    height: 3.6rem;
    flex: 0 0 3.6rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    color: #ffffff;
    background: linear-gradient(145deg, #1677ff, #4f46e5);
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.28);
}

.jira-confirmation__brand .vendor-mark,
.jira-confirmation__brand svg {
    width: 1.9rem;
    height: 1.9rem;
}

.jira-confirmation__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.jira-confirmation__metrics article {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.95rem;
    background: var(--panel);
}

.jira-confirmation__metrics article > span {
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 0.7rem;
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.12);
}

.jira-confirmation__metrics svg,
.jira-confirmation__notice > span svg,
.jira-confirmation__detail-icon svg,
.jira-confirmation__actions button svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jira-confirmation__metrics small,
.jira-confirmation__detail small,
.jira-confirmation__actions small {
    color: var(--text-soft);
}

.jira-confirmation__metrics strong {
    font-size: 1.12rem;
}

.jira-confirmation__notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.88rem 1rem;
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: 0.95rem;
    color: #92400e;
    background: rgba(245, 158, 11, 0.1);
}

.jira-confirmation__notice > span {
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    display: grid;
    place-items: center;
    border-radius: 0.62rem;
    background: rgba(245, 158, 11, 0.14);
}

.jira-confirmation__notice p {
    margin-top: 0.2rem;
    color: inherit;
    opacity: 0.88;
    line-height: 1.45;
}

.jira-confirmation__section {
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: 1rem;
    background: var(--panel);
}

.jira-confirmation__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.95rem;
    border-bottom: 1px solid var(--panel-border);
    background: rgba(99, 102, 241, 0.055);
}

.jira-confirmation__section-head h4 {
    margin-top: 0.1rem;
}

.jira-confirmation__section-head > span {
    flex: 0 0 auto;
    padding: 0.34rem 0.58rem;
    border-radius: 999px;
    color: #4338ca;
    background: rgba(99, 102, 241, 0.12);
    font-size: 0.75rem;
    font-weight: 800;
}

.jira-confirmation__details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.jira-confirmation__detail {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.82rem 0.9rem;
    border-bottom: 1px solid var(--panel-border);
}

.jira-confirmation__detail:nth-child(odd) {
    border-right: 1px solid var(--panel-border);
}

.jira-confirmation__detail.is-inactive {
    background: rgba(148, 163, 184, 0.045);
}

.jira-confirmation__detail > div {
    min-width: 0;
    display: grid;
    gap: 0.24rem;
}

.jira-confirmation__detail-icon {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 0.62rem;
    color: #4f46e5;
    background: rgba(99, 102, 241, 0.1);
}

.jira-confirmation__detail small {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.jira-confirmation__detail span:not(.jira-confirmation__detail-icon) {
    overflow-wrap: anywhere;
    line-height: 1.4;
}

.jira-confirmation__unchanged {
    color: var(--text-soft);
    font-style: italic;
}

.jira-confirmation__long-value {
    white-space: pre-wrap;
}

.jira-confirmation__chips,
.jira-confirmation__issue-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.jira-confirmation__chips span,
.jira-confirmation__issue-list code {
    padding: 0.32rem 0.52rem;
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 0.55rem;
    color: #1d4ed8;
    background: rgba(59, 130, 246, 0.08);
    font-size: 0.78rem;
    font-weight: 750;
}

.jira-confirmation__object {
    display: grid;
    gap: 0.35rem;
    margin: 0;
}

.jira-confirmation__object > div {
    display: grid;
    grid-template-columns: minmax(5rem, 0.65fr) minmax(0, 1.35fr);
    gap: 0.5rem;
}

.jira-confirmation__object dt,
.jira-confirmation__object dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.jira-confirmation__object dt {
    color: var(--text-soft);
}

.jira-confirmation__issue-list {
    max-height: 8rem;
    overflow: auto;
    padding: 0.85rem 0.95rem;
}

.jira-confirmation__actions {
    position: sticky;
    bottom: -1.1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 -1.1rem -1.1rem;
    padding: 0.95rem 1.1rem;
    border-top: 1px solid var(--panel-border);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.08);
    backdrop-filter: blur(12px);
}

.jira-confirmation__actions > div:first-child {
    display: grid;
    gap: 0.2rem;
}

.jira-confirmation__action-buttons {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.jira-confirmation__actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    min-height: 2.8rem;
}

.jira-confirmation__submit {
    min-width: 10.8rem;
}

html[data-theme="dark"] .popup-window--jira-confirmation .popup-window__body {
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.98));
}

html[data-theme="dark"] .jira-confirmation__notice {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.09);
}

html[data-theme="dark"] .jira-confirmation__section-head > span,
html[data-theme="dark"] .jira-confirmation__chips span,
html[data-theme="dark"] .jira-confirmation__issue-list code {
    color: #a5b4fc;
}

@media (max-width: 720px) {
    .popup-window--jira-confirmation {
        padding: 0.55rem;
    }

    .popup-window--jira-confirmation .popup-window__dialog {
        width: 100%;
        max-height: 96dvh;
    }

    .jira-confirmation__metrics,
    .jira-confirmation__details {
        grid-template-columns: 1fr;
    }

    .jira-confirmation__detail:nth-child(odd) {
        border-right: 0;
    }

    .jira-confirmation__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .jira-confirmation__action-buttons,
    .jira-confirmation__action-buttons button {
        width: 100%;
    }
}

.customer360-ping-panel__input {
    width: 100%;
    min-height: 7rem;
    resize: vertical;
    padding: 0.9rem 1rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.92);
    color: inherit;
    font: inherit;
}

html[data-theme="dark"] .customer360-ping-panel__input {
    background: rgba(15, 23, 42, 0.78);
}

.customer360-landing .summary-cards {
    margin-top: 1rem;
}

.customer360-popular-rail {
    margin-top: 1rem;
}

.customer360-popular-rail__track {
    display: flex;
    gap: 0.65rem;
    min-width: 0;
    margin-top: 0;
    padding: 0.15rem 0.15rem 0.55rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}

.customer360-popular-card {
    flex: 0 0 clamp(15.5rem, 18vw, 19rem);
    min-width: 15.5rem;
    scroll-snap-align: start;
}

.customer360-popular-card__open {
    width: 100%;
    justify-content: center;
    gap: 0.45rem;
}

.customer360-popular-card__open .toolbar-button__icon {
    display: inline-grid;
    place-items: center;
}

.peering-dc-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.peering-dc-panel__button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.8rem;
}

#customer360Results .table-shell--mini,
#customer360Results .detail-item--action,
#peeringResults .content-card,
#peeringResults .detail-item,
#peeringResults .dataset-tab,
.peering-dc-panel__button {
    transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#customer360Results .table-shell--mini:hover,
#customer360Results .detail-item--action:hover {
    background:
        linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(14, 165, 233, 0.08)),
        rgba(255, 255, 255, 0.96);
    border-color: rgba(37, 99, 235, 0.22);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
}

#peeringResults .content-card:hover {
    background:
        radial-gradient(circle at top right, rgba(47, 129, 255, 0.12), transparent 10rem),
        radial-gradient(circle at bottom left, rgba(21, 199, 168, 0.1), transparent 12rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 252, 0.96));
    border-color: rgba(47, 129, 255, 0.18);
    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.1);
}

#peeringResults .detail-item:hover {
    background:
        linear-gradient(135deg, rgba(47, 129, 255, 0.08), rgba(21, 199, 168, 0.08)),
        rgba(255, 255, 255, 0.94);
    border-color: rgba(47, 129, 255, 0.16);
}

#peeringResults .dataset-tab:hover:not(.active) {
    background: linear-gradient(135deg, rgba(47, 129, 255, 0.12), rgba(21, 199, 168, 0.08));
    border-color: rgba(47, 129, 255, 0.18);
    color: var(--text);
}

.peering-customer-shell {
    display: grid;
    gap: 0.72rem;
}

.peering-customer-shell__header {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.95fr);
    gap: 0.82rem 1rem;
    align-items: start;
}

.peering-customer-shell__identity {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.peering-customer-shell__identity h3 {
    margin: 0;
    font-size: clamp(1.55rem, 2vw, 2.1rem);
    line-height: 1.05;
}

.peering-customer-shell__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.peering-customer-shell__summary {
    max-width: 48rem;
}

.peering-customer-shell__actions {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(12rem, 0.9fr);
    gap: 0.68rem;
    min-width: 0;
    align-items: start;
}

.peering-customer-shell__action-group {
    display: grid;
    gap: 0.42rem;
    padding: 0.72rem 0.78rem;
    border-radius: 16px;
    border: 1px solid rgba(11, 93, 143, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.94));
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.peering-customer-shell__group-title {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.peering-customer-shell__action-row,
.peering-customer-shell__view-toggle {
    display: grid;
    gap: 0.55rem;
}

.peering-customer-shell__action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.peering-customer-shell__view-toggle {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.peering-customer-shell__action-group--view {
    align-content: start;
}

.peering-customer-shell__button {
    width: 100%;
    min-height: 2.45rem;
    justify-content: center;
    padding: 0.58rem 0.8rem;
    font-size: 0.95rem;
}

.peering-customer-shell__button--primary {
    box-shadow: 0 14px 28px rgba(11, 93, 143, 0.18);
}

html[data-theme="dark"] .peering-customer-shell__action-group {
    border-color: rgba(125, 211, 252, 0.16);
    background:
        linear-gradient(180deg, rgba(17, 29, 43, 0.96), rgba(12, 23, 35, 0.94));
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.22);
}

.peering-dc-panel__button:hover,
.peering-dc-panel__button:focus-visible {
    background: linear-gradient(135deg, rgba(47, 129, 255, 0.14), rgba(21, 199, 168, 0.1));
    border-color: rgba(47, 129, 255, 0.22);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    transform: translateY(-1px);
}

.peering-popup__tabs {
    margin: 1rem 0 0.9rem;
}

.peering-popup__table-shell {
    margin-top: 0.35rem;
}

.diagram-card__actions {
    flex-shrink: 0;
}

@media (max-width: 1280px) {
    .peering-customer-shell__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1100px) {
    .peering-customer-shell__header {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .peering-customer-shell__action-row,
    .peering-customer-shell__view-toggle {
        grid-template-columns: minmax(0, 1fr);
    }
}

.peering-graph-popup {
    display: grid;
    gap: 0.95rem;
}

.peering-graph-popup__cards {
    align-items: stretch;
}

.peering-graph-popup__head {
    gap: 1rem;
}

.peering-graph-popup-window .popup-window__head {
    align-items: flex-start;
    gap: 0.85rem 1rem;
}

.peering-graph-popup-window .popup-window__head-main {
    flex: 0 0 auto;
}

.peering-graph-popup__header-actions {
    display: grid;
    gap: 0.45rem;
    justify-items: end;
    width: 100%;
}

.peering-graph-popup__header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem 0.8rem;
    width: 100%;
}

.peering-graph-popup__header-row .peering-graph-popup__diagram-actions,
.peering-graph-popup__header-row .peering-graph-popup__annotation-tools,
.peering-graph-popup__header-row .peering-graph-popup__annotation-colors {
    width: auto;
}

.peering-graph-popup__toolbar,
.peering-graph-popup__dc-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.peering-graph-popup__switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.peering-graph-popup__backgrounds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.peering-graph-popup__canvas-head {
    align-items: flex-start;
    gap: 0.85rem;
}

.peering-graph-popup__canvas-toolbar {
    display: grid;
    justify-items: end;
    gap: 0.6rem;
    min-width: min(100%, 58rem);
}

.peering-graph-popup__switch-row--annotate {
    align-items: flex-start;
}

.peering-graph-popup__diagram-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
    width: 100%;
}

.peering-graph-popup__diagram-actions--viewport {
    align-items: center;
}

.peering-graph-popup__annotation-tools,
.peering-graph-popup__annotation-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.peering-graph-popup__viewport-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.peering-graph-popup__viewport-button {
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: 0.45rem 0.68rem;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

.peering-graph-popup__zoom-pill {
    min-width: 4.25rem;
    justify-content: center;
}

.peering-graph-color-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.52rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.78);
    color: #0f172a;
    font: inherit;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.peering-graph-color-chip span {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    background: var(--diagram-color, #0ea5e9);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65), 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.peering-graph-color-chip strong {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.peering-graph-color-chip:hover,
.peering-graph-color-chip.active {
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.peering-graph-popup__inventory {
    display: grid;
    gap: 0.8rem;
}

.peering-graph-popup__inventory-head {
    gap: 0.9rem;
}

.peering-graph-popup__inventory-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: end;
}

.peering-graph-popup__inventory-table {
    min-height: 0;
}

.peering-graph-popup__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.peering-graph-popup__canvas-shell,
.peering-graph-popup__inspector-shell {
    min-height: 0;
}

.peering-graph-popup__canvas-shell {
    position: relative;
}

.peering-graph-popup__canvas {
    margin-top: 0.35rem;
    padding: 1.1rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    overflow: auto;
    position: relative;
    scroll-behavior: smooth;
}

.peering-graph-popup__edge-nav {
    position: absolute;
    inset: 50% 0 auto 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 0.32rem;
    pointer-events: none;
    z-index: 4;
}

.peering-graph-popup__edge-button {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.86);
    color: #f8fafc;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.28);
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.peering-graph-popup__edge-button:hover,
.peering-graph-popup__edge-button:focus-visible {
    background: rgba(14, 116, 144, 0.94);
    border-color: rgba(125, 211, 252, 0.34);
    transform: scale(1.03);
}

.peering-graph-popup__edge-button svg {
    width: 1.1rem;
    height: 1.1rem;
}

.peering-graph-popup__foot {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.8rem;
}

.peering-graph-popup__canvas[data-bg="dark"] {
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px) 0 0 / 34px 34px,
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94));
}

.peering-graph-popup__canvas[data-bg="slate"] {
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px) 0 0 / 34px 34px,
        radial-gradient(circle at top right, rgba(148, 163, 184, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.94));
}

.peering-graph-popup__canvas[data-bg="blueprint"] {
    background:
        linear-gradient(rgba(125, 211, 252, 0.14) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(125, 211, 252, 0.14) 1px, transparent 1px) 0 0 / 32px 32px,
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(8, 47, 73, 0.98), rgba(12, 74, 110, 0.94));
}

.peering-graph-popup__canvas[data-bg="light"] {
    background:
        linear-gradient(rgba(148, 163, 184, 0.1) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(148, 163, 184, 0.1) 1px, transparent 1px) 0 0 / 32px 32px,
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.96));
}

.peering-graph-popup__canvas svg.peering-graph-svg {
    display: block;
    width: 100%;
    min-width: 960px;
    height: auto;
}

.peering-graph-popup__canvas-stage {
    position: relative;
    min-width: 960px;
    transition: width 140ms ease;
}

.peering-graph-annotation-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    pointer-events: none;
}

.peering-graph-annotation-layer.is-editing {
    pointer-events: auto;
}

.peering-graph-annotation-layer[data-tool="draw"] {
    cursor: crosshair;
}

.peering-graph-annotation-layer[data-tool="text"] {
    cursor: text;
}

.peering-graph-annotation-layer[data-tool="erase"] {
    cursor: cell;
}

.peering-graph-hover-card-host {
    position: absolute;
    z-index: 5;
    width: min(28rem, calc(100% - 1rem));
    max-width: min(28rem, calc(100% - 1rem));
    pointer-events: auto;
}

.peering-graph-hover-card-host.hidden {
    display: none;
}

.peering-graph-hover-card-host.is-docked-left {
    left: 0.75rem;
}

.peering-graph-hover-card {
    position: relative;
    display: grid;
    gap: 0.88rem;
    padding: 1rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #0f172a;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 34%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    box-shadow: 0 26px 52px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

html[data-theme="dark"] .peering-graph-hover-card {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 38%),
        linear-gradient(155deg, rgba(2, 6, 23, 0.98), rgba(15, 23, 42, 0.96));
    border-color: rgba(125, 211, 252, 0.2);
    color: #e2e8f0;
}

.peering-graph-hover-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    background: linear-gradient(180deg, rgba(125, 211, 252, 0.95), rgba(56, 189, 248, 0.15));
    opacity: 0.95;
}

.peering-graph-hover-card__topline,
.peering-graph-hover-card__meta,
.peering-graph-hover-card__title-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.peering-graph-hover-card__topline {
    justify-content: space-between;
    align-items: flex-start;
}

.peering-graph-hover-card__meta {
    flex-wrap: wrap;
    justify-content: flex-end;
}

html[data-theme="dark"] .peering-graph-popup__edge-button {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(125, 211, 252, 0.22);
}

.peering-graph-hover-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.peering-graph-hover-card__title-wrap {
    align-items: flex-start;
    min-width: 0;
}

.peering-graph-hover-card__title-wrap > div {
    min-width: 0;
}

.peering-graph-hover-card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.85rem;
    height: 2.85rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.95rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), var(--hover-fill, #dbeafe));
    color: var(--hover-accent, #38bdf8);
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    box-shadow: 0 16px 26px rgba(15, 23, 42, 0.14);
}

.peering-graph-hover-card__head h4 {
    margin: 0.08rem 0 0;
    font-size: 1rem;
    color: #0f172a;
    line-height: 1.24;
}

.peering-graph-hover-card__head .muted-copy {
    color: #475569;
}

html[data-theme="dark"] .peering-graph-hover-card__head h4 {
    color: #f8fafc;
}

html[data-theme="dark"] .peering-graph-hover-card__head .muted-copy {
    color: rgba(226, 232, 240, 0.74);
}

.peering-graph-hover-card__actions {
    align-self: flex-start;
}

.peering-graph-hover-card__copy-button.toolbar-button {
    border-color: rgba(96, 165, 250, 0.26);
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.96), rgba(239, 246, 255, 0.96));
    color: #0f172a;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
}

.peering-graph-hover-card__copy-button.toolbar-button:hover,
.peering-graph-hover-card__copy-button.toolbar-button:focus-visible {
    border-color: rgba(59, 130, 246, 0.34);
    background: linear-gradient(135deg, rgba(191, 219, 254, 0.98), rgba(219, 234, 254, 0.98));
    transform: translateY(-1px);
}

html[data-theme="dark"] .peering-graph-hover-card__copy-button.toolbar-button {
    border-color: rgba(96, 165, 250, 0.34);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.28), rgba(59, 130, 246, 0.18));
    color: #f8fafc;
    box-shadow: 0 12px 22px rgba(2, 6, 23, 0.24);
}

html[data-theme="dark"] .peering-graph-hover-card__copy-button.toolbar-button:hover,
html[data-theme="dark"] .peering-graph-hover-card__copy-button.toolbar-button:focus-visible {
    border-color: rgba(125, 211, 252, 0.48);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.42), rgba(59, 130, 246, 0.28));
}

.peering-graph-hover-card__chip.search-chip,
.peering-graph-hover-card__topline .status-pill {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.82);
    color: #1e3a8a;
}

html[data-theme="dark"] .peering-graph-hover-card__chip.search-chip,
html[data-theme="dark"] .peering-graph-hover-card__topline .status-pill {
    border-color: rgba(125, 211, 252, 0.18);
    background: rgba(15, 23, 42, 0.32);
    color: #dbeafe;
}

.peering-graph-hover-card__summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.peering-graph-hover-card__summary-item {
    padding: 0.62rem 0.72rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.9);
}

.peering-graph-hover-card__summary-item span {
    display: block;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.peering-graph-hover-card__summary-item strong {
    display: block;
    margin-top: 0.18rem;
    color: #0f172a;
    font-size: 0.82rem;
    line-height: 1.32;
    word-break: break-word;
}

html[data-theme="dark"] .peering-graph-hover-card__summary-item {
    background: rgba(15, 23, 42, 0.28);
}

html[data-theme="dark"] .peering-graph-hover-card__summary-item span {
    color: rgba(191, 219, 254, 0.76);
}

html[data-theme="dark"] .peering-graph-hover-card__summary-item strong {
    color: #f8fafc;
}

.peering-graph-hover-card__coverage {
    display: grid;
    gap: 0.68rem;
}

.peering-graph-hover-card__coverage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.peering-graph-hover-card__coverage-head strong {
    color: #0f172a;
    font-size: 0.86rem;
}

html[data-theme="dark"] .peering-graph-hover-card__coverage-head strong {
    color: #f8fafc;
}

.peering-graph-hover-card__coverage-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.peering-graph-hover-card__coverage-metric {
    padding: 0.58rem 0.65rem;
    border-radius: 0.86rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.86);
}

.peering-graph-hover-card__coverage-metric span {
    display: block;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.peering-graph-hover-card__coverage-metric strong {
    display: block;
    margin-top: 0.2rem;
    color: #0f172a;
    font-size: 0.94rem;
}

html[data-theme="dark"] .peering-graph-hover-card__coverage-metric {
    background: rgba(15, 23, 42, 0.28);
}

html[data-theme="dark"] .peering-graph-hover-card__coverage-metric span {
    color: rgba(191, 219, 254, 0.76);
}

html[data-theme="dark"] .peering-graph-hover-card__coverage-metric strong {
    color: #f8fafc;
}

.peering-graph-hover-card__coverage-note {
    padding: 0.66rem 0.78rem;
    border-radius: 0.86rem;
    border: 1px solid rgba(245, 158, 11, 0.24);
    background: rgba(255, 251, 235, 0.92);
    color: #92400e;
    font-size: 0.76rem;
    line-height: 1.42;
}

.peering-graph-hover-card__coverage-table-wrap {
    border-radius: 0.92rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.86);
}

.peering-graph-hover-card__coverage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
}

.peering-graph-hover-card__coverage-table th,
.peering-graph-hover-card__coverage-table td {
    padding: 0.46rem 0.56rem;
    text-align: left;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.peering-graph-hover-card__coverage-table th {
    background: rgba(239, 246, 255, 0.95);
    color: #1e3a8a;
    font-weight: 800;
}

.peering-graph-hover-card__coverage-table td {
    color: #334155;
}

.peering-graph-hover-card__coverage-table tr:last-child td {
    border-bottom: none;
}

html[data-theme="dark"] .peering-graph-hover-card__coverage-note {
    background: rgba(120, 53, 15, 0.34);
    color: #fde68a;
}

html[data-theme="dark"] .peering-graph-hover-card__coverage-table-wrap {
    background: rgba(15, 23, 42, 0.24);
}

html[data-theme="dark"] .peering-graph-hover-card__coverage-table th {
    background: rgba(30, 41, 59, 0.74);
    color: #bfdbfe;
    border-bottom-color: rgba(51, 65, 85, 0.9);
}

html[data-theme="dark"] .peering-graph-hover-card__coverage-table td {
    color: #e2e8f0;
    border-bottom-color: rgba(51, 65, 85, 0.7);
}

.peering-graph-hover-card__body .peering-graph-popup__table-wrap {
    max-height: 15rem;
    min-height: 0;
    resize: none;
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.88);
}

.peering-graph-hover-card__body,
.peering-graph-hover-card__body .peering-graph-popup__table-wrap,
.peering-graph-hover-card__body .data-table,
.peering-graph-hover-card__body .data-table th,
.peering-graph-hover-card__body .data-table td,
.peering-graph-hover-card__body .row-action-button,
.peering-graph-hover-card__body .status-pill,
.peering-graph-hover-card__body .search-chip {
    font-size: 10px;
    line-height: 1.28;
}

.peering-graph-hover-card__body .data-table th,
.peering-graph-hover-card__body .data-table td {
    padding: 0.28rem 0.34rem;
}

.peering-graph-hover-card__body .data-table th {
    background: rgba(239, 246, 255, 0.95);
    color: #1e3a8a;
}

.peering-graph-hover-card__body .data-table td {
    color: #334155;
    background: rgba(255, 255, 255, 0.82);
}

.peering-graph-hover-card__body .data-table tr:nth-child(even) td {
    background: rgba(248, 250, 252, 0.98);
}

html[data-theme="dark"] .peering-graph-hover-card__body .peering-graph-popup__table-wrap {
    background: rgba(15, 23, 42, 0.22);
}

html[data-theme="dark"] .peering-graph-hover-card__body .data-table th {
    background: rgba(15, 23, 42, 0.56);
    color: #bfdbfe;
}

html[data-theme="dark"] .peering-graph-hover-card__body .data-table td {
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.14);
}

html[data-theme="dark"] .peering-graph-hover-card__body .data-table tr:nth-child(even) td {
    background: rgba(30, 41, 59, 0.24);
}

.peering-graph-hover-card__body .row-action-button {
    min-width: 1.15rem;
    min-height: 1.15rem;
    padding: 0.12rem;
}

.peering-graph-popup__canvas g.node {
    cursor: pointer;
    transition: opacity 120ms ease, filter 120ms ease;
}

.peering-graph-popup__canvas g.node.peering-graph-popup__node {
    cursor: grab;
}

.peering-graph-popup__canvas g.node.peering-graph-popup__node.is-dragging {
    cursor: grabbing;
}

.peering-graph-popup__canvas g.node text {
    font-weight: 700;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.72);
    stroke-width: 0.42px;
    stroke-linejoin: round;
}

.peering-graph-popup__canvas g.node:hover,
.peering-graph-popup__canvas g.node:focus,
.peering-graph-popup__canvas g.node.is-active {
    filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.42));
}

.peering-graph-popup__canvas g.node.is-active {
    opacity: 1;
}

.peering-graph-popup__canvas g.edge path,
.peering-graph-popup__canvas g.edge polygon {
    transition: opacity 120ms ease, filter 120ms ease;
}

.peering-graph-popup__canvas g.edge path {
    stroke-linecap: round;
    stroke-linejoin: round;
}

.peering-graph-popup__canvas g.edge text {
    font-weight: 800;
    letter-spacing: 0.01em;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, 0.94);
    stroke-width: 4px;
    stroke-linejoin: round;
    fill: #334155;
}

.peering-graph-popup__canvas[data-bg="dark"] g.edge text,
.peering-graph-popup__canvas[data-bg="slate"] g.edge text,
.peering-graph-popup__canvas[data-bg="blueprint"] g.edge text {
    stroke: rgba(15, 23, 42, 0.96);
    fill: #e2e8f0;
}

.peering-graph-popup__canvas g.edge:hover path,
.peering-graph-popup__canvas g.edge:hover polygon {
    filter: brightness(1.08) saturate(1.08);
}

.peering-graph-popup__inspector {
    min-height: 22rem;
    position: relative;
    z-index: 2;
    transition: transform 120ms ease, filter 120ms ease;
}

.peering-graph-popup__inspector-shell {
    position: relative;
    top: 0;
    min-height: 22rem;
}

.peering-graph-popup__inspector-shell--empty .table-head {
    margin-bottom: 0.5rem;
}

.peering-graph-popup__inspector.is-floating {
    filter: drop-shadow(0 18px 24px rgba(15, 23, 42, 0.16));
}

.peering-graph-popup__inspector-head {
    cursor: grab;
}

.peering-graph-popup__inspector-head:active {
    cursor: grabbing;
}

.peering-graph-popup__chips {
    align-items: center;
}

.peering-graph-popup__chips .search-chip {
    border-color: rgba(96, 165, 250, 0.2);
}

.peering-graph-popup__table-wrap {
    max-height: min(58vh, 36rem);
    overflow: auto;
    resize: both;
    min-height: 15rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.peering-graph-popup__table-wrap table {
    min-width: 100%;
}

.peering-graph-popup__table-wrap .table-action-col,
.peering-graph-hover-card__body .table-action-col {
    min-width: 14rem;
}

.peering-graph-popup__table-wrap .row-action-buttons,
.peering-graph-hover-card__body .row-action-buttons {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
}

.peering-graph-popup__table-wrap .device-inline-action,
.peering-graph-hover-card__body .device-inline-action {
    min-height: 1.8rem;
    padding: 0.22rem 0.48rem;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
}

.peering-graph-popup__table-wrap .device-inline-action__icon,
.peering-graph-hover-card__body .device-inline-action__icon {
    width: 0.8rem;
    height: 0.8rem;
}

.peering-graph-popup__inspector-table {
    margin-top: 0.8rem;
    min-height: 14.5rem;
}

.peering-graph-popup-window .popup-window__dialog {
    width: min(1380px, 100%);
    min-width: min(1080px, 100%);
    min-height: min(760px, 88vh);
    max-height: 94vh;
    resize: both;
    overflow: hidden;
}

.peering-graph-popup-window.is-large .popup-window__dialog {
    width: min(96vw, 1680px);
    height: 94vh;
    max-height: 94vh;
}

@media (max-width: 1200px) {
    .peering-graph-popup-window .popup-window__head {
        flex-wrap: wrap;
    }

    .popup-window__head-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .peering-graph-popup__diagram-actions {
        justify-content: flex-start;
    }

    .peering-graph-popup__header-actions {
        justify-items: stretch;
    }

    .peering-graph-popup__header-row {
        justify-content: flex-start;
    }

    .peering-graph-hover-card-host {
        position: static;
        width: 100%;
        max-width: none;
        margin-top: 0.85rem;
    }

    .peering-graph-hover-card__summary {
        grid-template-columns: 1fr;
    }
}

.device-context-menu {
    position: fixed;
    z-index: 85;
}

.device-context-menu.hidden {
    display: none;
}

.device-context-menu__card {
    width: min(19rem, calc(100vw - 2rem));
    padding: 0.95rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.24);
}

html[data-theme="dark"] .device-context-menu__card {
    background: rgba(15, 23, 42, 0.98);
}

.device-context-menu__card h4 {
    margin: 0.15rem 0 0.35rem;
    font-size: 1rem;
}

.device-context-menu__actions {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.device-context-menu__launches {
    justify-content: flex-start;
}

@media (max-width: 720px) {
    .popup-window {
        padding: 0.7rem;
    }

    .popup-window__dialog,
    .popup-window--wide .popup-window__dialog,
    .popup-window--right .popup-window__dialog {
        width: 100%;
    }

    .popup-window--right {
        padding: 0.7rem;
        place-items: center;
    }

    .popup-window--right .popup-window__dialog {
        height: auto;
        max-height: min(88vh, 960px);
        border-radius: 1.35rem;
        border-right: 1px solid rgba(148, 163, 184, 0.2);
    }

    .peering-dc-panel__button {
        width: 100%;
        justify-content: space-between;
    }

    .peering-graph-popup__layout {
        grid-template-columns: 1fr;
    }

    .peering-graph-popup__canvas svg {
        min-width: 820px;
    }

    .peering-graph-popup__inspector-shell {
        position: static;
        min-height: 0;
    }

    .peering-graph-popup__inspector {
        min-height: 0;
    }

    .peering-graph-popup-window .popup-window__dialog {
        min-width: 100%;
        min-height: auto;
        resize: none;
    }

    .device-command-popup-window .popup-window__dialog {
        min-width: 100%;
        min-height: auto;
        resize: none;
    }

    .peering-graph-popup__table-wrap {
        resize: vertical;
    }

    .device-command-table {
        min-width: 42rem;
    }
}

/* Final donut redesign overrides */

.device-launch-popup {
    display: grid;
    gap: 0.8rem;
}

.device-command-popup {
    display: grid;
    gap: 1rem;
}

.device-command-popup-window .popup-window__head {
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.45rem 0.95rem 0.2rem;
    border-bottom: 0;
}

.device-command-popup-window .popup-window__head-main {
    display: none;
}

.device-command-popup-window .popup-window__head-actions {
    align-items: center;
    justify-content: flex-end;
}

.device-command-popup-window .popup-window__body {
    padding-top: 0.35rem;
}

.device-command-popup__header-status {
    display: inline-flex;
    align-items: center;
    gap: 0.62rem;
    max-width: min(34rem, 100%);
    padding: 0.44rem 0.72rem;
    border-radius: 0.92rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.92));
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .device-command-popup__header-status {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(8, 15, 28, 0.92));
    border-color: rgba(71, 85, 105, 0.42);
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.24);
}

.device-command-popup__header-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.72rem;
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    flex: 0 0 auto;
}

.device-command-popup__header-status-icon svg {
    width: 0.84rem;
    height: 0.84rem;
}

.device-command-popup__header-status-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    flex: 0 0 auto;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.98) 0 58%, transparent 59%),
        conic-gradient(from -90deg, var(--device-command-progress-color, #38bdf8) 0 calc(var(--device-command-progress, 0) * 1%), rgba(148, 163, 184, 0.18) 0 100%);
    box-shadow:
        inset 0 0 0 1px rgba(15, 23, 42, 0.06),
        0 10px 22px rgba(15, 23, 42, 0.1);
}

html[data-theme="dark"] .device-command-popup__header-status-circle {
    background:
        radial-gradient(circle at center, rgba(15, 23, 42, 0.96) 0 58%, transparent 59%),
        conic-gradient(from -90deg, var(--device-command-progress-color, #38bdf8) 0 calc(var(--device-command-progress, 0) * 1%), rgba(71, 85, 105, 0.46) 0 100%);
    box-shadow:
        inset 0 0 0 1px rgba(148, 163, 184, 0.08),
        0 12px 24px rgba(2, 6, 23, 0.22);
}

.device-command-popup__header-status-circle-core {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.36rem;
    height: 1.36rem;
    border-radius: 999px;
    background: var(--device-command-progress-soft, rgba(56, 189, 248, 0.16));
    color: var(--device-command-progress-color, #38bdf8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.device-command-popup__header-status-circle-core svg {
    width: 0.74rem;
    height: 0.74rem;
}

.device-command-popup__header-status-copy {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.device-command-popup__header-status-copy strong,
.device-command-popup__header-status-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-command-popup__header-status-copy strong {
    font-size: 0.82rem;
    color: #0f172a;
}

.device-command-popup__header-status-copy small {
    font-size: 0.7rem;
    color: #64748b;
}

html[data-theme="dark"] .device-command-popup__header-status-copy strong {
    color: #f8fafc;
}

html[data-theme="dark"] .device-command-popup__header-status-copy small {
    color: #bfd3e6;
}

.device-command-popup__header-status--running {
    border-color: rgba(14, 165, 233, 0.28);
}

.device-command-popup__header-status--running .device-command-popup__header-status-icon {
    background: rgba(14, 165, 233, 0.14);
    color: #0284c7;
}

.device-command-popup__header-status--running {
    border-color: rgba(56, 189, 248, 0.28);
    box-shadow: 0 14px 28px rgba(56, 189, 248, 0.12);
}

.device-command-popup__header-status--success {
    border-color: rgba(34, 197, 94, 0.28);
}

.device-command-popup__header-status--success .device-command-popup__header-status-icon {
    background: rgba(34, 197, 94, 0.14);
    color: #15803d;
}

.device-command-popup__header-status--attention {
    border-color: rgba(245, 158, 11, 0.3);
}

.device-command-popup__header-status--attention .device-command-popup__header-status-icon {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.device-command-popup__accordion-stack {
    display: grid;
    gap: 0.8rem;
}

.device-command-accordion {
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

html[data-theme="dark"] .device-command-accordion {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(8, 15, 28, 0.94));
    border-color: rgba(71, 85, 105, 0.42);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.22);
}

.device-command-accordion__summary-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.92rem 1rem;
    border: 0;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 11rem),
        linear-gradient(135deg, rgba(239, 246, 255, 0.86), rgba(255, 255, 255, 0.94));
    cursor: pointer;
    text-align: left;
}

html[data-theme="dark"] .device-command-accordion__summary-button {
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.12), transparent 11rem),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(9, 15, 27, 0.92));
}

.device-command-accordion__summary-button:hover,
.device-command-accordion__summary-button:focus-visible {
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 11rem),
        linear-gradient(135deg, rgba(224, 242, 254, 0.94), rgba(255, 255, 255, 0.98));
}

html[data-theme="dark"] .device-command-accordion__summary-button:hover,
html[data-theme="dark"] .device-command-accordion__summary-button:focus-visible {
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.16), transparent 11rem),
        linear-gradient(135deg, rgba(16, 24, 39, 0.98), rgba(9, 15, 27, 0.96));
}

.device-command-accordion__summary-main,
.device-command-accordion__summary-side {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.device-command-accordion__summary-main {
    flex: 1 1 auto;
}

.device-command-accordion__summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.92rem;
    background: rgba(56, 189, 248, 0.12);
    color: #0284c7;
    flex: 0 0 auto;
}

.device-command-accordion__summary-icon svg {
    width: 0.98rem;
    height: 0.98rem;
}

.device-command-accordion__summary-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.device-command-accordion__summary-copy strong,
.device-command-accordion__summary-copy small {
    display: block;
}

.device-command-accordion__summary-copy strong {
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 800;
}

.device-command-accordion__summary-copy small {
    color: #64748b;
    font-size: 0.76rem;
    line-height: 1.45;
}

html[data-theme="dark"] .device-command-accordion__summary-copy strong {
    color: #f8fafc;
}

html[data-theme="dark"] .device-command-accordion__summary-copy small {
    color: #bfd3e6;
}

.device-command-accordion__summary-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.14);
    color: #475569;
    flex: 0 0 auto;
}

.device-command-accordion__summary-toggle::before {
    content: "+";
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.device-command-accordion.is-open .device-command-accordion__summary-toggle::before {
    content: "−";
}

html[data-theme="dark"] .device-command-accordion__summary-toggle {
    color: #cbd5e1;
    background: rgba(148, 163, 184, 0.12);
}

.device-command-accordion__body {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.device-command-accordion__body[hidden] {
    display: none;
}

.device-command-popup__section-copy {
    display: grid;
    gap: 0.3rem;
}

.device-command-popup__section-copy .muted-copy {
    margin: 0;
}

.device-command-accordion--result .device-command-accordion__summary-button {
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.1), transparent 11rem),
        linear-gradient(135deg, rgba(5, 10, 20, 0.98), rgba(2, 6, 18, 0.96));
}

.device-command-accordion--result .device-command-accordion__summary-copy strong,
.device-command-accordion--result .device-command-accordion__summary-copy small,
.device-command-accordion--result .device-command-accordion__summary-toggle {
    color: #f8fafc;
}

.device-command-accordion--result .device-command-accordion__summary-icon {
    background: rgba(34, 211, 238, 0.14);
    color: #67e8f9;
}

.device-command-popup__sticky-head {
    position: sticky;
    top: -0.35rem;
    z-index: 10;
    display: grid;
    gap: 0.55rem;
    margin: -0.2rem -0.1rem 0.65rem;
    padding: 0.2rem 0.1rem 0.55rem;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.96) 0%, rgba(248, 250, 252, 0.92) 78%, rgba(248, 250, 252, 0.74) 100%);
    backdrop-filter: blur(14px);
}

html[data-theme="dark"] .device-command-popup__sticky-head {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.95) 78%, rgba(15, 23, 42, 0.78) 100%);
}

.device-command-popup__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem);
    gap: 0.65rem;
    padding: 0.72rem 0.84rem;
    border-radius: 1rem;
    border: 1px solid rgba(56, 189, 248, 0.16);
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.12), transparent 28%),
        linear-gradient(135deg, rgba(5, 10, 20, 0.98), rgba(2, 6, 18, 0.96));
    box-shadow: 0 16px 30px rgba(2, 6, 23, 0.2);
}

.device-command-popup__hero-copy {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
}

.device-command-popup__hero-copy h3 {
    margin: 0.04rem 0 0;
    color: #f8fafc;
    font-size: 1.85rem;
}

.device-command-popup__hero-copy .muted-copy {
    color: #bfd3e6;
    margin: 0;
    font-size: 0.8rem;
}

.device-command-popup__hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.device-command-popup__hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.72);
    color: #e2e8f0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.device-command-popup__hero-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.82rem;
    height: 0.82rem;
    color: inherit;
}

.device-command-popup__hero-pill-icon svg {
    width: 0.82rem;
    height: 0.82rem;
}

.device-command-popup__hero-pill--targets {
    color: #bae6fd;
}

.device-command-popup__hero-pill--commands {
    color: #bbf7d0;
}

.device-command-popup__hero-pill--credentials,
.device-command-popup__hero-pill--session {
    color: #fde68a;
}

.device-command-popup__hero-lower {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.52rem;
    align-items: start;
}

.device-command-popup__hero-note {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.52rem;
    padding: 0.56rem 0.72rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(56, 189, 248, 0.18);
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.1), transparent 10rem),
        linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(7, 12, 22, 0.78));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 22px rgba(2, 6, 23, 0.16);
}

.device-command-popup__hero-note strong {
    display: block;
    margin-bottom: 0.08rem;
    color: #f8fafc;
    font-size: 0.95rem;
}

.device-command-popup__hero-note .muted-copy {
    margin: 0.06rem 0 0;
    color: #bfd3e6;
    font-size: 0.76rem;
    line-height: 1.38;
}

.device-command-popup__hero-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.62rem;
    background: rgba(14, 165, 233, 0.18);
    color: #7dd3fc;
}

.device-command-popup__hero-note-icon svg {
    width: 0.74rem;
    height: 0.74rem;
}

.device-command-popup__summary {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    align-items: start;
    gap: 0.5rem;
}

.device-command-popup__summary .detail-item {
    padding: 0.6rem 0.72rem;
    border-radius: 0.95rem;
    border-color: rgba(148, 163, 184, 0.16);
    background:
        radial-gradient(circle at top right, rgba(34, 211, 238, 0.08), transparent 9rem),
        linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(7, 12, 22, 0.78));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 22px rgba(2, 6, 23, 0.14);
}

.device-command-popup__summary .detail-item__label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7dd3fc;
}

.device-command-popup__summary .detail-item__value {
    margin-top: 0.1rem;
    font-size: 0.98rem;
    color: #f8fafc;
}

.device-command-popup__summary .muted-copy {
    margin: 0.12rem 0 0;
    color: #bfd3e6;
    font-size: 0.7rem;
    line-height: 1.32;
}

.device-command-popup__control {
    margin-top: 0.16rem;
}

.device-command-popup__floating-actions {
    position: relative;
    z-index: 1;
    align-self: start;
    padding: 0.28rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.08);
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.18);
    backdrop-filter: blur(14px);
}

html[data-theme="dark"] .device-command-popup__floating-actions {
    border-color: rgba(71, 85, 105, 0.42);
    background: rgba(8, 15, 28, 0.82);
    box-shadow: 0 16px 32px rgba(2, 6, 23, 0.28);
}

@media (max-width: 1100px) {
    .device-command-popup__hero {
        grid-template-columns: 1fr;
    }

    .device-command-popup__summary {
        grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
}

@media (max-width: 760px) {
    .device-command-popup-window .popup-window__head {
        padding-right: 0.7rem;
    }

    .device-command-popup__sticky-head {
        margin-bottom: 0.7rem;
    }

    .device-command-popup__hero,
    .device-command-popup__hero-note {
        padding: 0.68rem;
    }

    .device-command-popup__summary {
        grid-template-columns: 1fr;
    }
}

.device-command-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.65rem;
    padding: 0.72rem 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.95rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.94));
    color: #e2e8f0;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.18);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.device-command-action-button:hover,
.device-command-action-button:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(2, 6, 23, 0.24);
}

.device-command-action-button:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
    filter: saturate(0.7);
    box-shadow: none;
}

.device-command-action-button--block {
    width: 100%;
}

.device-command-action-button--compact {
    min-height: 2.2rem;
    padding: 0.56rem 0.76rem;
    border-radius: 0.85rem;
    font-size: 0.76rem;
}

.device-command-action-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.88rem;
    height: 0.88rem;
    color: inherit;
    flex: 0 0 auto;
}

.device-command-action-button__icon svg {
    width: 0.88rem;
    height: 0.88rem;
}

.device-command-action-button--compact .device-command-action-button__icon,
.device-command-action-button--compact .device-command-action-button__icon svg {
    width: 0.76rem;
    height: 0.76rem;
}

.device-command-action-button__label {
    line-height: 1.2;
}

.device-command-action-button--neutral {
    color: #e2e8f0;
}

.device-command-action-button--putty {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.96), rgba(8, 145, 178, 0.9));
    color: #ecfeff;
}

.device-command-action-button--putty .device-command-action-button__icon {
    color: #99f6e4;
}

.device-command-action-button--execute {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.96), rgba(16, 185, 129, 0.92));
    color: #f0fdfa;
}

.device-command-action-button--execute .device-command-action-button__icon {
    color: #d1fae5;
}

.device-command-action-button--ai {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.96), rgba(14, 165, 233, 0.9));
    color: #eff6ff;
}

.device-command-action-button--ai .device-command-action-button__icon {
    color: #bfdbfe;
}

.device-command-action-button--queue {
    background: linear-gradient(135deg, rgba(8, 47, 73, 0.96), rgba(3, 105, 161, 0.9));
    color: #e0f2fe;
}

.device-command-action-button--queue .device-command-action-button__icon {
    color: #7dd3fc;
}

.device-command-action-button--validation {
    background: linear-gradient(135deg, rgba(21, 128, 61, 0.96), rgba(6, 182, 212, 0.88));
    color: #f0fdf4;
}

.device-command-action-button--validation .device-command-action-button__icon {
    color: #bbf7d0;
}

.device-command-action-button--all {
    background: linear-gradient(135deg, rgba(3, 105, 161, 0.94), rgba(8, 145, 178, 0.88));
    color: #ecfeff;
}

.device-command-action-button--all .device-command-action-button__icon {
    color: #bae6fd;
}

.device-command-action-button--clear {
    background: linear-gradient(135deg, rgba(153, 27, 27, 0.96), rgba(220, 38, 38, 0.9));
    color: #fff1f2;
}

.device-command-action-button--clear .device-command-action-button__icon {
    color: #fecdd3;
}

.device-command-action-button--copy {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.96), rgba(30, 41, 59, 0.92));
    color: #e2e8f0;
}

.device-command-action-button--copy .device-command-action-button__icon {
    color: #cbd5e1;
}

.device-command-action-button--download {
    background: linear-gradient(135deg, rgba(180, 83, 9, 0.96), rgba(245, 158, 11, 0.9));
    color: #fff7ed;
}

.device-command-action-button--download .device-command-action-button__icon {
    color: #fde68a;
}

.device-command-action-button--pdf {
    border-color: rgba(248, 113, 113, 0.34);
    background:
        linear-gradient(135deg, rgba(220, 38, 38, 0.98), rgba(234, 88, 12, 0.94) 58%, rgba(245, 158, 11, 0.92));
    color: #fff7ed;
    box-shadow: 0 16px 32px rgba(194, 65, 12, 0.28);
}

.device-command-action-button--pdf .device-command-action-button__icon {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.52rem;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.device-command-action-button--pdf .device-command-action-button__icon svg {
    width: 0.9rem;
    height: 0.9rem;
}

.device-command-popup__params {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.9rem;
}

.device-command-popup__field {
    display: grid;
    gap: 0.4rem;
}

.device-command-popup__field-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem 0.8rem;
}

.device-command-popup__textarea {
    min-height: 7.2rem;
    resize: vertical;
}

.device-command-targets,
.device-command-custom,
.device-command-automation {
    gap: 0.75rem;
}

.device-command-targets .device-command-popup__textarea,
.device-command-custom .device-command-popup__textarea,
.device-command-automation .device-command-popup__textarea {
    background: linear-gradient(180deg, rgba(10, 15, 27, 0.98), rgba(2, 6, 23, 0.98));
    color: #dbeafe;
    border: 1px solid rgba(56, 189, 248, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
}

.device-command-targets .device-command-popup__textarea::placeholder,
.device-command-custom .device-command-popup__textarea::placeholder,
.device-command-automation .device-command-popup__textarea::placeholder {
    color: #64748b;
}

.device-command-target-picker,
.device-command-ai-suggest {
    display: grid;
    gap: 0.75rem;
}

.device-command-ai-progress {
    display: grid;
    gap: 0.85rem;
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    border: 1px solid rgba(56, 189, 248, 0.2);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(7, 12, 23, 0.98), rgba(2, 6, 18, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 32px rgba(2, 6, 23, 0.28);
}

.device-command-ai-progress__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.device-command-ai-progress__head h3 {
    margin: 0.18rem 0 0;
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 800;
}

.device-command-ai-progress__head .muted-copy {
    max-width: 42rem;
    color: #bfd3e6;
}

.device-command-ai-progress__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.42rem 0.8rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.24);
    background: rgba(8, 47, 73, 0.34);
    color: #bae6fd;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.device-command-ai-progress__bar {
    position: relative;
    overflow: hidden;
    height: 0.74rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.16);
    background: rgba(15, 23, 42, 0.94);
}

.device-command-ai-progress__bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(34, 211, 238, 0), rgba(34, 211, 238, 0.96), rgba(74, 222, 128, 0.92));
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
    animation: device-command-ai-progress-scan 1.6s ease-in-out infinite;
}

.device-command-ai-progress__steps {
    display: grid;
    gap: 0.6rem;
}

.device-command-ai-progress__step {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #dbeafe;
    font-size: 0.82rem;
    font-weight: 600;
}

.device-command-ai-progress__step::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: #22d3ee;
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.45);
    animation: device-command-ai-progress-pulse 1.15s ease-in-out infinite;
}

.device-command-voice-status {
    display: grid;
    gap: 0.38rem;
}

.device-command-voice-status strong {
    display: block;
}

.device-command-voice-status__live {
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

.device-command-target-picker__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.device-command-target-picker__list,
.device-command-ai-suggest__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem;
}

.device-command-target-picker__item,
.device-command-ai-suggest__item {
    min-height: 100%;
    border-radius: 1rem;
    border: 1px solid rgba(56, 189, 248, 0.14);
    background: linear-gradient(180deg, rgba(10, 15, 27, 0.92), rgba(2, 6, 23, 0.9));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.device-command-target-picker__item.is-active,
.device-command-ai-suggest__item.is-active {
    border-color: rgba(74, 222, 128, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(20, 83, 45, 0.16);
}

.device-command-ai-suggest__item--high {
    border-color: rgba(248, 113, 113, 0.24);
}

.device-command-ai-suggest__item--medium {
    border-color: rgba(251, 191, 36, 0.24);
}

.device-command-ai-suggest__item--low {
    border-color: rgba(74, 222, 128, 0.22);
}

.device-command-credentials {
    display: grid;
    gap: 0.8rem;
}

.device-command-credentials__toggle {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.72);
}

.device-command-credentials__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.9rem;
    transition: opacity 180ms ease, transform 180ms ease;
}

.device-command-credentials__run-actions {
    justify-content: flex-end;
}

.device-command-credentials__run-actions .device-command-action-button {
    min-width: 16rem;
}

.device-command-credentials__grid.is-disabled {
    opacity: 0.62;
}

html[data-theme="dark"] .device-command-credentials__toggle {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(71, 85, 105, 0.34);
}

.device-command-progress {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(14, 116, 144, 0.2);
    background: linear-gradient(180deg, rgba(240, 249, 255, 0.96), rgba(224, 242, 254, 0.84));
    box-shadow: 0 14px 30px rgba(14, 116, 144, 0.08);
}

html[data-theme="dark"] .device-command-progress {
    border-color: rgba(56, 189, 248, 0.24);
    background: linear-gradient(180deg, rgba(10, 37, 49, 0.96), rgba(8, 47, 73, 0.84));
}

.device-command-progress__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
    align-items: center;
}

.device-command-progress__bar {
    position: relative;
    height: 0.7rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.22);
}

.device-command-progress__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0ea5e9, #22c55e);
    box-shadow: 0 0 18px rgba(14, 165, 233, 0.28);
    transition: width 260ms ease;
}

.device-command-progress__loading {
    justify-items: start;
}

@keyframes device-command-ai-progress-scan {
    0% {
        transform: translateX(-125%);
    }
    100% {
        transform: translateX(290%);
    }
}

@keyframes device-command-ai-progress-pulse {
    0%,
    100% {
        transform: scale(0.84);
        opacity: 0.7;
    }
    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

.device-command-confirm {
    display: grid;
    gap: 1rem;
}

.device-command-confirm__summary {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    align-items: stretch;
}

.device-command-confirm__list {
    display: grid;
    gap: 0.8rem;
    max-height: 24rem;
    overflow: auto;
}

.device-command-confirm__item code {
    font-size: 0.86rem;
    word-break: break-word;
}

.popup-window--agentic-consent {
    background:
        radial-gradient(circle at 50% 18%, rgba(59, 130, 246, 0.16), transparent 34rem),
        rgba(2, 6, 23, 0.7);
}

.popup-window--agentic-consent .popup-window__dialog {
    width: min(760px, 100%);
    border-color: rgba(96, 165, 250, 0.38);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(244, 247, 252, 0.98));
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.08),
        0 32px 86px rgba(2, 6, 23, 0.36);
}

html[data-theme="dark"] .popup-window--agentic-consent .popup-window__dialog {
    background:
        radial-gradient(circle at 82% -10%, rgba(124, 58, 237, 0.18), transparent 22rem),
        linear-gradient(155deg, rgba(17, 24, 39, 0.995), rgba(8, 15, 28, 0.99));
    box-shadow:
        0 0 0 1px rgba(96, 165, 250, 0.12),
        0 34px 90px rgba(0, 0, 0, 0.62);
}

.popup-window--agentic-consent .popup-window__head {
    padding: 1rem 1.25rem;
    border-bottom-color: rgba(96, 165, 250, 0.2);
}

.popup-window--agentic-consent .popup-window__head-main {
    gap: 0.18rem;
}

.popup-window--agentic-consent .popup-window__body {
    padding: 1.25rem;
    overflow-x: hidden;
}

.agentic-diagnostic-consent {
    display: grid;
    gap: 1rem;
}

.agentic-diagnostic-consent__hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1.05rem;
    border: 1px solid rgba(96, 165, 250, 0.23);
    border-radius: 1.15rem;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(124, 58, 237, 0.06));
}

.agentic-diagnostic-consent__hero-icon {
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 1.15rem;
    color: #ffffff;
    background: linear-gradient(145deg, #1689f7, #6d4aed);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.3);
}

.agentic-diagnostic-consent__hero-icon svg {
    width: 2rem;
    height: 2rem;
    stroke-width: 2.2;
}

.agentic-diagnostic-consent__hero-copy {
    min-width: 0;
}

.agentic-diagnostic-consent__kicker {
    margin: 0 0 0.24rem;
    color: #3b82f6;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.agentic-diagnostic-consent__hero-copy h3 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.12rem, 2vw, 1.38rem);
    line-height: 1.2;
}

.agentic-diagnostic-consent__hero-copy p:last-child {
    margin: 0.42rem 0 0;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.agentic-diagnostic-consent__model {
    min-width: 9.5rem;
    display: grid;
    gap: 0.18rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid rgba(124, 58, 237, 0.24);
    border-radius: 0.9rem;
    background: rgba(124, 58, 237, 0.08);
}

.agentic-diagnostic-consent__model span {
    color: var(--text-soft);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.agentic-diagnostic-consent__model strong {
    color: #7c3aed;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

html[data-theme="dark"] .agentic-diagnostic-consent__model strong {
    color: #a78bfa;
}

.agentic-diagnostic-consent__facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.72rem;
}

.agentic-diagnostic-consent__fact {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.68rem;
    padding: 0.86rem;
    border: 1px solid var(--panel-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.agentic-diagnostic-consent__fact-icon {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border-radius: 0.78rem;
}

.agentic-diagnostic-consent__fact-icon svg {
    width: 1.18rem;
    height: 1.18rem;
    stroke-width: 2.15;
}

.agentic-diagnostic-consent__fact--blue .agentic-diagnostic-consent__fact-icon {
    color: #60a5fa;
    background: rgba(37, 99, 235, 0.14);
}

.agentic-diagnostic-consent__fact--green .agentic-diagnostic-consent__fact-icon {
    color: #34d399;
    background: rgba(16, 185, 129, 0.14);
}

.agentic-diagnostic-consent__fact--violet .agentic-diagnostic-consent__fact-icon {
    color: #a78bfa;
    background: rgba(124, 58, 237, 0.15);
}

.agentic-diagnostic-consent__fact strong {
    display: block;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.3;
}

.agentic-diagnostic-consent__fact p {
    margin: 0.3rem 0 0;
    color: var(--text-soft);
    font-size: 0.76rem;
    line-height: 1.45;
}

.agentic-diagnostic-consent__policy {
    display: flex;
    align-items: flex-start;
    gap: 0.72rem;
    padding: 0.82rem 0.92rem;
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 0.95rem;
    background: rgba(16, 185, 129, 0.08);
}

.agentic-diagnostic-consent__policy-icon {
    width: 1.75rem;
    height: 1.75rem;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #10b981;
    background: rgba(16, 185, 129, 0.14);
}

.agentic-diagnostic-consent__policy-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.agentic-diagnostic-consent__policy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.5;
}

.agentic-diagnostic-consent__policy strong {
    color: var(--text);
}

.agentic-diagnostic-consent__voice {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.82rem 1rem;
    border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--border));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--brand) 8%, var(--panel));
    color: var(--muted);
}

.agentic-diagnostic-consent__voice.is-confirmed {
    border-color: color-mix(in srgb, #34d399 56%, var(--border));
    background: color-mix(in srgb, #34d399 10%, var(--panel));
}

.agentic-diagnostic-consent__voice-icon {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--brand) 18%, transparent);
    color: var(--brand);
}

.agentic-diagnostic-consent__voice-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.agentic-diagnostic-consent__voice p {
    margin: 0;
    line-height: 1.45;
}

.agentic-diagnostic-consent__voice strong,
.agentic-diagnostic-consent__voice b {
    color: var(--text);
}

.agentic-diagnostic-consent__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    padding-top: 0.05rem;
}

.agentic-diagnostic-consent__actions button {
    min-height: 2.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 0.9rem;
    font-weight: 800;
}

.agentic-diagnostic-consent__actions button svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 2.1;
}

.agentic-diagnostic-consent__start {
    min-width: 11.75rem;
    box-shadow: 0 12px 26px rgba(37, 99, 235, 0.25);
}

.agentic-diagnostic-consent__cancel {
    min-width: 7.25rem;
}

@media (max-width: 720px) {
    .popup-window--agentic-consent {
        padding: 0.7rem;
    }

    .popup-window--agentic-consent .popup-window__body {
        padding: 0.9rem;
    }

    .agentic-diagnostic-consent__hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .agentic-diagnostic-consent__model {
        grid-column: 1 / -1;
    }

    .agentic-diagnostic-consent__facts {
        grid-template-columns: 1fr;
    }

    .agentic-diagnostic-consent__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .agentic-diagnostic-consent__actions button {
        width: 100%;
        min-width: 0;
    }
}

.device-command-popup__catalog {
    display: grid;
    gap: 1rem;
    align-items: start;
}

.device-command-table-shell {
    display: grid;
    gap: 0.85rem;
}

.device-command-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 0.8rem 1rem;
}

.device-command-table-toolbar__search {
    display: grid;
    gap: 0.4rem;
    flex: 1 1 20rem;
    min-width: min(100%, 20rem);
}

.device-command-table-toolbar__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem 0.8rem;
}

.device-command-table-wrap {
    min-height: 15rem;
    max-height: min(38rem, 56vh);
    overflow: auto;
    resize: vertical;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 16px 28px rgba(15, 23, 42, 0.08);
}

.device-command-table-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 0.9rem;
}

.device-command-table-pagination__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.device-command-table {
    width: 100%;
    min-width: 56rem;
    border-collapse: collapse;
}

.device-command-table th,
.device-command-table td {
    padding: 0.78rem 0.82rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    vertical-align: top;
    color: #0f172a;
    text-align: left;
}

.device-command-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.96));
    color: #0369a1;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.device-command-table tbody tr {
    transition: background 160ms ease, box-shadow 160ms ease;
}

.device-command-table tbody tr:hover {
    background: rgba(14, 165, 233, 0.06);
}

.device-command-table tbody tr.is-active {
    background: rgba(186, 230, 253, 0.38);
    box-shadow: inset 3px 0 0 rgba(34, 211, 238, 0.9);
}

.device-command-table__row--high,
.device-command-table__row--critical {
    box-shadow: inset 3px 0 0 rgba(248, 113, 113, 0.9);
}

.device-command-table__row--medium,
.device-command-table__row--warning {
    box-shadow: inset 3px 0 0 rgba(251, 191, 36, 0.88);
}

.device-command-table__row--low {
    box-shadow: inset 3px 0 0 rgba(74, 222, 128, 0.84);
}

.device-command-table__check-col {
    width: 1%;
    min-width: 4.2rem;
    white-space: nowrap;
}

.device-command-table__icon-col {
    width: 1%;
    min-width: 3.5rem;
    text-align: center;
    white-space: nowrap;
}

.device-command-table__checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: #38bdf8;
    cursor: pointer;
}

.device-command-table__code {
    display: inline-flex;
    max-width: 100%;
    padding: 0.26rem 0.48rem;
    border-radius: 0.65rem;
    border: 1px solid rgba(56, 189, 248, 0.14);
    background: rgba(15, 23, 42, 0.84);
    color: #dbeafe;
    font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
    font-size: 0.8rem;
    line-height: 1.52;
    word-break: break-word;
}

.device-command-table__stack {
    display: grid;
    gap: 0.2rem;
}

.device-command-table__stack small {
    color: #94a3b8;
    line-height: 1.45;
}

.device-command-table__empty-row td {
    padding: 1rem;
    border-bottom: 0;
}

.device-command-ai-suggest .device-command-table-wrap {
    border-color: rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 16px 28px rgba(15, 23, 42, 0.08);
}

.device-command-ai-suggest .device-command-table th,
.device-command-ai-suggest .device-command-table td {
    border-bottom-color: rgba(148, 163, 184, 0.2);
    color: #0f172a;
}

.device-command-ai-suggest .device-command-table thead th {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.96));
    color: #0369a1;
}

.device-command-ai-suggest .device-command-table tbody tr:hover {
    background: rgba(14, 165, 233, 0.08);
}

.device-command-ai-suggest .device-command-table tbody tr.is-active {
    background: rgba(186, 230, 253, 0.38);
}

.device-command-ai-suggest .device-command-table__code {
    border-color: rgba(14, 165, 233, 0.18);
    background: rgba(239, 246, 255, 0.96);
    color: #0c4a6e;
}

.device-command-ai-suggestion-shell {
    gap: 1rem;
}

.device-command-ai-grid {
    display: grid;
    gap: 0.85rem;
}

.device-command-ai-grid__empty {
    padding: 0.2rem 0;
}

.device-command-ai-card {
    display: grid;
    gap: 0.78rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.device-command-ai-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.1);
}

.device-command-ai-card.is-active {
    border-color: rgba(34, 197, 94, 0.38);
    box-shadow:
        inset 0 0 0 1px rgba(134, 239, 172, 0.4),
        0 18px 34px rgba(34, 197, 94, 0.12);
}

.device-command-ai-card--critical,
.device-command-ai-card--high {
    border-left: 4px solid rgba(239, 68, 68, 0.82);
}

.device-command-ai-card--medium,
.device-command-ai-card--warning {
    border-left: 4px solid rgba(245, 158, 11, 0.82);
}

.device-command-ai-card--low {
    border-left: 4px solid rgba(34, 197, 94, 0.82);
}

.device-command-ai-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 0.9rem;
}

.device-command-ai-card__approve {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.device-command-ai-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.device-command-ai-card__copy {
    flex: 0 0 auto;
}

.device-command-ai-card__command-shell {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.72rem 0.82rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background:
        linear-gradient(180deg, rgba(7, 18, 11, 0.98), rgba(3, 11, 8, 0.98));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 24px rgba(2, 6, 23, 0.18);
}

.device-command-ai-card__command {
    display: block;
    width: 100%;
    color: #d1fae5;
    font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
    font-size: 0.84rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.device-command-ai-card__reason {
    margin: 0;
    color: #475569;
    font-size: 0.83rem;
    line-height: 1.55;
}

html[data-theme="dark"] .device-command-ai-card {
    border-color: rgba(71, 85, 105, 0.46);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.14), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(8, 15, 28, 0.94));
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.24);
}

html[data-theme="dark"] .device-command-ai-card.is-active {
    border-color: rgba(74, 222, 128, 0.38);
    box-shadow:
        inset 0 0 0 1px rgba(74, 222, 128, 0.18),
        0 18px 36px rgba(34, 197, 94, 0.14);
}

html[data-theme="dark"] .device-command-ai-card__approve {
    color: #f8fafc;
}

html[data-theme="dark"] .device-command-ai-card__reason {
    color: #bfd3e6;
}

.device-command-result__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem 0.7rem;
}

.device-command-font-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.4rem;
    padding: 0.28rem 0.35rem 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.18);
    background: rgba(15, 23, 42, 0.82);
    color: #dbeafe;
}

.device-command-font-controls__label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.device-command-font-controls__buttons {
    display: inline-flex;
    gap: 0.3rem;
}

.device-command-font-button {
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.2rem 0.42rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.22);
    background: rgba(8, 47, 73, 0.72);
    color: #bae6fd;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.device-command-font-button:hover,
.device-command-font-button:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(34, 211, 238, 0.42);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}

.device-command-profile {
    gap: 0.8rem;
}

.device-command-profile__checklist {
    max-height: 24rem;
    overflow: auto;
}

.device-command-option span {
    display: grid;
    gap: 0.15rem;
}

.device-command-option small {
    color: var(--text-soft);
}

.device-command-result {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid var(--panel-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 252, 0.92));
}

html[data-theme="dark"] .device-command-result {
    background: linear-gradient(180deg, rgba(18, 28, 41, 0.94), rgba(12, 18, 29, 0.92));
}

.device-command-result__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: flex-end;
}

.device-command-result__analysis {
    display: grid;
    gap: 0.9rem;
}

.device-command-result__output-shell {
    display: grid;
    gap: 0.65rem;
}

.device-command-result__output-table {
    display: grid;
    gap: 0.65rem;
}

.device-command-result__output-table > .table-head--inline {
    align-items: flex-end;
    flex-wrap: nowrap;
}

.device-command-result__output-table > .table-head--inline > div:first-child {
    flex: 0 0 auto;
    min-width: max-content;
}

.device-command-output-table__actions {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 0.55rem;
    justify-content: flex-end;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 0.1rem;
    scrollbar-width: thin;
}

.device-command-output-table__actions .toolbar-search {
    flex: 0 0 18rem;
    min-width: 14rem;
}

.device-command-output-table__actions .toolbar-select {
    flex: 0 0 auto;
    min-width: 8.6rem;
}

.device-command-output-table__actions .muted-copy,
.device-command-output-table__count {
    flex: 0 0 auto;
    white-space: nowrap;
}

.device-command-output-table__button {
    flex: 0 0 auto;
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.device-command-output-table__button--parse {
    border-color: rgba(11, 116, 199, 0.28);
    background: linear-gradient(135deg, #2f7dd3 0%, #48b6df 100%);
    color: #fff;
}

.device-command-output-table__button--parse:hover,
.device-command-output-table__button--parse:focus-visible {
    border-color: rgba(11, 116, 199, 0.38);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.22);
}

.device-command-output-table__button--export {
    border-color: rgba(20, 184, 166, 0.28);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.16), rgba(56, 189, 248, 0.14));
    color: #0f766e;
}

.device-command-output-table__button--default {
    border-color: rgba(100, 116, 139, 0.22);
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.14), rgba(226, 232, 240, 0.2));
    color: var(--text);
}

.device-command-output-table__button .toolbar-button__icon {
    width: 1.08rem;
    height: 1.08rem;
}

.device-command-output-table__button--parse .toolbar-button__icon {
    color: #fff;
}

html[data-theme="dark"] .device-command-output-table__button--export {
    color: #99f6e4;
}

html[data-theme="dark"] .device-command-output-table__button--default {
    background: linear-gradient(135deg, rgba(51, 65, 85, 0.7), rgba(15, 23, 42, 0.9));
}

.device-command-output-table__output-cell {
    max-width: 42rem;
}

.device-command-output-table__one-line {
    display: block;
    max-width: 42rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text);
    font: 0.82rem/1.45 "Cascadia Code", "Consolas", monospace;
    cursor: help;
}

.certificate-health-table__wrap table {
    min-width: 180rem;
}

.certificate-health-table__row {
    cursor: pointer;
}

.certificate-health-table__row:hover td,
.certificate-health-table__row:focus-visible td {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.certificate-health-table__wrap th,
.certificate-health-table__wrap td {
    white-space: nowrap;
}

.certificate-health-table__pager {
    justify-content: flex-end;
    margin-top: 0.9rem;
}

.certificate-health-drawer {
    display: grid;
    gap: 1rem;
}

.certificate-health-drawer__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.certificate-health-drawer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.certificate-health-drawer__raw {
    box-shadow: none;
}

.certificate-health-drawer__raw .cli-panel {
    max-height: 24rem;
    overflow: auto;
    white-space: pre-wrap;
}

.device-command-result__output-table th,
.device-command-result__output-table td {
    vertical-align: top;
}

.device-command-output-table__group td {
    background: rgba(96, 165, 250, 0.12);
    color: var(--text);
    font-weight: 800;
    letter-spacing: 0;
}

.device-command-output-table__group span {
    margin-left: 0.45rem;
    color: var(--text-soft);
    font-weight: 700;
}

.device-command-output-table__pre {
    max-width: 42rem;
    max-height: 12rem;
    margin: 0;
    white-space: pre-wrap;
    overflow: auto;
    color: var(--text);
    font: 0.82rem/1.45 "Cascadia Code", "Consolas", monospace;
}

.device-command-result__output-details summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
}

.device-command-validation-preview {
    display: grid;
    gap: 0.8rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(56, 189, 248, 0.18);
    background: linear-gradient(180deg, rgba(7, 12, 23, 0.96), rgba(2, 6, 23, 0.94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.device-command-validation-preview__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.device-command-validation-preview__meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.device-command-validation-preview__label {
    color: #e2e8f0;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.device-command-validation-preview__count {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.26);
    background: rgba(8, 47, 73, 0.28);
    color: #bae6fd;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.device-command-validation-preview__list {
    display: grid;
    gap: 0.6rem;
}

.device-command-validation-preview__card {
    display: block;
    padding: 0.5rem 0.58rem 0.5rem 0.7rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(74, 222, 128, 0.18);
    background: rgba(20, 83, 45, 0.18);
}

.device-command-validation-preview__item {
    display: block;
    flex: 1 1 auto;
    max-width: 100%;
    padding: 0;
    border-radius: 0;
    border: 0;
    background: transparent;
    color: #bbf7d0;
    font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
    font-size: 0.79rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.device-command-ai-report {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    border: 1px solid rgba(56, 189, 248, 0.16);
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(5, 10, 20, 0.98), rgba(2, 6, 18, 0.96));
    color: #dbe7f3;
    font-size: var(--device-command-summary-font-size, 15px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 36px rgba(2, 6, 23, 0.24);
}

.device-command-ai-report > :first-child {
    margin-top: 0;
}

.device-command-ai-report > :last-child {
    margin-bottom: 0;
}

.device-command-ai-report :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    color: #f8fafc;
    font-weight: 800;
    line-height: 1.28;
}

.device-command-ai-report :is(h1, h2) {
    font-size: 1rem;
}

.device-command-ai-report :is(h3, h4, h5, h6) {
    font-size: 0.88rem;
    color: #7dd3fc;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.device-command-ai-report p,
.device-command-ai-report li {
    color: #dbe7f3;
    line-height: 1.68;
    font-size: 1em;
}

.device-command-ai-report ul,
.device-command-ai-report ol {
    margin: 0;
    padding-left: 1.2rem;
}

.device-command-ai-report strong {
    color: #f8fafc;
}

.device-command-ai-report code {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.18rem 0.46rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(56, 189, 248, 0.2);
    background: rgba(15, 23, 42, 0.9);
    color: #93c5fd;
    font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
    font-size: 0.82em;
    word-break: break-word;
}

.device-command-ai-report code.device-command-ai-cli {
    border-color: rgba(74, 222, 128, 0.26);
    background: rgba(20, 83, 45, 0.28);
    color: #bbf7d0;
}

.device-command-ai-report pre {
    margin: 0;
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(56, 189, 248, 0.12);
    background: rgba(2, 6, 23, 0.78);
    color: #dbeafe;
    overflow: auto;
}

.device-command-ai-report table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid rgba(56, 189, 248, 0.14);
    background: rgba(2, 6, 23, 0.72);
}

.device-command-ai-report th,
.device-command-ai-report td {
    padding: 0.72rem 0.82rem;
    border-bottom: 1px solid rgba(71, 85, 105, 0.35);
    white-space: normal;
    vertical-align: top;
    font-size: 0.94em;
}

.device-command-ai-report th {
    background: rgba(15, 23, 42, 0.88);
    color: #93c5fd;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.device-command-terminal {
    display: grid;
    gap: 0;
    max-height: none;
    overflow: visible;
    border-radius: 1rem;
    border: 1px solid rgba(71, 85, 105, 0.46);
    background:
        radial-gradient(circle at top, rgba(14, 165, 233, 0.1), transparent 26%),
        linear-gradient(180deg, #05070d 0%, #02040a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 20px 45px rgba(2, 6, 23, 0.5);
}

.device-command-terminal__chrome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.82rem 1rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(10, 15, 28, 0.88));
}

.device-command-terminal__traffic {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}

.device-command-terminal__dot {
    width: 0.68rem;
    height: 0.68rem;
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.08);
}

.device-command-terminal__dot--close {
    background: #fb7185;
}

.device-command-terminal__dot--min {
    background: #fbbf24;
}

.device-command-terminal__dot--max {
    background: #4ade80;
}

.device-command-terminal__caption {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
    text-align: center;
}

.device-command-terminal__caption strong {
    color: #e2e8f0;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.device-command-terminal__caption small {
    color: #7dd3fc;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-command-terminal__status {
    justify-self: end;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.28);
    background: rgba(14, 165, 233, 0.12);
    color: #bae6fd;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.device-command-terminal__status--critical,
.device-command-terminal__status--danger {
    border-color: rgba(248, 113, 113, 0.42);
    background: rgba(127, 29, 29, 0.22);
    color: #fecaca;
}

.device-command-terminal__status--warning {
    border-color: rgba(251, 191, 36, 0.42);
    background: rgba(120, 53, 15, 0.2);
    color: #fde68a;
}

.device-command-terminal__status--success {
    border-color: rgba(74, 222, 128, 0.42);
    background: rgba(20, 83, 45, 0.22);
    color: #bbf7d0;
}

.device-command-terminal__status--info,
.device-command-terminal__status--heading {
    border-color: rgba(56, 189, 248, 0.34);
    background: rgba(8, 47, 73, 0.22);
    color: #bae6fd;
}

.device-command-terminal__body {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
}

.device-command-terminal__device {
    display: grid;
    gap: 0.72rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(71, 85, 105, 0.3);
    background: linear-gradient(180deg, rgba(6, 10, 18, 0.92), rgba(3, 7, 15, 0.88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.device-command-terminal__device--critical,
.device-command-terminal__device--danger {
    border-color: rgba(248, 113, 113, 0.34);
    background: linear-gradient(180deg, rgba(60, 10, 10, 0.92), rgba(24, 6, 6, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 0 0 1px rgba(127, 29, 29, 0.18);
}

.device-command-terminal__device--warning {
    border-color: rgba(251, 191, 36, 0.3);
    background: linear-gradient(180deg, rgba(69, 26, 3, 0.92), rgba(28, 12, 3, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 0 0 1px rgba(120, 53, 15, 0.16);
}

.device-command-terminal__device--success {
    border-color: rgba(74, 222, 128, 0.3);
    background: linear-gradient(180deg, rgba(6, 40, 24, 0.92), rgba(3, 18, 10, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 0 0 1px rgba(20, 83, 45, 0.16);
}

.device-command-terminal__device-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.95rem;
    cursor: pointer;
    list-style: none;
}

.device-command-terminal__device-head::-webkit-details-marker {
    display: none;
}

.device-command-terminal__device-identity {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.device-command-terminal__device-target {
    color: #e2e8f0;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.device-command-terminal__device-meta {
    margin-top: 0.16rem;
    color: #94a3b8;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
}

.device-command-terminal__device-status {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.24);
    background: rgba(15, 23, 42, 0.72);
    color: #bae6fd;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.device-command-terminal__device-status--critical,
.device-command-terminal__device-status--danger {
    border-color: rgba(248, 113, 113, 0.42);
    background: rgba(127, 29, 29, 0.24);
    color: #fecaca;
}

.device-command-terminal__device-status--warning {
    border-color: rgba(251, 191, 36, 0.42);
    background: rgba(120, 53, 15, 0.24);
    color: #fde68a;
}

.device-command-terminal__device-status--success {
    border-color: rgba(74, 222, 128, 0.42);
    background: rgba(20, 83, 45, 0.24);
    color: #bbf7d0;
}

.device-command-terminal__device-body {
    display: grid;
    gap: 0.72rem;
    padding: 0 0.95rem 0.95rem;
}

.device-command-terminal__group {
    display: grid;
    gap: 0.38rem;
    padding: 0.85rem 0.9rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(71, 85, 105, 0.28);
    border-left-width: 3px;
    border-left-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(180deg, rgba(13, 17, 28, 0.96), rgba(4, 7, 15, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.device-command-terminal__group--command {
    border-left-color: rgba(56, 189, 248, 0.78);
}

.device-command-terminal__group--stderr,
.device-command-terminal__group--danger,
.device-command-terminal__group--critical {
    border-left-color: rgba(248, 113, 113, 0.78);
}

.device-command-terminal__group--warning {
    border-left-color: rgba(251, 191, 36, 0.78);
}

.device-command-terminal__group--success {
    border-left-color: rgba(74, 222, 128, 0.78);
}

.device-command-terminal__group--info,
.device-command-terminal__group--heading {
    border-left-color: rgba(56, 189, 248, 0.72);
}

.device-command-terminal__title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #94a3b8;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.device-command-terminal__emoji {
    font-size: 0.94rem;
    line-height: 1;
}

.device-command-terminal__emoji--device {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.device-command-terminal__title--command {
    color: #7dd3fc;
}

.device-command-terminal__title--stderr,
.device-command-terminal__title--danger,
.device-command-terminal__title--critical {
    color: #fca5a5;
}

.device-command-terminal__title--warning {
    color: #fde68a;
}

.device-command-terminal__title--success {
    color: #86efac;
}

.device-command-terminal__title--info,
.device-command-terminal__title--heading {
    color: #93c5fd;
}

.device-command-terminal__line {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
    font-size: var(--device-command-terminal-font-size, 14px);
    line-height: 1.62;
    text-shadow: 0 0 10px rgba(15, 23, 42, 0.18);
}

.device-command-terminal__line--command {
    color: #7dd3fc;
}

.device-command-terminal__line--stdout {
    color: #e2e8f0;
}

.device-command-terminal__line--stderr {
    color: #fca5a5;
}

.device-command-terminal__line--critical {
    color: #fb7185;
}

.device-command-terminal__line--danger {
    color: #fca5a5;
}

.device-command-terminal__line--warning {
    color: #fde68a;
}

.device-command-terminal__line--success {
    color: #86efac;
}

.device-command-terminal__line--info {
    color: #93c5fd;
}

.device-command-terminal__line--heading {
    color: #67e8f9;
}

.device-command-terminal__line--muted {
    color: #64748b;
}

.customer-tshoot-popup {
    display: grid;
    gap: 1rem;
}

.customer-tshoot-popup__cards {
    align-items: stretch;
}

.customer-tshoot-popup__list {
    display: grid;
    gap: 0.85rem;
}

.customer-tshoot-popup__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.95rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

html[data-theme="dark"] .customer-tshoot-popup__item {
    background: rgba(15, 23, 42, 0.76);
}

.customer-tshoot-popup__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.7rem;
    color: var(--text-soft);
    font-size: 0.82rem;
}

.customer-tshoot-popup__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.78);
}

html[data-theme="dark"] .customer-tshoot-popup__meta span {
    background: rgba(51, 65, 85, 0.7);
}

.customer-tshoot-popup__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.55rem;
}

.customer-contributor-shell {
    margin-top: 1rem;
}

.customer-contributor-table-wrap {
    margin-top: 0.35rem;
}

.customer-contributor-table {
    min-width: 86rem;
    table-layout: fixed;
}

.customer-contributor-table td,
.customer-contributor-table th {
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.customer-contributor-table .toolbar-button--action {
    padding: 0.38rem 0.58rem;
    min-height: auto;
    font-size: 0.82rem;
    white-space: nowrap;
}

.customer-contributor-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(79, 140, 255, 0.14);
    color: #2f5fd0;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

html[data-theme="dark"] .customer-contributor-rank {
    background: rgba(96, 165, 250, 0.2);
    color: #bfdbfe;
}

.customer-contributor-case {
    display: grid;
    gap: 0.28rem;
    min-width: 8rem;
}

.customer-contributor-case__link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.customer-contributor-case__link:hover,
.customer-contributor-case__link:focus-visible {
    text-decoration: underline;
}

.customer-contributor-case__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.customer-change-table {
    min-width: 74rem;
    table-layout: fixed;
}

.customer-change-title {
    min-width: 18rem;
    max-width: 0;
    color: var(--text-soft);
    line-height: 1.3;
}

.customer-contributor-summary {
    min-width: 14rem;
    max-width: 0;
    color: var(--text-soft);
    line-height: 1.3;
}

.customer-contributor-summary__text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: help;
}

.customer-contributor-summary__text:hover {
    color: var(--text-strong);
}

.customer-contributor-cell--updated,
.customer-contributor-cell--days,
.customer-contributor-cell--open {
    white-space: nowrap;
}

.customer-contributor-updated {
    display: grid;
    gap: 0.12rem;
    min-width: 8rem;
}

.customer-contributor-updated strong {
    font-size: 0.88rem;
    line-height: 1.1;
}

.customer-contributor-updated small {
    color: var(--text-soft);
    font-size: 0.74rem;
    line-height: 1.1;
}

.customer-contributor-age {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    color: var(--text-soft);
    font-weight: 700;
}

.customer-contributor-empty {
    margin-top: 0.35rem;
}

html[data-theme="dark"] .customer-contributor-summary {
    color: rgba(226, 232, 240, 0.84);
}

.donut-card__body--single {
    display: grid !important;
    grid-template-columns: minmax(14rem, 18.5rem) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: center !important;
    justify-items: stretch !important;
}

.donut-chart {
    width: 100%;
    display: grid !important;
    justify-items: center;
    gap: 0.75rem;
}

.donut-chart--ring {
    align-content: center;
}

.donut-chart__ring {
    width: min(18rem, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
    padding: 1rem;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.28) 42%, transparent 43%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(226, 232, 240, 0.55));
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.16), 0 18px 38px rgba(15, 23, 42, 0.08);
    transition: box-shadow 180ms ease, filter 180ms ease;
}

.donut-chart__ring > * {
    grid-area: 1 / 1;
}

html[data-theme="dark"] .donut-chart__ring {
    background:
        radial-gradient(circle at 35% 30%, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.78) 42%, transparent 43%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.82));
}

.donut-chart__ring.is-hovered {
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.18), 0 24px 40px rgba(15, 23, 42, 0.12), 0 0 0 10px var(--donut-hover-color, rgba(47, 129, 255, 0.12));
    filter: saturate(1.04);
}

.donut-chart__svg--modern {
    width: 100%;
    height: auto;
    overflow: visible;
}

.donut-chart__track {
    fill: none;
    stroke: rgba(226, 232, 240, 0.96);
    stroke-width: 32;
}

html[data-theme="dark"] .donut-chart__track {
    stroke: rgba(148, 163, 184, 0.18);
}

.donut-slice-path {
    cursor: pointer;
    transform: translate(0, 0);
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 180ms ease, filter 180ms ease, opacity 180ms ease;
    filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.08));
}

.donut-slice-path:hover,
.donut-slice-path:focus,
.donut-slice-path.is-active {
    transform: translate(var(--slice-shift-x, 0), var(--slice-shift-y, 0));
    filter: drop-shadow(0 18px 28px rgba(15, 23, 42, 0.18)) saturate(1.08);
}

.donut-slice-path:focus {
    outline: none;
}

.donut-chart__center {
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    gap: 0.25rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
    padding: 0.9rem;
    pointer-events: none;
}

html[data-theme="dark"] .donut-chart__center {
    background: rgba(15, 23, 42, 0.94);
}

.donut-chart__selection-indicator {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 2rem;
    padding: 0.34rem 0.62rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.96), rgba(21, 128, 61, 0.92));
    color: #f0fdf4;
    box-shadow: 0 14px 28px rgba(21, 128, 61, 0.26);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    z-index: 2;
    pointer-events: none;
}

.donut-chart__selection-indicator svg {
    width: 1rem;
    height: 1rem;
}

.donut-chart__total {
    font-size: clamp(1.35rem, 1.6vw, 1.8rem);
    font-weight: 800;
    line-height: 1;
}

.donut-chart__label {
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.donut-legend {
    display: grid;
    gap: 0.6rem;
    width: 100%;
    align-content: start;
}

.legend-row {
    width: 100%;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 0.82rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.76);
    color: inherit;
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

html[data-theme="dark"] .legend-row {
    background: rgba(15, 23, 42, 0.72);
}

.legend-row:hover {
    transform: translateY(-2px);
}

.legend-row__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legend-row__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.legend-row__check input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--brand);
}

.legend-row__share {
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-soft);
}

.legend-row.is-active {
    border-color: rgba(47, 129, 255, 0.28);
    box-shadow: 0 10px 22px rgba(47, 129, 255, 0.12);
    transform: translateY(-2px);
}

.legend-row--selected {
    border-color: rgba(34, 197, 94, 0.28);
    box-shadow: 0 12px 26px rgba(34, 197, 94, 0.14);
}

.legend-row.is-dimmed {
    opacity: 0.52;
}

.legend-row__selected-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    color: #16a34a;
}

.legend-row__selected-mark svg {
    width: 100%;
    height: 100%;
}

.legend-row--action {
    cursor: pointer;
}

.legend-row__action-button {
    justify-self: end;
}

.table-action-col {
    width: 1%;
    min-width: 4rem;
    white-space: nowrap;
    text-align: center;
}

.dataset-select-col {
    width: 1%;
    min-width: 3rem;
    text-align: center;
    white-space: nowrap;
}

.table-row-check {
    width: 1rem;
    height: 1rem;
    accent-color: #0ea5e9;
    cursor: pointer;
}

.table-row-check:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.infra-batch-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: 1.05rem;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.88), rgba(248, 250, 252, 0.96));
}

.infra-batch-toolbar__summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.infra-batch-toolbar__summary .muted-copy {
    margin: 0;
}

.infra-batch-toolbar__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.device-command-popup__batch-failures {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.85rem;
}

.row-action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.38rem;
}

.row-action-buttons--launch {
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    white-space: nowrap;
}

.device-inline-action {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    min-height: 2rem;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.device-inline-action:hover,
.device-inline-action:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.device-inline-action--putty {
    border-color: rgba(56, 189, 248, 0.28);
    background: rgba(224, 242, 254, 0.92);
    color: #075985;
}

.device-inline-action--rdp {
    border-color: rgba(59, 130, 246, 0.24);
    background: rgba(239, 246, 255, 0.92);
    color: #1d4ed8;
}

.device-inline-action--https {
    border-color: rgba(16, 185, 129, 0.24);
    background: rgba(236, 253, 245, 0.92);
    color: #047857;
}

.device-inline-action__icon {
    display: inline-flex;
    align-items: center;
    width: 0.92rem;
    height: 0.92rem;
}

.device-inline-action__icon svg {
    width: 100%;
    height: 100%;
}

.device-inline-action__label {
    line-height: 1;
}

.row-action-buttons--launch .device-inline-action {
    min-height: 1.8rem;
    padding: 0.22rem 0.48rem;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
}

.row-action-buttons--launch .device-inline-action__icon {
    width: 0.8rem;
    height: 0.8rem;
}

.device-inline-action--icon-only {
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: 0.42rem;
    justify-content: center;
    border-radius: 0.95rem;
}

.device-inline-action--icon-only .device-inline-action__icon {
    width: 1rem;
    height: 1rem;
}

.detail-drawer__device-launches {
    justify-content: flex-start;
}

html[data-theme="dark"] .device-inline-action {
    background: rgba(15, 23, 42, 0.88);
    border-color: rgba(71, 85, 105, 0.44);
    color: #e2e8f0;
}

html[data-theme="dark"] .device-inline-action--putty {
    background: rgba(8, 47, 73, 0.46);
    border-color: rgba(56, 189, 248, 0.3);
    color: #bae6fd;
}

html[data-theme="dark"] .device-inline-action--rdp {
    background: rgba(30, 41, 59, 0.86);
    border-color: rgba(96, 165, 250, 0.3);
    color: #bfdbfe;
}

html[data-theme="dark"] .device-inline-action--https {
    background: rgba(6, 40, 24, 0.72);
    border-color: rgba(74, 222, 128, 0.28);
    color: #bbf7d0;
}

.donut-glossary-trigger__clear {
    padding-inline: 0.85rem;
}

.brand-tagline {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.82rem;
    border-radius: 999px;
    border: 1px solid rgba(125, 211, 252, 0.2);
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.3), rgba(47, 129, 255, 0.2));
    color: #eff6ff;
    font-size: 0.84rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.16);
}

.topbar .eyebrow {
    padding: 0.28rem 0.82rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(47, 129, 255, 0.2), rgba(17, 184, 164, 0.14));
    color: #eef6ff;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.18em;
}

.topbar .workspace-tagline {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0.45rem;
    padding: 0.42rem 0.96rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(11, 93, 143, 0.3), rgba(27, 165, 167, 0.24));
    border: 1px solid rgba(125, 211, 252, 0.2);
    color: #eff6ff;
    font-size: clamp(0.82rem, 1.05vw, 0.98rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.2;
    text-transform: none;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.topbar__left h2 {
    margin: 0;
    font-size: clamp(1.85rem, 2.5vw, 2.85rem);
    line-height: 1.05;
}

.detail-drawer[data-detail-mode="troubleshooting"] .detail-drawer__panel {
    width: min(72rem, calc(100% - 0.75rem));
}

.detail-drawer[data-detail-mode="troubleshooting"] #detailDrawerClose {
    background: linear-gradient(135deg, #ef4444, #be123c);
    border-color: rgba(190, 24, 93, 0.4);
    color: #fff;
    box-shadow: 0 14px 28px rgba(190, 24, 93, 0.22);
}

.detail-drawer[data-detail-mode="troubleshooting"] #detailDrawerClose:hover,
.detail-drawer[data-detail-mode="troubleshooting"] #detailDrawerClose:focus-visible {
    background: linear-gradient(135deg, #dc2626, #9f1239);
    color: #fff;
}

.topbar__utility-group {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.topbar__utility-group--left {
    margin-left: auto;
}

.topbar-utility-button {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 3rem;
    padding-inline: 0.95rem;
    background: rgba(255, 255, 255, 0.88);
}

html[data-theme="dark"] .topbar-utility-button {
    background: rgba(15, 23, 42, 0.88);
}

.topbar-utility-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.1);
    color: var(--brand);
    flex: 0 0 auto;
}

.topbar-utility-button__icon svg {
    width: 1rem;
    height: 1rem;
}

.topbar-utility-button__copy {
    display: grid;
    text-align: left;
    line-height: 1.05;
}

.topbar-utility-button__copy strong {
    font-size: 0.9rem;
}

.topbar-utility-button__copy small {
    color: var(--text-soft);
    font-size: 0.73rem;
}

.topbar-utility-button__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.15rem;
    min-height: 2.15rem;
    padding: 0 0.52rem;
    border-radius: 999px;
    background: #dbeafe;
    color: #0b3f75;
    font-size: 0.92rem;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.topbar-utility-button__badge--danger {
    background: #fee2e2;
    color: #b91c1c;
}

.topbar-utility-button__badge--warning {
    background: #fef3c7;
    color: #b45309;
}

.topbar-utility-button__badge--brand {
    background: #dbeafe;
    color: #0b5d8f;
}

.topbar-utility-button__badge--profile {
    background: #d1fae5;
    color: #047857;
}

.topbar-utility-button--circle {
    position: relative;
    justify-content: center;
    width: 3.2rem;
    min-width: 3.2rem;
    height: 3.2rem;
    min-height: 3.2rem;
    padding: 0;
    border-radius: 999px;
    gap: 0;
}

.topbar-utility-button--circle .topbar-utility-button__icon {
    width: 1.95rem;
    height: 1.95rem;
    background: rgba(47, 129, 255, 0.12);
}

.topbar-utility-button--circle[data-feature="assigned"] {
    background: linear-gradient(180deg, rgba(47, 129, 255, 0.1), rgba(47, 129, 255, 0.04));
    border-color: rgba(47, 129, 255, 0.22);
}

.topbar-utility-button--circle[data-feature="assigned"] .topbar-utility-button__icon {
    background: rgba(47, 129, 255, 0.16);
    color: #0b5d8f;
}

.topbar-utility-button--circle[data-feature="help"] {
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.11), rgba(139, 92, 246, 0.04));
    border-color: rgba(139, 92, 246, 0.24);
}

.topbar-utility-button--circle[data-feature="help"] .topbar-utility-button__icon {
    background: rgba(139, 92, 246, 0.16);
    color: #6d28d9;
}

.topbar-utility-button--circle[data-feature="alerts"] {
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.11), rgba(245, 158, 11, 0.04));
    border-color: rgba(245, 158, 11, 0.24);
}

.topbar-utility-button--circle[data-feature="alerts"] .topbar-utility-button__icon {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.topbar-utility-button--circle[data-feature="profile"] {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.11), rgba(16, 185, 129, 0.04));
    border-color: rgba(16, 185, 129, 0.22);
}

.topbar-utility-button--circle[data-feature="profile"] .topbar-utility-button__icon {
    background: rgba(16, 185, 129, 0.16);
    color: #047857;
}

.topbar-utility-button--circle .topbar-utility-button__icon svg {
    width: 1rem;
    height: 1rem;
}

.topbar-utility-button--circle .topbar-utility-button__copy {
    display: none;
}

.topbar-utility-button--circle .topbar-utility-button__badge {
    position: absolute;
    top: -0.32rem;
    right: 50%;
    min-width: 1.48rem;
    height: 1.48rem;
    padding: 0 0.24rem;
    border: 2px solid var(--panel);
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16);
    font-size: 0.72rem;
    line-height: 1;
    transform: translateX(68%);
}

.topbar-case-list,
.topbar-help-list,
.topbar-profile-popup {
    display: grid;
    gap: 1rem;
}

.topbar-profile-popup__security {
    gap: 1rem;
}

.topbar-profile-popup__usage,
.topbar-profile-popup__account,
.topbar-profile-popup__voice {
    display: grid;
    gap: 0.85rem;
}

.topbar-profile-popup__voice {
    border-color: color-mix(in srgb, #8b5cf6 44%, var(--border));
    background:
        radial-gradient(circle at 94% 12%, color-mix(in srgb, #8b5cf6 15%, transparent), transparent 34%),
        var(--panel-soft);
}

.topbar-profile-popup__voice-icon {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid color-mix(in srgb, #8b5cf6 46%, var(--border));
    border-radius: 0.75rem;
    color: #a78bfa;
    background: color-mix(in srgb, #8b5cf6 14%, var(--panel));
}

.topbar-profile-popup__voice-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.topbar-profile-popup__voice-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.65rem;
}

.topbar-profile-popup__voice-control label {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.topbar-profile-popup__voice-control label > span {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.topbar-profile-popup__voice-control .toolbar-select {
    width: 100%;
    min-height: 2.55rem;
}

.topbar-profile-popup__voice-control .primary-button {
    min-height: 2.55rem;
    white-space: nowrap;
}

.topbar-profile-usage-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.topbar-profile-usage-grid > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.topbar-profile-usage-grid span {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.topbar-profile-usage-grid strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.95rem;
    text-overflow: ellipsis;
}

.topbar-profile-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.topbar-profile-actions :is(.primary-button, .toolbar-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.55rem;
    text-decoration: none;
}

.topbar-profile-actions svg {
    width: 0.78rem;
    height: 0.78rem;
}

.topbar-profile-actions .danger {
    border-color: color-mix(in srgb, var(--danger) 52%, var(--border));
    color: var(--danger);
}

.topbar-profile-popup__action {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
}

.topbar-profile-popup__action .toolbar-button__icon {
    width: 1.1rem;
    height: 1.1rem;
}

.topbar-profile-popup__action .toolbar-button__icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

@media (max-width: 720px) {
    .topbar-profile-usage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .topbar-profile-actions {
        grid-template-columns: 1fr;
    }

    .topbar-profile-popup__voice-control {
        grid-template-columns: 1fr;
    }
}

.workspace-help-popup-window .popup-window__dialog {
    width: min(96vw, 112rem);
    max-width: min(96vw, 112rem);
    height: min(92vh, 72rem);
}

.workspace-help-popup-window .popup-window__body {
    padding: 1rem;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 22%),
        radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.08), transparent 20%),
        linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.workspace-help {
    display: grid;
    gap: 1rem;
}

.workspace-help__intro,
.workspace-help__section {
    overflow: visible;
}

.workspace-help__layout {
    display: grid;
    grid-template-columns: minmax(17rem, 0.75fr) minmax(0, 1.45fr);
    gap: 1rem;
    align-items: start;
}

.workspace-help__toc-card,
.workspace-help__reference-card {
    height: 100%;
}

.workspace-help__toc-card {
    position: sticky;
    top: 0;
}

.workspace-help__toc-list,
.workspace-help__sections,
.workspace-help__steps {
    display: grid;
    gap: 0.8rem;
}

.workspace-help__toc-item {
    width: 100%;
    text-align: left;
    align-items: center;
    gap: 0.9rem;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.workspace-help__toc-item:hover,
.workspace-help__toc-item:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94));
    box-shadow: 0 18px 30px rgba(59, 130, 246, 0.1);
}

.workspace-help__toc-order {
    width: 2.3rem;
    height: 2.3rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(59, 130, 246, 0.24));
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.workspace-help__section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(20rem, 0.9fr);
    gap: 1rem;
    align-items: stretch;
}

.workspace-help__step {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    padding: 0.85rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
}

.workspace-help__step-number {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 800;
    box-shadow: 0 12px 20px rgba(37, 99, 235, 0.18);
}

.workspace-help__step h4 {
    margin: 0 0 0.28rem;
    font-size: 1rem;
}

.workspace-help__step p {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.5;
}

.workspace-help__shot {
    margin: 0;
    display: grid;
    gap: 0.45rem;
}

.workspace-help__shot figcaption {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #64748b;
}

.workspace-help__shot--image {
    align-self: stretch;
}

.workspace-help__shot-image {
    display: block;
    width: 100%;
    min-height: 19rem;
    object-fit: cover;
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 24px 44px rgba(148, 163, 184, 0.16);
}

.workspace-help__shot-shell {
    min-height: 19rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 50%, #eff6ff 100%);
    box-shadow: 0 24px 44px rgba(148, 163, 184, 0.16);
    overflow: hidden;
    padding: 1rem;
    display: grid;
    gap: 0.8rem;
}

.workspace-help__shot-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.workspace-help__shot-pill,
.workspace-help__shot-search,
.workspace-help__shot-button,
.workspace-help__shot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
}

.workspace-help__shot-pill {
    padding: 0.42rem 0.72rem;
    background: rgba(37, 99, 235, 0.12);
    color: #1d4ed8;
}

.workspace-help__shot-search {
    min-width: 12rem;
    padding: 0.42rem 0.9rem;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(148, 163, 184, 0.18);
    color: #64748b;
    justify-content: flex-start;
}

.workspace-help__shot-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.workspace-help__shot-kpis span,
.workspace-help__shot-accordion-list span,
.workspace-help__shot-ai-layout aside span {
    display: block;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(241, 245, 249, 0.94));
    border: 1px solid rgba(148, 163, 184, 0.16);
    box-shadow: 0 14px 24px rgba(148, 163, 184, 0.12);
}

.workspace-help__shot-kpis span {
    min-height: 5.4rem;
}

.workspace-help__shot-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(12rem, 0.8fr);
    gap: 0.75rem;
    min-height: 10rem;
}

.workspace-help__shot-map,
.workspace-help__shot-donut,
.workspace-help__shot-customer-head,
.workspace-help__shot-diagram,
.workspace-help__shot-table,
.workspace-help__shot-ai-main {
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.92));
    box-shadow: 0 16px 28px rgba(148, 163, 184, 0.12);
}

.workspace-help__shot-map {
    background:
        linear-gradient(to right, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(14, 165, 233, 0.06) 1px, transparent 1px),
        linear-gradient(180deg, #f8fbff, #eef5ff);
    background-size: 3.2rem 3.2rem, 3.2rem 3.2rem, auto;
    min-height: 10rem;
}

.workspace-help__shot-donut {
    min-height: 10rem;
    background:
        radial-gradient(circle at center, transparent 0 2.1rem, rgba(59, 130, 246, 0.18) 2.1rem 3.7rem, transparent 3.7rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.92));
}

.workspace-help__shot-customer-head {
    min-height: 4.8rem;
}

.workspace-help__shot-accordion-list {
    display: grid;
    gap: 0.65rem;
}

.workspace-help__shot-accordion-list span {
    min-height: 2.9rem;
}

.workspace-help__shot-diagram-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.workspace-help__shot-button {
    padding: 0.48rem 0.88rem;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #ffffff;
}

.workspace-help__shot-button--secondary {
    background: linear-gradient(135deg, #14b8a6, #0ea5e9);
}

.workspace-help__shot-diagram {
    min-height: 12rem;
    background:
        linear-gradient(90deg, rgba(59, 130, 246, 0.18) 0 4px, transparent 4px calc(33% - 4px), rgba(16, 185, 129, 0.18) calc(33% - 4px) calc(33% + 4px), transparent calc(33% + 4px) calc(66% - 4px), rgba(245, 158, 11, 0.18) calc(66% - 4px) calc(66% + 4px), transparent calc(66% + 4px)),
        linear-gradient(180deg, #ffffff, #eef6ff);
}

.workspace-help__shot-table {
    min-height: 8rem;
    padding: 0.9rem;
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.workspace-help__shot-table div {
    border-radius: 0.85rem;
    background: rgba(241, 245, 249, 0.95);
}

.workspace-help__shot-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.workspace-help__shot-badge {
    padding: 0.38rem 0.7rem;
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
}

.workspace-help__shot-login {
    display: grid;
    gap: 1rem;
}

.workspace-help__shot-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.workspace-help__shot-brand span {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
    color: #ffffff;
    font-weight: 900;
}

.workspace-help__shot-progress {
    display: grid;
    gap: 0.75rem;
}

.workspace-help__shot-progress-bar {
    height: 0.8rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e 0%, #0ea5e9 58%, rgba(148, 163, 184, 0.22) 58%);
}

.workspace-help__shot-progress-steps {
    display: grid;
    gap: 0.55rem;
}

.workspace-help__shot-progress-steps span {
    padding: 0.55rem 0.75rem;
    border-radius: 0.9rem;
    background: rgba(241, 245, 249, 0.95);
    color: #64748b;
}

.workspace-help__shot-progress-steps span.is-active {
    background: rgba(14, 165, 233, 0.12);
    color: #0f172a;
    font-weight: 700;
}

.workspace-help__shot-ai-layout {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 100%;
}

.workspace-help__shot-ai-layout aside {
    display: grid;
    gap: 0.55rem;
}

.workspace-help__shot-ai-layout aside span {
    min-height: 3rem;
}

.workspace-help__shot-ai-main {
    padding: 0.85rem;
    display: grid;
    gap: 0.7rem;
}

.workspace-help__shot-ai-message,
.workspace-help__shot-ai-composer {
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.workspace-help__shot-ai-message {
    min-height: 4.2rem;
}

.workspace-help__shot-ai-message--user {
    min-height: 3.4rem;
    margin-left: 3rem;
    background: rgba(219, 234, 254, 0.9);
}

.workspace-help__shot-ai-composer {
    min-height: 3.2rem;
    margin-top: auto;
}

@media (max-width: 1180px) {
    .workspace-help__layout,
    .workspace-help__section-grid {
        grid-template-columns: 1fr;
    }

    .workspace-help__toc-card {
        position: static;
    }
}

@media (max-width: 760px) {
    .workspace-help-popup-window .popup-window__dialog {
        width: min(98vw, 112rem);
        height: min(95vh, 72rem);
    }

    .workspace-help__shot-kpis,
    .workspace-help__shot-dashboard-grid,
    .workspace-help__shot-ai-layout {
        grid-template-columns: 1fr;
    }
}

.topbar-case-row {
    justify-content: space-between;
    gap: 1rem;
}

.topbar-case-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin: 0.35rem 0;
}

.topbar-case-row--danger {
    border-color: rgba(244, 63, 94, 0.2);
    background: linear-gradient(180deg, rgba(244, 63, 94, 0.08), rgba(255, 255, 255, 0.04)), var(--panel);
}

.topbar-popup-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
}

html:has(body.error-body),
body.error-body {
    height: auto;
    min-height: 100%;
    overflow: auto;
}

.error-page {
    min-height: 100dvh;
    width: 100%;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2rem);
}

.error-page__card {
    width: min(100%, 44rem);
    display: grid;
    gap: 1.35rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 1.5rem;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
}

.error-page__brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--panel-border);
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.035em;
}
.error-page__brand img { display: block; width: 6.5rem; height: 2.4rem; object-fit: contain; border-radius: 0.55rem; background: #fff; }
.error-page__brand sup { color: #bd8b11; font-size: 0.5em; letter-spacing: 0; }

.error-page__identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.error-page__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 1rem;
    background: rgba(239, 68, 68, 0.12);
    color: #dc4343;
}

.error-page__icon svg { width: 1.8rem; height: 1.8rem; }
.error-page__icon--not-found { background: rgba(71, 106, 225, 0.12); color: #476ae1; }

.error-page__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, 0.10);
    color: #b8303c;
    font-size: 0.84rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.error-page__copy { display: grid; gap: 0.7rem; }
.error-page__copy .eyebrow { margin: 0; }
.error-page__copy h1 {
    margin: 0;
    max-width: 18ch;
    color: var(--text);
    font-size: clamp(1.65rem, 3.5vw, 2.35rem);
    line-height: 1.15;
    letter-spacing: -0.025em;
}
.error-page__copy .muted-copy { margin: 0; max-width: 58ch; line-height: 1.5; }
.error-page__reference {
    width: fit-content;
    margin: 0.35rem 0 0;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.65rem;
    color: var(--text);
    font-size: 0.88rem;
}
.error-page__reference code { margin-left: 0.35rem; font-weight: 700; }

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.error-page__actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.6rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    text-decoration: none;
}
.error-page__actions svg { width: 1.05rem; height: 1.05rem; flex: none; }
.error-page__contact { border-color: rgba(71, 106, 225, 0.45); }
.error-page__help { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; }

@media (max-width: 30rem) {
    .error-page__actions { display: grid; }
}

@media (max-width: 960px) {
    .topbar__utility-group--left {
        margin-left: 0;
        width: 100%;
    }

    .topbar__utility-group {
        width: 100%;
    }

    .topbar-utility-button {
        flex: 1 1 14rem;
        justify-content: space-between;
    }

    .topbar-utility-button--circle {
        flex: 0 0 auto;
    }

    .topbar .workspace-tagline {
        font-size: 0.72rem;
        letter-spacing: 0.04em;
        padding: 0.38rem 0.72rem;
        white-space: normal;
    }

    .customer-tshoot-popup__item {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-tshoot-popup__actions {
        justify-content: flex-start;
    }

    .customer-contributor-summary {
        min-width: 12rem;
    }

    .donut-card__body--single {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Final workspace refinements */

.dashboard-grid,
.summary-cards,
.metric-grid,
.detail-grid,
.filter-grid,
.table-searchband,
.chart-controls,
.compact-table__toolbar,
.table-widget__toolbar {
    gap: 0.75rem;
}

.table-head,
.chart-card__head {
    gap: 0.85rem;
}

.content-card,
.chart-card,
.metric-card {
    scroll-margin-top: 1rem;
}

.summary-cards,
.metric-grid--wide,
.dashboard-flash-group__grid {
    --flash-card-square: clamp(10rem, 14vw, 12rem);
}

.summary-cards,
.metric-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(var(--flash-card-square), 1fr));
    justify-content: stretch;
    align-content: start;
}

.dashboard-flash-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.75rem;
    align-items: stretch;
}

.dashboard-flash-group {
    position: relative;
    display: grid;
    gap: 0.62rem;
    padding: 0.72rem 0.82rem 0.82rem;
    overflow: hidden;
    border-radius: 1.25rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08)),
        radial-gradient(circle at top right, color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 16%, transparent), transparent 9rem),
        var(--panel);
    box-shadow: 0 18px 38px rgba(7, 36, 62, 0.08);
}

html[data-theme="dark"] .dashboard-flash-group {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        radial-gradient(circle at top right, color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 18%, transparent), transparent 10rem),
        var(--panel);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
}

.dashboard-flash-group::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 0.24rem;
    background: linear-gradient(90deg, var(--dashboard-group-accent, var(--brand)), color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 44%, #ffffff 56%));
}

.dashboard-flash-group::after {
    content: "";
    position: absolute;
    top: 0.8rem;
    right: -1.4rem;
    width: 5rem;
    height: 5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 10%, transparent);
    filter: blur(8px);
    opacity: 0.85;
    pointer-events: none;
}

.dashboard-flash-group__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    flex-wrap: wrap;
    padding-bottom: 0.36rem;
    border-bottom: 1px solid color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 16%, transparent);
    position: relative;
    z-index: 1;
}

.dashboard-flash-group__head > div {
    display: grid;
    gap: 0;
}

html[data-theme="dark"] .dashboard-flash-group__head {
    border-bottom-color: color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 22%, transparent);
}

.dashboard-flash-group__head h3 {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.dashboard-flash-group__head .eyebrow {
    margin-bottom: 0;
    font-size: 0.58rem;
    letter-spacing: 0.18em;
    line-height: 1;
}

.dashboard-flash-group__head .status-pill {
    padding: 0.28rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 20%, transparent);
    background: color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 10%, var(--panel-strong) 90%);
    color: color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 80%, var(--text) 20%);
    font-size: 0.66rem;
    font-weight: 800;
}

.dashboard-flash-group__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--flash-card-square), 1fr));
    gap: 0.56rem;
    justify-content: stretch;
    position: relative;
    z-index: 1;
}

.dashboard-mini-card {
    --dashboard-card-accent: var(--brand);
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.42rem;
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 0.68rem 0.72rem 0.72rem;
    border-radius: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--dashboard-card-accent) 18%, rgba(148, 163, 184, 0.14));
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18)),
        radial-gradient(circle at top right, color-mix(in srgb, var(--dashboard-card-accent) 14%, transparent), transparent 7rem),
        linear-gradient(145deg, color-mix(in srgb, var(--dashboard-card-accent) 9%, transparent), transparent 70%),
        var(--panel-strong);
    box-shadow: 0 12px 26px rgba(7, 36, 62, 0.08);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

html[data-theme="dark"] .dashboard-mini-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)),
        linear-gradient(145deg, color-mix(in srgb, var(--dashboard-card-accent) 16%, transparent), transparent 72%),
        var(--panel-strong);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.dashboard-mini-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    background: linear-gradient(180deg, var(--dashboard-card-accent), color-mix(in srgb, var(--dashboard-card-accent) 24%, transparent));
    opacity: 0.95;
}

.dashboard-mini-card::after {
    content: "";
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dashboard-card-accent) 10%, transparent);
    filter: blur(12px);
    opacity: 0.65;
    pointer-events: none;
}

.dashboard-mini-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--dashboard-card-accent) 28%, rgba(148, 163, 184, 0.18));
    box-shadow: 0 18px 30px rgba(7, 36, 62, 0.12);
}

html[data-theme="dark"] .dashboard-mini-card:hover {
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
}

.dashboard-mini-card__top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.28rem;
    position: relative;
    z-index: 1;
}

.dashboard-mini-card__icon {
    display: grid;
    place-items: center;
    width: 2.32rem;
    height: 2.32rem;
    border-radius: 0.72rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--dashboard-card-accent), color-mix(in srgb, var(--dashboard-card-accent) 58%, #ffffff 42%));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 10px 18px color-mix(in srgb, var(--dashboard-card-accent) 28%, transparent);
    position: relative;
    z-index: 1;
}

.dashboard-mini-card__icon svg {
    width: 1.08rem;
    height: 1.08rem;
}

.dashboard-mini-card__body {
    display: grid;
    align-content: start;
    gap: 0.16rem;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.dashboard-mini-card__label {
    margin: 0;
    font-size: 0.62rem;
    line-height: 1.18;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-mini-card__value {
    font-size: 1.36rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    font-weight: 800;
    text-wrap: balance;
}

.dashboard-mini-card__footer {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    min-width: 0;
    color: var(--text-soft);
    font-size: 0.62rem;
    line-height: 1.1;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.dashboard-mini-card__footer span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-mini-card__status-dot {
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 999px;
    background: var(--dashboard-card-accent);
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--dashboard-card-accent) 16%, transparent);
    flex: 0 0 auto;
}

.dashboard-mini-card--ocean,
.dashboard-mini-card--sky {
    --dashboard-card-accent: #0f6db1;
}

.dashboard-mini-card--mint {
    --dashboard-card-accent: #13937f;
}

.dashboard-mini-card--sun,
.dashboard-mini-card--amber {
    --dashboard-card-accent: #d18b12;
}

.dashboard-mini-card--rose {
    --dashboard-card-accent: #d14f7e;
}

.dashboard-mini-card--violet {
    --dashboard-card-accent: #6d4de8;
}

.dashboard-mini-card--slate {
    --dashboard-card-accent: #475569;
}

.dashboard-flash-group--overview {
    --dashboard-group-accent: #0f6db1;
    border-color: rgba(47, 129, 255, 0.16);
}

.dashboard-flash-group--troubleshooting {
    --dashboard-group-accent: #d14f7e;
    border-color: rgba(251, 113, 133, 0.16);
}

.dashboard-flash-group--changes {
    --dashboard-group-accent: #d18b12;
    border-color: rgba(245, 158, 11, 0.18);
}

.dashboard-flash-group__donut {
    grid-template-columns: minmax(11.5rem, 13.5rem) minmax(12rem, 1fr);
    align-items: start !important;
    min-height: 0;
    padding-top: 0.15rem;
}

.dashboard-flash-group__donut .donut-chart,
.dashboard-flash-group__donut .donut-chart__ring {
    width: min(13rem, 100%);
}

.dashboard-flash-group__donut .donut-legend {
    align-self: start;
    align-content: start;
}

.dashboard-flash-group__donut .legend-row {
    grid-template-columns: auto auto minmax(8rem, 1fr) auto auto;
}

@media (max-width: 980px) {
    .dashboard-flash-group__grid {
        grid-template-columns: repeat(auto-fit, minmax(var(--flash-card-square), var(--flash-card-square)));
    }

    .dashboard-flash-group__donut {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .summary-cards,
    .metric-grid--wide,
    .dashboard-flash-group__grid {
        --flash-card-square: 7.4rem;
    }

    .dashboard-flash-group__grid {
        grid-template-columns: repeat(auto-fit, minmax(var(--flash-card-square), var(--flash-card-square)));
    }

    .dashboard-mini-card {
        aspect-ratio: 1 / 1;
        min-height: 0;
    }
}

.metric-card--compact {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0.42rem;
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 0.68rem 0.72rem 0.72rem;
    border-radius: 0.72rem;
    box-shadow: 0 12px 26px rgba(7, 36, 62, 0.08);
    border-color: color-mix(in srgb, currentColor 18%, rgba(148, 163, 184, 0.14));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18)),
        radial-gradient(circle at top right, color-mix(in srgb, currentColor 14%, transparent), transparent 7rem),
        linear-gradient(145deg, color-mix(in srgb, currentColor 9%, transparent), transparent 70%),
        var(--panel-strong);
}

.metric-card--compact:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, currentColor 28%, rgba(148, 163, 184, 0.18));
    box-shadow: 0 18px 30px rgba(7, 36, 62, 0.12);
}

html[data-theme="dark"] .metric-card--compact {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)),
        linear-gradient(145deg, color-mix(in srgb, currentColor 16%, transparent), transparent 72%),
        var(--panel-strong);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .metric-card--compact:hover {
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
}

.metric-card--compact::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    background: linear-gradient(180deg, currentColor, color-mix(in srgb, currentColor 24%, transparent));
    opacity: 0.95;
}

.metric-card--compact::after {
    content: "";
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    filter: blur(12px);
    opacity: 0.65;
    pointer-events: none;
}

.metric-card--compact .metric-card__top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.28rem;
    position: relative;
    z-index: 1;
}

.metric-card--compact .metric-card__body {
    display: grid;
    align-content: start;
    gap: 0.16rem;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.metric-card--compact .metric-card__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.62rem;
    background: color-mix(in srgb, currentColor 12%, transparent);
    color: currentColor;
    border: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        0 10px 18px color-mix(in srgb, currentColor 12%, transparent);
}

.metric-card--compact .metric-card__icon svg,
.metric-card--compact .metric-card__icon img {
    width: 0.92rem;
    height: 0.92rem;
}

.metric-card--compact .metric-card__label {
    margin: 0;
    font-size: 0.62rem;
    line-height: 1.18;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    font-weight: 800;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.metric-card--compact .metric-card__value {
    margin: 0;
    font-size: 1.36rem;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--text);
    font-weight: 800;
    text-wrap: balance;
}

.metric-card--compact .metric-card__footer {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    min-width: 0;
    color: var(--text-soft);
    font-size: 0.62rem;
    line-height: 1.1;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.metric-card--compact .metric-card__footer span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-card--compact .metric-card__status-dot {
    width: 0.44rem;
    height: 0.44rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, currentColor 16%, transparent);
    flex: 0 0 auto;
}

.summary-cards--row {
    grid-auto-columns: minmax(var(--flash-card-square), 1fr);
}

.summary-cards--customer360 .metric-card {
    min-width: min(var(--flash-card-square), 100%);
}

.nav-link__icon {
    background: rgba(79, 140, 255, 0.12);
    border-color: rgba(79, 140, 255, 0.18);
    color: var(--brand);
}

.nav-link.active .nav-link__icon {
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
}

.sidebar-utility__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.sidebar-theme-select {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1 1 auto;
}

.sidebar-theme-select__icon {
    flex: 0 0 auto;
}

.sidebar-theme-select select {
    min-width: 0;
    width: 100%;
}

.sidebar-logout-button {
    color: #fb7185;
}

.ai-launch-button {
    white-space: nowrap;
    font-weight: 800;
}

.ai-launch-button--topbar {
    background: linear-gradient(135deg, rgba(11, 93, 143, 0.12), rgba(27, 165, 167, 0.14));
    border-color: rgba(27, 165, 167, 0.22);
}

.ai-voice-launch-button {
    color: var(--brand);
    border-color: rgba(27, 165, 167, 0.2);
    background: linear-gradient(135deg, rgba(11, 93, 143, 0.08), rgba(27, 165, 167, 0.12));
}

.ai-voice-launch-button.is-active {
    color: #fff;
    border-color: rgba(239, 68, 68, 0.28);
    background: linear-gradient(135deg, #b64646, #ef4444);
    animation: aiPulse 1s ease-in-out infinite;
}

.ai-voice-launch-button.is-speaking {
    color: #fff;
    border-color: rgba(245, 158, 11, 0.28);
    background: linear-gradient(135deg, #b45309, #f59e0b);
}

.ai-launch-button--sidebar {
    width: 100%;
    justify-content: center;
    margin: 0.2rem 0 0.75rem;
    background: linear-gradient(135deg, rgba(11, 93, 143, 0.12), rgba(27, 165, 167, 0.14));
    border-color: rgba(27, 165, 167, 0.22);
}

.nav-link--button {
    width: 100%;
    text-align: left;
}

.selection-badge--active {
    border-color: rgba(47, 129, 255, 0.28);
    background: linear-gradient(135deg, rgba(47, 129, 255, 0.16), rgba(17, 184, 164, 0.14));
    color: var(--text);
    box-shadow: 0 10px 24px rgba(47, 129, 255, 0.12);
}

.selection-badge--confirmed {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    border-color: rgba(34, 197, 94, 0.28);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.16), rgba(22, 163, 74, 0.12));
    box-shadow: 0 12px 26px rgba(34, 197, 94, 0.14);
}

.selection-badge__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    color: #16a34a;
}

.selection-badge__icon svg {
    width: 100%;
    height: 100%;
}

.selection-badge--active strong {
    color: #1d4ed8;
}

html[data-theme="dark"] .selection-badge--active strong {
    color: #bfdbfe;
}

.dataset-top-summary {
    margin-bottom: 0.95rem;
}

.dataset-top-summary--selected {
    border-color: rgba(47, 129, 255, 0.22);
    box-shadow: 0 14px 34px rgba(47, 129, 255, 0.08);
}

.dataset-top-summary__cards {
    margin-bottom: 0.8rem;
}

.dataset-group-row td {
    padding: 0.7rem 0.9rem;
    background: linear-gradient(135deg, rgba(47, 129, 255, 0.12), rgba(17, 184, 164, 0.08));
    border-top: 1px solid rgba(47, 129, 255, 0.18);
    border-bottom: 1px solid rgba(47, 129, 255, 0.14);
}

.dataset-group-row__label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 800;
    color: var(--text);
}

.chart-card--summary-top {
    margin-bottom: 0.85rem;
}

.donut-card--selected {
    border-color: rgba(47, 129, 255, 0.22);
    box-shadow: 0 18px 36px rgba(47, 129, 255, 0.1);
}

.donut-glossary-trigger {
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.donut-glossary-trigger .muted-copy {
    min-width: auto;
    flex: 0 0 auto;
    padding: 0.26rem 0.7rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.08);
    border: 1px solid rgba(47, 129, 255, 0.14);
}

.donut-card .chart-controls {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
}

.donut-card .chart-controls > * {
    flex: 0 0 auto;
}

.donut-glossary-trigger__icon {
    min-width: 2.35rem;
}

.donut-glossary__status {
    margin-top: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.24rem 0.7rem;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.14);
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.donut-glossary__search-shell {
    display: grid;
    gap: 0.35rem;
    margin: 0.55rem 0 0.75rem;
}

.donut-glossary-popup .donut-glossary__list {
    max-height: min(58vh, 34rem);
    overflow: auto;
    padding-right: 0.2rem;
}

.dashboard-engineer-sla-case-stack {
    display: grid;
    gap: 0.5rem;
}

.dashboard-engineer-sla-case-count {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.dashboard-engineer-sla-cases {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dashboard-case-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.34rem 0.52rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(47, 129, 255, 0.18);
    background: rgba(255, 255, 255, 0.88);
    color: var(--brand);
    font: inherit;
    font-weight: 800;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.dashboard-case-link:hover,
.dashboard-case-link:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(47, 129, 255, 0.28);
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.dashboard-case-link__number {
    white-space: nowrap;
}

html[data-theme="dark"] .dashboard-case-link {
    background: rgba(15, 23, 42, 0.82);
    border-color: rgba(71, 85, 105, 0.42);
    color: #93c5fd;
}

.legend-row {
    grid-template-columns: auto auto minmax(0, 1.35fr) auto auto auto;
    align-items: flex-start;
}

.legend-row__label,
.donut-glossary__label {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.35;
    overflow-wrap: break-word;
    word-break: normal;
}

.legend-row__action-button {
    align-self: center;
}

.dashboard-grid--triple .donut-card__body--single {
    grid-template-columns: minmax(11.5rem, 13.5rem) minmax(12rem, 1fr);
    align-items: start !important;
}

.dashboard-grid--triple .donut-chart__ring {
    width: min(13rem, 100%);
}

.dashboard-grid--triple .donut-chart,
.dashboard-grid--triple .donut-legend {
    align-content: start;
}

.dashboard-grid--triple .legend-row {
    grid-template-columns: auto auto minmax(8rem, 1fr) auto auto auto;
}

.ai-fab-stack {
    position: fixed;
    right: 1.6rem;
    bottom: 1.7rem;
    display: grid;
    justify-items: end;
    gap: 0.7rem;
    z-index: 65;
}

.ai-fab-menu {
    display: grid;
    justify-items: end;
    gap: 0.65rem;
    opacity: 0;
    transform: translateY(0.8rem) scale(0.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.ai-fab-stack.is-expanded .ai-fab-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.ai-fab {
    width: 4.2rem;
    height: 4.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(27, 165, 167, 0.24);
    background: linear-gradient(135deg, var(--brand), var(--accent));
    color: #fff;
    box-shadow: 0 18px 42px rgba(7, 36, 62, 0.22);
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ai-fab--launcher {
    min-width: 4.8rem;
    padding: 0 1rem;
    justify-content: flex-start;
}

.ai-fab--launcher.is-active {
    box-shadow: 0 22px 48px rgba(7, 36, 62, 0.28);
}

.ai-fab__icon,
.ai-fab__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ai-fab__label {
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ai-fab__action {
    width: auto;
    min-width: 8.25rem;
    height: 3.2rem;
    padding: 0 1rem;
    justify-content: flex-start;
    border-radius: 1rem;
}

.ai-fab__action-label {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ai-fab__action--chat {
    background: linear-gradient(135deg, #0b5d8f 0%, #1ba5a7 100%);
}

.ai-fab__action--voice {
    background: linear-gradient(135deg, #b64646 0%, #ef4444 100%);
}

.ai-fab__action--voice.is-active {
    background: linear-gradient(135deg, #c24141 0%, #ef4444 100%);
    animation: aiPulse 1s ease-in-out infinite;
}

.ai-fab__action--voice.is-speaking {
    background: linear-gradient(135deg, #b45309 0%, #f59e0b 100%);
}

.ai-fab svg {
    width: 1.45rem;
    height: 1.45rem;
}

.ai-fab:hover {
    transform: translateY(-2px) scale(1.01);
}

.ai-fab::before {
    display: none;
}

.ai-assistant {
    position: fixed;
    inset: 0;
    display: block;
    background: rgba(5, 16, 28, 0.26);
    backdrop-filter: blur(6px);
    z-index: 80;
}

.ai-assistant:not(.hidden) .ai-assistant__panel {
    animation: aiAssistantPanelIn 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ai-assistant__panel {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: min(43rem, calc(100vw - 2rem));
    height: min(85vh, calc(100vh - 2rem));
    min-width: 29rem;
    min-height: 34rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background:
        radial-gradient(circle at top right, rgba(27, 165, 167, 0.16), transparent 18rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 247, 252, 0.96));
    border: 1px solid var(--panel-border);
    border-radius: 1.45rem;
    box-shadow: 0 24px 60px rgba(7, 36, 62, 0.2);
    padding: 1rem;
    gap: 0.9rem;
    overflow: hidden;
    resize: both;
}

html[data-theme="dark"] .ai-assistant__panel {
    background:
        radial-gradient(circle at top right, rgba(57, 195, 191, 0.16), transparent 18rem),
        linear-gradient(180deg, rgba(10, 22, 35, 0.98), rgba(15, 30, 45, 0.96));
}

.ai-assistant__panel::after {
    content: "";
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    width: 0.9rem;
    height: 0.9rem;
    border-right: 2px solid rgba(11, 93, 143, 0.28);
    border-bottom: 2px solid rgba(11, 93, 143, 0.28);
    pointer-events: none;
    opacity: 0.85;
}

html[data-theme="dark"] .ai-assistant__panel::after {
    border-right-color: rgba(79, 140, 255, 0.42);
    border-bottom-color: rgba(79, 140, 255, 0.42);
}

.ai-assistant__panel.is-dragging {
    box-shadow: 0 28px 68px rgba(7, 36, 62, 0.26);
}

.ai-assistant__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.35rem 0.1rem 0 0.15rem;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.ai-assistant__panel.is-dragging .ai-assistant__head {
    cursor: grabbing;
}

.ai-assistant__head h3 {
    margin: 0;
    font-size: 1.35rem;
}

.ai-assistant__head-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.ai-assistant__body-shell {
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(12.25rem, 20vw, 13.5rem) minmax(0, 1fr);
    gap: 1rem;
}

.ai-assistant__content {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 1rem;
}

.ai-assistant__sidebar {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.8rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(79, 140, 255, 0.14);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

html[data-theme="dark"] .ai-assistant__sidebar {
    background: rgba(255, 255, 255, 0.04);
}

.ai-assistant__sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
}

.ai-assistant__sidebar-body {
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 0.8rem;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.28rem;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--project-scroll-mid) var(--project-scroll-track);
}

.ai-assistant__sidebar-body::-webkit-scrollbar {
    width: 0.5rem;
}

.ai-assistant__sidebar-body::-webkit-scrollbar-thumb {
    background: var(--project-scroll-mid);
    border-radius: 999px;
}

.ai-assistant__sidebar-body::-webkit-scrollbar-track {
    background: var(--project-scroll-track);
    border-radius: 999px;
}

.ai-assistant__tool-list {
    display: grid;
    gap: 0.7rem;
}

.ai-assistant__tool-list-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
}

.ai-assistant__tool-grid {
    display: grid;
    gap: 0.58rem;
}

.ai-assistant__tool-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    width: 100%;
    padding: 0.78rem 0.82rem;
    border-radius: 1rem;
    border: 1px solid rgba(79, 140, 255, 0.14);
    background: rgba(79, 140, 255, 0.06);
    color: var(--text);
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ai-assistant__tool-card:hover {
    transform: translateY(-1px);
    border-color: rgba(79, 140, 255, 0.24);
    box-shadow: 0 16px 28px rgba(7, 36, 62, 0.08);
}

.ai-assistant__tool-card.is-active {
    border-color: rgba(27, 165, 167, 0.3);
    background: linear-gradient(135deg, rgba(11, 93, 143, 0.12), rgba(27, 165, 167, 0.16));
}

.ai-assistant__tool-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.ai-assistant__tool-copy strong {
    font-size: 0.84rem;
}

.ai-assistant__tool-copy p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.76rem;
    line-height: 1.4;
}

.ai-assistant__tool-pill,
.ai-assistant__session-tag,
.ai-workspace__mcp-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: rgba(79, 140, 255, 0.1);
    border: 1px solid rgba(79, 140, 255, 0.12);
    color: var(--brand-strong);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.ai-assistant__tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.92rem;
    color: #fff;
    box-shadow: 0 14px 24px rgba(7, 36, 62, 0.12);
}

.ai-assistant__tool-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.ai-assistant__tool-icon--jira {
    background: linear-gradient(135deg, #1d4ed8, #38bdf8);
}

.ai-assistant__tool-icon--confluence {
    background: linear-gradient(135deg, #0f766e, #22c55e);
}

.ai-assistant__tool-icon--webexapis {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.ai-assistant__session-list {
    min-height: 0;
    display: grid;
    gap: 0.55rem;
    overflow: visible;
    padding-right: 0;
}

.ai-assistant__session-item {
    padding: 0.72rem 0.78rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(79, 140, 255, 0.12);
    background: rgba(79, 140, 255, 0.06);
}

.ai-assistant__session-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-soft);
}

.ai-assistant__session-meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.ai-assistant__session-item p {
    margin: 0;
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.45;
}

.ai-assistant__panel.is-sidebar-collapsed .ai-assistant__body-shell {
    grid-template-columns: minmax(0, 1fr);
}

.ai-assistant__panel.is-sidebar-collapsed .ai-assistant__sidebar {
    display: none;
}

.ai-assistant__model {
    display: grid;
    gap: 0.18rem;
    min-width: 8.75rem;
    font-size: 0.75rem;
    color: var(--text-soft);
}

.ai-assistant__model span {
    font-weight: 700;
}

.ai-assistant__context {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ai-assistant__statusbar {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.88fr);
    gap: 0.7rem;
    align-items: stretch;
}

.ai-assistant__quota,
.ai-assistant__progress {
    border-radius: 1rem;
    border: 1px solid rgba(79, 140, 255, 0.14);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .ai-assistant__quota,
html[data-theme="dark"] .ai-assistant__progress {
    background: rgba(255, 255, 255, 0.04);
}

.ai-assistant__quota {
    display: grid;
    gap: 0.55rem;
    padding: 0.78rem 0.85rem;
}

.ai-assistant__quota-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.7rem;
}

.ai-assistant__quota-title {
    display: grid;
    gap: 0.18rem;
}

.ai-assistant__quota-head strong {
    font-size: 0.86rem;
}

.ai-assistant__quota-head p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.76rem;
    line-height: 1.2;
    font-weight: 700;
}

.ai-assistant__quota-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    font-size: 0.76rem;
    color: var(--text-soft);
}

.ai-assistant__quota-track {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.ai-assistant__quota-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    transition: width 180ms ease;
}

.ai-assistant__quota-fill.is-warn {
    background: linear-gradient(90deg, #c88213, #f59e0b);
}

.ai-assistant__quota-fill.is-danger {
    background: linear-gradient(90deg, #ba4545, #ef4444);
}

.ai-assistant__progress {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.72rem 0.85rem;
    min-height: 3.25rem;
}

.ai-assistant__robot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(11, 93, 143, 0.14), rgba(27, 165, 167, 0.16));
    color: var(--brand);
    flex: 0 0 auto;
}

.ai-assistant__robot svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ai-assistant__robot.is-active {
    animation: aiRobotHop 1.25s cubic-bezier(0.37, 0, 0.22, 1) infinite;
    box-shadow: 0 14px 22px rgba(11, 93, 143, 0.14);
}

.ai-assistant__progress-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.ai-assistant__progress-title {
    font-size: 0.79rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.ai-assistant__progress-text {
    margin: 0;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.35;
}

.ai-assistant__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.38rem 0.68rem;
    border-radius: 999px;
    background: rgba(79, 140, 255, 0.1);
    border: 1px solid rgba(79, 140, 255, 0.14);
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 700;
}

.ai-assistant__messages {
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    gap: 0.8rem;
    align-content: start;
    padding: 0 0.35rem 0 0.15rem;
    scrollbar-width: thin;
    scrollbar-color: var(--project-scroll-mid) var(--project-scroll-track);
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    scroll-behavior: smooth;
}

.ai-assistant__messages::-webkit-scrollbar {
    width: 0.55rem;
}

.ai-assistant__messages::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 1px solid rgba(6, 29, 45, 0.5);
    background:
        linear-gradient(180deg, var(--project-scroll-start) 0%, var(--project-scroll-mid) 45%, var(--project-scroll-end) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 8px 18px rgba(0, 12, 22, 0.2);
}

.ai-assistant__messages::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, #72ee7d 0%, #32e4ff 45%, #2b8dff 100%);
}

.ai-assistant__typing {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1rem;
    border-radius: 1.15rem;
    border: 1px solid var(--panel-border);
    background: linear-gradient(180deg, rgba(11, 93, 143, 0.08), rgba(27, 165, 167, 0.05));
    box-shadow: var(--shadow-soft);
}

.ai-assistant__typing--live::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.46) 45%, transparent 80%);
    transform: translateX(-120%);
    animation: aiTypingSweep 1.7s linear infinite;
    pointer-events: none;
}

.ai-assistant__typing-copy {
    display: grid;
    gap: 0.15rem;
}

.ai-assistant__typing-copy p {
    margin: 0;
}

.ai-assistant__message-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(79, 140, 255, 0.16);
    font-size: 0.76rem;
    color: var(--text-soft);
}

.ai-assistant__source-list {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.8rem;
}

.ai-assistant__source-item {
    padding: 0.7rem 0.8rem;
    border-radius: 0.9rem;
    background: rgba(79, 140, 255, 0.08);
    border: 1px solid rgba(79, 140, 255, 0.12);
}

.ai-assistant__source-item a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: underline;
}

.ai-assistant__empty,
.ai-assistant__message {
    border-radius: 1.15rem;
    border: 1px solid var(--panel-border);
    box-shadow: var(--shadow-soft);
}

.ai-assistant__empty {
    padding: 1rem 1.05rem;
    background: rgba(255, 255, 255, 0.74);
}

html[data-theme="dark"] .ai-assistant__empty {
    background: rgba(255, 255, 255, 0.03);
}

.ai-assistant__message {
    position: relative;
    overflow: visible;
    width: 100%;
    padding: 1rem 1.05rem;
    transform-origin: bottom left;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.ai-assistant__message--assistant {
    background: linear-gradient(180deg, rgba(11, 93, 143, 0.08), rgba(27, 165, 167, 0.05));
}

.ai-assistant__message--user {
    background: rgba(255, 255, 255, 0.88);
    justify-self: end;
    width: min(100%, 94%);
}

html[data-theme="dark"] .ai-assistant__message--user {
    background: rgba(255, 255, 255, 0.04);
}

.ai-assistant__message:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 32px rgba(7, 36, 62, 0.1);
}

.ai-assistant__message--enter-assistant {
    animation: aiMessageInAssistant 280ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ai-assistant__message--enter-user {
    animation: aiMessageInUser 260ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.ai-assistant__message-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.ai-assistant__message-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-left: auto;
}

.ai-assistant__message-role {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

.ai-assistant__message-time {
    font-size: 0.74rem;
    color: var(--text-soft);
}

.ai-assistant__message-body {
    color: var(--text);
    font-size: 0.96rem;
    line-height: 1.62;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ai-assistant__message--assistant .ai-assistant__message-body {
    overflow-y: visible;
}

.ai-assistant__message-body > * {
    margin-top: 0;
    margin-bottom: 0.9rem;
}

.ai-assistant__message-body > :last-child {
    margin-bottom: 0;
}

.ai-assistant__message-body p,
.ai-assistant__message-body ul,
.ai-assistant__message-body ol,
.ai-assistant__message-body table,
.ai-assistant__message-body pre,
.ai-assistant__message-body h1,
.ai-assistant__message-body h2,
.ai-assistant__message-body h3,
.ai-assistant__message-body h4 {
    margin-top: 0;
}

.ai-assistant__message-body ul,
.ai-assistant__message-body ol {
    padding-left: 1.2rem;
    margin-bottom: 0.95rem;
}

.ai-assistant__message-body li + li {
    margin-top: 0.35rem;
}

.ai-assistant__message-body h1,
.ai-assistant__message-body h2,
.ai-assistant__message-body h3,
.ai-assistant__message-body h4 {
    line-height: 1.3;
    color: var(--text);
}

.ai-assistant__message-body h1 {
    font-size: 1.18rem;
}

.ai-assistant__message-body h2 {
    font-size: 1.1rem;
}

.ai-assistant__message-body h3,
.ai-assistant__message-body h4 {
    font-size: 1rem;
}

.ai-assistant__message-body blockquote {
    margin: 0 0 0.95rem;
    padding: 0.75rem 0.95rem;
    border-left: 4px solid rgba(79, 140, 255, 0.45);
    border-radius: 0.9rem;
    background: rgba(79, 140, 255, 0.07);
    color: var(--text);
}

.ai-assistant__message-body .section-box {
    display: grid;
    gap: 0.55rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(79, 140, 255, 0.16);
    background: linear-gradient(180deg, rgba(11, 93, 143, 0.05), rgba(27, 165, 167, 0.04));
    box-shadow: 0 10px 26px rgba(7, 36, 62, 0.06);
}

.ai-assistant__message-body .section-box > :last-child {
    margin-bottom: 0;
}

.ai-assistant__message-body .sec-issue {
    border-left: 4px solid #0b8fd0;
}

.ai-assistant__message-body .sec-desc {
    border-left: 4px solid #1ba5a7;
}

.ai-assistant__message-body .sec-res {
    border-left: 4px solid #16a34a;
}

.ai-assistant__message-body .sec-sug {
    border-left: 4px solid #f59e0b;
}

.ai-assistant__message-body .sec-sum {
    border-left: 4px solid #7c3aed;
}

.ai-assistant__message-body .db-table {
    width: 100%;
}

.ai-assistant__message-body .tech-term {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: rgba(79, 140, 255, 0.12);
    color: var(--brand-strong);
    font-weight: 700;
    font-size: 0.82em;
}

.ai-assistant__message-body table {
    width: 100%;
    display: block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    border-collapse: collapse;
    margin-bottom: 0.8rem;
    background: rgba(7, 36, 62, 0.04);
    border: 1px solid rgba(79, 140, 255, 0.16);
    border-radius: 0.95rem;
    -webkit-overflow-scrolling: touch;
}

.ai-assistant__message-body th,
.ai-assistant__message-body td {
    padding: 0.6rem 0.72rem;
    border-bottom: 1px solid rgba(79, 140, 255, 0.12);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.ai-assistant__message-body th {
    background: rgba(11, 93, 143, 0.08);
    color: var(--text);
}

.ai-assistant__message-body pre {
    padding: 0.85rem 0.95rem;
    border-radius: 0.95rem;
    background: #071a2b;
    color: #dbeafe;
    max-width: 100%;
    overflow: auto;
}

.ai-assistant__message-body code {
    font-family: Consolas, "Courier New", monospace;
}

.ai-assistant__typewriter-text {
    display: block;
    width: 100%;
    min-height: 1.4rem;
    white-space: pre-wrap;
}

.ai-assistant__typewriter-text p {
    margin: 0;
    white-space: pre-wrap;
}

.ai-assistant__caret {
    display: inline-block;
    width: 0.58ch;
    min-height: 1.05em;
    margin-left: 0.08rem;
    border-radius: 999px;
    background: currentColor;
    vertical-align: text-bottom;
    animation: aiCaretBlink 0.9s steps(1, end) infinite;
}

@keyframes aiCaretBlink {
    0%, 45% {
        opacity: 1;
    }

    46%, 100% {
        opacity: 0;
    }
}

.ai-assistant__message-copy,
.ai-assistant__message-open {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.5rem 0.78rem;
    min-height: 2.2rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(79, 140, 255, 0.14);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text);
}

.ai-assistant__message-copy:hover,
.ai-assistant__message-open:hover {
    background: rgba(79, 140, 255, 0.12);
    border-color: rgba(79, 140, 255, 0.24);
}

.ai-assistant__message-copy svg,
.ai-assistant__message-open svg {
    width: 0.95rem;
    height: 0.95rem;
}

.ai-assistant__message-copy span,
.ai-assistant__message-open span {
    font-size: 0.78rem;
    font-weight: 700;
}

.ai-assistant__popup-window .popup-window__dialog {
    width: min(1280px, calc(100vw - 1.5rem));
}

.ai-assistant__popup-reply {
    display: grid;
    gap: 1rem;
}

.ai-assistant__popup-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text-soft);
}

.ai-assistant__popup-body {
    font-size: 0.98rem;
    line-height: 1.68;
}

.ai-assistant__popup-body > :last-child {
    margin-bottom: 0;
}

@media print {
    body:has(.ai-assistant:not(.hidden)) .app-shell,
    body:has(.popup-window:not(.hidden)) .app-shell,
    body:has(.popup-window:not(.hidden)) .detail-drawer {
        display: none !important;
    }

    .ai-fab-stack,
    .automation-center__execute-fab-shell,
    .device-context-menu,
    .progress-overlay,
    .scroll-cue,
    .ai-assistant__head-actions,
    .ai-assistant__statusbar,
    .ai-assistant__context,
    .ai-assistant__composer,
    .popup-window__head .icon-button {
        display: none !important;
    }

    .ai-assistant,
    .popup-window {
        position: static !important;
        inset: auto !important;
        display: block !important;
        padding: 0 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .ai-assistant.hidden,
    .popup-window.hidden {
        display: none !important;
    }

    .ai-assistant__panel,
    .popup-window__dialog,
    .popup-window__body,
    .ai-assistant__body-shell,
    .ai-assistant__content,
    .ai-assistant__messages {
        position: static !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
        resize: none !important;
    }

    .ai-assistant__panel,
    .popup-window__dialog,
    .ai-assistant__message,
    .ai-assistant__empty,
    .ai-assistant__source-item,
    .ai-assistant__message-body .section-box {
        background: #fff !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    .ai-assistant__panel::after,
    .ai-assistant__typing--live::after {
        display: none !important;
    }

    .ai-assistant__body-shell {
        display: block !important;
    }

    .ai-assistant__sidebar {
        display: none !important;
    }

    .ai-assistant__messages {
        padding-right: 0 !important;
        gap: 0.75rem !important;
        scrollbar-gutter: auto !important;
    }

    .ai-assistant__message,
    .ai-assistant__empty,
    .ai-assistant__source-item,
    .ai-assistant__message-body .section-box {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    .ai-assistant__message-body,
    .ai-assistant__popup-body,
    .popup-window__body {
        overflow: visible !important;
    }

    .ai-assistant__message-body table {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        page-break-inside: auto;
        break-inside: auto;
    }

    .ai-assistant__message-body tr,
    .ai-assistant__message-body td,
    .ai-assistant__message-body th {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

@media (max-width: 1100px) {
    .f5-bigip__run-grid {
        grid-template-columns: 1fr;
    }

    .f5-bigip__panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

.ai-assistant__composer {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
    border-radius: 1.1rem;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .ai-assistant__composer {
    background: rgba(255, 255, 255, 0.04);
}

.ai-assistant__composer textarea {
    width: 100%;
    min-height: 6.5rem;
    resize: vertical;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--text);
}

.ai-assistant__composer-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ai-assistant__composer-tools {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
}

.ai-assistant__source-picker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    padding: 0.36rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--panel-border);
    background: rgba(11, 93, 143, 0.05);
}

.ai-assistant__source-picker span {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-soft);
    white-space: nowrap;
}

.ai-assistant__source-picker select {
    min-width: 8.8rem;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.ai-assistant__composer-actions .muted-copy {
    font-size: 0.78rem;
}

.ai-assistant__send--stop {
    background: linear-gradient(135deg, #b64646 0%, #ef4444 100%);
}

.ai-assistant__tool-button {
    position: relative;
}

.ai-assistant__tool-button.is-active {
    background: linear-gradient(135deg, rgba(11, 93, 143, 0.14), rgba(27, 165, 167, 0.18));
    border-color: rgba(27, 165, 167, 0.22);
    color: var(--brand);
}

.ai-assistant__tool-button.is-listening {
    color: #fff;
    background: linear-gradient(135deg, #ba4545, #ef4444);
    border-color: rgba(239, 68, 68, 0.3);
    animation: aiPulse 1s ease-in-out infinite;
}

.ai-assistant__tool-button::before {
    display: none;
}

.ai-voice-overlay {
    position: fixed;
    inset: 0;
    z-index: 88;
    pointer-events: none;
}

.ai-voice-overlay__panel {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    width: min(22rem, calc(100vw - 2rem));
    height: min(24rem, calc(100vh - 2rem));
    min-width: 17.5rem;
    min-height: 15rem;
    max-width: calc(100vw - 1rem);
    max-height: calc(100vh - 1rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.82rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(79, 140, 255, 0.16);
    background:
        radial-gradient(circle at top left, rgba(27, 165, 167, 0.14), transparent 17rem),
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 248, 252, 0.94));
    box-shadow: 0 24px 58px rgba(7, 36, 62, 0.22);
    resize: both;
    overflow: hidden;
    pointer-events: auto;
}

html[data-theme="dark"] .ai-voice-overlay__panel {
    background:
        radial-gradient(circle at top left, rgba(57, 195, 191, 0.15), transparent 16rem),
        linear-gradient(180deg, rgba(9, 20, 32, 0.97), rgba(14, 29, 44, 0.96));
}

.ai-voice-overlay__panel::after {
    content: "";
    position: absolute;
    right: 0.65rem;
    bottom: 0.65rem;
    width: 0.9rem;
    height: 0.9rem;
    border-right: 2px solid rgba(11, 93, 143, 0.28);
    border-bottom: 2px solid rgba(11, 93, 143, 0.28);
    border-bottom-right-radius: 0.15rem;
    pointer-events: none;
}

html[data-theme="dark"] .ai-voice-overlay__panel::after {
    border-right-color: rgba(79, 140, 255, 0.42);
    border-bottom-color: rgba(79, 140, 255, 0.42);
}

.ai-voice-overlay__panel.is-dragging {
    box-shadow: 0 28px 68px rgba(7, 36, 62, 0.28);
}

.ai-voice-overlay__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.ai-voice-overlay__panel.is-dragging .ai-voice-overlay__head {
    cursor: grabbing;
}

.ai-voice-overlay__head h3 {
    margin: 0;
    font-size: 1rem;
}

.ai-voice-overlay__head-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.ai-voice-overlay__menu-button {
    min-width: 2.25rem;
    padding: 0;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
}

.ai-voice-overlay__menu-button.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(11, 93, 143, 0.94), rgba(27, 165, 167, 0.94));
    border-color: rgba(27, 165, 167, 0.28);
}

.ai-voice-overlay__body {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0.55rem;
}

.ai-voice-overlay__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.ai-voice-overlay__popover {
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(79, 140, 255, 0.14);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .ai-voice-overlay__popover {
    background: rgba(255, 255, 255, 0.05);
}

.ai-voice-overlay__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ai-voice-overlay__language-select {
    display: grid;
    gap: 0.16rem;
    font-size: 0.75rem;
    color: var(--text-soft);
}

.ai-voice-overlay__language-select--inline {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-left: auto;
}

.ai-voice-overlay__toolbar-copy {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.ai-voice-overlay__section {
    min-height: 0;
    display: grid;
    gap: 0.55rem;
    padding: 0.7rem 0.76rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(79, 140, 255, 0.14);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .ai-voice-overlay__section {
    background: rgba(255, 255, 255, 0.04);
}

.ai-voice-overlay__section--controls {
    box-shadow: none;
    background: rgba(79, 140, 255, 0.03);
}

html[data-theme="dark"] .ai-voice-overlay__section--controls {
    background: rgba(255, 255, 255, 0.03);
}

.ai-voice-overlay__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.ai-voice-overlay__section-head--controls > div {
    display: grid;
    gap: 0.16rem;
}

.ai-voice-overlay__target-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
}

.ai-voice-overlay__target-dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    left: 0;
    z-index: 8;
    width: min(20rem, 78vw);
    max-height: 16rem;
    overflow: auto;
    padding: 0.65rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(79, 140, 255, 0.16);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .ai-voice-overlay__target-dropdown {
    background: rgba(12, 18, 30, 0.96);
}

.ai-voice-overlay__target-summary {
    margin: 0;
}

.ai-voice-overlay__targets {
    display: grid;
    gap: 0.42rem;
}

.ai-voice-overlay__target-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.72rem;
    border-radius: 0.82rem;
    border: 1px solid rgba(79, 140, 255, 0.14);
    background: rgba(79, 140, 255, 0.07);
    color: var(--text);
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
    font-size: 0.75rem;
    justify-content: space-between;
}

.ai-voice-overlay__target-pill:hover {
    transform: translateY(-1px);
}

.ai-voice-overlay__target-pill.is-active {
    border-color: rgba(27, 165, 167, 0.26);
    background: linear-gradient(135deg, rgba(11, 93, 143, 0.12), rgba(27, 165, 167, 0.16));
    color: var(--brand);
}

.ai-voice-overlay__target-pill input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

.ai-voice-overlay__grid {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    overflow: auto;
    padding-right: 0.1rem;
}

.ai-voice-overlay__text-shell {
    min-height: 3.75rem;
    max-height: 6.5rem;
    overflow: auto;
    padding: 0.68rem 0.75rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(79, 140, 255, 0.12);
    background: rgba(79, 140, 255, 0.06);
}

.ai-voice-overlay__text-shell--reply {
    background: linear-gradient(180deg, rgba(11, 93, 143, 0.08), rgba(27, 165, 167, 0.05));
}

.ai-voice-overlay__text-shell p {
    margin: 0;
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.42;
    white-space: pre-wrap;
}

.ai-voice-overlay__translation-grid {
    display: grid;
    gap: 0.55rem;
}

.ai-voice-overlay__translation-card {
    padding: 0.62rem 0.68rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(79, 140, 255, 0.12);
    background: rgba(79, 140, 255, 0.05);
}

.ai-voice-overlay__translation-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.ai-voice-overlay__translation-card p,
.ai-voice-overlay__translation-empty p {
    margin: 0;
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: pre-wrap;
}

.ai-voice-overlay__translation-empty {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.8rem;
    border-radius: 0.95rem;
    border: 1px dashed rgba(79, 140, 255, 0.16);
    background: rgba(79, 140, 255, 0.04);
}

.ai-voice-overlay__popover-actions {
    display: flex;
    justify-content: flex-end;
}

.ai-voice-overlay__translation-empty .ai-assistant__robot,
.ai-voice-overlay__translation-empty .icon-inline {
    flex: none;
}

.ai-workspace .mini-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.ai-workspace__section {
    margin-top: 1rem;
}

.ai-workspace__mcp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 0.85rem;
}

.ai-workspace__mcp-card {
    display: grid;
    gap: 0.8rem;
    padding: 0.92rem 0.96rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(79, 140, 255, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(244, 248, 252, 0.9));
    box-shadow: var(--shadow-soft);
}

html[data-theme="dark"] .ai-workspace__mcp-card {
    background: linear-gradient(180deg, rgba(13, 25, 38, 0.94), rgba(18, 34, 48, 0.94));
}

.ai-workspace__mcp-card.is-active {
    border-color: rgba(27, 165, 167, 0.28);
    box-shadow: 0 18px 30px rgba(7, 36, 62, 0.12);
}

.ai-workspace__mcp-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
}

.ai-workspace__mcp-copy {
    display: grid;
    gap: 0.35rem;
}

.ai-workspace__mcp-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ai-workspace__mcp-title h4 {
    margin: 0;
    font-size: 0.98rem;
}

.ai-workspace__mcp-description {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.83rem;
    line-height: 1.45;
}

.ai-workspace__mcp-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.ai-workspace__prompt {
    text-align: left;
    justify-content: flex-start;
}

.ai-connector-picker {
    display: grid;
    gap: 0.9rem;
}

.ai-connector-picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 0.85rem;
}

.ai-connector-picker__field {
    display: grid;
    gap: 0.38rem;
}

.ai-connector-picker__field span {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ai-connector-picker__field select {
    width: 100%;
    min-height: 2.7rem;
    padding: 0.72rem 0.85rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(79, 140, 255, 0.18);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text);
    box-shadow: inset 0 1px 2px rgba(7, 36, 62, 0.05);
}

html[data-theme="dark"] .ai-connector-picker__field select {
    background: rgba(9, 19, 30, 0.92);
    border-color: rgba(79, 140, 255, 0.24);
}

.ai-connector-picker__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.ai-connector-picker__button {
    justify-content: flex-start;
}

@media (max-width: 900px) {
    .ai-assistant {
        display: grid;
        justify-items: stretch;
    }

    .ai-assistant__body-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-assistant__sidebar {
        display: none;
    }

    .ai-assistant__panel {
        position: relative;
        top: 0;
        right: 0;
        left: 0;
        width: min(100%, 100vw);
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        min-width: 0;
        min-height: 0;
        border-radius: 0;
        resize: none;
    }

    .ai-assistant__panel::after {
        display: none;
    }

    .ai-assistant__head {
        display: grid;
        cursor: default;
        user-select: auto;
        touch-action: auto;
    }

    .ai-assistant__head-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .ai-assistant__statusbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-assistant__composer-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ai-assistant__composer-tools {
        width: 100%;
    }

    .ai-assistant__source-picker {
        width: 100%;
        justify-content: space-between;
    }

    .ai-fab-stack {
        right: 1rem;
        bottom: 1rem;
    }

    .ai-fab {
        width: 4rem;
        height: 4rem;
    }

    .ai-fab__action {
        min-width: 7.5rem;
        height: 3rem;
    }

    .ai-voice-overlay {
        inset: auto 0 0 0;
        padding: 0 0.75rem 0.75rem;
    }

    .ai-voice-overlay__panel {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        top: auto;
        width: 100%;
        height: auto;
        min-width: 0;
        min-height: 0;
        max-width: 100%;
        max-height: 72vh;
        resize: none;
    }

    .ai-voice-overlay__panel::after {
        display: none;
    }

    .ai-voice-overlay__head {
        cursor: default;
        user-select: auto;
        touch-action: auto;
    }

    .ai-voice-overlay__language-select--inline {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .ai-voice-overlay__target-picker,
    .ai-voice-overlay__target-dropdown {
        width: 100%;
    }
}

@keyframes aiRobotHop {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    28% {
        transform: translateY(-0.32rem) rotate(-4deg);
    }
    58% {
        transform: translateY(0.08rem) rotate(3deg);
    }
    82% {
        transform: translateY(-0.12rem) rotate(-1deg);
    }
}

@keyframes aiPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.18);
    }
    50% {
        box-shadow: 0 0 0 0.45rem rgba(239, 68, 68, 0.08);
    }
}

@keyframes aiTypingSweep {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(120%);
    }
}

@keyframes aiMessageInAssistant {
    0% {
        opacity: 0;
        transform: translateY(0.9rem) scale(0.985);
        filter: blur(8px);
    }
    70% {
        opacity: 1;
        transform: translateY(-0.12rem) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes aiMessageInUser {
    0% {
        opacity: 0;
        transform: translate(0.8rem, 0.7rem) scale(0.985);
        filter: blur(8px);
    }
    70% {
        opacity: 1;
        transform: translate(-0.05rem, -0.04rem) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes aiAssistantPanelIn {
    0% {
        opacity: 0;
        transform: translateY(0.8rem) scale(0.985);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.vm-name-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.vm-name-inline .icon-inline {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.12);
    color: var(--brand);
}

.entity-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.entity-inline .icon-inline {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.1);
    color: var(--brand-strong);
}

.entity-inline--customer .icon-inline {
    background: rgba(245, 158, 11, 0.16);
    color: #d97706;
}

.entity-inline--partner .icon-inline {
    background: rgba(139, 92, 246, 0.14);
    color: #7c3aed;
}

.entity-inline--host .icon-inline {
    background: rgba(20, 184, 166, 0.14);
    color: #0f766e;
}

.entity-inline--infra .icon-inline {
    background: rgba(15, 23, 42, 0.08);
    color: var(--text);
}

.vm-hierarchy {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.vm-hierarchy__head {
    gap: 0.9rem;
}

.vm-hierarchy__cards {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.vm-hierarchy__path {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.vm-hierarchy__path .muted-copy {
    margin: 0;
}

.vm-hierarchy__launcher {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 1.05rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(47, 129, 255, 0.12);
    background: rgba(255, 255, 255, 0.7);
}

.vm-hierarchy__launcher-copy {
    display: grid;
    gap: 0.18rem;
}

.vm-hierarchy__launcher-copy strong {
    font-size: 1rem;
}

.vm-hierarchy__launcher-copy .muted-copy {
    margin: 0;
}

.vm-hierarchy__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.9rem;
    align-items: start;
}

.vm-hierarchy__column {
    display: grid;
    gap: 0.85rem;
    min-height: 19rem;
    padding: 1rem;
    border-radius: 1.3rem;
    border: 1px solid rgba(47, 129, 255, 0.12);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.9)),
        var(--panel);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.07);
}

.vm-hierarchy__column-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
}

.vm-hierarchy__column-head h3 {
    margin: 0.08rem 0 0;
    font-size: 1rem;
}

.vm-hierarchy__column-icon,
.vm-hierarchy__spotlight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.12);
    color: var(--brand-strong);
}

.vm-hierarchy__column-icon svg,
.vm-hierarchy__option-icon svg,
.vm-hierarchy__spotlight-icon svg {
    width: 1.08rem;
    height: 1.08rem;
}

.vm-hierarchy__column-body {
    display: grid;
    gap: 0.6rem;
    align-content: start;
}

.vm-hierarchy__option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    width: 100%;
    padding: 0.8rem 0.82rem;
    border-radius: 1rem;
    border: 1px solid rgba(47, 129, 255, 0.1);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.vm-hierarchy__option:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 129, 255, 0.22);
    background: rgba(239, 246, 255, 0.96);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.vm-hierarchy__option.is-active {
    border-color: rgba(11, 116, 199, 0.28);
    background: linear-gradient(180deg, rgba(0, 188, 235, 0.14), rgba(255, 255, 255, 0.95));
    box-shadow: 0 16px 28px rgba(11, 116, 199, 0.14);
}

.vm-hierarchy__option--shared {
    border-style: dashed;
}

.vm-hierarchy__option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.12);
    color: var(--brand-strong);
    font-size: 1rem;
}

.vm-hierarchy__option-copy {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.vm-hierarchy__option-copy strong,
.vm-hierarchy__option-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
}

.vm-hierarchy__option-copy strong {
    font-size: 0.95rem;
}

.vm-hierarchy__option-copy small {
    color: var(--text-soft);
    white-space: normal;
    line-height: 1.45;
}

.vm-hierarchy__empty {
    display: grid;
    gap: 0.55rem;
    justify-items: start;
    padding: 0.95rem;
    border-radius: 1rem;
    border: 1px dashed rgba(148, 163, 184, 0.45);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-soft);
}

.vm-hierarchy__empty p {
    margin: 0;
}

.vm-hierarchy__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
}

.vm-hierarchy__spotlight {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vm-hierarchy__spotlight-cards {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.vm-hierarchy__spotlight-actions {
    justify-content: flex-start;
}

.popup-window--vm-tree .popup-window__dialog {
    width: min(1460px, calc(100vw - 1.2rem));
}

.vm-tree-popup {
    display: grid;
    gap: 1rem;
}

.vm-tree-popup__quick-panel {
    display: grid;
    gap: 0.78rem;
    position: relative;
    z-index: 18;
    overflow: visible;
}

.vm-tree-popup__quick-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
}

.vm-tree-popup__quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    align-items: start;
    overflow: visible;
}

.vm-tree-popup__quick-field {
    display: grid;
    gap: 0.38rem;
    position: relative;
    z-index: 1;
}

.vm-tree-popup__quick-field > span {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.vm-tree-popup__quick-dropdown {
    position: relative;
    z-index: 2;
}

.vm-tree-popup__quick-dropdown[open] {
    z-index: 26;
}

.vm-tree-popup__quick-dropdown > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.25rem;
    cursor: pointer;
    list-style: none;
}

.vm-tree-popup__quick-dropdown > summary::-webkit-details-marker {
    display: none;
}

.vm-tree-popup__quick-dropdown > summary::after {
    content: "";
    width: 0.58rem;
    height: 0.58rem;
    border-right: 2px solid rgba(71, 85, 105, 0.88);
    border-bottom: 2px solid rgba(71, 85, 105, 0.88);
    transform: rotate(45deg) translateY(-0.1rem);
    transition: transform 160ms ease;
}

.vm-tree-popup__quick-dropdown[open] > summary::after {
    transform: rotate(-135deg) translateY(-0.02rem);
}

.vm-tree-popup__quick-dropdown.is-disabled {
    pointer-events: none;
}

.vm-tree-popup__quick-summary-copy {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.vm-tree-popup__quick-summary-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.1);
    color: var(--brand-strong);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.vm-tree-popup__quick-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 32;
    display: grid;
    gap: 0.72rem;
    padding: 0.88rem;
    border: 1px solid rgba(47, 129, 255, 0.18);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98)),
        radial-gradient(circle at top right, rgba(47, 129, 255, 0.08), transparent 9rem);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.16);
}

.vm-tree-popup__quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.vm-tree-popup__quick-actions .toolbar-button.active {
    border-color: rgba(47, 129, 255, 0.34);
    background: linear-gradient(180deg, rgba(47, 129, 255, 0.12), rgba(255, 255, 255, 0.98));
    color: var(--brand-strong);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.vm-tree-popup__quick-checklist {
    display: grid;
    gap: 0.45rem;
    max-height: 18rem;
    overflow-y: auto;
    padding-right: 0.1rem;
}

.vm-tree-popup__quick-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.72rem 0.82rem;
    border: 1px solid rgba(47, 129, 255, 0.12);
    border-radius: 0.95rem;
    background: rgba(248, 250, 252, 0.9);
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
    cursor: pointer;
}

.vm-tree-popup__quick-option:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 129, 255, 0.24);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.vm-tree-popup__quick-option.is-active {
    border-color: rgba(47, 129, 255, 0.32);
    background: linear-gradient(180deg, rgba(47, 129, 255, 0.1), rgba(255, 255, 255, 0.98));
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.1);
}

.vm-tree-popup__quick-option input {
    width: 1rem;
    height: 1rem;
    margin-top: 0.18rem;
    accent-color: var(--brand);
}

.vm-tree-popup__quick-option-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.vm-tree-popup__quick-option-copy strong,
.vm-tree-popup__quick-option-copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-tree-popup__quick-option-copy small {
    color: var(--text-soft);
}

.vm-tree-popup__quick-dropdown.is-showing-selected .vm-tree-popup__quick-option:not(.is-active) {
    display: none;
}

.vm-tree-popup__root-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.vm-tree-root-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.72rem 1rem;
    border-radius: 999px;
    border: 1px solid rgba(47, 129, 255, 0.16);
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-main);
    font-weight: 700;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.vm-tree-root-button:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 129, 255, 0.3);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1);
}

.vm-tree-root-button.is-active {
    border-color: rgba(47, 129, 255, 0.42);
    background: linear-gradient(180deg, rgba(47, 129, 255, 0.12), rgba(255, 255, 255, 0.92));
    color: var(--brand-strong);
}

.vm-tree-root-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.12);
    color: var(--brand-strong);
}

.vm-tree-root-button__icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.vm-tree-popup__actions {
    justify-content: center;
}

.vm-tree-popup__stack {
    display: grid;
    gap: 0.85rem;
    justify-items: center;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 0.35rem;
}

.vm-tree-popup__tree-canvas {
    position: relative;
    width: min(1380px, 100%);
    display: grid;
    gap: 1rem;
    justify-items: stretch;
}

.vm-tree-popup__tree-canvas::before {
    content: "";
    position: absolute;
    top: -0.55rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 0.8rem;
    background: linear-gradient(180deg, rgba(47, 129, 255, 0.32), rgba(47, 129, 255, 0));
}

.vm-tree-flow-lane {
    position: relative;
    display: grid;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem 1rem;
    border: 1px solid rgba(47, 129, 255, 0.14);
    border-radius: 1.25rem;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at top right, rgba(47, 129, 255, 0.08), transparent 9rem);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.vm-tree-flow-lane.is-active {
    border-color: rgba(47, 129, 255, 0.24);
    box-shadow: 0 20px 38px rgba(15, 23, 42, 0.1);
}

.vm-tree-flow-lane__head {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    justify-self: center;
    padding-bottom: 0.9rem;
}

.vm-tree-flow-lane__head::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 1px;
    height: 0.78rem;
    background: linear-gradient(180deg, rgba(47, 129, 255, 0.38), rgba(47, 129, 255, 0));
}

.vm-tree-flow-lane__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.12);
    color: var(--brand-strong);
}

.vm-tree-flow-lane__icon svg {
    width: 1rem;
    height: 1rem;
}

.vm-tree-flow-lane__copy {
    display: grid;
    gap: 0.14rem;
}

.vm-tree-flow-lane__copy small {
    color: var(--text-soft);
}

.vm-tree-flow-lane__branches {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1rem;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1rem;
}

.vm-tree-flow-lane__branches::before {
    content: "";
    position: absolute;
    top: 0.18rem;
    left: clamp(2.2rem, 6%, 4rem);
    right: clamp(2.2rem, 6%, 4rem);
    height: 1px;
    background: linear-gradient(90deg, rgba(47, 129, 255, 0), rgba(47, 129, 255, 0.34) 12%, rgba(47, 129, 255, 0.34) 88%, rgba(47, 129, 255, 0));
}

.vm-tree-flow-lane__branches > .vm-tree__branch {
    position: relative;
    flex: 1 1 18.75rem;
    width: min(21rem, 100%);
    min-width: min(18rem, 100%);
    padding-top: 0.68rem;
}

.vm-tree-flow-lane__branches > .vm-tree__branch::before {
    content: "";
    position: absolute;
    top: -0.12rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 0.92rem;
    background: linear-gradient(180deg, rgba(47, 129, 255, 0.38), rgba(47, 129, 255, 0));
}

.vm-tree-popup__nested {
    display: flex;
    flex-wrap: wrap;
    gap: 0.95rem 1.15rem;
    align-items: flex-start;
    justify-content: center;
    width: min(1380px, 100%);
    max-width: 100%;
}

.vm-tree-popup__nested {
    margin-left: 0;
    padding-left: 0;
    padding-top: 0.35rem;
    border-left: none;
}

.vm-tree-popup__nested > .vm-tree__branch {
    flex: 0 1 min(24rem, 100%);
    width: min(24rem, 100%);
}

.vm-tree-popup__nested > .vm-tree-popup__nested {
    flex: 1 1 min(26rem, 100%);
    width: auto;
    min-width: min(26rem, 100%);
    justify-content: flex-start;
}

.vm-tree__branch {
    width: min(1220px, 100%);
    display: grid;
    justify-items: center;
    border: none;
    background: transparent;
    overflow: visible;
}

.vm-tree__summary {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 0.75rem;
    align-items: center;
    min-width: min(100%, 15rem);
    max-width: 22rem;
    padding: 0.95rem 1.1rem;
    border: 1px solid rgba(47, 129, 255, 0.18);
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.1);
    cursor: pointer;
    list-style: none;
}

.vm-tree__summary::-webkit-details-marker {
    display: none;
}

.vm-tree__summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.12);
    color: var(--brand-strong);
}

.vm-tree__summary-icon svg {
    width: 1.02rem;
    height: 1.02rem;
}

.vm-tree__summary-copy {
    display: grid;
    gap: 0.15rem;
}

.vm-tree__summary-copy small {
    color: var(--text-soft);
}

.vm-tree__summary-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    border: 1px solid rgba(47, 129, 255, 0.2);
    background: rgba(47, 129, 255, 0.08);
    color: var(--brand-strong);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.vm-tree__summary-toggle::before {
    content: "-";
}

.vm-tree__branch:not([open]) > .vm-tree__summary .vm-tree__summary-toggle::before {
    content: "+";
}

.vm-tree__children {
    position: relative;
    display: grid;
    gap: 0.65rem;
    width: 100%;
    padding: 1.35rem 0 0.35rem;
    justify-items: center;
}

.vm-tree__children::before {
    content: "";
    position: absolute;
    top: 0.05rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 1rem;
    background: linear-gradient(180deg, rgba(47, 129, 255, 0.32), rgba(47, 129, 255, 0));
}

.vm-tree-choice-actions {
    width: min(680px, 100%);
    display: grid;
    gap: 0.4rem;
    justify-items: center;
}

.vm-tree-choice-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(47, 129, 255, 0.14);
    background: rgba(255, 255, 255, 0.86);
    color: var(--text-main);
    font-weight: 700;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.vm-tree-choice-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 129, 255, 0.28);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.vm-tree-choice-toggle.is-active {
    border-color: rgba(47, 129, 255, 0.36);
    background: linear-gradient(180deg, rgba(47, 129, 255, 0.12), rgba(255, 255, 255, 0.92));
    color: var(--brand-strong);
}

.vm-tree-choice-toggle__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.12);
    color: var(--brand-strong);
}

.vm-tree-choice-toggle__icon svg {
    width: 0.9rem;
    height: 0.9rem;
}

.vm-tree-choice-helper {
    color: var(--text-soft);
    text-align: center;
}

.vm-tree-choice-list {
    width: min(1220px, 100%);
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    justify-content: stretch;
}

.vm-tree-choice-list .vm-hierarchy__option {
    width: 100%;
    min-height: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 1rem;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.vm-tree-choice-list .vm-hierarchy__option-copy {
    align-items: center;
    text-align: center;
}

.vm-tree-choice-list .vm-hierarchy__option-icon {
    margin-inline: auto;
}

.vm-tree-choice-list .vm-hierarchy__option strong {
    display: block;
}

.vm-tree-choice-list .vm-hierarchy__option small {
    display: block;
}

.vm-tree-infra-device {
    display: grid;
    gap: 0.55rem;
    padding: 0.18rem;
    border-radius: 1.08rem;
    border: 1px solid rgba(47, 129, 255, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 255, 0.86));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.06);
}

.vm-tree-infra-device.is-active {
    border-color: rgba(11, 116, 199, 0.22);
    box-shadow: 0 18px 34px rgba(11, 116, 199, 0.12);
}

.vm-tree-infra-device--shared {
    border-style: dashed;
}

.vm-tree-infra-device__select {
    margin: 0;
}

.vm-tree-infra-device__actions {
    display: flex;
    justify-content: center;
    padding: 0 0.35rem 0.25rem;
}

.vm-tree-infra-device__actions .row-action-buttons {
    width: 100%;
    justify-content: center;
}

.vm-tree-infra-device__actions .device-inline-action {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
}

.vm-hierarchy__flow-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.65rem;
}

.vm-hierarchy__flow-card {
    display: grid;
    gap: 0.38rem;
    padding: 0.72rem 0.82rem;
    border-radius: 0.92rem;
    border: 1px solid rgba(47, 129, 255, 0.14);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.vm-hierarchy__flow-card:hover {
    transform: translateY(-1px);
    border-color: rgba(47, 129, 255, 0.24);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.1);
}

.vm-hierarchy__flow-head {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.vm-hierarchy__flow-head strong {
    font-size: 0.88rem;
}

.vm-hierarchy__flow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: rgba(47, 129, 255, 0.12);
    color: var(--brand-strong);
}

.vm-hierarchy__flow-icon svg {
    width: 0.86rem;
    height: 0.86rem;
}

.vm-hierarchy__flow-path {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.8rem;
    line-height: 1.35;
}

.vm-tree-selected-mark {
    position: absolute;
    top: 0.62rem;
    right: 0.62rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.96), rgba(22, 163, 74, 0.98));
    color: #fff;
    box-shadow: 0 10px 18px rgba(22, 163, 74, 0.24);
}

.vm-tree-selected-mark svg {
    width: 0.72rem;
    height: 0.72rem;
}

.vm-tree-selected-mark--root,
.vm-tree-selected-mark--toggle {
    position: static;
    margin-left: 0.05rem;
    flex: 0 0 auto;
}

html[data-theme="dark"] .entity-inline .icon-inline {
    background: rgba(79, 168, 223, 0.18);
    color: #7ec6ee;
}

html[data-theme="dark"] .vm-hierarchy__column {
    border-color: rgba(164, 198, 221, 0.14);
    background:
        linear-gradient(180deg, rgba(19, 39, 58, 0.95), rgba(15, 30, 45, 0.96)),
        var(--panel);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .vm-hierarchy__option {
    border-color: rgba(164, 198, 221, 0.12);
    background: rgba(9, 20, 31, 0.58);
}

html[data-theme="dark"] .vm-hierarchy__option:hover {
    border-color: rgba(79, 168, 223, 0.28);
    background: rgba(19, 39, 58, 0.82);
}

html[data-theme="dark"] .vm-hierarchy__option.is-active {
    background: linear-gradient(180deg, rgba(79, 168, 223, 0.18), rgba(19, 39, 58, 0.95));
}

html[data-theme="dark"] .vm-hierarchy__empty {
    border-color: rgba(164, 198, 221, 0.22);
    background: rgba(15, 30, 45, 0.65);
}

html[data-theme="dark"] .vm-hierarchy__launcher,
html[data-theme="dark"] .vm-tree__summary {
    border-color: rgba(164, 198, 221, 0.14);
    background: rgba(15, 30, 45, 0.72);
}

html[data-theme="dark"] .vm-tree-root-button,
html[data-theme="dark"] .vm-hierarchy__flow-card {
    border-color: rgba(164, 198, 221, 0.14);
    background: rgba(15, 30, 45, 0.72);
    color: var(--text-main);
}

html[data-theme="dark"] .vm-tree-choice-toggle {
    border-color: rgba(164, 198, 221, 0.14);
    background: rgba(15, 30, 45, 0.72);
    color: var(--text-main);
}

html[data-theme="dark"] .vm-tree-root-button:hover,
html[data-theme="dark"] .vm-hierarchy__flow-card:hover {
    border-color: rgba(79, 168, 223, 0.28);
    background: rgba(19, 39, 58, 0.86);
}

html[data-theme="dark"] .vm-tree-choice-toggle:hover {
    border-color: rgba(79, 168, 223, 0.28);
    background: rgba(19, 39, 58, 0.86);
}

html[data-theme="dark"] .vm-tree-root-button.is-active {
    background: linear-gradient(180deg, rgba(79, 168, 223, 0.18), rgba(19, 39, 58, 0.95));
    color: #7ec6ee;
}

html[data-theme="dark"] .vm-tree-choice-toggle.is-active {
    background: linear-gradient(180deg, rgba(79, 168, 223, 0.18), rgba(19, 39, 58, 0.95));
    color: #7ec6ee;
}

html[data-theme="dark"] .vm-tree-infra-device {
    border-color: rgba(164, 198, 221, 0.14);
    background: linear-gradient(180deg, rgba(15, 30, 45, 0.92), rgba(10, 20, 31, 0.92));
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .vm-tree-infra-device.is-active {
    border-color: rgba(79, 168, 223, 0.28);
    box-shadow: 0 18px 34px rgba(79, 168, 223, 0.14);
}

html[data-theme="dark"] .vm-tree-root-button__icon,
html[data-theme="dark"] .vm-hierarchy__flow-icon {
    background: rgba(79, 168, 223, 0.18);
    color: #7ec6ee;
}

html[data-theme="dark"] .vm-tree-selected-mark {
    box-shadow: 0 10px 18px rgba(22, 163, 74, 0.34);
}

html[data-theme="dark"] .vm-tree-choice-toggle__icon {
    background: rgba(79, 168, 223, 0.18);
    color: #7ec6ee;
}

html[data-theme="dark"] .vm-tree__children::before {
    background: linear-gradient(180deg, rgba(79, 168, 223, 0.34), rgba(79, 168, 223, 0));
}

html[data-theme="dark"] .vm-tree-flow-lane {
    border-color: rgba(79, 168, 223, 0.16);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
        radial-gradient(circle at top right, rgba(79, 168, 223, 0.1), transparent 10rem),
        rgba(9, 17, 30, 0.92);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .vm-tree-flow-lane.is-active {
    border-color: rgba(79, 168, 223, 0.28);
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .vm-tree-flow-lane__icon {
    background: rgba(79, 168, 223, 0.16);
    color: #7ec6ee;
}

html[data-theme="dark"] .vm-tree-popup__tree-canvas::before,
html[data-theme="dark"] .vm-tree-flow-lane__head::after,
html[data-theme="dark"] .vm-tree-flow-lane__branches::before,
html[data-theme="dark"] .vm-tree-flow-lane__branches > .vm-tree__branch::before {
    background: linear-gradient(180deg, rgba(79, 168, 223, 0.36), rgba(79, 168, 223, 0));
}

html[data-theme="dark"] .vm-tree-flow-lane__branches::before {
    background: linear-gradient(90deg, rgba(79, 168, 223, 0), rgba(79, 168, 223, 0.34) 12%, rgba(79, 168, 223, 0.34) 88%, rgba(79, 168, 223, 0));
}

html[data-theme="dark"] .vm-tree__summary-toggle {
    border-color: rgba(79, 168, 223, 0.22);
    background: rgba(79, 168, 223, 0.12);
    color: #7ec6ee;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

@media (max-width: 1500px) {
    .vm-hierarchy__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .vm-hierarchy__launcher {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .vm-hierarchy__grid {
        grid-template-columns: 1fr;
    }

    .vm-hierarchy__column {
        min-height: 0;
    }

    .vm-tree-popup__tree-canvas {
        gap: 0.8rem;
    }

    .vm-tree-flow-lane__branches {
        justify-content: stretch;
    }

    .vm-tree-flow-lane__branches::before {
        left: 1.4rem;
        right: 1.4rem;
    }

    .vm-tree-flow-lane__branches > .vm-tree__branch {
        width: 100%;
        min-width: 0;
    }

    .vm-tree-popup__quick-grid {
        grid-template-columns: 1fr;
    }

    .vm-tree-popup__quick-dropdown > summary {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .vm-tree-popup__quick-menu {
        position: static;
    }

    .vm-tree-popup__nested {
        flex-direction: column;
        align-items: center;
        padding-top: 0.15rem;
    }

    .vm-tree-popup__nested > .vm-tree__branch,
    .vm-tree-popup__nested > .vm-tree-popup__nested {
        width: min(100%, 40rem);
        min-width: 0;
    }

    .vm-tree-choice-list {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    }
}

.diagram-node {
    position: relative;
}

.diagram-node__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 999px;
    margin-bottom: 0.35rem;
    background: rgba(47, 129, 255, 0.12);
    color: var(--brand);
}

.diagram-node small {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 700;
}

.tools-hub__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.8rem;
}

.tools-hub__panel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
    align-items: stretch;
}

.tools-hub__tool-card {
    display: grid;
    gap: 0.72rem;
    align-content: start;
    padding: 0.88rem 0.92rem;
    border-radius: 1.1rem;
}

.tools-hub__tool-card--tile {
    aspect-ratio: auto;
    min-height: 0;
    grid-template-rows: auto auto auto;
    align-self: start;
}

.tools-hub__tool-card--tile .tools-hub__tool-output {
    align-content: start;
}

.tools-hub__tool-card--world-clock {
    grid-column: 1 / -1;
    min-height: 0;
}

.tools-hub__tool-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
}

.tools-hub__tool-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem auto;
    gap: 0.65rem;
    align-items: center;
}

.tools-hub__tool-form--stack {
    grid-template-columns: minmax(0, 1fr);
}

.tools-hub__tool-inline {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
    align-items: center;
}

.tools-hub__tool-card--subnet .tools-hub__tool-form {
    grid-template-columns: minmax(0, 1fr) 5.35rem auto;
}

.tools-hub__tool-card--subnet {
    gap: 0.6rem;
}

.tools-hub__tool-card--password .tools-hub__tool-inline {
    display: grid;
    grid-template-columns: minmax(4.9rem, 5.4rem) repeat(auto-fit, minmax(5.1rem, 1fr));
    gap: 0.5rem 0.6rem;
    align-items: center;
}

.tools-hub__tool-card--password #toolPasswordGenerate {
    width: 100%;
}

.tools-hub__check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--muted);
}

.tools-hub__tool-output {
    display: grid;
    gap: 0.7rem;
}

.tools-hub__tool-card--subnet .tools-hub__result-grid,
.tools-hub__tool-card--password .tools-hub__result-grid,
.tools-hub__tool-card--mac .tools-hub__result-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.tools-hub__tool-card--subnet .tools-hub__result-grid > div,
.tools-hub__tool-card--password .tools-hub__result-grid > div {
    padding: 0.58rem 0.66rem;
}

.tools-hub__tool-card--password .tools-hub__password-hint,
.tools-hub__tool-card--password .tools-hub__result-inline {
    padding: 0.62rem 0.7rem;
}

.tools-hub__tool-card--password .tools-hub__result-inline code {
    font-size: 0.8rem;
}

.tools-hub__clock-toolbar {
    display: grid;
    gap: 0.7rem;
}

.tools-hub__tool-card--world-clock .tools-hub__clock-toolbar {
    grid-template-columns: minmax(10rem, 12rem) auto minmax(16rem, 1fr);
    align-items: end;
}

.tools-hub__clock-filter {
    display: inline-grid;
    gap: 0.35rem;
    justify-items: start;
}

.tools-hub__clock-filter span {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.tools-hub__clock-open {
    align-self: end;
}

.tools-hub__tool-note {
    padding: 0.7rem 0.85rem;
}

.tools-hub__result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.6rem;
}

.tools-hub__result-grid > div,
.tools-hub__clock-card {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.92));
}

html[data-theme="dark"] .tools-hub__result-grid > div,
html[data-theme="dark"] .tools-hub__clock-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(30, 41, 59, 0.94));
}

.tools-hub__result-grid span {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.tools-hub__result-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.7rem 0.8rem;
    border-radius: 0.95rem;
    background: rgba(15, 23, 42, 0.04);
}

html[data-theme="dark"] .tools-hub__result-inline {
    background: rgba(148, 163, 184, 0.08);
}

.tools-hub__result-inline code {
    font-size: 0.88rem;
    word-break: break-all;
}

.tools-hub__clock-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.8rem;
    overflow: visible;
    padding-bottom: 0.25rem;
    align-items: stretch;
    scrollbar-width: thin;
}

.tools-hub__clock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
    padding: 0.75rem 0.85rem;
    border-radius: 0.95rem;
    background: linear-gradient(135deg, rgba(47, 129, 255, 0.08), rgba(17, 184, 164, 0.08));
    border: 1px solid rgba(47, 129, 255, 0.16);
}

.tools-hub__clock-header strong {
    display: block;
}

.tools-hub__clock-header-time {
    font-size: 1.05rem;
    color: var(--brand);
}

.tools-hub__clock-header span {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.tools-hub__clock-top {
    display: grid;
    gap: 0.5rem;
}

.tools-hub__clock-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.tools-hub__clock-code {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
}

.tools-hub__clock-flag,
.world-time-modal__flag {
    font-size: 1rem;
    line-height: 1;
}

.tools-hub__clock-stack {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
    font-weight: 700;
}

.tools-hub__clock-card {
    position: relative;
    overflow: hidden;
    animation: toolsClockFloat 6s ease-in-out infinite;
    min-height: 100%;
}

.tools-hub__clock-card--day {
    border-color: rgba(245, 158, 11, 0.24);
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.2), transparent 34%),
        linear-gradient(145deg, rgba(255, 251, 235, 0.96), rgba(255, 247, 214, 0.94));
}

.tools-hub__clock-card--night {
    border-color: rgba(59, 130, 246, 0.2);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.2), transparent 34%),
        linear-gradient(145deg, rgba(10, 18, 34, 0.98), rgba(20, 31, 57, 0.96));
    color: #eef4ff;
}

html[data-theme="dark"] .tools-hub__clock-card--day {
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(67, 43, 8, 0.94), rgba(111, 73, 11, 0.88));
    color: #fff8e1;
}

html[data-theme="dark"] .tools-hub__clock-card--night {
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(6, 10, 20, 0.98), rgba(14, 22, 40, 0.96));
    color: #eff6ff;
}

.tools-hub__clock-card::after {
    content: "";
    position: absolute;
    inset: auto -20% -45% auto;
    width: 8rem;
    height: 8rem;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(0, 188, 235, 0.18), rgba(0, 188, 235, 0));
    pointer-events: none;
}

.tools-hub__clock-card--americas {
    border-color: rgba(47, 129, 255, 0.18);
}

.tools-hub__clock-card--emea {
    border-color: rgba(16, 185, 129, 0.2);
}

.tools-hub__clock-card--apjc {
    border-color: rgba(245, 158, 11, 0.2);
}

.tools-hub__clock-card--day::after {
    background: radial-gradient(circle, rgba(250, 204, 21, 0.34), rgba(245, 158, 11, 0));
}

.tools-hub__clock-card--night::after {
    background: radial-gradient(circle, rgba(37, 99, 235, 0.32), rgba(15, 23, 42, 0));
}

.tools-hub__clock-status {
    width: fit-content;
}

.tools-hub__clock-status .icon-inline {
    width: 0.95rem;
    height: 0.95rem;
}

.tools-hub__clock-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tools-hub__clock-status-row--compact .tools-hub__clock-status {
    font-size: 0.76rem;
}

.tools-hub__clock-status--working {
    background: linear-gradient(135deg, rgba(214, 247, 229, 0.98), rgba(235, 250, 241, 0.96));
    border-color: rgba(34, 197, 94, 0.22);
    color: #20754a;
}

.tools-hub__clock-status--after {
    background: linear-gradient(135deg, rgba(255, 245, 230, 0.98), rgba(255, 237, 213, 0.96));
    border-color: rgba(245, 158, 11, 0.22);
    color: #c58412;
}

.tools-hub__clock-status--day {
    background: linear-gradient(135deg, rgba(255, 243, 204, 0.98), rgba(254, 230, 138, 0.92));
    border-color: rgba(245, 158, 11, 0.28);
    color: #9a6400;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.tools-hub__clock-status--night {
    background: linear-gradient(135deg, rgba(8, 14, 28, 0.96), rgba(22, 36, 64, 0.94));
    border-color: rgba(96, 165, 250, 0.26);
    color: #dbeafe;
    box-shadow: inset 0 1px 0 rgba(191, 219, 254, 0.08);
}

.tools-hub__clock-status--day .icon-inline {
    color: #f59e0b;
}

.tools-hub__clock-status--night .icon-inline {
    color: #93c5fd;
}

html[data-theme="dark"] .tools-hub__clock-status--working {
    background: linear-gradient(135deg, rgba(18, 72, 46, 0.92), rgba(22, 101, 52, 0.84));
    color: #dcfce7;
}

html[data-theme="dark"] .tools-hub__clock-status--after {
    background: linear-gradient(135deg, rgba(107, 54, 9, 0.92), rgba(146, 64, 14, 0.84));
    color: #ffedd5;
}

html[data-theme="dark"] .tools-hub__clock-status--day {
    background: linear-gradient(135deg, rgba(120, 76, 12, 0.96), rgba(161, 98, 7, 0.88));
    color: #fff7d6;
}

html[data-theme="dark"] .tools-hub__clock-status--night {
    background: linear-gradient(135deg, rgba(6, 10, 20, 0.98), rgba(17, 24, 39, 0.94));
    color: #dbeafe;
}

.tools-hub__clock-card--night .tools-hub__clock-time-block,
html[data-theme="dark"] .tools-hub__clock-card--night .tools-hub__clock-time-block {
    background: rgba(255, 255, 255, 0.06);
}

.tools-hub__clock-card--night .tools-hub__clock-time-block span,
.tools-hub__clock-card--night .tools-hub__clock-time-block small,
.tools-hub__clock-card--night .tools-hub__clock-country,
.tools-hub__clock-card--night .tools-hub__clock-stack {
    color: rgba(219, 234, 254, 0.9);
}

.tools-hub__clock-card--day .tools-hub__clock-time-block {
    background: rgba(255, 255, 255, 0.42);
}

.tools-hub__clock-card--day .tools-hub__clock-country,
.tools-hub__clock-card--day .tools-hub__clock-stack {
    color: #a16207;
}

.tools-hub__clock-times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.tools-hub__clock-time-block {
    display: grid;
    gap: 0.22rem;
    padding: 0.75rem 0.8rem;
    border-radius: 0.95rem;
    background: rgba(15, 23, 42, 0.04);
}

html[data-theme="dark"] .tools-hub__clock-time-block {
    background: rgba(148, 163, 184, 0.08);
}

.tools-hub__clock-time-block span {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.tools-hub__clock-time-block strong {
    font-size: 1.05rem;
    line-height: 1.2;
}

.tools-hub__clock-time-block small {
    font-size: 0.78rem;
    color: var(--muted);
}

.tools-hub__clock-time-block--utc strong {
    color: var(--brand-strong);
}

.tools-hub__clock-time-block--local strong {
    color: var(--accent);
}

.tools-hub__clock-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.tools-hub__clock-country,
.world-time-modal__country {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.popup-window--world-time .popup-window__dialog {
    width: min(92rem, 96vw);
}

.world-time-modal {
    display: grid;
    gap: 1rem;
}

.world-time-modal__hero {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.world-time-modal__filters {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.world-time-modal__summary {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.world-time-modal__summary-card {
    position: relative;
    overflow: hidden;
}

.world-time-modal__summary-card::after {
    content: "";
    position: absolute;
    inset: auto -1.5rem -2rem auto;
    width: 5rem;
    height: 5rem;
    border-radius: 999px;
    opacity: 0.65;
    pointer-events: none;
}

.world-time-modal__summary-card--business::after {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.35), rgba(16, 185, 129, 0));
}

.world-time-modal__summary-card--after::after {
    background: radial-gradient(circle, rgba(249, 115, 22, 0.35), rgba(249, 115, 22, 0));
}

.world-time-modal__summary-card--day::after {
    background: radial-gradient(circle, rgba(250, 204, 21, 0.35), rgba(250, 204, 21, 0));
}

.world-time-modal__summary-card--night::after {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.35), rgba(96, 165, 250, 0));
}

.world-time-modal__map-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1.25rem;
    border: 1px solid rgba(15, 109, 177, 0.14);
    background: linear-gradient(160deg, rgba(8, 17, 34, 0.96), rgba(17, 55, 110, 0.88), rgba(247, 183, 75, 0.26));
    box-shadow: 0 20px 48px rgba(15, 23, 42, 0.18);
}

.world-time-modal__map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.world-time-modal__map-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.82fr);
    gap: 0.9rem;
    align-items: stretch;
}

.world-time-modal__legend {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.world-time-modal__legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.42rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(4, 12, 24, 0.42);
    color: #eef6ff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.world-time-modal__legend-chip::before {
    content: "";
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    flex: 0 0 auto;
    background: currentColor;
    box-shadow: 0 0 0 0.16rem color-mix(in srgb, currentColor 26%, transparent);
}

.world-time-modal__legend-chip--day {
    color: #facc15;
}

.world-time-modal__legend-chip--night {
    color: #93c5fd;
}

.world-time-modal__legend-chip--business {
    color: #34d399;
}

.world-time-modal__legend-chip--after {
    color: #fb923c;
}

.world-time-modal__map {
    position: relative;
    min-height: 30rem;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(4, 12, 24, 0.98), rgba(7, 25, 47, 0.94));
}

.world-time-modal__map--leaflet {
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 22%),
        radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.08), transparent 26%),
        linear-gradient(180deg, rgba(248, 251, 255, 0.98), rgba(237, 244, 253, 0.96));
    border-color: rgba(148, 163, 184, 0.24);
}

.world-time-modal__map--leaflet::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(20, 184, 166, 0.05) 1px, transparent 1px);
    background-size: 5rem 5rem;
    mix-blend-mode: screen;
    opacity: 0.55;
    z-index: 2;
}

.world-time-modal__map-canvas {
    position: absolute;
    inset: 0;
}

.world-time-modal__map .leaflet-container {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%);
    font: inherit;
}

.world-time-modal__map .leaflet-tile-pane {
    filter: grayscale(1) sepia(0.18) saturate(1.8) hue-rotate(175deg) brightness(1.04) contrast(1.08);
    opacity: 0.96;
}

.world-time-modal__map .leaflet-control-attribution {
    background: rgba(3, 10, 18, 0.82);
    border-radius: 0.55rem;
    margin: 0 0.45rem 0.45rem 0;
    padding: 0.1rem 0.35rem;
    color: #d8c58c;
}

.world-time-modal__map .leaflet-control-attribution a {
    color: #facc15;
}

.world-time-modal__map-status {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    max-width: min(20rem, calc(100% - 2rem));
    padding: 0.65rem 0.82rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(245, 158, 11, 0.24);
    background: rgba(3, 10, 18, 0.82);
    color: #fde68a;
    font-size: 0.82rem;
    font-weight: 700;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.14);
    z-index: 401;
}

.world-time-modal__map-status--warning {
    border-color: rgba(245, 158, 11, 0.3);
    color: #fde68a;
}

.world-time-modal__map-popup {
    display: grid;
    gap: 0.28rem;
    min-width: 12.5rem;
}

.world-time-modal__map-popup strong {
    color: #fef3c7;
    font-size: 0.92rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(245, 158, 11, 0.18);
}

.world-time-modal__map-popup p {
    margin: 0;
    color: #d8c58c;
    font-size: 0.78rem;
}

.world-time-modal__map-popup-metric {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding-top: 0.2rem;
    font-size: 0.8rem;
    color: #d8c58c;
}

.world-time-modal__map-popup-metric strong {
    color: #fde68a;
    font-size: 0.92rem;
}

.world-time-modal__map-popup-meta {
    color: #facc15;
    font-size: 0.74rem;
    font-weight: 700;
}

.world-time-modal__map .leaflet-popup-content-wrapper {
    border-radius: 0.95rem;
    background: rgba(4, 10, 18, 0.96);
    border: 1px solid rgba(245, 158, 11, 0.22);
    box-shadow: 0 18px 38px rgba(2, 6, 23, 0.28);
}

.world-time-modal__map .leaflet-popup-content {
    margin: 0.72rem 0.82rem;
}

.world-time-modal__map .leaflet-popup-tip {
    background: rgba(4, 10, 18, 0.96);
}

.world-time-modal__map svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.world-time-modal__celestial-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.world-time-modal__celestial-marker {
    position: absolute;
    top: 0.9rem;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.38rem 0.64rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #eff7ff;
    box-shadow: 0 12px 24px rgba(2, 6, 23, 0.22);
}

.world-time-modal__celestial-marker--sun {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(250, 204, 21, 0.16));
}

.world-time-modal__celestial-marker--moon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.36), rgba(147, 197, 253, 0.14));
}

.world-time-modal__celestial-icon {
    display: inline-flex;
    width: 0.95rem;
    height: 0.95rem;
}

.world-time-modal__celestial-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.world-time-modal__ocean {
    filter: saturate(1.05);
}

.world-time-modal__band {
    pointer-events: none;
}

.world-time-modal__band--day {
    fill: rgba(250, 204, 21, 0.12);
}

.world-time-modal__band--business {
    fill: rgba(52, 211, 153, 0.14);
}

.world-time-modal__graticule line {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 0.22;
}

.world-time-modal__sun-glow {
    fill: rgba(250, 204, 21, 0.22);
}

.world-time-modal__sun-core {
    fill: #fde68a;
    stroke: rgba(255, 255, 255, 0.45);
    stroke-width: 0.24;
}

.world-time-modal__moon-glow {
    fill: rgba(96, 165, 250, 0.16);
}

.world-time-modal__moon-core {
    fill: rgba(219, 234, 254, 0.88);
    stroke: rgba(255, 255, 255, 0.42);
    stroke-width: 0.18;
}

.world-time-modal__land-shadow {
    fill: rgba(3, 11, 26, 0.34);
    transform: translate(0.38px, 0.5px);
}

.world-time-modal__land {
    fill: rgba(236, 246, 255, 0.23);
    stroke: rgba(255, 255, 255, 0.28);
    stroke-width: 0.38;
}

.world-time-modal__pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    gap: 0.18rem;
    min-width: 7.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.95rem;
    backdrop-filter: blur(14px);
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 34px rgba(2, 6, 23, 0.24);
    text-align: left;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
    appearance: none;
    background-clip: padding-box;
}

.world-time-modal__pin--business {
    background: linear-gradient(145deg, rgba(10, 124, 95, 0.9), rgba(24, 185, 129, 0.76));
}

.world-time-modal__pin--after {
    background: linear-gradient(145deg, rgba(131, 43, 16, 0.9), rgba(249, 115, 22, 0.72));
}

.world-time-modal__pin--day {
    box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.18), 0 18px 34px rgba(2, 6, 23, 0.24);
}

.world-time-modal__pin--night {
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.18), 0 18px 34px rgba(2, 6, 23, 0.24);
}

.world-time-modal__pin:hover,
.world-time-modal__pin:focus-visible,
.world-time-modal__pin.is-active {
    transform: translate(-50%, calc(-50% - 0.18rem));
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 22px 40px rgba(2, 6, 23, 0.28);
    z-index: 3;
}

.world-time-modal__pin-code {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
}

.world-time-modal__pin-time {
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.1;
}

.world-time-modal__pin-meta {
    font-size: 0.71rem;
    letter-spacing: 0.03em;
    opacity: 0.92;
}

.world-time-modal__inspector {
    display: grid;
    align-content: start;
    gap: 0.85rem;
    min-height: 30rem;
    padding: 1rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(180deg, rgba(5, 14, 27, 0.92), rgba(9, 25, 48, 0.94));
    color: #edf6ff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.world-time-modal__inspector-empty {
    display: grid;
    place-items: center;
    min-height: 100%;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    color: rgba(237, 246, 255, 0.72);
    text-align: center;
}

.world-time-modal__inspector-body {
    display: grid;
    gap: 0.85rem;
}

.world-time-modal__inspector-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.world-time-modal__inspector-body h4 {
    margin: 0.12rem 0 0;
    font-size: 1.24rem;
    line-height: 1.15;
}

.world-time-modal__inspector-status {
    display: grid;
    gap: 0.45rem;
}

.world-time-modal__inspector-times {
    display: grid;
    gap: 0.75rem;
}

.world-time-modal__inspector .detail-item {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.05);
}

.world-time-modal__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.85rem;
}

.world-time-modal__card {
    display: grid;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.94));
}

html[data-theme="dark"] .world-time-modal__card {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.96));
}

.world-time-modal__card--day {
    border-color: rgba(245, 158, 11, 0.24);
}

.world-time-modal__card--night {
    border-color: rgba(59, 130, 246, 0.24);
}

.world-time-modal__card.is-active {
    border-color: rgba(0, 188, 235, 0.32);
    box-shadow: 0 16px 32px rgba(8, 20, 36, 0.12);
}

.world-time-modal__card-top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
}

.world-time-modal__stack {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: rgba(15, 109, 177, 0.08);
    color: var(--brand);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
}

.world-time-modal__times {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.world-time-modal__time-block {
    display: grid;
    gap: 0.22rem;
    padding: 0.8rem 0.85rem;
    border-radius: 0.95rem;
    background: rgba(15, 23, 42, 0.04);
}

html[data-theme="dark"] .world-time-modal__time-block {
    background: rgba(148, 163, 184, 0.08);
}

.world-time-modal__time-block span {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.world-time-modal__time-block strong {
    font-size: 1rem;
}

.world-time-modal__time-block small {
    color: var(--muted);
}

.world-time-modal__time-block--utc strong {
    color: var(--brand-strong);
}

.world-time-modal__card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

@keyframes toolsClockFloat {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    }
    50% {
        transform: translateY(-3px);
        box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
    }
}

.tools-hub__strength {
    position: relative;
    height: 0.7rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.16);
}

.tools-hub__strength-fill {
    height: 100%;
    border-radius: inherit;
    transition: width 0.2s ease;
}

.tools-hub__strength-fill--good {
    background: linear-gradient(90deg, #24c77a, #1d9b63);
}

.tools-hub__strength-fill--warn {
    background: linear-gradient(90deg, #ffb020, #f59e0b);
}

.tools-hub__strength-fill--soft {
    background: linear-gradient(90deg, #60a5fa, #4f46e5);
}

.tools-hub__strength-fill--bad {
    background: linear-gradient(90deg, #ff5c70, #dc2626);
}

.tools-hub__password-hint {
    display: grid;
    gap: 0.28rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.04);
}

html[data-theme="dark"] .tools-hub__password-hint {
    background: rgba(148, 163, 184, 0.08);
}

.tools-hub__password-hint span {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.tools-hub__card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
}

.tools-hub__icon {
    flex: 0 0 auto;
}

.tools-hub__utility-grid {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

button.tools-hub__utility-card {
    width: 100%;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
    text-align: left;
}

html[data-theme="dark"] button.tools-hub__utility-card {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.92));
}

.tools-hub__popup-shell {
    display: grid;
    gap: 0.9rem;
}

.tools-hub__popup-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
}

.tools-hub__popup-form--stack {
    grid-template-columns: minmax(0, 1fr);
}

.tools-hub__popup-field {
    display: grid;
    gap: 0.35rem;
}

.tools-hub__popup-field--full {
    grid-column: 1 / -1;
}

.tools-hub__popup-field span {
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
}

.tools-hub__popup-help {
    padding: 0.75rem 0.85rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.04);
}

html[data-theme="dark"] .tools-hub__popup-help {
    background: rgba(148, 163, 184, 0.08);
}

.tools-hub__popup-actions {
    align-items: center;
}

.tools-hub__popup-textarea {
    min-height: 9rem;
    resize: vertical;
}

.tools-hub__popup-pre {
    margin: 0;
    max-height: 20rem;
    overflow: auto;
    white-space: pre-wrap;
}

.tools-hub__batch-sections {
    display: grid;
    gap: 0.85rem;
    margin-top: 0.85rem;
}

.tools-hub__batch-section {
    display: grid;
    gap: 0.8rem;
}

.corpas-popup-window .popup-window__dialog {
    width: min(1480px, 96vw);
    min-height: min(860px, 94vh);
    max-height: 95vh;
}

.corpas-popup-window .popup-window__head {
    display: none;
}

.corpas-popup-window .popup-window__body {
    padding: 0;
    background: #ffffff;
}

.tools-hub__corpas-dashboard {
    display: grid;
    gap: 0;
    background: #ffffff;
}

.tools-hub__corpas-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) auto minmax(15rem, 0.9fr);
    gap: 1rem;
    align-items: center;
    position: relative;
    padding: 1.6rem 1.4rem 1rem;
    border-radius: 0;
    background: linear-gradient(180deg, #0c355c 0%, #0a2f50 100%);
    color: #f8fcff;
    border: 0;
    box-shadow: none;
}

html[data-theme="dark"] .tools-hub__corpas-hero {
    background: linear-gradient(180deg, #071d31 0%, #08243c 100%);
}

.tools-hub__corpas-hero-brand,
.tools-hub__corpas-hero-user {
    display: grid;
    gap: 0.25rem;
}

.tools-hub__corpas-close {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}

.tools-hub__corpas-close:hover,
.tools-hub__corpas-close:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.03);
}

.tools-hub__corpas-hero-region-shell {
    display: grid;
    gap: 0.35rem;
    justify-items: center;
}

.tools-hub__corpas-wordmark {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 900;
    letter-spacing: 0.12em;
}

.tools-hub__corpas-rule {
    display: block;
    width: min(100%, 26rem);
    height: 0.34rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #0aa6f4 0%, #24c1ff 55%, rgba(36, 193, 255, 0.25) 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tools-hub__corpas-rule--tagline {
    width: min(100%, 7rem);
}

.tools-hub__corpas-rule--short,
.tools-hub__corpas-rule--user {
    width: min(100%, 6rem);
}

.tools-hub__corpas-tagline {
    margin: 0;
    color: #22c3ff;
    font-size: 1.08rem;
    font-weight: 800;
}

.tools-hub__corpas-hero-region {
    font-size: clamp(2.4rem, 4.4vw, 4rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #fdfdfd;
    justify-self: center;
}

.tools-hub__corpas-hero-user {
    justify-items: end;
    text-align: right;
}

.tools-hub__corpas-hero-user p {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
}

.tools-hub__corpas-hero-user strong {
    font-size: clamp(2rem, 3.8vw, 3rem);
    color: #ffd233;
    line-height: 1;
    font-weight: 900;
}

.tools-hub__corpas-hero-user span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.9rem;
    word-break: break-all;
}

.tools-hub__corpas-hero-identity {
    display: none;
}

.tools-hub__corpas-control-card,
.tools-hub__corpas-access-card,
.tools-hub__corpas-guide-card,
.tools-hub__corpas-advanced {
    display: grid;
    gap: 0.9rem;
}

.tools-hub__corpas-access-card,
.tools-hub__corpas-guide-card {
    padding: 1.05rem 0 1.2rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
    background: #ffffff;
}

.tools-hub__corpas-access-head,
.tools-hub__corpas-guide-title,
.tools-hub__corpas-guide-grid,
.tools-hub__corpas-footer,
.tools-hub__corpas-advanced summary,
.tools-hub__corpas-advanced-body {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
}

.tools-hub__corpas-access-head {
    align-items: flex-start;
}

.tools-hub__corpas-access-meta {
    display: none;
}

.tools-hub__corpas-access-actions {
    align-self: center;
}

.tools-hub__corpas-table-wrap {
    min-height: 25rem;
    border-radius: 0;
    background: #ffffff;
    border-top: 1px solid rgba(203, 213, 225, 0.8);
    border-bottom: 1px solid rgba(203, 213, 225, 0.8);
    overflow: auto;
}

html[data-theme="dark"] .tools-hub__corpas-table-wrap {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(18, 30, 48, 0.94));
}

.tools-hub__corpas-table {
    min-width: 0;
}

.tools-hub__corpas-table th {
    background: #ffffff;
    color: #081f37;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid rgba(148, 163, 184, 0.26);
}

html[data-theme="dark"] .tools-hub__corpas-table th {
    background: rgba(73, 198, 241, 0.08);
    color: #e9f5ff;
}

.tools-hub__corpas-table td {
    vertical-align: middle;
    white-space: normal;
    font-size: 0.95rem;
}

.tools-hub__corpas-table tbody tr:nth-child(even) {
    background: rgba(15, 23, 42, 0.04);
}

.tools-hub__corpas-table-action {
    width: 13rem;
}

.tools-hub__corpas-type {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 700;
}

.tools-hub__corpas-type-icon,
.tools-hub__corpas-access-button-icon {
    display: inline-grid;
    place-items: center;
    width: 1.15rem;
    height: 1.15rem;
}

.tools-hub__corpas-type-icon svg,
.tools-hub__corpas-access-button-icon svg {
    width: 1rem;
    height: 1rem;
}

.tools-hub__corpas-access-button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 0;
    border-radius: 0.95rem;
    padding: 0.85rem 1rem;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.tools-hub__corpas-access-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
    filter: saturate(1.04);
}

.tools-hub__corpas-access-button--rdp {
    background: linear-gradient(135deg, #0e7fd1 0%, #1090e6 100%);
}

.tools-hub__corpas-access-button--ssh {
    background: linear-gradient(135deg, #434343 0%, #575757 100%);
}

.tools-hub__corpas-guide-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.1fr);
    gap: 1rem;
}

.tools-hub__corpas-guide-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 0.35rem;
    color: #0b3154;
    font-size: 0.9rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tools-hub__corpas-guide-lock {
    font-size: 1.15rem;
}

.tools-hub__corpas-guide-panel {
    display: grid;
    gap: 0.8rem;
    min-height: 100%;
}

.tools-hub__corpas-guide-panel h4 {
    margin: 0;
    font-size: 1.55rem;
    color: #0b3154;
}

html[data-theme="dark"] .tools-hub__corpas-guide-panel h4 {
    color: #ecf7ff;
}

.tools-hub__corpas-guide-stack {
    display: grid;
    gap: 0.85rem;
}

.tools-hub__corpas-guide-line {
    display: grid;
    gap: 0.4rem;
    padding: 1.15rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.76);
}

html[data-theme="dark"] .tools-hub__corpas-guide-line {
    background: rgba(148, 163, 184, 0.08);
}

.tools-hub__corpas-guide-line span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-soft);
    font-weight: 700;
}

.tools-hub__corpas-guide-line a {
    color: var(--brand);
    font-weight: 700;
    word-break: break-all;
}

.tools-hub__corpas-guide-line strong {
    color: #081f37;
    font-size: 1rem;
}

.tools-hub__corpas-guide-panel--duo {
    background: linear-gradient(180deg, rgba(255, 252, 229, 0.92), rgba(255, 248, 196, 0.72));
    border-color: rgba(229, 194, 32, 0.24);
}

html[data-theme="dark"] .tools-hub__corpas-guide-panel--duo {
    background: linear-gradient(180deg, rgba(71, 55, 14, 0.52), rgba(90, 66, 12, 0.38));
    border-color: rgba(229, 194, 32, 0.18);
}

.tools-hub__corpas-duo-list {
    display: grid;
    gap: 0.75rem;
}

.tools-hub__corpas-duo-item {
    display: flex;
    justify-content: space-between;
    gap: 0.9rem;
    align-items: center;
    padding: 0.95rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(229, 194, 32, 0.26);
    background: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .tools-hub__corpas-duo-item {
    background: rgba(255, 255, 255, 0.05);
}

.tools-hub__corpas-duo-item strong {
    color: #111827;
}

html[data-theme="dark"] .tools-hub__corpas-duo-item strong {
    color: #fdf4c6;
}

.tools-hub__corpas-duo-item--title {
    justify-content: flex-start;
    background: rgba(255, 255, 255, 0.82);
}

.tools-hub__corpas-duo-item span {
    color: var(--text);
    text-align: right;
}

.tools-hub__corpas-advanced {
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    box-shadow: none;
}

.tools-hub__corpas-advanced summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.2rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-strong);
    background: rgba(11, 116, 199, 0.06);
}

.tools-hub__corpas-advanced summary::-webkit-details-marker {
    display: none;
}

.tools-hub__corpas-advanced-body {
    display: grid;
    gap: 0.9rem;
    padding-bottom: 1.2rem;
}

.tools-hub__corpas-advanced-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.tools-hub__corpas-template {
    font-family: "Consolas", "Courier New", monospace;
    min-height: 16rem;
}

.tools-hub__corpas-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    color: var(--text-soft);
    font-size: 0.95rem;
}

.tools-hub__corpas-footer-link {
    border: 0;
    background: transparent;
    color: var(--brand);
    font-weight: 800;
    cursor: pointer;
    text-decoration: underline;
}

.tools-hub__corpas-preview {
    max-height: 18rem;
}

.tools-hub__tool-output--hidden {
    display: none;
}

.table-head > div,
.chart-card__head > div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.table-head h3,
.chart-card__head h3 {
    margin: 0;
    line-height: 1.08;
    font-size: clamp(1.08rem, 1.2vw, 1.34rem);
}

.tools-hub--catalog .table-head > div {
    gap: 0.12rem;
}

.content-stage > .content-card,
.content-stage > .chart-card,
.content-stage > .table-shell,
.content-stage > .compact-table-shell,
.content-stage > .donut-card,
.content-stage > .table-wrap,
.content-stage .detail-item--action,
button.tools-hub__utility-card,
a.tools-hub__card {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.content-stage > .content-card:hover,
.content-stage > .chart-card:hover,
.content-stage > .table-shell:hover,
.content-stage > .compact-table-shell:hover,
.content-stage > .donut-card:hover,
.content-stage > .table-wrap:hover,
.content-stage .detail-item--action:hover,
button.tools-hub__utility-card:hover,
a.tools-hub__card:hover {
    border-color: rgba(79, 140, 255, 0.24);
    background:
        radial-gradient(circle at top right, rgba(79, 140, 255, 0.14), transparent 11rem),
        linear-gradient(135deg, rgba(27, 165, 167, 0.08), rgba(79, 140, 255, 0.04)),
        var(--panel);
    box-shadow: 0 18px 36px rgba(7, 36, 62, 0.12);
}

html[data-theme="dark"] .content-stage > .content-card:hover,
html[data-theme="dark"] .content-stage > .chart-card:hover,
html[data-theme="dark"] .content-stage > .table-shell:hover,
html[data-theme="dark"] .content-stage > .compact-table-shell:hover,
html[data-theme="dark"] .content-stage > .donut-card:hover,
html[data-theme="dark"] .content-stage > .table-wrap:hover,
html[data-theme="dark"] .content-stage .detail-item--action:hover,
html[data-theme="dark"] button.tools-hub__utility-card:hover,
html[data-theme="dark"] a.tools-hub__card:hover {
    border-color: rgba(79, 168, 223, 0.3);
    background:
        radial-gradient(circle at top right, rgba(79, 168, 223, 0.18), transparent 11rem),
        linear-gradient(135deg, rgba(57, 195, 191, 0.12), rgba(79, 168, 223, 0.06)),
        var(--panel);
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.3);
}

@media (min-width: 1180px) {
    .tools-hub__panel-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .tools-hub__tool-card--tile {
        aspect-ratio: auto;
        min-height: 0;
    }

    .tools-hub__tool-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .tools-hub__tool-card--world-clock .tools-hub__clock-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .tools-hub__tool-inline,
    .tools-hub__tool-card--password .tools-hub__tool-inline {
        align-items: flex-start;
    }

    .tools-hub__clock-list {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }

    .tools-hub__clock-times {
        grid-template-columns: minmax(0, 1fr);
    }

    .tools-hub__tool-card--subnet .tools-hub__result-grid,
    .tools-hub__tool-card--password .tools-hub__result-grid,
    .tools-hub__tool-card--mac .tools-hub__result-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .corpas-popup-window .popup-window__dialog {
        width: min(100vw - 1rem, 1480px);
        min-height: 0;
    }

    .corpas-popup-window .popup-window__body {
        padding: 0;
    }

    .tools-hub__corpas-hero {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
        text-align: left;
    }

    .tools-hub__corpas-hero-region {
        justify-self: start;
    }

    .tools-hub__corpas-hero-user {
        justify-items: start;
        text-align: left;
    }

    .tools-hub__corpas-guide-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tools-hub__corpas-advanced-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tools-hub__corpas-duo-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .tools-hub__corpas-table-action {
        width: auto;
    }

    .world-time-modal__map {
        min-height: 24rem;
    }

    .world-time-modal__map-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .world-time-modal__inspector {
        min-height: 0;
    }

    .world-time-modal__pin {
        min-width: 6.75rem;
        padding: 0.45rem 0.55rem;
    }

    .world-time-modal__pin-time {
        font-size: 0.86rem;
    }

    .world-time-modal__times {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .world-time-modal__map {
        min-height: 18rem;
    }

    .world-time-modal__pin {
        min-width: auto;
        padding: 0.32rem 0.45rem;
    }

    .world-time-modal__pin-time,
    .world-time-modal__pin-meta {
        display: none;
    }
}

.mra-ping-picker {
    display: grid;
    gap: 0.8rem;
}

.mra-ping-picker__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.mra-ping-picker__list {
    display: grid;
    gap: 0.5rem;
    max-height: min(55vh, 34rem);
    overflow: auto;
    padding-right: 0.2rem;
}

.mra-settings-popup {
    display: grid;
    gap: 0.9rem;
}

.mra-settings-popup__summary {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.mra-settings-popup__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.mra-settings-popup__field {
    display: grid;
    gap: 0.4rem;
    padding: 0.9rem;
    border-radius: 16px;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.55);
}

.mra-settings-popup__field small {
    color: var(--text-soft);
}

html[data-theme="dark"] .mra-settings-popup__field {
    background: rgba(18, 28, 41, 0.82);
}

@media (max-width: 960px) {
    .mra-settings-popup__grid {
        grid-template-columns: 1fr;
    }

    .sidebar-utility__row {
        align-items: stretch;
    }

    .sidebar-theme-select {
        width: 100%;
    }
}

/* Cisco shell refresh and Change Record workspace */

:root {
    --brand: #0b74c7;
    --brand-strong: #0a527d;
    --accent: #00bceb;
    --accent-soft: rgba(0, 188, 235, 0.16);
    --sidebar-hover-edge: #4dd47a;
    --project-scroll-track: rgba(5, 34, 52, 0.4);
    --project-scroll-start: #42d96b;
    --project-scroll-mid: #00d7ff;
    --project-scroll-end: #1b78d6;
    --sidebar-scroll-track: var(--project-scroll-track);
    --sidebar-scroll-start: var(--project-scroll-start);
    --sidebar-scroll-mid: var(--project-scroll-mid);
    --sidebar-scroll-end: var(--project-scroll-end);
}

html[data-theme="dark"] {
    --brand: #49c6f1;
    --brand-strong: #0b74c7;
    --accent: #00d7ff;
    --accent-soft: rgba(0, 215, 255, 0.18);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--project-scroll-mid) var(--project-scroll-track);
}

*::-webkit-scrollbar {
    width: 0.72rem;
    height: 0.72rem;
}

*::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(2, 18, 30, 0.22), var(--project-scroll-track));
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid rgba(6, 29, 45, 0.55);
    background:
        linear-gradient(180deg, var(--project-scroll-start) 0%, var(--project-scroll-mid) 45%, var(--project-scroll-end) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 10px 20px rgba(0, 12, 22, 0.24);
}

*::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, #72ee7d 0%, #32e4ff 45%, #2b8dff 100%);
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

.sidebar {
    background: linear-gradient(180deg, #0d3555 0%, #0a2940 100%);
    border-right: 1px solid rgba(0, 188, 235, 0.18);
}

html[data-theme="dark"] .sidebar {
    background: linear-gradient(180deg, #071d31 0%, #041521 100%);
}

.sidebar .nav-link,
.sidebar .nav-group__toggle,
.sidebar .sidebar-foot__label,
.sidebar .sidebar-foot__value,
.sidebar .brand-copy h1,
.sidebar .muted-copy,
.sidebar .sidebar-section__title {
    color: #f4fbff;
}

.sidebar .nav-link,
.sidebar .nav-group__toggle,
.sidebar .sidebar-foot,
.sidebar .sidebar-utility {
    border-color: rgba(0, 188, 235, 0.12);
}

.sidebar .nav-link,
.sidebar .nav-group__toggle {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
}

.sidebar .nav-link__icon {
    color: var(--nav-accent, #f8fdff);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    transition: transform 180ms ease, color 180ms ease, filter 180ms ease;
}

.sidebar .nav-link__icon svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke-width: 2.3;
    filter: drop-shadow(0 1px 1px rgba(3, 10, 18, 0.18));
}

.sidebar .nav-link.active,
.sidebar .nav-group__toggle.active {
    background: linear-gradient(135deg, rgba(0, 188, 235, 0.2), rgba(22, 115, 196, 0.22));
    border-color: rgba(0, 188, 235, 0.28);
    box-shadow: 0 12px 24px rgba(4, 24, 39, 0.22);
}

.sidebar .nav-link.active .nav-link__icon,
.sidebar .nav-group__toggle.active .nav-link__icon {
    color: var(--nav-accent, #b9f7ff);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    filter: saturate(1.15) brightness(1.08) drop-shadow(0 3px 8px rgba(0, 18, 31, 0.18));
}

.sidebar .nav-link:hover,
.sidebar .nav-group__toggle:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(0, 188, 235, 0.24), rgba(22, 115, 196, 0.26));
    border-color: rgba(77, 212, 122, 0.3);
    box-shadow:
        0 16px 30px rgba(4, 24, 39, 0.26),
        inset -0.24rem 0 0 var(--sidebar-hover-edge);
}

.sidebar .nav-link:hover .nav-link__icon,
.sidebar .nav-group__toggle:hover .nav-link__icon {
    transform: translateY(-1px) scale(1.05);
    color: var(--nav-accent, #ffffff);
    filter: saturate(1.18) brightness(1.1) drop-shadow(0 4px 10px rgba(0, 18, 31, 0.22));
}

.sidebar .nav-link.active:hover,
.sidebar .nav-group__toggle.active:hover {
    border-color: rgba(77, 212, 122, 0.36);
    box-shadow:
        0 18px 34px rgba(4, 24, 39, 0.28),
        inset -0.24rem 0 0 var(--sidebar-hover-edge);
}

.sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-scroll-mid) var(--sidebar-scroll-track);
    padding-bottom: 1rem;
}

.sidebar-nav::-webkit-scrollbar {
    width: 0.72rem;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(2, 18, 30, 0.22), var(--sidebar-scroll-track));
    border-radius: 999px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid rgba(6, 29, 45, 0.55);
    background:
        linear-gradient(180deg, var(--sidebar-scroll-start) 0%, var(--sidebar-scroll-mid) 45%, var(--sidebar-scroll-end) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.08),
        0 10px 20px rgba(0, 12, 22, 0.24);
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, #72ee7d 0%, #32e4ff 45%, #2b8dff 100%);
}

.sidebar .nav-link.active:hover .nav-link__icon,
.sidebar .nav-group__toggle.active:hover .nav-link__icon {
    transform: translateY(-1px) scale(1.06);
    color: var(--nav-accent, #d9feff);
    filter: saturate(1.22) brightness(1.12) drop-shadow(0 5px 12px rgba(0, 18, 31, 0.24));
}

.sidebar .nav-link .muted-copy,
.sidebar .nav-group__toggle .muted-copy,
.sidebar .sidebar-foot__label,
.sidebar .sidebar-utility__caption {
    color: rgba(225, 244, 255, 0.78);
}

.brand-mark.small {
    background: linear-gradient(135deg, #00bceb 0%, #0b74c7 100%);
    box-shadow: 0 14px 30px rgba(0, 95, 163, 0.28);
}

.topbar {
    border-bottom: 1px solid rgba(0, 188, 235, 0.14);
    box-shadow: 0 14px 28px rgba(7, 36, 62, 0.08);
}

.workspace-footer {
    border-top: 1px solid rgba(0, 188, 235, 0.12);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(243, 250, 255, 0.92));
}

html[data-theme="dark"] .workspace-footer {
    background: linear-gradient(135deg, rgba(9, 26, 40, 0.96), rgba(12, 33, 52, 0.94));
}

.topbar__utility-group .toolbar-button,
.sidebar-utility .toolbar-button,
.sidebar-utility .icon-button,
.ai-launch-button--sidebar,
.ai-launch-button--topbar {
    border-color: rgba(0, 188, 235, 0.18);
}

.change-record-shell {
    display: grid;
    gap: 1rem;
    padding: 1.15rem 1.15rem 1.5rem;
}

.change-record-head-actions {
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.change-record-head-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.change-record-form {
    display: grid;
    gap: 1rem;
    padding-bottom: 0.4rem;
}

.change-record-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
    gap: 0.6rem;
}

.change-record-step {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.65rem;
    padding: 0.72rem 0.82rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.78);
    color: var(--text);
    text-align: left;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, background 140ms ease;
}

.change-record-step__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 999px;
    background: rgba(11, 116, 199, 0.1);
    color: #0b74c7;
    font-weight: 700;
    font-size: 0.78rem;
}

.change-record-step__copy {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.change-record-step strong {
    font-size: 0.86rem;
    text-align: left;
    line-height: 1.18;
}

.change-record-step small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.change-record-step.active {
    border-color: rgba(0, 188, 235, 0.28);
    background: linear-gradient(180deg, rgba(0, 188, 235, 0.08), rgba(255, 255, 255, 0.88));
    box-shadow: 0 12px 24px rgba(4, 24, 39, 0.08);
}

.change-record-step.completed {
    border-color: rgba(36, 199, 122, 0.24);
    background: linear-gradient(180deg, rgba(36, 199, 122, 0.08), rgba(255, 255, 255, 0.88));
}

.change-record-step.completed .change-record-step__badge {
    background: rgba(36, 199, 122, 0.14);
    color: #138a52;
}

.change-record-step.completed small {
    color: #138a52;
}

.change-record-step.required {
    border-color: rgba(239, 68, 68, 0.22);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.06), rgba(255, 255, 255, 0.88));
}

.change-record-step.required .change-record-step__badge {
    background: rgba(239, 68, 68, 0.12);
    color: #d7263d;
}

.change-record-step.required small {
    color: #d7263d;
}

.change-record-step:hover {
    transform: translateY(-1px);
    border-color: rgba(11, 116, 199, 0.22);
}

html[data-theme="dark"] .change-record-step {
    background: rgba(15, 23, 42, 0.9);
}

html[data-theme="dark"] .change-record-step.active {
    background: linear-gradient(180deg, rgba(0, 188, 235, 0.12), rgba(15, 23, 42, 0.94));
}

html[data-theme="dark"] .change-record-step.completed {
    background: linear-gradient(180deg, rgba(36, 199, 122, 0.14), rgba(15, 23, 42, 0.94));
}

.change-record-step-guide {
    display: grid;
    gap: 0.8rem;
    padding: 0.95rem 1rem;
    border-radius: 1.05rem;
    border: 1px solid rgba(11, 116, 199, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(242, 248, 255, 0.82));
}

html[data-theme="dark"] .change-record-step-guide {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(12, 31, 48, 0.92));
}

.change-record-step-guide__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: start;
    justify-content: space-between;
}

.change-record-step-guide__head h4 {
    margin: 0;
}

.change-record-progress {
    display: grid;
    gap: 0.45rem;
    min-width: min(18rem, 100%);
}

.change-record-progress__copy {
    display: grid;
    gap: 0.08rem;
}

.change-record-progress__copy strong {
    font-size: 1.05rem;
    line-height: 1;
}

.change-record-progress__copy small {
    color: var(--muted);
    font-size: 0.74rem;
}

.change-record-progress__bar {
    width: 100%;
    height: 0.5rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
    overflow: hidden;
}

.change-record-progress__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0b74c7, #00bceb, #22c55e);
}

.change-record-step-guide__chips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.55rem;
}

.change-record-step-guide__chip {
    display: grid;
    gap: 0.18rem;
    padding: 0.68rem 0.75rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .change-record-step-guide__chip {
    background: rgba(15, 23, 42, 0.76);
}

.change-record-step-guide__chip strong {
    font-size: 0.83rem;
    line-height: 1.2;
}

.change-record-step-guide__chip small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.change-record-step-guide__chip.is-complete {
    border-color: rgba(34, 197, 94, 0.24);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.1), rgba(255, 255, 255, 0.88));
}

html[data-theme="dark"] .change-record-step-guide__chip.is-complete {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.14), rgba(15, 23, 42, 0.92));
}

.change-record-step-guide__chip.is-complete small {
    color: #138a52;
}

.change-record-step-guide__chip.is-required {
    border-color: rgba(239, 68, 68, 0.18);
}

.change-record-required {
    color: var(--danger);
    font-weight: 800;
    margin-left: 0.2rem;
}

.change-record-required-note {
    margin: 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.change-record-context {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(0, 188, 235, 0.12);
    background: linear-gradient(180deg, rgba(0, 188, 235, 0.06), rgba(255, 255, 255, 0.03));
}

.change-record-context-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.change-record-section {
    display: grid;
    gap: 0.95rem;
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(11, 116, 199, 0.12);
    background: linear-gradient(180deg, rgba(11, 116, 199, 0.04), rgba(255, 255, 255, 0.02)), var(--panel);
}

.change-record-section__summary {
    list-style: none;
    cursor: pointer;
    padding: 0.92rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(135deg, rgba(11, 116, 199, 0.08), rgba(255, 255, 255, 0.88));
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.change-record-section__summary:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
}

.change-record-section__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 0.8rem;
    align-items: start;
}

.change-record-section__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(11, 116, 199, 0.1);
    color: #0b74c7;
    font-size: 0.84rem;
    font-weight: 800;
}

.change-record-section--tone-0 .change-record-section__number,
.change-record-section--tone-0 .change-record-section__chevron {
    color: #0b74c7;
}

.change-record-section--tone-1 .change-record-section__number,
.change-record-section--tone-1 .change-record-section__chevron {
    color: #138a52;
}

.change-record-section--tone-2 .change-record-section__number,
.change-record-section--tone-2 .change-record-section__chevron {
    color: #c77700;
}

.change-record-section--tone-3 .change-record-section__number,
.change-record-section--tone-3 .change-record-section__chevron {
    color: #7c3aed;
}

.change-record-section--tone-4 .change-record-section__number,
.change-record-section--tone-4 .change-record-section__chevron {
    color: #0891b2;
}

.change-record-section--tone-5 .change-record-section__number,
.change-record-section--tone-audit .change-record-section__number,
.change-record-section--tone-5 .change-record-section__chevron,
.change-record-section--tone-audit .change-record-section__chevron {
    color: #db2777;
}

.change-record-section__summary::-webkit-details-marker {
    display: none;
}

.change-record-section__summary--tone-0 {
    background: linear-gradient(135deg, rgba(11, 116, 199, 0.12), rgba(219, 242, 255, 0.92));
}

.change-record-section__summary--tone-1 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(235, 252, 241, 0.94));
}

.change-record-section__summary--tone-2 {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.12), rgba(255, 245, 236, 0.94));
}

.change-record-section__summary--tone-3 {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(247, 240, 255, 0.94));
}

.change-record-section__summary--tone-4 {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(236, 253, 255, 0.94));
}

.change-record-section__summary--tone-5,
.change-record-section__summary--audit {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(255, 241, 247, 0.94));
}

.change-record-section__intro {
    display: grid;
    gap: 0.2rem;
}

.change-record-section__body {
    display: grid;
    gap: 0.9rem;
}

.change-record-section__intro h4 {
    margin: 0;
    font-size: 1.05rem;
}

.change-record-section__title-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.change-record-section__state {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.26rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.change-record-section__state-icon {
    line-height: 1;
}

.change-record-section__state--completed {
    background: rgba(34, 197, 94, 0.12);
    color: #138a52;
}

.change-record-section__state--required {
    background: rgba(239, 68, 68, 0.1);
    color: #d7263d;
}

.change-record-section__state--progress {
    background: rgba(0, 188, 235, 0.12);
    color: #0b74c7;
}

.change-record-section__state--pending {
    background: rgba(148, 163, 184, 0.12);
    color: var(--muted);
}

.change-record-section__progress {
    display: grid;
    gap: 0.08rem;
    justify-items: end;
    text-align: right;
}

.change-record-section__progress strong {
    font-size: 0.95rem;
    line-height: 1;
}

.change-record-section__progress small {
    color: var(--muted);
    font-size: 0.72rem;
}

.change-record-section__chevron {
    align-self: center;
    justify-self: end;
    width: 0.9rem;
    height: 0.9rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 140ms ease;
}

.change-record-section[open] .change-record-section__chevron {
    transform: rotate(-135deg);
}

.change-record-section.completed {
    border-color: rgba(34, 197, 94, 0.24);
}

.change-record-section.required {
    border-color: rgba(239, 68, 68, 0.18);
}

html[data-theme="dark"] .change-record-section__summary {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(12, 31, 48, 0.92));
}

html[data-theme="dark"] .change-record-section__summary--tone-0 {
    background: linear-gradient(135deg, rgba(11, 116, 199, 0.22), rgba(15, 23, 42, 0.96));
}

html[data-theme="dark"] .change-record-section__summary--tone-1 {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(15, 23, 42, 0.96));
}

html[data-theme="dark"] .change-record-section__summary--tone-2 {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2), rgba(15, 23, 42, 0.96));
}

html[data-theme="dark"] .change-record-section__summary--tone-3 {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(15, 23, 42, 0.96));
}

html[data-theme="dark"] .change-record-section__summary--tone-4 {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(15, 23, 42, 0.96));
}

html[data-theme="dark"] .change-record-section__summary--tone-5,
html[data-theme="dark"] .change-record-section__summary--audit {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(15, 23, 42, 0.96));
}

.change-record-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.change-record-field {
    display: grid;
    gap: 0.38rem;
}

.change-record-field--wide {
    grid-column: 1 / -1;
}

.change-record-field__hint {
    margin: 0;
}

.change-record-field__autofill {
    margin: 0;
    color: #0b74c7;
    font-size: 0.76rem;
    font-weight: 700;
}

.change-record-readonly {
    display: flex;
    align-items: center;
    min-height: 3.1rem;
    padding: 0.85rem 0.95rem;
    border-radius: 14px;
    border: 1px solid var(--panel-border);
    background: linear-gradient(180deg, rgba(0, 188, 235, 0.07), rgba(255, 255, 255, 0.02));
    color: var(--brand-strong);
    font-weight: 700;
}

.change-record-field input,
.change-record-field select,
.change-record-field textarea {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--panel-border);
    background: var(--panel-strong);
    color: var(--text);
    padding: 0.85rem 0.95rem;
    outline: none;
    font: inherit;
}

.change-record-field input[readonly] {
    background: linear-gradient(180deg, rgba(0, 188, 235, 0.07), rgba(255, 255, 255, 0.02));
    color: var(--brand-strong);
    font-weight: 700;
    cursor: default;
}

.change-record-field textarea {
    resize: vertical;
    min-height: 7rem;
}

.change-record-field input:focus,
.change-record-field select:focus,
.change-record-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}

.change-record-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.55rem;
}

.change-record-checks .change-record-check-item {
    --change-check-accent: #0ea5e9;
    --change-check-border: rgba(14, 165, 233, 0.24);
    --change-check-surface: rgba(14, 165, 233, 0.08);
    --change-check-surface-strong: rgba(14, 165, 233, 0.14);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    min-height: 100%;
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--change-check-border);
    background: linear-gradient(180deg, var(--change-check-surface), rgba(255, 255, 255, 0.82));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

html[data-theme="dark"] .change-record-checks .change-record-check-item {
    background: linear-gradient(180deg, var(--change-check-surface), rgba(15, 23, 42, 0.92));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.change-record-checks .change-record-check-item:nth-child(6n + 2) {
    --change-check-accent: #22c55e;
    --change-check-border: rgba(34, 197, 94, 0.24);
    --change-check-surface: rgba(34, 197, 94, 0.08);
    --change-check-surface-strong: rgba(34, 197, 94, 0.14);
}

.change-record-checks .change-record-check-item:nth-child(6n + 3) {
    --change-check-accent: #f97316;
    --change-check-border: rgba(249, 115, 22, 0.24);
    --change-check-surface: rgba(249, 115, 22, 0.08);
    --change-check-surface-strong: rgba(249, 115, 22, 0.14);
}

.change-record-checks .change-record-check-item:nth-child(6n + 4) {
    --change-check-accent: #a855f7;
    --change-check-border: rgba(168, 85, 247, 0.24);
    --change-check-surface: rgba(168, 85, 247, 0.08);
    --change-check-surface-strong: rgba(168, 85, 247, 0.14);
}

.change-record-checks .change-record-check-item:nth-child(6n + 5) {
    --change-check-accent: #ef4444;
    --change-check-border: rgba(239, 68, 68, 0.24);
    --change-check-surface: rgba(239, 68, 68, 0.08);
    --change-check-surface-strong: rgba(239, 68, 68, 0.14);
}

.change-record-checks .change-record-check-item:nth-child(6n) {
    --change-check-accent: #eab308;
    --change-check-border: rgba(234, 179, 8, 0.24);
    --change-check-surface: rgba(234, 179, 8, 0.08);
    --change-check-surface-strong: rgba(234, 179, 8, 0.14);
}

.change-record-checks .change-record-check-item:hover {
    transform: translateY(-1px);
    border-color: var(--change-check-accent);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.change-record-checks .change-record-check-item input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0.12rem 0 0;
    accent-color: var(--change-check-accent);
    flex: 0 0 auto;
}

.change-record-checks .change-record-check-item:has(input:checked) {
    border-color: var(--change-check-accent);
    background: linear-gradient(180deg, var(--change-check-surface-strong), rgba(255, 255, 255, 0.9));
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .change-record-checks .change-record-check-item:has(input:checked) {
    background: linear-gradient(180deg, var(--change-check-surface-strong), rgba(15, 23, 42, 0.96));
}

.change-record-checks-shell {
    display: grid;
    gap: 0.6rem;
}

.change-record-savebar {
    align-items: center;
    gap: 0.85rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.change-record-transition {
    display: grid;
    gap: 0.8rem;
    padding: 0.95rem 1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(11, 116, 199, 0.14);
    background: linear-gradient(135deg, rgba(11, 116, 199, 0.05), rgba(255, 255, 255, 0.92));
}

html[data-theme="dark"] .change-record-transition {
    background: linear-gradient(135deg, rgba(11, 116, 199, 0.16), rgba(15, 23, 42, 0.94));
}

.change-record-transition__head h4 {
    margin: 0.08rem 0 0.18rem;
}

.change-record-transition__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.change-record-transition__step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.78);
}

html[data-theme="dark"] .change-record-transition__step {
    background: rgba(15, 23, 42, 0.78);
}

.change-record-transition__step.is-active {
    border-color: rgba(2, 132, 199, 0.26);
    box-shadow: 0 14px 28px rgba(2, 132, 199, 0.12);
}

.change-record-transition__step.is-complete {
    border-color: rgba(34, 197, 94, 0.28);
    background: linear-gradient(135deg, rgba(220, 252, 231, 0.82), rgba(255, 255, 255, 0.92));
}

html[data-theme="dark"] .change-record-transition__step.is-complete {
    background: linear-gradient(135deg, rgba(20, 83, 45, 0.72), rgba(15, 23, 42, 0.92));
}

.change-record-transition__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 800;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.12);
    border: 1px solid rgba(14, 165, 233, 0.16);
}

.change-record-transition__step.is-complete .change-record-transition__badge {
    color: #15803d;
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.18);
}

.change-record-transition__copy {
    display: grid;
    gap: 0.08rem;
}

.change-record-transition__copy strong {
    font-size: 0.86rem;
}

.change-record-transition__copy small {
    color: var(--muted);
}

.change-record-savebar .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.change-record-savebar__primary {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-left: 0.1rem;
}

.change-record-completion-float {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.42rem 0.7rem 0.42rem 0.42rem;
    border-radius: 999px;
    border: 1px solid rgba(11, 116, 199, 0.16);
    background: linear-gradient(135deg, rgba(11, 116, 199, 0.08), rgba(255, 255, 255, 0.92));
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
}

html[data-theme="dark"] .change-record-completion-float {
    background: linear-gradient(135deg, rgba(11, 116, 199, 0.18), rgba(15, 23, 42, 0.96));
}

.change-record-completion-float__circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 999px;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.96) 0 58%, transparent 59%),
        conic-gradient(from -90deg, #22c55e 0 calc(var(--change-progress, 0) * 1%), rgba(148, 163, 184, 0.18) 0 100%);
    box-shadow: inset 0 0 0 1px rgba(11, 116, 199, 0.08);
}

html[data-theme="dark"] .change-record-completion-float__circle {
    background:
        radial-gradient(circle at center, rgba(15, 23, 42, 0.96) 0 58%, transparent 59%),
        conic-gradient(from -90deg, #22c55e 0 calc(var(--change-progress, 0) * 1%), rgba(71, 85, 105, 0.46) 0 100%);
}

.change-record-completion-float__circle span {
    font-size: 0.88rem;
    font-weight: 800;
    color: #138a52;
}

.change-record-completion-float__copy {
    display: grid;
    gap: 0.08rem;
}

.change-record-completion-float__copy strong {
    font-size: 0.8rem;
    line-height: 1.1;
}

.change-record-completion-float__copy small {
    color: var(--muted);
    font-size: 0.72rem;
}

.change-record-button--danger {
    border-color: rgba(220, 38, 38, 0.22);
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    box-shadow: 0 14px 26px rgba(220, 38, 38, 0.2);
}

.change-record-button--danger:hover,
.change-record-button--danger:focus-visible {
    border-color: rgba(185, 28, 28, 0.24);
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: #fff;
}

.change-record-button--success {
    border-color: rgba(19, 138, 82, 0.24);
    background: linear-gradient(135deg, #138a52, #22c55e);
    color: #fff;
    box-shadow: 0 14px 26px rgba(19, 138, 82, 0.18);
}

.change-record-button--success:hover,
.change-record-button--success:focus-visible {
    border-color: rgba(21, 128, 61, 0.28);
    background: linear-gradient(135deg, #0f7a48, #16a34a);
    color: #fff;
}

.change-record-button--create,
.change-record-button--success {
    min-width: 10.5rem;
}

.change-record-inline-actions {
    justify-content: flex-start;
}

.change-record-selected-list {
    gap: 0.45rem;
}

.change-record-selected-chip {
    border: 1px solid rgba(0, 188, 235, 0.28);
    background: rgba(0, 188, 235, 0.12);
    color: var(--text);
}

.change-record-selected-chip:nth-child(6n + 2) {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(34, 197, 94, 0.12);
}

.change-record-selected-chip:nth-child(6n + 3) {
    border-color: rgba(249, 115, 22, 0.24);
    background: rgba(249, 115, 22, 0.12);
}

.change-record-selected-chip:nth-child(6n + 4) {
    border-color: rgba(168, 85, 247, 0.24);
    background: rgba(168, 85, 247, 0.12);
}

.change-record-selected-chip:nth-child(6n + 5) {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(239, 68, 68, 0.12);
}

.change-record-selected-chip:nth-child(6n) {
    border-color: rgba(234, 179, 8, 0.24);
    background: rgba(234, 179, 8, 0.12);
}

.change-record-selected-empty,
.change-record-checks-empty {
    margin: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    border: 1px dashed var(--panel-border);
    background: rgba(255, 255, 255, 0.02);
}

.change-record-check-item__body {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.12rem 0;
}

.change-record-check-item__body strong {
    color: var(--change-check-accent, var(--text));
    font-size: 0.84rem;
    line-height: 1.2;
}

.change-record-check-item__body small {
    color: var(--muted);
    font-size: 0.76rem;
}

.change-record-toolbar {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.change-record-table-actions,
.tshoot-table-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.change-record-popup-actions {
    justify-content: flex-end;
}

.change-record-popup-card {
    padding: 1rem;
}

.change-record-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tshoot-meeting-recorder {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 0.85rem;
    padding: 0.95rem 1rem;
    border-radius: 18px;
    border: 1px solid rgba(11, 116, 199, 0.14);
    background: linear-gradient(180deg, rgba(0, 188, 235, 0.07), rgba(255, 255, 255, 0.04));
}

.tshoot-meeting-recorder.is-recording {
    border-color: rgba(255, 93, 115, 0.26);
    background: linear-gradient(180deg, rgba(255, 93, 115, 0.12), rgba(255, 255, 255, 0.03));
}

.tshoot-meeting-recorder.is-paused {
    border-color: rgba(255, 179, 71, 0.3);
    background: linear-gradient(180deg, rgba(255, 179, 71, 0.12), rgba(255, 255, 255, 0.04));
}

.tshoot-meeting-recorder.is-idle {
    border-color: rgba(255, 179, 71, 0.34);
}

.tshoot-meeting-recorder__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.tshoot-meeting-recorder__transcript-shell {
    display: grid;
    gap: 0.5rem;
}

.tshoot-meeting-recorder__transcript {
    min-height: 7.5rem;
    max-height: 16rem;
    overflow: auto;
    padding: 0.9rem 1rem;
    border-radius: 16px;
    border: 1px solid rgba(11, 116, 199, 0.12);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

html[data-theme="dark"] .tshoot-meeting-recorder__transcript {
    background: rgba(8, 18, 36, 0.9);
    border-color: rgba(140, 200, 255, 0.14);
}

.tshoot-note-text {
    white-space: pre-wrap;
    line-height: 1.55;
}

.tshoot-meeting-summary {
    display: grid;
    gap: 0.85rem;
    overflow: hidden;
    padding: 0;
    border-radius: 18px;
    border: 1px solid rgba(11, 116, 199, 0.18);
    background: linear-gradient(180deg, rgba(236, 254, 255, 0.94), rgba(248, 250, 252, 0.96));
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.tshoot-meeting-summary--combined {
    border-color: rgba(139, 92, 246, 0.18);
    background: linear-gradient(180deg, rgba(245, 243, 255, 0.96), rgba(250, 245, 255, 0.98));
}

.tshoot-meeting-summary__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 1rem 1rem 0.2rem;
    background: linear-gradient(135deg, rgba(11, 116, 199, 0.08), rgba(0, 188, 235, 0.03));
}

.tshoot-meeting-summary--combined .tshoot-meeting-summary__head {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(217, 70, 239, 0.04));
}

.tshoot-meeting-summary__head h4 {
    margin: 0.14rem 0 0;
}

.tshoot-meeting-summary__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
    padding: 0 1rem 1rem;
}

.tshoot-meeting-summary__section {
    display: grid;
    gap: 0.45rem;
    padding: 0.82rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.82);
}

.tshoot-meeting-summary__section-head {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 0.26rem 0.62rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tshoot-meeting-summary__section-head--ocean {
    background: rgba(11, 116, 199, 0.12);
    color: #0b74c7;
}

.tshoot-meeting-summary__section-head--bad {
    background: rgba(255, 77, 100, 0.12);
    color: #d7263d;
}

.tshoot-meeting-summary__section-head--good {
    background: rgba(36, 199, 122, 0.14);
    color: #138a52;
}

.tshoot-meeting-summary__section-head--warn {
    background: rgba(255, 179, 71, 0.16);
    color: #b45b00;
}

.tshoot-meeting-summary__section-head--violet {
    background: rgba(139, 92, 246, 0.14);
    color: #6d28d9;
}

.tshoot-meeting-summary__section-body {
    margin: 0;
    white-space: pre-wrap;
    line-height: 1.6;
    color: var(--text);
}

.tshoot-record-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.tshoot-meeting-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.44rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 77, 100, 0.2);
    background: rgba(255, 77, 100, 0.12);
    color: #d7263d;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.tshoot-meeting-flag__icon {
    display: inline-flex;
    width: 0.86rem;
    height: 0.86rem;
}

.tshoot-meeting-flag__icon svg {
    width: 0.86rem;
    height: 0.86rem;
}

.tshoot-meeting-flag__count {
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
}

.tshoot-meeting-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 93, 115, 0.26);
    background: rgba(255, 93, 115, 0.12);
    box-shadow: 0 12px 28px rgba(255, 93, 115, 0.12);
}

.tshoot-meeting-indicator__signal {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    background: #ff4d64;
    box-shadow: 0 0 0 0 rgba(255, 77, 100, 0.45);
    animation: tshootMeetingBlink 1.15s infinite;
}

.tshoot-meeting-indicator__copy {
    display: grid;
    gap: 0.08rem;
}

.tshoot-meeting-indicator__copy strong {
    font-size: 0.82rem;
    line-height: 1.05;
}

.tshoot-meeting-indicator__copy small {
    color: var(--muted);
    font-size: 0.72rem;
}

.tshoot-meeting-indicator__actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.tshoot-meeting-indicator__actions .toolbar-button {
    white-space: nowrap;
}

.tshoot-meeting-indicator.is-warning {
    border-color: rgba(255, 179, 71, 0.34);
    background: rgba(255, 179, 71, 0.13);
}

.tshoot-meeting-indicator.is-warning .tshoot-meeting-indicator__signal {
    background: #f6a623;
    box-shadow: 0 0 0 0 rgba(246, 166, 35, 0.35);
}

.tshoot-meeting-indicator.is-saving {
    border-color: rgba(11, 116, 199, 0.26);
    background: rgba(11, 116, 199, 0.11);
}

.tshoot-meeting-indicator.is-saving .tshoot-meeting-indicator__signal {
    background: #0b74c7;
    box-shadow: 0 0 0 0 rgba(11, 116, 199, 0.3);
}

.tshoot-meeting-indicator.is-paused {
    border-color: rgba(255, 179, 71, 0.34);
    background: rgba(255, 179, 71, 0.13);
}

.tshoot-meeting-indicator.is-paused .tshoot-meeting-indicator__signal {
    background: #f6a623;
    box-shadow: 0 0 0 0 rgba(246, 166, 35, 0.35);
    animation-play-state: paused;
}

.table-wrap,
.peering-graph-popup__table-wrap,
.infra-ios-xe-hld__compare-table-shell {
    position: relative;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.table-scroll-nav {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    pointer-events: none;
    z-index: 35;
    transition: opacity 140ms ease, visibility 140ms ease;
    will-change: top, left, width;
}

.infra-ios-xe-hld-history__device-value {
    display: block;
    width: min(24rem, 26vw);
    max-width: 24rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

[data-static-table-shell^="infra-ios-xe-hld-history-"] td:has(.infra-ios-xe-hld-history__device-value),
[data-static-table-shell^="infra-ios-xe-hld-history-"] th[data-static-column="Devices"] {
    width: min(24rem, 26vw);
    max-width: 24rem;
}

[data-static-table-shell^="infra-ios-xe-hld-history-"] tbody tr.is-selected > td {
    background: color-mix(in srgb, var(--brand-500) 10%, var(--panel));
}

[data-static-table-shell^="infra-ios-xe-hld-history-"] th[data-static-column="_Select"],
[data-static-table-shell^="infra-ios-xe-hld-history-"] td:first-child {
    width: 4.25rem;
    min-width: 4.25rem;
    text-align: center;
}

@media (max-width: 760px) {
    .infra-ios-xe-hld-history__device-value,
    [data-static-table-shell^="infra-ios-xe-hld-history-"] td:has(.infra-ios-xe-hld-history__device-value),
    [data-static-table-shell^="infra-ios-xe-hld-history-"] th[data-static-column="Devices"] {
        width: 16rem;
        max-width: 16rem;
    }
}

.table-scroll-nav__button {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 999px;
    border: 1px solid rgba(9, 105, 218, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 250, 0.98));
    color: #0969da;
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.16);
    transition: transform 140ms ease, opacity 140ms ease, border-color 140ms ease, background 140ms ease;
}

.table-scroll-nav__button:hover {
    transform: translateY(-1px);
    border-color: rgba(9, 105, 218, 0.52);
    background: #ffffff;
}

.table-wrap--auto-scrolling {
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
}

.table-scroll-nav__button.is-disabled,
.table-scroll-nav__button:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
    transform: none;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.1);
}

.table-scroll-nav__button svg {
    width: 1rem;
    height: 1rem;
}

.table-scroll-nav.hidden {
    opacity: 0;
    visibility: hidden;
}

html[data-theme="dark"] .tshoot-meeting-summary {
    background: linear-gradient(180deg, rgba(8, 18, 36, 0.96), rgba(5, 10, 20, 0.96));
    border-color: rgba(56, 189, 248, 0.16);
}

html[data-theme="dark"] .tshoot-meeting-summary--combined {
    background: linear-gradient(180deg, rgba(35, 16, 64, 0.95), rgba(17, 24, 39, 0.96));
    border-color: rgba(196, 181, 253, 0.2);
}

html[data-theme="dark"] .tshoot-meeting-summary__section {
    background: rgba(15, 23, 42, 0.84);
    border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] .table-scroll-nav__button {
    background: linear-gradient(180deg, rgba(22, 27, 34, 0.98), rgba(13, 17, 23, 0.98));
    border-color: #30363d;
    color: #58a6ff;
    box-shadow: 0 14px 26px rgba(1, 4, 9, 0.52);
}

html[data-theme="dark"] .table-scroll-nav__button:hover {
    border-color: #58a6ff;
    background: #21262d;
}

@keyframes tshootMeetingBlink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.35;
        transform: scale(0.84);
    }
}

.popup-window--change-record .popup-window__dialog {
    max-width: min(78rem, 96vw);
}

@media (max-width: 1024px) {
    .tshoot-meeting-summary__grid {
        grid-template-columns: 1fr;
    }

    .change-record-grid,
    .change-record-detail-grid,
    .change-record-toolbar,
    .change-record-context-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tshoot-meeting-indicator__copy small {
        display: none;
    }

    .change-record-progress {
        min-width: 100%;
    }
}

@media (max-width: 760px) {
    .table-scroll-nav {
        inset-inline: 0.35rem;
    }

    .table-scroll-nav__button {
        width: 2.15rem;
        height: 2.15rem;
    }

    .change-record-grid,
    .change-record-detail-grid,
    .change-record-toolbar,
    .change-record-context-grid,
    .change-record-transition__steps {
        grid-template-columns: 1fr;
    }

    .change-record-shell {
        padding: 1rem;
    }

    .change-record-section__header {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .change-record-section__progress {
        grid-column: 2 / -1;
        justify-items: start;
        text-align: left;
    }

    .change-record-savebar .toolbar-actions,
    .change-record-savebar__primary {
        width: 100%;
    }

    .change-record-savebar__primary {
        justify-content: space-between;
    }

    .change-record-completion-float {
        flex: 1 1 auto;
        min-width: 0;
    }

    .tshoot-meeting-indicator {
        width: 100%;
        justify-content: space-between;
        order: -1;
    }

    .tshoot-meeting-indicator__actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Final compact density overrides */

.workspace {
    gap: 0.5rem;
    padding: 0.8rem 0.8rem 0.78rem 0;
}

.sidebar {
    margin: 0.92rem;
    padding: 0.92rem;
    gap: 0.82rem;
}

.topbar {
    padding: 0.82rem 1rem;
}

.content-stage {
    gap: 0.56rem;
}

.notification-strip,
.content-card,
.chart-card,
.table-shell,
.compact-table-shell,
.donut-card,
.table-wrap {
    gap: 0.58rem;
}

.content-card,
.chart-card,
.table-shell,
.compact-table-shell,
.donut-card,
.metric-card {
    padding: 0.72rem 0.8rem;
    min-height: 0;
}

.content-card,
.chart-card,
.table-shell,
.compact-table-shell,
.donut-card,
.table-wrap,
.metric-card {
    backdrop-filter: none;
    isolation: isolate;
}

.popup-window__body,
.detail-drawer__content,
.mini-list {
    gap: 0.52rem;
}

.dashboard-grid,
.summary-cards,
.metric-grid,
.detail-grid,
.filter-grid,
.table-searchband,
.chart-controls,
.compact-table__toolbar,
.table-widget__toolbar,
.toolbar-row,
.toolbar-actions,
.dataset-tabs {
    gap: 0.42rem;
}

.table-head,
.chart-card__head {
    gap: 0.46rem;
}

.donut-card .chart-card__head {
    gap: 0.28rem;
    align-items: flex-start;
}

.donut-card .chart-card__head > div {
    display: grid;
    gap: 0.08rem;
}

.donut-card .chart-card__head h3 {
    margin: 0;
    line-height: 1.02;
}

.donut-card .chart-card__head .eyebrow {
    margin-bottom: 0;
    font-size: 0.54rem;
    line-height: 1;
}

.donut-card .chart-controls {
    gap: 0.26rem;
    row-gap: 0.22rem;
}

.donut-card .chart-controls .toolbar-search,
.donut-card .chart-controls .compact-search {
    min-height: 2rem;
    padding: 0.48rem 0.68rem;
}

.donut-card .chart-controls .icon-button {
    width: 2.08rem;
    height: 2.08rem;
}

.donut-card .chart-controls .donut-glossary > summary {
    min-height: 2rem;
    padding: 0.42rem 0.62rem;
}

.detail-grid {
    gap: 0.54rem;
}

.detail-item {
    padding: 0.62rem 0.7rem;
}

.notice-card {
    padding: 0.66rem 0.78rem;
    margin-bottom: 0.42rem;
}

.toolbar-search,
.toolbar-select,
.login-form input {
    padding: 0.76rem 0.88rem;
}

.primary-button {
    padding: 0.78rem 1rem;
}

.secondary-button,
.toolbar-button {
    padding: 0.64rem 0.86rem;
}

.icon-button {
    width: 2.55rem;
    height: 2.55rem;
}

.metric-card {
    padding: 0.46rem 0.56rem 0.5rem;
    box-shadow: 0 6px 14px rgba(7, 36, 62, 0.06);
}

.metric-card--actionable {
    cursor: pointer;
    user-select: none;
}

.metric-card--actionable:hover,
.metric-card--actionable:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(7, 36, 62, 0.1);
}

.metric-card--actionable:focus-visible {
    outline: 2px solid rgba(13, 141, 255, 0.36);
    outline-offset: 2px;
}

.metric-card--action {
    cursor: pointer;
    user-select: none;
}

.metric-card--action:hover,
.metric-card--action:focus-visible {
    transform: translateY(-2px);
    border-color: var(--brand);
    box-shadow: 0 12px 24px rgba(47, 129, 255, 0.16);
}

.metric-card--action:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.metric-card--active {
    border-color: rgba(209, 79, 126, 0.3);
    box-shadow: 0 12px 22px rgba(209, 79, 126, 0.16);
}

.metric-card__header,
.metric-card__body,
.metric-card__footer {
    gap: 0.22rem;
}

.metric-card__icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.46rem;
}

.metric-card__value {
    font-size: clamp(0.96rem, 1.4vw, 1.08rem);
    line-height: 1.02;
}

.metric-card__label,
.metric-card__badge {
    font-size: 0.56rem;
    line-height: 1.02;
}

.metric-card__meta {
    margin: 0.18rem 0 0;
    font-size: 0.52rem;
    line-height: 1.08;
    color: var(--text-soft);
}

.metric-card__footer {
    font-size: 0.52rem;
    line-height: 1.02;
}

.dashboard-flash-group {
    gap: 0.34rem;
    padding: 0.44rem 0.52rem 0.52rem;
}

.dashboard-flash-group--troubleshooting,
.dashboard-flash-group--changes {
    padding-top: 0.32rem;
}

.dashboard-flash-group__head {
    gap: 0.26rem 0.42rem;
    padding-bottom: 0.16rem;
    align-items: flex-start;
}

.dashboard-flash-group--troubleshooting .dashboard-flash-group__head,
.dashboard-flash-group--changes .dashboard-flash-group__head {
    gap: 0.16rem 0.34rem;
    padding-bottom: 0.04rem;
}

.dashboard-flash-group__head > div {
    gap: 0.04rem;
}

.dashboard-flash-group--troubleshooting .dashboard-flash-group__head > div,
.dashboard-flash-group--changes .dashboard-flash-group__head > div {
    gap: 0.01rem;
}

.dashboard-flash-group__head h3 {
    font-size: 0.8rem;
    line-height: 1.06;
}

.dashboard-flash-group__head .eyebrow {
    font-size: 0.5rem;
    letter-spacing: 0.16em;
}

.dashboard-flash-group__head .status-pill {
    padding: 0.14rem 0.38rem;
    font-size: 0.5rem;
    line-height: 1;
}

.dashboard-flash-group__grid {
    gap: 0.36rem;
    grid-template-columns: repeat(auto-fit, minmax(clamp(9.8rem, 14vw, 12rem), 1fr));
    justify-content: stretch;
}

.dashboard-mini-card {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "top body";
    align-items: center;
    aspect-ratio: auto;
    min-height: clamp(2.45rem, 3.2vw, 2.95rem);
    padding: 0.26rem 0.4rem;
    gap: 0.34rem;
}

.dashboard-mini-card__top {
    grid-area: top;
    justify-content: flex-start;
    align-self: center;
    gap: 0.08rem;
}

.dashboard-mini-card__icon {
    width: 1.74rem;
    height: 1.74rem;
    border-radius: 0.46rem;
}

.dashboard-mini-card__icon svg {
    width: 0.9rem;
    height: 0.9rem;
}

.dashboard-mini-card__body {
    grid-area: body;
    align-content: center;
    gap: 0.01rem;
}

.dashboard-mini-card__label {
    font-size: 1.125rem;
    line-height: 1;
}

.dashboard-mini-card__value {
    font-size: 1.5rem;
    line-height: 1;
}

.dashboard-mini-card__footer {
    display: none;
}

.dashboard-mini-card__status-dot {
    width: 0.3rem;
    height: 0.3rem;
}

.table-widget,
.compact-table-shell,
.donut-card__body,
.donut-card__body--single {
    gap: 0.56rem;
}

.donut-card__body {
    grid-template-columns: minmax(10.5rem, 12rem) minmax(0, 1fr);
}

.donut-card__body--single {
    padding-top: 0;
    gap: 0.7rem;
}

.donut-chart__svg {
    width: 10.8rem;
    height: 10.8rem;
}

.legend-row {
    gap: 0.52rem;
    padding: 0.56rem 0.68rem;
}

.donut-chart__hint {
    display: none;
}

.dashboard-grid--ops-tables > .chart-card {
    height: 100%;
}

.dashboard-grid--ops-tables > .chart-card:only-child {
    grid-column: 1 / -1;
}

.summary-cards,
.metric-grid--wide,
.dashboard-flash-group__grid {
    --flash-card-square: clamp(12rem, 15vw, 14rem);
}

.metric-card--compact {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "top body";
    align-items: center;
    gap: 0.72rem;
    padding: 0.82rem 0.96rem;
    aspect-ratio: auto;
    min-height: 5.4rem;
    border-radius: 1rem;
    overflow: visible;
}

.metric-card--compact .metric-card__icon {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 0.9rem;
}

.metric-card--compact .metric-card__icon svg,
.metric-card--compact .metric-card__icon img {
    width: 1.28rem;
    height: 1.28rem;
}

.metric-card--compact .metric-card__value {
    font-size: 1.5rem;
    line-height: 1.02;
}

.metric-card--compact .metric-card__label {
    font-size: 1.125rem;
    line-height: 1.06;
    letter-spacing: 0;
    text-transform: none;
    -webkit-line-clamp: 1;
}

.metric-card--compact .metric-card__footer {
    display: none;
}

.metric-card--compact::after {
    top: 0.72rem;
    right: 0.72rem;
    width: 4.2rem;
    height: 4.2rem;
    opacity: 0.38;
}

.metric-card--compact .metric-card__top {
    grid-area: top;
    justify-content: flex-start;
    align-self: center;
    width: 100%;
}

.metric-card--compact .metric-card__body {
    grid-area: body;
    align-content: center;
    gap: 0.24rem;
}

.metric-card__info {
    position: relative;
    margin-left: auto;
    width: 1.08rem;
    height: 1.08rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
    cursor: help;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
    z-index: 4;
}

html[data-theme="dark"] .metric-card__info {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(148, 163, 184, 0.22);
}

.metric-card__info::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 0.48rem);
    right: auto;
    top: 50%;
    bottom: auto;
    min-width: 11rem;
    max-width: min(18rem, calc(100vw - 3rem));
    padding: 0.54rem 0.68rem;
    border-radius: 0.72rem;
    border: 1px solid rgba(217, 119, 6, 0.28);
    background: linear-gradient(180deg, #fef9c3 0%, #fde68a 100%);
    color: #7c2d12;
    font-size: 0.72rem;
    line-height: 1.35;
    text-align: left;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
    transform: translate(-0.18rem, -50%);
    transition: opacity 140ms ease, transform 140ms ease;
    box-shadow: 0 14px 28px rgba(217, 119, 6, 0.2);
    z-index: 12;
}

.metric-card__info:hover::after,
.metric-card__info:focus-visible::after {
    opacity: 1;
    transform: translate(0, -50%);
}

.chart-card--world-map {
    overflow: hidden;
}

.world-map-leaflet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 1rem;
    align-items: stretch;
    min-width: 0;
}

.world-map-leaflet__canvas-shell {
    position: relative;
    min-width: 0;
    height: clamp(24rem, 42vw, 34rem);
    border-radius: 1.3rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 24%),
        radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.08), transparent 26%),
        linear-gradient(180deg, #f8fbff, #ffffff 52%, #eef4fb);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 42px rgba(2, 6, 23, 0.34);
}

.world-map-leaflet__canvas-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(20, 184, 166, 0.05) 1px, transparent 1px);
    background-size: 5rem 5rem;
    mix-blend-mode: screen;
    opacity: 0.55;
    z-index: 2;
}

.world-map-leaflet__canvas {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.world-map-leaflet__canvas .leaflet-container {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    font: inherit;
    background: linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%);
}

.world-map-leaflet__canvas .leaflet-tile-pane {
    filter: grayscale(1) sepia(0.18) saturate(1.8) hue-rotate(175deg) brightness(1.04) contrast(1.08);
    opacity: 0.96;
}

.world-map-leaflet__status {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.8rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid rgba(245, 158, 11, 0.24);
    background: rgba(3, 10, 18, 0.82);
    color: #fde68a;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 14px 28px rgba(2, 6, 23, 0.28);
    backdrop-filter: blur(12px);
}

.world-map-leaflet__status.hidden {
    display: none;
}

.world-map-leaflet__status--warning {
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.3);
    background: rgba(66, 32, 6, 0.9);
}

.world-map-leaflet__status--danger {
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(69, 10, 10, 0.9);
}

.world-map-leaflet__sidebar {
    width: fit-content;
    min-width: min(18rem, 100%);
    max-width: 100%;
    justify-self: end;
    height: clamp(24rem, 42vw, 34rem);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.88rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(245, 158, 11, 0.22);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.96)),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 36px rgba(148, 163, 184, 0.18);
    overflow: hidden;
    color: #1f2937;
}

.world-map-leaflet__sidebar .world-map-card__list {
    min-height: 0;
}

.world-map-leaflet__sidebar .eyebrow,
.world-map-leaflet__sidebar .muted-copy {
    color: #6b7280;
}

.world-map-leaflet__sidebar .world-map__glossary-head h4,
.world-map-leaflet__sidebar .world-map-card__list-item .detail-item__label,
.world-map-leaflet__sidebar .world-map-card__list-item .detail-item__value {
    color: #111827;
}

.world-map-leaflet__sidebar .status-pill.soft {
    border-color: rgba(245, 158, 11, 0.18);
    background: rgba(255, 251, 235, 0.92);
    color: #92400e;
}

.world-map-leaflet__sidebar .world-map-card__list-item:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.world-map-leaflet__info-window {
    min-width: 12.5rem;
    display: grid;
    gap: 0.45rem;
    color: #ffffff;
}

.world-map-leaflet__info-window strong {
    font-size: 0.92rem;
    line-height: 1.1;
    padding-bottom: 0.32rem;
    border-bottom: 1px solid rgba(245, 158, 11, 0.3);
    color: #ffffff;
}

.world-map-leaflet__info-window p,
.world-map-leaflet__info-window span,
.world-map-leaflet__info-window div {
    margin: 0;
}

.world-map-leaflet__info-window p,
.world-map-leaflet__info-window-meta {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.9);
}

.world-map-leaflet__info-window-grid {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.1rem 0 0.25rem;
}

.world-map-leaflet__info-window-cell {
    flex: 1 0 5.8rem;
    min-width: 5.8rem;
    display: grid;
    grid-template-columns: 1.55rem minmax(0, 1fr);
    align-items: center;
    gap: 0.42rem;
    padding: 0.46rem 0.52rem;
    border-radius: 0.72rem;
    border: 1px solid rgba(245, 158, 11, 0.22);
    background: rgba(15, 12, 5, 0.62);
}

.world-map-leaflet__info-window-metric {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.world-map-leaflet__info-window-metric small {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 700;
}

.world-map-leaflet__info-window-metric strong {
    font-size: 0.98rem;
    color: #ffffff;
    border: 0;
    padding: 0;
}

.world-map-leaflet__info-window-icon {
    width: 1.55rem;
    height: 1.55rem;
    display: grid;
    place-items: center;
    border-radius: 0.48rem;
    color: #58a6ff !important;
    background: color-mix(in srgb, #0969da 22%, transparent);
}

.world-map-leaflet__info-window-icon svg {
    width: 0.95rem;
    height: 0.95rem;
    stroke-width: 2.55;
}

.world-map-leaflet__canvas .leaflet-popup-content-wrapper {
    border-radius: 1rem;
    background: rgba(4, 10, 18, 0.96);
    border: 1px solid rgba(245, 158, 11, 0.22);
    box-shadow: 0 20px 42px rgba(2, 6, 23, 0.28);
}

.world-map-leaflet__canvas .leaflet-popup-content {
    margin: 0.8rem 0.9rem;
    width: auto !important;
}

.world-map-leaflet__canvas .leaflet-popup-tip {
    box-shadow: none;
    background: rgba(4, 10, 18, 0.96);
}

.world-map-leaflet__canvas .leaflet-tooltip.world-map-leaflet__tooltip {
    border: 0;
    border-radius: 999px;
    background: rgba(19, 15, 8, 0.94);
    color: #fde68a;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.24);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.28rem 0.55rem;
}

.world-map-leaflet__canvas .leaflet-control-attribution {
    background: rgba(3, 10, 18, 0.82);
    backdrop-filter: blur(10px);
    border-radius: 0.55rem 0 0 0;
    font-size: 0.62rem;
    color: #d8c58c;
}

.world-map-leaflet__canvas .leaflet-control-attribution a {
    color: #facc15;
}

.world-map-leaflet__marker {
    animation: world-map-leaflet-pulse 2.1s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
    filter: drop-shadow(0 0 0.42rem rgba(255, 255, 255, 0.62));
}

.world-map-leaflet__marker.is-active {
    animation-duration: 1.3s;
    filter: drop-shadow(0 0 0.78rem rgba(255, 255, 255, 0.9));
}

@keyframes world-map-leaflet-pulse {
    0%, 100% {
        opacity: 0.92;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.16);
    }
}

.dashboard-flash-group__head h3 {
    font-size: 0.96rem;
    line-height: 1.08;
}

.dashboard-flash-group__head .eyebrow {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
}

@media (max-width: 1180px) {
    .world-map-leaflet {
        grid-template-columns: 1fr;
    }

    .world-map-leaflet__canvas-shell {
        height: 22rem;
    }

    .world-map-leaflet__sidebar {
        height: auto;
        min-height: 16rem;
        max-height: 20rem;
    }
}

.metric-card__info:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand) 60%, transparent);
    outline-offset: 2px;
}

@media (max-width: 900px) {
    .workspace {
        padding: 0.82rem;
    }
}

:root {
    --workspace-shell-match-bg: linear-gradient(180deg, rgba(2, 6, 14, 0.98), rgba(7, 13, 24, 0.98)), #040812;
}

html[data-theme="dark"] {
    --workspace-shell-match-bg: linear-gradient(180deg, rgba(2, 6, 14, 0.98), rgba(7, 13, 24, 0.98)), #040812;
}

.sidebar,
.topbar,
.workspace-footer {
    background: var(--workspace-shell-match-bg);
}

.app-shell.sidebar-collapsed {
    grid-template-columns: 5.8rem minmax(0, 1fr);
}

.app-shell.sidebar-collapsed .sidebar-head {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
}

.app-shell.sidebar-collapsed .brand-lockup {
    justify-content: center;
}

.app-shell.sidebar-collapsed .sidebar-toggle,
.app-shell.sidebar-collapsed .brand-mark.small,
.app-shell.sidebar-collapsed .nav-link__icon {
    flex-shrink: 0;
}

.wxcce-vm-change,
.wxcce-vm-change__selector,
.wxcce-vm-change__overview,
.wxcce-vm-change__compare,
.wxcce-vm-change__results,
.wxcce-vm-change__copy-block {
    display: grid;
    gap: 0.9rem;
}

.wxcce-vm-change__head,
.mra-workspace-launch__head {
    align-items: flex-start;
    gap: 0.85rem 1rem;
}

.wxcce-vm-change__head-copy,
.mra-workspace-launch__copy {
    flex: 1 1 30rem;
    min-width: min(24rem, 100%);
}

.wxcce-vm-change__head-copy h3,
.mra-workspace-launch__copy h3 {
    max-width: 42rem;
    line-height: 1.16;
}

.wxcce-vm-change__head-copy .muted-copy,
.mra-workspace-launch__copy .muted-copy {
    max-width: 46rem;
}

.wxcce-vm-change__head-actions,
.mra-workspace-launch__actions {
    flex: 0 0 auto;
    align-self: flex-start;
    justify-content: flex-end;
}

.wxcce-vm-change__summary-cards,
.wxcce-vm-change > .summary-cards.summary-cards--row,
.wxcce-vm-change__overview > .summary-cards.summary-cards--row,
.wxcce-vm-change__compare > .summary-cards.summary-cards--row,
.wxcce-vm-change__results > .summary-cards.summary-cards--row {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    padding-bottom: 0;
}

.wxcce-vm-change__summary-cards .metric-card,
.wxcce-vm-change > .summary-cards.summary-cards--row .metric-card,
.wxcce-vm-change__overview > .summary-cards.summary-cards--row .metric-card,
.wxcce-vm-change__compare > .summary-cards.summary-cards--row .metric-card,
.wxcce-vm-change__results > .summary-cards.summary-cards--row .metric-card {
    aspect-ratio: auto;
    min-height: clamp(5.1rem, 7vw, 6.2rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr;
    align-items: center;
    column-gap: 0.62rem;
    row-gap: 0;
    min-width: 0;
    padding: 0.5rem 0.62rem;
}

.wxcce-vm-change__summary-cards .metric-card .metric-card__top,
.wxcce-vm-change > .summary-cards.summary-cards--row .metric-card .metric-card__top,
.wxcce-vm-change__overview > .summary-cards.summary-cards--row .metric-card .metric-card__top,
.wxcce-vm-change__compare > .summary-cards.summary-cards--row .metric-card .metric-card__top,
.wxcce-vm-change__results > .summary-cards.summary-cards--row .metric-card .metric-card__top {
    align-self: center;
    justify-self: start;
    margin: 0;
}

.wxcce-vm-change__summary-cards .metric-card .metric-card__body,
.wxcce-vm-change > .summary-cards.summary-cards--row .metric-card .metric-card__body,
.wxcce-vm-change__overview > .summary-cards.summary-cards--row .metric-card .metric-card__body,
.wxcce-vm-change__compare > .summary-cards.summary-cards--row .metric-card .metric-card__body,
.wxcce-vm-change__results > .summary-cards.summary-cards--row .metric-card .metric-card__body {
    align-content: center;
    gap: 0.02rem;
    min-width: 0;
}

.wxcce-vm-change__summary-cards .metric-card .metric-card__footer,
.wxcce-vm-change > .summary-cards.summary-cards--row .metric-card .metric-card__footer,
.wxcce-vm-change__overview > .summary-cards.summary-cards--row .metric-card .metric-card__footer,
.wxcce-vm-change__compare > .summary-cards.summary-cards--row .metric-card .metric-card__footer,
.wxcce-vm-change__results > .summary-cards.summary-cards--row .metric-card .metric-card__footer {
    display: none;
}

.wxcce-vm-change__summary-cards .metric-card .metric-card__icon,
.wxcce-vm-change > .summary-cards.summary-cards--row .metric-card .metric-card__icon,
.wxcce-vm-change__overview > .summary-cards.summary-cards--row .metric-card .metric-card__icon,
.wxcce-vm-change__compare > .summary-cards.summary-cards--row .metric-card .metric-card__icon,
.wxcce-vm-change__results > .summary-cards.summary-cards--row .metric-card .metric-card__icon {
    width: 1.86rem;
    height: 1.86rem;
    border-radius: 0.48rem;
}

.wxcce-vm-change__summary-cards .metric-card .metric-card__value,
.wxcce-vm-change > .summary-cards.summary-cards--row .metric-card .metric-card__value,
.wxcce-vm-change__overview > .summary-cards.summary-cards--row .metric-card .metric-card__value,
.wxcce-vm-change__compare > .summary-cards.summary-cards--row .metric-card .metric-card__value,
.wxcce-vm-change__results > .summary-cards.summary-cards--row .metric-card .metric-card__value {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.02;
}

.wxcce-vm-change__summary-cards .metric-card .metric-card__label,
.wxcce-vm-change > .summary-cards.summary-cards--row .metric-card .metric-card__label,
.wxcce-vm-change__overview > .summary-cards.summary-cards--row .metric-card .metric-card__label,
.wxcce-vm-change__compare > .summary-cards.summary-cards--row .metric-card .metric-card__label,
.wxcce-vm-change__results > .summary-cards.summary-cards--row .metric-card .metric-card__label {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.06;
}

.wxcce-vm-change__guide-grid {
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    align-items: stretch;
}

.wxcce-vm-change__selector-head {
    align-items: flex-start;
    gap: 0.85rem 1rem;
}

.wxcce-vm-change__selector-copy {
    flex: 1 1 34rem;
    min-width: min(24rem, 100%);
}

.wxcce-vm-change__selector-copy h3 {
    line-height: 1.16;
}

.wxcce-vm-change__selector-copy .muted-copy {
    max-width: 50rem;
}

.wxcce-vm-change__selector-actions {
    flex: 0 1 28rem;
    justify-content: flex-end;
    align-self: flex-start;
}

.wxcce-vm-change__selector-action {
    min-height: 2.7rem;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.wxcce-vm-change__selector-action .toolbar-button__icon {
    border-radius: 999px;
    padding: 0.22rem;
}

.wxcce-vm-change__selector-action--dc .toolbar-button__icon {
    color: #0b74c7;
    background: rgba(11, 116, 199, 0.12);
}

.wxcce-vm-change__selector-action--customers .toolbar-button__icon {
    color: #138a52;
    background: rgba(36, 199, 122, 0.13);
}

.wxcce-vm-change__selector-action--filters .toolbar-button__icon {
    color: #c77700;
    background: rgba(246, 166, 35, 0.14);
}

.wxcce-vm-change__selector-action--clear .toolbar-button__icon {
    color: #d7263d;
    background: rgba(239, 68, 68, 0.12);
}

.wxcce-vm-change__settings {
    display: grid;
    gap: 0.85rem;
}

.wxcce-vm-change__settings-summary {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.wxcce-vm-change__settings-form {
    display: grid;
    gap: 0.85rem;
}

.wxcce-vm-change__settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.wxcce-vm-change__settings-field {
    display: grid;
    gap: 0.45rem;
}

.wxcce-vm-change__settings-textarea {
    width: 100%;
    min-height: 11rem;
    padding: 0.85rem 0.95rem;
    border-radius: 0.95rem;
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.86);
    color: var(--text);
    resize: vertical;
    font: inherit;
    font-family: "Consolas", "Courier New", monospace;
    line-height: 1.5;
}

html[data-theme="dark"] .wxcce-vm-change__settings-textarea {
    background: rgba(18, 28, 41, 0.92);
}

.wxcce-vm-change__overview .legend-row {
    grid-template-columns: auto minmax(3.6rem, max-content) auto minmax(2.5rem, auto);
    align-items: center;
}

.wxcce-vm-change__overview .legend-row__label,
.wxcce-vm-change__overview .legend-row__share {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

.wxcce-vm-change__overview .legend-row strong {
    justify-self: end;
}

.wxcce-vm-change__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
}

.wxcce-vm-change__toolbar .toolbar-search {
    flex: 1 1 19rem;
    min-width: min(19rem, 100%);
}

.wxcce-vm-change__toolbar .muted-copy {
    flex: 1 1 14rem;
    min-width: 0;
}

.wxcce-vm-change__list-shell {
    display: grid;
    gap: 0.6rem;
    padding: 0.85rem;
    border-radius: 18px;
    border: 1px solid rgba(11, 116, 199, 0.12);
    background: rgba(255, 255, 255, 0.76);
}

html[data-theme="dark"] .wxcce-vm-change__list-shell {
    background: rgba(8, 18, 36, 0.9);
}

.wxcce-vm-change__list-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.wxcce-vm-change__dc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr));
    gap: 0.75rem;
    max-height: 13rem;
    overflow: auto;
    padding-right: 0.2rem;
    align-content: start;
}

.wxcce-vm-change__dc-chip,
.wxcce-vm-change__customer-panel {
    align-items: stretch;
}

.wxcce-vm-change__dc-chip {
    min-height: 100%;
}

.wxcce-vm-change__customer-panel {
    min-width: 0;
}

.wxcce-vm-change__customer-dropdown {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.wxcce-vm-change__customer-list {
    display: grid;
    gap: 0.55rem;
    max-height: 24rem;
    overflow: auto;
    padding-right: 0.2rem;
}

.wxcce-vm-change__customer-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem;
    padding: 0.78rem 0.82rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(241, 248, 255, 0.84));
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

html[data-theme="dark"] .wxcce-vm-change__customer-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(12, 31, 48, 0.92));
}

.wxcce-vm-change__customer-card:hover {
    transform: translateY(-1px);
    border-color: rgba(11, 116, 199, 0.26);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
}

.wxcce-vm-change__customer-card.is-selected {
    border-color: rgba(0, 188, 235, 0.26);
    background: linear-gradient(180deg, rgba(0, 188, 235, 0.12), rgba(235, 250, 255, 0.9));
    box-shadow: 0 16px 30px rgba(11, 116, 199, 0.1);
}

html[data-theme="dark"] .wxcce-vm-change__customer-card.is-selected {
    background: linear-gradient(180deg, rgba(0, 188, 235, 0.16), rgba(8, 18, 36, 0.96));
}

.wxcce-vm-change__customer-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.wxcce-vm-change__customer-copy strong {
    font-size: 0.84rem;
    line-height: 1.22;
}

.wxcce-vm-change__customer-copy small {
    color: var(--muted);
    font-size: 0.75rem;
}

.wxcce-vm-change__customer-statuses {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    margin-top: 0.2rem;
}

.wxcce-vm-change__customer-statuses > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    color: var(--muted);
}

.wxcce-vm-change__selected-list {
    gap: 0.45rem;
}

.wxcce-vm-change__selected-chip {
    border: 1px solid rgba(0, 188, 235, 0.26);
    background: rgba(0, 188, 235, 0.12);
    color: var(--text);
}

.wxcce-vm-change__selected-empty {
    margin: 0;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    border: 1px dashed var(--panel-border);
    background: rgba(255, 255, 255, 0.02);
}

.wxcce-vm-change__floating-run {
    position: fixed;
    right: clamp(1rem, 2vw, 1.4rem);
    bottom: clamp(1rem, 2vw, 1.4rem);
    z-index: 35;
    pointer-events: none;
}

.wxcce-vm-change__floating-run-button {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-start;
    min-width: min(22rem, calc(100vw - 2rem));
    border-radius: 1rem;
    padding: 0.92rem 1.05rem;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.2);
    overflow: hidden;
    position: relative;
}

.wxcce-vm-change__floating-run-button::after {
    content: "";
    position: absolute;
    left: 0;
    right: calc(100% - var(--wxcce-floating-progress, 0%));
    bottom: 0;
    height: 0.22rem;
    background: rgba(255, 255, 255, 0.74);
    transition: right 0.35s ease;
}

.wxcce-vm-change__floating-run-button.is-running {
    cursor: progress;
}

.wxcce-vm-change__floating-run-copy {
    display: grid;
    gap: 0.18rem;
    text-align: left;
    min-width: 0;
}

.wxcce-vm-change__floating-run-copy strong {
    font-size: 0.95rem;
    line-height: 1.05;
}

.wxcce-vm-change__floating-run-copy small {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.86);
}

.wxcce-vm-change__floating-run-progress {
    display: grid;
    gap: 0.24rem;
}

.wxcce-vm-change__floating-run-status {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: rgba(255, 255, 255, 0.96);
    font-size: 0.78rem;
    font-weight: 800;
}

.wxcce-vm-change__floating-run-spinner {
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-top-color: #fff;
    animation: wxcce-floating-spin 0.8s linear infinite;
    flex: 0 0 auto;
}

.toolbar-button__icon .wxcce-vm-change__floating-run-spinner {
    width: 1.25rem;
    height: 1.25rem;
}

.wxcce-vm-change__floating-run-bar {
    display: block;
    width: min(13rem, 48vw);
    height: 0.28rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    overflow: hidden;
}

.wxcce-vm-change__floating-run-bar span {
    display: block;
    width: var(--wxcce-floating-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.88);
    transition: width 0.35s ease;
}

@keyframes wxcce-floating-spin {
    to {
        transform: rotate(360deg);
    }
}

.wxcce-vm-change__report-text {
    margin: 0;
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
}

.wxcce-vm-change__copy-scroll {
    max-height: min(31rem, 58vh);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    scrollbar-gutter: stable;
}

.wxcce-vm-change__completion-card {
    display: grid;
    gap: 1rem;
    padding: 1.05rem 1.1rem;
    border-radius: 20px;
    border: 1px solid rgba(34, 197, 94, 0.22);
    background:
        linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.08)),
        rgba(240, 253, 244, 0.92);
    box-shadow: 0 20px 38px rgba(22, 101, 52, 0.12);
}

html[data-theme="dark"] .wxcce-vm-change__completion-card {
    background:
        linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(16, 185, 129, 0.1)),
        rgba(8, 27, 19, 0.96);
    box-shadow: 0 22px 40px rgba(2, 6, 23, 0.34);
}

.wxcce-vm-change__completion-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.wxcce-vm-change__completion-head h3 {
    margin: 0.18rem 0 0;
}

.wxcce-vm-change__completion-head .muted-copy {
    margin: 0.35rem 0 0;
}

.wxcce-vm-change__completion-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(22, 163, 74, 0.22);
    background: rgba(255, 255, 255, 0.78);
    color: #166534;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

html[data-theme="dark"] .wxcce-vm-change__completion-badge {
    background: rgba(12, 33, 23, 0.92);
    color: #86efac;
}

.wxcce-vm-change__completion-badge-icon,
.wxcce-vm-change__completion-stat-icon,
.wxcce-vm-change__result-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wxcce-vm-change__completion-badge-icon {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.14);
}

.wxcce-vm-change__completion-badge-icon svg,
.wxcce-vm-change__completion-stat-icon svg,
.wxcce-vm-change__result-button-icon svg {
    width: 0.92rem;
    height: 0.92rem;
}

.wxcce-vm-change__completion-progress {
    position: relative;
    height: 0.82rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(22, 163, 74, 0.14);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

.wxcce-vm-change__completion-progress-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(74, 222, 128, 0.92), rgba(22, 163, 74, 0.98));
    box-shadow: 0 0 18px rgba(22, 163, 74, 0.24);
}

.wxcce-vm-change__completion-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

.wxcce-vm-change__completion-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(22, 163, 74, 0.16);
    background: rgba(255, 255, 255, 0.72);
}

html[data-theme="dark"] .wxcce-vm-change__completion-stat {
    background: rgba(10, 26, 18, 0.88);
}

.wxcce-vm-change__completion-stat-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
}

html[data-theme="dark"] .wxcce-vm-change__completion-stat-icon {
    color: #86efac;
}

.wxcce-vm-change__completion-stat-body {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.wxcce-vm-change__completion-stat-body .detail-item__label,
.wxcce-vm-change__completion-stat-body .detail-item__value,
.wxcce-vm-change__completion-stat-body .muted-copy {
    margin: 0;
}

.wxcce-vm-change__result-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.72rem;
}

.wxcce-vm-change__result-button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.62rem 0.82rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.84);
    color: var(--text);
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

html[data-theme="dark"] .wxcce-vm-change__result-button {
    background: rgba(10, 23, 19, 0.94);
}

.wxcce-vm-change__result-button strong {
    font-size: 0.86rem;
}

.wxcce-vm-change__result-button--pass {
    border-color: rgba(34, 197, 94, 0.24);
    color: #166534;
}

.wxcce-vm-change__result-button--fail {
    border-color: rgba(239, 68, 68, 0.24);
    color: #b91c1c;
}

.wxcce-vm-change__result-button--warn {
    border-color: rgba(245, 158, 11, 0.24);
    color: #b45309;
}

.wxcce-vm-change__result-button--neutral {
    border-color: rgba(14, 165, 233, 0.18);
    color: #0369a1;
}

html[data-theme="dark"] .wxcce-vm-change__result-button--pass {
    color: #86efac;
}

html[data-theme="dark"] .wxcce-vm-change__result-button--fail {
    color: #fda4af;
}

html[data-theme="dark"] .wxcce-vm-change__result-button--warn {
    color: #fcd34d;
}

html[data-theme="dark"] .wxcce-vm-change__result-button--neutral {
    color: #7dd3fc;
}

.wxcce-vm-change__running-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(11, 116, 199, 0.14);
    background: linear-gradient(180deg, rgba(0, 188, 235, 0.08), rgba(255, 255, 255, 0.03));
}

.wxcce-vm-change__running-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.wxcce-vm-change__running-bar {
    position: relative;
    height: 0.7rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(11, 116, 199, 0.1);
}

.wxcce-vm-change__running-bar-fill {
    position: absolute;
    inset: 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(0, 188, 235, 0.45), rgba(11, 116, 199, 0.95));
    box-shadow: 0 0 18px rgba(11, 116, 199, 0.22);
    transition: width 0.45s ease;
}

.wxcce-vm-change__running-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wxcce-vm-change__running-status {
    margin: 0;
    font-weight: 700;
    color: var(--text);
}

.wxcce-vm-change__alert-panel {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.wxcce-vm-change__alert-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
}

.wxcce-vm-change__alert-panel-head .eyebrow,
.wxcce-vm-change__alert-panel-head span {
    margin: 0;
}

.wxcce-vm-change__alert-panel-head span {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 700;
}

.wxcce-vm-change__alert-strip {
    display: grid;
    gap: 0.65rem;
    max-height: min(30rem, 52vh);
    overflow-y: auto;
    padding: 0.85rem;
    scrollbar-gutter: stable;
}

.wxcce-vm-change__alert-strip .notice-card {
    margin: 0;
}

.wxcce-vm-change__history {
    display: grid;
    gap: 0.8rem;
}

.wxcce-vm-change__history-table,
.wxcce-vm-change__report-table {
    width: 100%;
}

.wxcce-vm-change__cert-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}

.table-widget__pager-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.table-widget__page-count {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.98));
    color: var(--text-soft);
    font-weight: 700;
    white-space: nowrap;
}

html[data-theme="dark"] .table-widget__page-count {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.98));
    border-color: rgba(148, 163, 184, 0.18);
}

.wxcce-vm-change__history-row {
    cursor: pointer;
}

.wxcce-vm-change__history-row:hover td,
.wxcce-vm-change__history-row:focus-visible td {
    background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.wxcce-vm-change__summary-tools {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.wxcce-vm-change__summary-tools .muted-copy {
    margin: 0;
}

.wxcce-vm-change__column-chooser {
    position: relative;
}

.wxcce-vm-change__column-chooser-body {
    display: grid;
    gap: 0.75rem;
    min-width: min(22rem, 80vw);
    padding-top: 0.85rem;
}

.wxcce-vm-change__column-actions {
    display: flex;
    justify-content: flex-end;
}

.wxcce-vm-change__column-chooser .chooser-item.is-disabled {
    opacity: 0.72;
}

.wxcce-vm-change__report-table th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.wxcce-vm-change__report-table th.sortable::after {
    content: none;
}

.wxcce-vm-change__report-table th.sortable:hover {
    color: var(--brand-strong);
}

.wxcce-vm-change__report-table th > span {
    white-space: nowrap;
}

.wxcce-vm-change__history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.wxcce-vm-change__report-rich {
    display: grid;
    gap: 0.26rem;
    margin: 0;
    padding: 0.95rem 1rem;
    border-radius: 0;
    border: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(11, 116, 199, 0.03));
    font-family: "Consolas", "Courier New", monospace;
    font-size: 0.88rem;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

.wxcce-vm-change__report-line--bullet {
    padding-left: 0.15rem;
}

.wxcce-vm-change__report-line--active,
.wxcce-vm-change__report-line--watch,
.wxcce-vm-change__report-line--expiring,
.wxcce-vm-change__report-line--expired,
.wxcce-vm-change__report-line--unknown {
    padding: 0.38rem 0.55rem;
    border-left: 4px solid transparent;
    border-radius: 6px;
}

.wxcce-vm-change__report-line--active {
    border-left-color: var(--success);
    background: rgba(50, 168, 82, 0.08);
}

.wxcce-vm-change__report-line--watch {
    border-left-color: var(--brand);
    background: rgba(11, 116, 199, 0.08);
}

.wxcce-vm-change__report-line--expiring {
    border-left-color: var(--warning);
    background: rgba(245, 158, 11, 0.12);
}

.wxcce-vm-change__report-line--expired {
    border-left-color: var(--danger);
    background: rgba(225, 29, 72, 0.11);
}

.wxcce-vm-change__report-line--unknown {
    border-left-color: var(--muted);
    background: rgba(100, 116, 139, 0.08);
}

.wxcce-vm-change__state-token {
    font-weight: 700;
}

.wxcce-vm-change__state-token--good {
    color: var(--success);
}

.wxcce-vm-change__state-token--bad {
    color: var(--danger);
}

.wxcce-vm-change__state-token--warn {
    color: var(--warning);
}

.wxcce-vm-change__state-token--soft {
    color: var(--brand);
}

.wxcce-vm-change__report-url {
    color: var(--brand-strong);
    font-weight: 700;
}

@keyframes wxcce-running-progress {
    0% {
        transform: translateX(-110%);
    }
    100% {
        transform: translateX(260%);
    }
}

.wxcce-vm-change__summary-row.is-expanded td {
    background: rgba(0, 188, 235, 0.05);
}

.wxcce-vm-change__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border: 0;
    background: transparent;
    color: var(--brand-strong);
    font: inherit;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
}

.wxcce-vm-change__toggle-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    background: rgba(0, 188, 235, 0.14);
    color: var(--brand);
    font-size: 0.94rem;
    line-height: 1;
}

.wxcce-vm-change__detail-row td {
    padding: 0.85rem 0.9rem 1rem;
    background: rgba(11, 116, 199, 0.04);
}

.wxcce-vm-change__detail-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.wxcce-vm-change__detail-panel {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
    border-radius: 16px;
    border: 1px solid rgba(11, 116, 199, 0.12);
    background: var(--panel);
}

.wxcce-vm-change__detail-item {
    gap: 0.35rem;
}

@media (max-width: 960px) {
    .infra-ios-xe-hld-launch__fab-stack {
        right: 0.75rem;
        top: auto;
        bottom: 5rem;
        transform: none;
    }

    .infra-ios-xe-hld-launch__fab {
        width: 2.75rem;
        height: 2.75rem;
    }

    .wxcce-vm-change__head-actions,
    .mra-workspace-launch__actions,
    .wxcce-vm-change__selector-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .wxcce-vm-change__settings-grid,
    .wxcce-vm-change__completion-grid,
    .wxcce-vm-change__running-stats,
    .wxcce-vm-change__running-steps,
    .wxcce-vm-change__detail-panels {
        grid-template-columns: 1fr;
    }

    .wxcce-vm-change__history-item {
        align-items: stretch;
    }

    .wxcce-vm-change__dc-grid {
        grid-template-columns: 1fr;
    }

    .wxcce-vm-change__floating-run {
        left: 0.75rem;
        right: 0.75rem;
    }

    .wxcce-vm-change__floating-run-button {
        width: 100%;
        min-width: 0;
    }

    .wxcce-vm-change__summary-cards,
    .wxcce-vm-change > .summary-cards.summary-cards--row,
    .wxcce-vm-change__overview > .summary-cards.summary-cards--row,
    .wxcce-vm-change__compare > .summary-cards.summary-cards--row,
    .wxcce-vm-change__results > .summary-cards.summary-cards--row {
        grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    }
}

.mra-workspace-launch {
    margin-bottom: 0.85rem;
}

.mra-workspace-launch .table-head {
    gap: 0.85rem;
}

/* Long workspace pages should use normal document flow instead of the locked
   inner scroller, which can clip or visually overlap large section stacks. */

body.body--page-flow {
    overflow-y: auto;
}

.app-shell.app-shell--page-flow,
.app-shell.app-shell--page-flow .workspace {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
}

.app-shell.app-shell--page-flow .workspace {
    grid-template-rows: auto auto auto auto;
}

.app-shell.app-shell--page-flow .content-stage {
    overflow: visible;
    min-height: auto;
    padding-bottom: 1rem;
    scroll-padding-bottom: 1rem;
}

.app-shell.app-shell--page-flow .workspace-footer {
    position: static;
    margin-top: 0;
    align-self: stretch;
}

.app-shell.app-shell--page-flow .content-stage > .content-card,
.app-shell.app-shell--page-flow .content-stage > .chart-card,
.app-shell.app-shell--page-flow .content-stage > .table-shell {
    overflow: visible;
}

.ai-connector-context__grid,
.ai-admin-connector__grid {
    margin-top: 1rem;
}

.ai-connector-context__list,
.ai-admin-connector__list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.55rem;
}

.ai-connector-context__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.ai-connector-context__actions {
    margin: 0.9rem 0 0.4rem;
}

.ai-connector-context__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    background: rgba(11, 116, 199, 0.08);
    color: var(--text-muted);
    font-size: 0.82rem;
}

.ai-admin-connector {
    display: grid;
    gap: 1rem;
}

.ai-admin-connector__tabs {
    margin-bottom: 0.2rem;
}

.ai-admin-connector__details {
    margin-top: -0.15rem;
}

.ai-admin-connector__textarea {
    min-height: 5.5rem;
    width: 100%;
    resize: vertical;
}

.ai-admin-connector__textarea--small {
    min-height: 3.25rem;
}

.ai-admin-connector__textarea--large {
    min-height: 19rem;
    font-family: "Consolas", "Courier New", monospace;
}

@media (max-width: 960px) {
    .ai-connector-context__meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Final shell stabilization overrides
   Keep the sticky footer from covering the last visible records, allow the
   topbar to wrap cleanly, and keep floating actions away from the footer. */

:root {
    --easyclick-shell-gap: clamp(0.5rem, 0.8vw, 0.72rem);
    --easyclick-footer-reserve: clamp(7rem, 14vh, 9rem);
}

.workspace {
    min-width: 0;
    gap: var(--easyclick-shell-gap);
}

.topbar {
    gap: 0.7rem;
}

.topbar__left,
.topbar__right,
.topbar-search,
.topbar-sync,
.topbar__utility-group,
.mode-switch {
    min-width: 0;
}

.topbar__right {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.55rem;
}

.topbar-search {
    flex: 1 1 16rem;
    width: auto;
    max-width: min(26rem, 100%);
}

#viewTitle {
    max-width: min(44vw, 28rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.content-stage {
    padding-bottom: calc(var(--easyclick-footer-reserve) + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(var(--easyclick-footer-reserve) + env(safe-area-inset-bottom, 0px));
}

.content-stage > :last-child {
    margin-bottom: clamp(1rem, 2vh, 1.35rem);
}

.workspace-footer {
    gap: 0.58rem;
    padding: 0.55rem 0.72rem calc(0.55rem + env(safe-area-inset-bottom, 0px));
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}

.footer-pill {
    min-width: 0;
}

.footer-pill strong {
    display: block;
    overflow-wrap: anywhere;
}

.ai-fab-stack {
    bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px));
}

.app-shell.app-shell--page-flow .content-stage {
    padding-bottom: clamp(4rem, 8vh, 5.5rem);
    scroll-padding-bottom: clamp(4rem, 8vh, 5.5rem);
}

@media (min-width: 961px) {
    .topbar {
        flex-wrap: nowrap;
    }

    .topbar__right {
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        overflow: hidden;
    }

    .topbar-search {
        flex: 1 1 17rem;
        min-width: 12rem;
        max-width: 22rem;
    }

    .topbar__utility-group,
    .mode-switch {
        flex-wrap: nowrap;
        flex: 0 0 auto;
    }

    .topbar__right > .icon-button,
    .topbar__right > .toolbar-select,
    .topbar__right > .topbar-sync,
    .topbar__right > .mode-switch,
    .topbar__right > .topbar__utility-group {
        flex: 0 0 auto;
    }
}

@media (max-width: 1280px) {
    .workspace-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #viewTitle {
        max-width: min(52vw, 24rem);
    }
}

@media (max-width: 960px) {
    .workspace {
        gap: 0.72rem;
    }

    .topbar {
        padding: 0.82rem 0.88rem;
    }

    .topbar__right {
        justify-content: stretch;
    }

    .topbar-search {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .topbar-sync {
        flex: 1 1 13rem;
        min-width: 0;
    }

    #viewTitle {
        max-width: 100%;
        white-space: normal;
    }

    .workspace-footer {
        grid-template-columns: 1fr;
    }

    .content-stage {
        padding-bottom: calc(clamp(8.5rem, 18vh, 11rem) + env(safe-area-inset-bottom, 0px)) !important;
        scroll-padding-bottom: calc(clamp(8.5rem, 18vh, 11rem) + env(safe-area-inset-bottom, 0px));
    }

    .ai-fab-stack {
        bottom: calc(7.8rem + env(safe-area-inset-bottom, 0px));
    }
}

.peering-global-network-card {
    display: grid;
    gap: 0.95rem;
}

.peering-global-network-card__button {
    display: inline-flex;
    align-items: center;
    gap: 0.62rem;
    padding: 0.82rem 1.08rem 0.82rem 0.9rem;
}

.peering-global-network-card__button-icon {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e 0%, #0ea5e9 42%, #8b5cf6 72%, #f59e0b 100%);
    color: #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 10px 18px rgba(14, 165, 233, 0.22);
}

.peering-global-network-card__button-icon svg {
    width: 0.88rem;
    height: 0.88rem;
}

.peering-global-network-card__summary .metric-card {
    min-height: 8.25rem;
}

.global-network-popup-window .popup-window__dialog {
    width: min(96vw, 110rem);
    max-width: min(96vw, 110rem);
    height: min(92vh, 68rem);
}

.global-network-popup-window .popup-window__body {
    padding: 1rem;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 22%),
        radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.06), transparent 20%),
        linear-gradient(180deg, #f8fbff 0%, #eff6ff 100%);
}

.global-network-popup {
    display: grid;
    gap: 1rem;
}

.global-network-map-card {
    overflow: hidden;
}

.global-network-map {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 0.88fr);
    gap: 1rem;
    align-items: stretch;
    min-width: 0;
}

.global-network-map__canvas-shell {
    position: relative;
    min-width: 0;
    height: clamp(24rem, 45vw, 38rem);
    border-radius: 1.35rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 24%),
        radial-gradient(circle at bottom right, rgba(16, 185, 129, 0.08), transparent 24%),
        linear-gradient(180deg, #f8fbff 0%, #eff6ff 48%, #e8f1fb 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 22px 44px rgba(15, 23, 42, 0.12);
}

.global-network-map__canvas-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(to right, rgba(59, 130, 246, 0.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(14, 165, 233, 0.06) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    z-index: 1;
}

.global-network-map__canvas {
    width: 100%;
    height: 100%;
    min-height: 100%;
}

.global-network-map__canvas .leaflet-container {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    font: inherit;
    background: linear-gradient(180deg, #f8fbff, #edf4fb);
    cursor: grab;
}

.global-network-map__canvas .leaflet-container:active {
    cursor: grabbing;
}

.global-network-map__canvas .leaflet-tile-pane {
    filter: grayscale(1) sepia(0.14) saturate(1.55) hue-rotate(175deg) brightness(1.03) contrast(1.08);
    opacity: 0.96;
}

.global-network-map__status {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 3;
}

.global-network-map__tools {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
    max-width: calc(100% - 2rem);
}

.global-network-map__sidebar {
    min-width: 0;
    height: clamp(24rem, 45vw, 38rem);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.95rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 34px rgba(148, 163, 184, 0.14);
    overflow: hidden;
}

.global-network-map__list {
    min-height: 0;
    overflow: auto;
}

.global-network-map__list-item {
    text-align: left;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

.global-network-map__list-item:hover,
.global-network-map__list-item:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.92));
    box-shadow: 0 16px 28px rgba(59, 130, 246, 0.1);
}

.global-network-map__leaflet-popup .leaflet-popup-content-wrapper {
    border-radius: 1rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: rgba(3, 10, 18, 0.96);
    box-shadow: 0 20px 42px rgba(15, 23, 42, 0.3);
}

.global-network-map__leaflet-popup .leaflet-popup-content {
    margin: 0.85rem 0.95rem;
}

.global-network-map__leaflet-popup .leaflet-popup-tip {
    background: rgba(3, 10, 18, 0.96);
    box-shadow: none;
}

.global-network-map__canvas .leaflet-tooltip.global-network-map__connection-tooltip {
    border: 0;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.24);
    padding: 0;
    pointer-events: none;
}

.global-network-map__canvas .leaflet-tooltip.global-network-map__connection-tooltip::before {
    display: none;
}

.global-network-map__connection-label {
    display: grid;
    gap: 0.08rem;
    padding: 0.42rem 0.68rem;
    text-align: center;
    white-space: nowrap;
}

.global-network-map__connection-label strong {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.global-network-map__connection-label span {
    font-size: 0.64rem;
    color: rgba(226, 232, 240, 0.84);
}

.global-network-map__popup-card {
    min-width: 13rem;
    display: grid;
    gap: 0.45rem;
    color: #e2e8f0;
}

.global-network-map__popup-card strong {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.12;
}

.global-network-map__popup-card p {
    margin: 0;
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.88);
}

.global-network-map__popup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.global-network-map__popup-grid > div {
    display: grid;
    gap: 0.16rem;
    padding: 0.48rem 0.56rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(59, 130, 246, 0.16);
    background: rgba(30, 41, 59, 0.72);
}

.global-network-map__popup-grid span {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(191, 219, 254, 0.86);
    font-weight: 700;
}

.global-network-map__popup-grid strong {
    font-size: 0.95rem;
    color: #ffffff;
}

.global-network-map__popup-card .chip-row .search-chip {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(96, 165, 250, 0.18);
    color: #dbeafe;
}

.global-network-map__marker-shell {
    background: transparent;
    border: 0;
}

.global-network-map__marker {
    position: relative;
    width: 5rem;
    height: 5rem;
    display: grid;
    place-items: center;
    animation: global-network-map-pulse 2.3s ease-in-out infinite;
}

.global-network-map__marker-ring {
    position: absolute;
    inset: 0.5rem;
    border-radius: 999px;
    border: 2px solid rgba(59, 130, 246, 0.28);
    background: rgba(255, 255, 255, 0.24);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 0 0.4rem rgba(59, 130, 246, 0.12);
}

.global-network-map__marker-core {
    position: relative;
    z-index: 2;
    width: 2.3rem;
    height: 2.3rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #dbeafe);
    color: #1d4ed8;
    box-shadow: 0 8px 18px rgba(59, 130, 246, 0.24);
}

.global-network-map__marker-core svg {
    width: 1.12rem;
    height: 1.12rem;
}

.global-network-map__marker-code {
    position: absolute;
    bottom: 0.12rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    padding: 0.18rem 0.48rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.9);
    color: #ffffff;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}

.global-network-map__marker--mint .global-network-map__marker-ring {
    border-color: rgba(16, 185, 129, 0.32);
    box-shadow: 0 0 0 0.4rem rgba(16, 185, 129, 0.12);
}

.global-network-map__marker--mint .global-network-map__marker-core {
    background: linear-gradient(180deg, #ecfdf5, #bbf7d0);
    color: #047857;
}

.global-network-map__marker--rose .global-network-map__marker-ring {
    border-color: rgba(244, 63, 94, 0.3);
    box-shadow: 0 0 0 0.4rem rgba(244, 63, 94, 0.1);
}

.global-network-map__marker--rose .global-network-map__marker-core {
    background: linear-gradient(180deg, #fff1f2, #fecdd3);
    color: #be123c;
}

.global-network-map__marker--amber .global-network-map__marker-ring {
    border-color: rgba(245, 158, 11, 0.32);
    box-shadow: 0 0 0 0.4rem rgba(245, 158, 11, 0.12);
}

.global-network-map__marker--amber .global-network-map__marker-core {
    background: linear-gradient(180deg, #fffbeb, #fde68a);
    color: #b45309;
}

.global-network-map__marker--slate .global-network-map__marker-ring {
    border-color: rgba(100, 116, 139, 0.28);
    box-shadow: 0 0 0 0.4rem rgba(100, 116, 139, 0.1);
}

.global-network-map__marker--slate .global-network-map__marker-core {
    background: linear-gradient(180deg, #f8fafc, #cbd5e1);
    color: #334155;
}

.global-network-map__marker--sky .global-network-map__marker-core {
    background: linear-gradient(180deg, #f0f9ff, #bae6fd);
    color: #0369a1;
}

@keyframes global-network-map-pulse {
    0%, 100% {
        opacity: 0.96;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

.global-network-design {
    display: grid;
    gap: 1rem;
}

.global-network-design__backbone-shell {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(96, 165, 250, 0.2);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.78), rgba(248, 250, 252, 0.9));
}

.global-network-design__backbone {
    display: grid;
    gap: 0.9rem;
}

.global-network-design__backbone-hub {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    width: fit-content;
    padding: 0.82rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(59, 130, 246, 0.2);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 16px 28px rgba(59, 130, 246, 0.1);
}

.global-network-design__hub-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(180deg, #dbeafe, #bfdbfe);
    color: #1d4ed8;
}

.global-network-design__hub-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.global-network-design__backbone-links,
.global-network-design__region-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.8rem;
}

.global-network-design__regions {
    display: grid;
    gap: 1rem;
}

.global-network-design__region {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
    border-radius: 1.15rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 34px rgba(148, 163, 184, 0.1);
}

.global-network-design__region--americas {
    border-color: rgba(59, 130, 246, 0.22);
}

.global-network-design__region--emea {
    border-color: rgba(16, 185, 129, 0.22);
}

.global-network-design__region--apjc {
    border-color: rgba(245, 158, 11, 0.24);
}

.global-network-design__region-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.global-network-design__node-card {
    flex: 1 1 18rem;
    min-width: min(100%, 18rem);
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.08);
}

.global-network-design__node-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.global-network-design__node-icon {
    width: 2.7rem;
    height: 2.7rem;
    display: grid;
    place-items: center;
    border-radius: 0.95rem;
    background: linear-gradient(180deg, #dbeafe, #bfdbfe);
    color: #1d4ed8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.global-network-design__node-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.global-network-design__node-meta,
.global-network-design__node-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.global-network-design__node-stats {
    color: var(--text-soft);
    font-size: 0.82rem;
}

.global-network-design__connection {
    flex: 0 1 18rem;
    min-width: min(100%, 15rem);
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.global-network-design__connection-line {
    width: 100%;
    max-width: 8rem;
    height: 0.28rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    box-shadow: 0 0 0 0.22rem rgba(59, 130, 246, 0.1);
}

.global-network-design__connection--private .global-network-design__connection-line {
    background: linear-gradient(90deg, #10b981, #059669);
    box-shadow: 0 0 0 0.22rem rgba(16, 185, 129, 0.12);
}

.global-network-design__connection--public .global-network-design__connection-line {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    box-shadow: 0 0 0 0.22rem rgba(245, 158, 11, 0.12);
}

.global-network-design__connection-copy {
    display: grid;
    gap: 0.14rem;
    justify-items: center;
    text-align: center;
}

.global-network-design__connection-copy small {
    color: var(--text-soft);
}

@media (max-width: 1180px) {
    .global-network-map {
        grid-template-columns: 1fr;
    }

    .global-network-map__canvas-shell {
        height: 22rem;
    }

    .global-network-map__sidebar {
        height: auto;
        min-height: 16rem;
        max-height: 20rem;
    }
}

@media (max-width: 900px) {
    .global-network-popup-window .popup-window__dialog {
        width: min(98vw, 110rem);
        height: min(95vh, 68rem);
    }

    .global-network-map__tools {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
        justify-content: stretch;
    }

    .global-network-design__region-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .global-network-design__backbone-links,
    .global-network-design__region-flow {
        flex-direction: column;
    }

    .global-network-design__connection,
    .global-network-design__node-card {
        min-width: 100%;
    }
}

.infra-ios-xe-hld-window .popup-window__dialog,
.popup-window--infra-circuit .popup-window__dialog {
    width: min(98vw, 118rem);
    height: min(95vh, 76rem);
}

/* MapLibre GL dashboard map. The surrounding legacy class remains only as a
   layout compatibility hook while the live renderer is fully WebGL/vector. */
.world-map-maplibre__canvas.maplibregl-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    border-radius: inherit;
    overflow: hidden;
    background: var(--map-canvas, #080d16);
    font: inherit;
}

.world-map-maplibre__canvas .maplibregl-canvas {
    outline: none;
}

.world-map-maplibre__canvas .maplibregl-canvas:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--brand) 72%, white);
    outline-offset: -3px;
}

.world-map-maplibre__canvas .maplibregl-ctrl-group {
    overflow: hidden;
    border: 1px solid var(--map-border, #1c2a3d);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--map-panel, #0f1724) 94%, transparent);
    box-shadow: 0 10px 24px var(--map-shadow, rgba(2, 6, 23, 0.35));
    backdrop-filter: blur(12px);
}

.world-map-maplibre__canvas .maplibregl-ctrl-group button {
    width: 2rem;
    height: 2rem;
    background-color: transparent;
}

.world-map-maplibre__canvas .maplibregl-ctrl-group button + button {
    border-top-color: var(--map-border, #1c2a3d);
}

.world-map-maplibre__canvas .maplibregl-ctrl-icon {
    filter: var(--map-control-filter, none);
}

.world-map-maplibre__canvas .maplibregl-ctrl-attrib {
    border: 1px solid var(--map-border, #1c2a3d);
    border-radius: 0.55rem 0 0 0;
    background: color-mix(in srgb, var(--map-panel, #0f1724) 88%, transparent);
    color: var(--map-muted, #94a3b8);
    font-size: 0.62rem;
    backdrop-filter: blur(10px);
    opacity: 0.42;
    max-width: 1.9rem;
    min-height: 1.75rem;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 180ms ease, opacity 180ms ease;
}

.world-map-maplibre__canvas .maplibregl-ctrl-attrib:hover,
.world-map-maplibre__canvas .maplibregl-ctrl-attrib:focus-within {
    max-width: min(34rem, calc(100vw - 2rem));
    opacity: 1;
}

.world-map-maplibre__canvas .maplibregl-ctrl-attrib a {
    color: var(--brand);
}

.world-map-maplibre__marker {
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--map-marker-accent, #4f8cff);
    cursor: pointer;
    overflow: visible;
    isolation: isolate;
}

.world-map-maplibre__marker-pulse,
.world-map-maplibre__marker-core {
    position: absolute;
    inset: 50% auto auto 50%;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.world-map-maplibre__marker-pulse {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid currentColor;
    background: color-mix(in srgb, currentColor 18%, transparent);
    box-shadow: 0 0 1.1rem color-mix(in srgb, currentColor 72%, transparent);
    animation: world-map-maplibre-pulse 2.1s ease-out infinite;
}

.world-map-maplibre__marker-core {
    width: 0.78rem;
    height: 0.78rem;
    border: 2px solid #ffffff;
    background: currentColor;
    box-shadow: 0 0 0.7rem currentColor;
}

.world-map-maplibre__marker-day-cycle {
    position: absolute;
    top: -0.46rem;
    right: -0.5rem;
    z-index: 2;
    width: 0.9rem;
    height: 0.9rem;
    display: grid;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: color-mix(in srgb, var(--map-panel, #0f1724) 92%, transparent);
    box-shadow: 0 3px 10px color-mix(in srgb, currentColor 34%, transparent);
    pointer-events: none;
}

.world-map-maplibre__marker-day-cycle svg {
    width: 0.56rem;
    height: 0.56rem;
}

.world-map-maplibre__marker.is-day .world-map-maplibre__marker-day-cycle {
    color: #fbbf24;
}

.world-map-maplibre__marker.is-day .world-map-maplibre__marker-day-cycle svg {
    animation: world-map-day-cycle-sun 16s linear infinite;
}

.world-map-maplibre__marker.is-night .world-map-maplibre__marker-day-cycle {
    color: #a78bfa;
}

.world-map-maplibre__marker-label {
    position: absolute;
    top: calc(100% + 0.28rem);
    left: 50%;
    min-width: max-content;
    padding: 0.14rem 0.38rem;
    border: 1px solid color-mix(in srgb, currentColor 42%, var(--map-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--map-panel, #0f1724) 92%, transparent);
    color: var(--map-text, #f1f5f9);
    font-size: 0.61rem;
    font-weight: 760;
    letter-spacing: 0.05em;
    line-height: 1.25;
    white-space: nowrap;
    transform: translateX(-50%);
    box-shadow: 0 5px 14px var(--map-shadow, rgba(2, 6, 23, 0.32));
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.world-map-maplibre__marker:hover,
.world-map-maplibre__marker:focus-visible,
.world-map-maplibre__marker.is-active {
    z-index: 4;
}

.world-map-maplibre__marker:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 4px;
}

.world-map-maplibre__marker.is-active .world-map-maplibre__marker-core {
    width: 0.94rem;
    height: 0.94rem;
}

.world-map-maplibre__marker.is-active .world-map-maplibre__marker-label {
    border-color: currentColor;
    color: #ffffff;
    background: color-mix(in srgb, currentColor 32%, #080d16);
}

@keyframes world-map-maplibre-pulse {
    0% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(0.7);
    }
    72%, 100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.9);
    }
}

@keyframes world-map-day-cycle-sun {
    to { transform: rotate(360deg); }
}

.world-map-maplibre__popup .maplibregl-popup-content {
    padding: 0.44rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--map-border, #1c2a3d) 72%, transparent);
    border-radius: 0.36rem;
    background: color-mix(in srgb, var(--map-popup, #0f1724) 96%, #050914);
    color: var(--map-text, #f1f5f9);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--map-shadow, rgba(2, 6, 23, 0.42)) 58%, transparent);
    backdrop-filter: blur(10px);
    max-height: min(36rem, calc(100vh - 7rem));
    overflow: auto;
    scrollbar-width: thin;
}

.world-map-maplibre__popup .maplibregl-popup-close-button {
    top: 0.3rem;
    right: 0.34rem;
    width: 1.45rem;
    height: 1.45rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--map-border, #1c2a3d) 74%, transparent);
    border-radius: 0.26rem;
    color: color-mix(in srgb, var(--map-text, #f1f5f9) 82%, transparent);
    background: color-mix(in srgb, var(--map-panel, #0f1724) 72%, transparent);
    font-size: 1.15rem;
    line-height: 1;
}

.world-map-maplibre__popup .maplibregl-popup-close-button:hover {
    color: #ffffff;
    border-color: color-mix(in srgb, #60a5fa 66%, transparent);
    background: color-mix(in srgb, #2563eb 22%, var(--map-panel, #0f1724));
}

.world-map-maplibre__info-window {
    position: relative;
    gap: 0.22rem;
}

.world-map-maplibre__info-window > .world-map-maplibre__info-window-title {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    padding-right: 2rem;
    padding-bottom: 0.24rem;
    font-size: 0.78rem;
    font-weight: 680;
}

.world-map-maplibre__info-window .country-flag-icon {
    width: 1.15rem;
    min-width: 1.15rem;
    height: 0.76rem;
    margin: 0;
    border-radius: 0.12rem;
}

.world-map-maplibre__info-window > p,
.world-map-maplibre__info-window .world-map-leaflet__info-window-meta {
    font-size: 0.67rem;
}

.world-map-maplibre__info-window-hint {
    color: color-mix(in srgb, var(--map-text, #f1f5f9) 62%, transparent);
    font-size: 0.6rem;
    line-height: 1.35;
}

.world-map-maplibre__local-clock {
    --world-map-clock-accent: #fbbf24;
    display: grid;
    grid-template-columns: 1.55rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.36rem;
    padding: 0.3rem 0.4rem;
    border: 1px solid color-mix(in srgb, var(--world-map-clock-accent) 46%, var(--map-border, #1c2a3d));
    border-radius: 0.34rem;
    background: linear-gradient(120deg, color-mix(in srgb, var(--world-map-clock-accent) 14%, transparent), color-mix(in srgb, var(--map-panel, #0f1724) 62%, transparent));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--world-map-clock-accent) 86%, transparent);
}

.world-map-maplibre__local-clock.is-night {
    --world-map-clock-accent: #a78bfa;
}

.world-map-maplibre__local-clock-icon {
    width: 1.45rem;
    height: 1.45rem;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--world-map-clock-accent) 52%, transparent);
    border-radius: 999px;
    color: var(--world-map-clock-accent);
    background: color-mix(in srgb, var(--world-map-clock-accent) 13%, transparent);
}

.world-map-maplibre__local-clock.is-day .world-map-maplibre__local-clock-icon svg {
    animation: world-map-day-cycle-sun 16s linear infinite;
}

.world-map-maplibre__local-clock-icon svg {
    width: 0.82rem;
    height: 0.82rem;
}

.world-map-maplibre__local-clock-copy {
    min-width: 0;
    display: grid;
    gap: 0.02rem;
}

.world-map-maplibre__local-clock-copy small,
.world-map-maplibre__local-clock-copy > span,
.world-map-maplibre__local-clock-state small {
    overflow: hidden;
    color: color-mix(in srgb, var(--map-text, #f1f5f9) 66%, transparent);
    font-size: 0.54rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.world-map-maplibre__local-clock-copy strong,
.world-map-maplibre__local-clock-state strong {
    padding: 0;
    border: 0;
    color: var(--map-text, #f1f5f9);
}

.world-map-maplibre__local-clock-copy strong {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.world-map-maplibre__local-clock-state {
    display: grid;
    justify-items: end;
    gap: 0.06rem;
    padding-left: 0.5rem;
    border-left: 1px solid color-mix(in srgb, var(--world-map-clock-accent) 30%, transparent);
}

.world-map-maplibre__local-clock-state strong {
    color: var(--world-map-clock-accent);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.world-map-maplibre__info-window .world-map-leaflet__info-window-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.22rem;
    padding: 0.04rem 0 0.12rem;
    overflow: visible;
}

.world-map-maplibre__info-window .world-map-leaflet__info-window-cell {
    min-width: 4.8rem;
    flex-basis: 4.8rem;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.3rem;
    padding: 0.32rem 0.38rem;
    border-color: color-mix(in srgb, var(--map-border, #1c2a3d) 58%, transparent);
    background: color-mix(in srgb, var(--map-panel, #0f1724) 38%, transparent);
}

.world-map-maplibre__info-window .world-map-leaflet__info-window-icon {
    width: 1.08rem;
    height: 1.08rem;
}

.world-map-maplibre__info-window .world-map-leaflet__info-window-icon svg {
    width: 0.66rem;
    height: 0.66rem;
}

.world-map-maplibre__info-window .world-map-leaflet__info-window-metric small {
    overflow: hidden;
    font-size: 0.52rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.world-map-maplibre__info-window .world-map-leaflet__info-window-metric strong {
    overflow: hidden;
    font-size: 0.72rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.world-map-maplibre__metric-card {
    --world-map-metric-accent: #60a5fa;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--world-map-metric-accent) 28%, var(--map-border, #1c2a3d));
    border-radius: 0.3rem;
    background: color-mix(in srgb, var(--map-panel, #0f1724) 54%, transparent);
    overflow: hidden;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.world-map-maplibre__metric-trigger {
    width: 100%;
    min-height: 2.45rem;
    display: grid;
    grid-template-columns: 1.08rem minmax(0, 1fr) 0.68rem;
    align-items: center;
    gap: 0.3rem;
    padding: 0.34rem 0.4rem;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.world-map-maplibre__metric-trigger:hover,
.world-map-maplibre__metric-trigger[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--world-map-metric-accent) 70%, var(--map-border, #1c2a3d));
    background: color-mix(in srgb, var(--world-map-metric-accent) 12%, var(--map-panel, #0f1724));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--world-map-metric-accent) 84%, transparent);
}

.world-map-maplibre__metric-trigger .world-map-maplibre__metric-chevron {
    justify-self: end;
}

.world-map-maplibre__metric-dialog {
    position: absolute;
    top: 2.05rem;
    right: 0;
    left: 0;
    z-index: 12;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #60a5fa 54%, var(--map-border, #1c2a3d));
    border-radius: 0.32rem;
    background: #0b1220;
    box-shadow: 0 18px 42px rgba(2, 6, 23, 0.72);
}

.world-map-maplibre__metric-dialog[hidden],
.world-map-maplibre__metric-panel[hidden] {
    display: none !important;
}

.world-map-maplibre__metric-panel {
    max-height: min(16rem, calc(100vh - 10rem));
    overflow: auto;
    scrollbar-width: thin;
}

.world-map-maplibre__metric-panel > header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr) 1.55rem;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.55rem;
    padding: 0.38rem 0.45rem;
    border-bottom: 1px solid color-mix(in srgb, var(--world-map-metric-accent) 34%, transparent);
    background: #101a2c;
}

.world-map-maplibre__metric-panel > header > div {
    min-width: 0;
    display: grid;
    gap: 0.06rem;
}

.world-map-maplibre__metric-panel > header small {
    color: #94a3b8;
    font-size: 0.52rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.world-map-maplibre__metric-panel > header strong {
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.world-map-maplibre__metric-panel > header button {
    width: 1.5rem;
    height: 1.5rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #334155;
    border-radius: 0.28rem;
    color: #cbd5e1;
    background: #111c2f;
    cursor: pointer;
}

.world-map-maplibre__metric-panel > header button:hover {
    color: #ffffff;
    border-color: #60a5fa;
}

.world-map-maplibre__metric-panel > header button svg {
    width: 0.8rem;
    height: 0.8rem;
}

.world-map-maplibre__metric-card--success { --world-map-metric-accent: #34d399; }
.world-map-maplibre__metric-card--warning { --world-map-metric-accent: #fbbf24; }
.world-map-maplibre__metric-card--danger { --world-map-metric-accent: #fb7185; }
.world-map-maplibre__metric-card--soft { --world-map-metric-accent: #94a3b8; }

.world-map-maplibre__metric-card[open] {
    grid-column: 1 / -1;
    border-color: color-mix(in srgb, var(--world-map-metric-accent) 68%, var(--map-border, #1c2a3d));
    background: color-mix(in srgb, var(--world-map-metric-accent) 9%, var(--map-panel, #0f1724));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--world-map-metric-accent) 82%, transparent);
}

.world-map-maplibre__metric-card > summary {
    min-height: 1.92rem;
    display: grid;
    grid-template-columns: 1.08rem minmax(0, 1fr) 0.68rem;
    align-items: center;
    gap: 0.26rem;
    padding: 0.24rem 0.3rem;
    cursor: pointer;
    list-style: none;
}

.world-map-maplibre__metric-card > summary::-webkit-details-marker {
    display: none;
}

.world-map-maplibre__metric-card > summary:hover {
    background: color-mix(in srgb, var(--world-map-metric-accent) 10%, transparent);
}

.world-map-maplibre__metric-card .world-map-leaflet__info-window-icon {
    color: var(--world-map-metric-accent) !important;
    background: color-mix(in srgb, var(--world-map-metric-accent) 16%, transparent);
}

.world-map-maplibre__metric-chevron {
    width: 0.66rem;
    height: 0.66rem;
    color: color-mix(in srgb, var(--map-text, #f1f5f9) 55%, transparent);
    transition: transform 140ms ease;
}

.world-map-maplibre__metric-chevron svg {
    width: 100%;
    height: 100%;
}

.world-map-maplibre__metric-card[open] .world-map-maplibre__metric-chevron {
    transform: rotate(180deg);
    color: var(--world-map-metric-accent);
}

.world-map-maplibre__metric-detail {
    padding: 0.42rem 0.5rem 0.5rem;
    border-top: 1px solid color-mix(in srgb, var(--world-map-metric-accent) 22%, transparent);
    color: color-mix(in srgb, var(--map-text, #f1f5f9) 78%, transparent) !important;
    font-size: 0.64rem !important;
    line-height: 1.45;
}

.world-map-maplibre__severity-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.22rem;
}

.world-map-maplibre__severity-summary-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 0.9rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.24rem;
    padding: 0.24rem 0.34rem;
    border: 1px solid color-mix(in srgb, #94a3b8 34%, transparent);
    border-radius: 0.28rem;
    background: color-mix(in srgb, #94a3b8 8%, transparent);
}

.world-map-maplibre__severity-summary-item > span,
.world-map-maplibre__severity-summary-item svg {
    width: 0.76rem;
    height: 0.76rem;
}

.world-map-maplibre__severity-summary-item small {
    overflow: hidden;
    color: color-mix(in srgb, var(--map-text, #f1f5f9) 72%, transparent);
    font-size: 0.54rem;
    font-weight: 680;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.world-map-maplibre__severity-summary-item strong {
    padding: 0;
    border: 0;
    color: var(--map-text, #f1f5f9);
    font-size: 0.7rem;
}

.world-map-maplibre__severity-summary-item--critical {
    color: #fb7185;
    border-color: color-mix(in srgb, #fb7185 52%, transparent);
    background: color-mix(in srgb, #fb7185 11%, transparent);
}

.world-map-maplibre__severity-summary-item--major {
    color: #fbbf24;
    border-color: color-mix(in srgb, #fbbf24 50%, transparent);
    background: color-mix(in srgb, #fbbf24 10%, transparent);
}

.world-map-maplibre__severity-summary-item--minor {
    color: #60a5fa;
    border-color: color-mix(in srgb, #60a5fa 48%, transparent);
    background: color-mix(in srgb, #60a5fa 10%, transparent);
}

.world-map-maplibre__metric-table-wrap {
    max-height: 9rem;
    overflow: auto;
    border-top: 1px solid color-mix(in srgb, var(--world-map-metric-accent) 24%, transparent);
    scrollbar-width: thin;
}

.world-map-maplibre__metric-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.world-map-maplibre__metric-table th,
.world-map-maplibre__metric-table td {
    padding: 0.28rem 0.36rem;
    border-bottom: 1px solid color-mix(in srgb, var(--map-border, #1c2a3d) 66%, transparent);
    color: color-mix(in srgb, var(--map-text, #f1f5f9) 78%, transparent);
    font-size: 0.58rem;
    line-height: 1.35;
    text-align: left;
    vertical-align: middle;
    white-space: normal;
}

.world-map-maplibre__metric-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: color-mix(in srgb, var(--map-text, #f1f5f9) 62%, transparent);
    background: color-mix(in srgb, var(--map-panel, #0f1724) 94%, transparent);
    font-size: 0.5rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.world-map-maplibre__metric-table th:first-child { width: 29%; }
.world-map-maplibre__metric-table th:nth-child(2) { width: 16%; }

.world-map-maplibre__metric-table tbody th > span {
    width: 0.78rem;
    height: 0.78rem;
    display: inline-grid;
    place-items: center;
    margin-right: 0.24rem;
    color: var(--world-map-metric-accent);
    vertical-align: middle;
}

.world-map-maplibre__metric-table tbody th svg {
    width: 0.72rem;
    height: 0.72rem;
}

.world-map-maplibre__metric-table tbody td:nth-child(2) {
    color: var(--map-text, #f1f5f9);
    font-weight: 720;
    font-variant-numeric: tabular-nums;
}

.world-map-maplibre__metric-table tr.is-critical th { color: #fb7185; }
.world-map-maplibre__metric-table tr.is-major th { color: #fbbf24; }
.world-map-maplibre__metric-table tr.is-minor th { color: #60a5fa; }
.world-map-maplibre__metric-table tr.is-healthy th { color: #34d399; }

.world-map-maplibre__severity-groups {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.28rem;
    padding: 0 0.5rem 0.5rem;
}

.world-map-maplibre__severity-group {
    min-width: 0;
    display: grid;
    gap: 0.06rem;
    padding: 0.3rem 0.34rem;
    border: 1px solid color-mix(in srgb, #94a3b8 34%, transparent);
    border-radius: 0.48rem;
    background: color-mix(in srgb, #94a3b8 8%, transparent);
}

.world-map-maplibre__severity-group small {
    overflow: hidden;
    color: color-mix(in srgb, var(--map-text, #f1f5f9) 66%, transparent);
    font-size: 0.54rem;
    font-weight: 650;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.world-map-maplibre__severity-group strong {
    padding: 0;
    border: 0;
    color: var(--map-text, #f1f5f9);
    font-size: 0.76rem;
}

.world-map-maplibre__severity-group--healthy,
.world-map-maplibre__severity-group--good {
    border-color: color-mix(in srgb, #34d399 42%, transparent);
    background: color-mix(in srgb, #34d399 10%, transparent);
}

.world-map-maplibre__severity-group--warning {
    border-color: color-mix(in srgb, #fbbf24 46%, transparent);
    background: color-mix(in srgb, #fbbf24 10%, transparent);
}

.world-map-maplibre__severity-group--critical {
    border-color: color-mix(in srgb, #fb7185 48%, transparent);
    background: color-mix(in srgb, #fb7185 11%, transparent);
}

.world-map-maplibre__info-window-footer {
    min-height: 1.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.world-map-maplibre__info-window-footer > button {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.48rem;
    border: 1px solid color-mix(in srgb, #60a5fa 46%, transparent);
    border-radius: 0.5rem;
    color: #bfdbfe;
    background: color-mix(in srgb, #2563eb 16%, transparent);
    font: inherit;
    font-size: 0.63rem;
    font-weight: 680;
    cursor: pointer;
}

.world-map-maplibre__info-window-footer > button:hover {
    color: #ffffff;
    border-color: #60a5fa;
    background: color-mix(in srgb, #2563eb 30%, transparent);
}

.world-map-maplibre__info-window-footer > button svg {
    width: 0.78rem;
    height: 0.78rem;
}

/* Use one icon scale throughout every datacenter detail popup. */
.world-map-maplibre__info-window {
    --world-map-popup-icon-size: 0.95rem;
    --world-map-popup-icon-box: 1.5rem;
}

.world-map-maplibre__info-window .world-map-maplibre__local-clock {
    grid-template-columns: var(--world-map-popup-icon-box) minmax(0, 1fr) auto;
}

.world-map-maplibre__info-window .world-map-maplibre__metric-trigger {
    grid-template-columns: var(--world-map-popup-icon-box) minmax(0, 1fr) var(--world-map-popup-icon-size);
}

.world-map-maplibre__info-window :is(.world-map-maplibre__local-clock-icon, .world-map-leaflet__info-window-icon) {
    width: var(--world-map-popup-icon-box);
    height: var(--world-map-popup-icon-box);
    flex: 0 0 var(--world-map-popup-icon-box);
}

.world-map-maplibre__info-window .world-map-maplibre__severity-summary-item {
    grid-template-columns: var(--world-map-popup-icon-size) minmax(0, 1fr) auto;
}

.world-map-maplibre__info-window :is(.world-map-maplibre__severity-summary-item > span, .world-map-maplibre__metric-chevron, .world-map-maplibre__metric-table tbody th > span) {
    width: var(--world-map-popup-icon-size);
    height: var(--world-map-popup-icon-size);
}

.world-map-maplibre__info-window :is(.world-map-maplibre__local-clock-icon, .world-map-leaflet__info-window-icon, .world-map-maplibre__severity-summary-item, .world-map-maplibre__metric-chevron, .world-map-maplibre__metric-table, .world-map-maplibre__info-window-footer, .world-map-maplibre__metric-panel > header button) svg {
    width: var(--world-map-popup-icon-size);
    height: var(--world-map-popup-icon-size);
}

@media (max-width: 560px) {
    .world-map-maplibre__info-window .world-map-leaflet__info-window-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.world-map-maplibre__popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.world-map-maplibre__popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.world-map-maplibre__popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
    border-top-color: color-mix(in srgb, var(--map-popup, #0f1724) 52%, transparent);
}

.world-map-maplibre__popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.world-map-maplibre__popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.world-map-maplibre__popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
    border-bottom-color: color-mix(in srgb, var(--map-popup, #0f1724) 52%, transparent);
}

.world-map-maplibre__popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
    border-right-color: color-mix(in srgb, var(--map-popup, #0f1724) 52%, transparent);
}

.world-map-maplibre__popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
    border-left-color: color-mix(in srgb, var(--map-popup, #0f1724) 52%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .world-map-maplibre__marker-pulse,
    .world-map-maplibre__marker-day-cycle svg,
    .world-map-maplibre__local-clock-icon svg {
        animation: none;
    }

    .world-map-maplibre__marker-pulse { opacity: 0.55; }
}

.automation-center__execution-grid {
    align-items: start;
}

.automation-center__selection-card--resizable {
    position: relative;
    min-width: min(24rem, 100%);
    min-height: 22rem;
    max-width: calc(100vw - 4rem);
    max-height: 82vh;
    overflow: auto;
    resize: both;
    container-type: inline-size;
    scrollbar-gutter: stable;
}

.automation-center__selection-card--resizable .automation-center__table-wrap {
    max-height: calc(100% - 10rem);
    min-height: 12rem;
}

.automation-center__resize-grip {
    position: sticky;
    left: 100%;
    bottom: 0;
    width: 1.85rem;
    height: 1.85rem;
    display: grid;
    place-items: center;
    margin: -1.85rem -0.35rem -0.35rem auto;
    border-radius: 0.6rem 0 0.6rem 0;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 14%, var(--panel-strong));
    pointer-events: none;
    opacity: 0.88;
}

.automation-center__resize-grip svg {
    width: 0.9rem;
    height: 0.9rem;
    transform: rotate(90deg);
}

@container (max-width: 46rem) {
    .automation-center__selection-card--resizable .automation-center__table-toolbar {
        grid-template-columns: minmax(12rem, 1fr) auto auto;
    }

    .automation-center__selection-card--resizable .automation-center__table-toolbar > .toolbar-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 52rem) {
    .automation-center__selection-card--resizable {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        resize: vertical;
    }
}

/* Professional Administrator workspace system. */
.admin-page {
    --admin-accent: #2563eb;
    --admin-accent-strong: #1d4ed8;
    display: grid;
    gap: 0.78rem;
    min-width: 0;
    padding: clamp(0.7rem, 1.15vw, 1rem);
    container-type: inline-size;
}

.admin-page--enterprise { --admin-accent: #3b82f6; --admin-accent-strong: #2563eb; }
.admin-page--compliance { --admin-accent: #f97316; --admin-accent-strong: #d97706; }
.admin-page--audit { --admin-accent: #ef4444; --admin-accent-strong: #dc2626; }
.admin-page--mcp { --admin-accent: #fb7185; --admin-accent-strong: #e11d48; }
.admin-page--tokens { --admin-accent: #8b5cf6; --admin-accent-strong: #7c3aed; }
.admin-page--data { --admin-accent: #06b6d4; --admin-accent-strong: #0284c7; }
.admin-page--rules { --admin-accent: #84cc16; --admin-accent-strong: #65a30d; }
.admin-page--super { --admin-accent: #f59e0b; --admin-accent-strong: #d97706; }

.admin-data-settings .admin-inventory-table {
    max-height: min(32rem, 62vh);
    overflow: auto;
    scrollbar-gutter: stable;
}

.admin-data-settings .admin-inventory-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.admin-data-settings .admin-inventory-table:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--admin-accent) 55%, transparent);
    outline-offset: 2px;
}

.admin-device-context-guide {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.72rem;
}

.admin-device-context-guide > span:first-child {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    color: #34d399;
    background: color-mix(in srgb, #34d399 14%, transparent);
}

.admin-device-context-guide > span:first-child svg { width: 1.15rem; height: 1.15rem; }
.admin-device-context-guide p { margin: 0.18rem 0 0; color: var(--text-soft); }

.admin-device-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.admin-device-name-cell > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-device-context-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    min-height: 1.55rem;
    padding: 0.2rem 0.42rem;
    border: 1px solid color-mix(in srgb, #38bdf8 48%, var(--panel-border));
    border-radius: 999px;
    color: #38bdf8;
    background: color-mix(in srgb, #38bdf8 12%, var(--panel));
    font-size: 0.66rem;
    font-weight: 800;
    white-space: nowrap;
}

.admin-device-context-indicator svg { width: 0.9rem; height: 0.9rem; }
.admin-device-context-indicator.is-success {
    border-color: color-mix(in srgb, #34d399 52%, var(--panel-border));
    color: #34d399;
    background: color-mix(in srgb, #34d399 13%, var(--panel));
}
.admin-device-context-indicator.is-warning {
    border-color: color-mix(in srgb, #fbbf24 52%, var(--panel-border));
    color: #fbbf24;
    background: color-mix(in srgb, #fbbf24 13%, var(--panel));
}

.admin-device-context-indicator.is-pending {
    border-color: color-mix(in srgb, #38bdf8 52%, var(--panel-border));
    color: #38bdf8;
    background: color-mix(in srgb, #38bdf8 13%, var(--panel));
}

.admin-device-context-indicator.is-missing {
    border-color: color-mix(in srgb, #fb923c 48%, var(--panel-border));
    color: #fb923c;
    background: color-mix(in srgb, #fb923c 11%, var(--panel));
}

.admin-device-context-indicator.is-unsupported {
    border-color: color-mix(in srgb, var(--text-muted) 32%, var(--panel-border));
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 6%, var(--panel));
    opacity: 0.78;
}

.admin-device-context-bulk {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(12rem, 18rem) auto;
    align-items: end;
    gap: 0.8rem 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, #34d399 38%, var(--panel-border));
    border-radius: 0.9rem;
    background: linear-gradient(135deg, color-mix(in srgb, #34d399 9%, var(--panel)), var(--panel));
}

.admin-device-context-bulk > div:first-child {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.admin-device-context-bulk > div:first-child > span:last-child {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.admin-device-context-bulk small {
    color: var(--text-soft);
}

.admin-device-context-bulk small b {
    color: #34d399;
}

.admin-device-context-bulk__icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.7rem;
    color: #34d399;
    background: color-mix(in srgb, #34d399 14%, var(--panel));
}

.admin-device-context-bulk__icon svg { width: 1.15rem; height: 1.15rem; }

.admin-device-context-bulk > label {
    display: grid;
    gap: 0.3rem;
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-device-context-bulk > label select { width: 100%; }

.admin-device-context-bulk__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
}

.admin-device-context-bulk__progress {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--text-soft);
    font-size: 0.76rem;
}

.admin-data-settings .admin-inventory-table .select-column {
    width: 2.75rem;
    min-width: 2.75rem;
    padding-inline: 0.65rem;
    text-align: center;
}

.admin-data-settings .admin-inventory-table .select-column input {
    width: 0.78rem;
    height: 0.78rem;
    accent-color: #34d399;
    cursor: pointer;
}

.admin-data-settings .admin-inventory-table .select-column input:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.admin-data-settings .admin-inventory-table tr.is-selected > td {
    background: color-mix(in srgb, #34d399 9%, var(--panel));
}

.admin-data-settings .admin-device-context-action {
    border-color: color-mix(in srgb, #34d399 48%, var(--panel-border));
    color: #34d399;
    background: color-mix(in srgb, #34d399 13%, var(--panel));
}

@media (max-width: 52rem) {
    .admin-device-context-guide { grid-template-columns: 2rem minmax(0, 1fr); }
    .admin-device-context-guide > button { grid-column: 1 / -1; }
    .admin-device-context-bulk { grid-template-columns: 1fr; align-items: stretch; }
    .admin-device-context-bulk__actions { justify-content: stretch; }
    .admin-device-context-bulk__actions > button { flex: 1 1 auto; }
    .admin-device-context-bulk__progress { grid-column: 1; }
}

.admin-page > *,
.admin-page-hero > *,
.admin-page :is(.chart-card, .table-shell, .table-wrap, .toolbar-row) {
    min-width: 0;
}

.admin-page-hero {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 5.7rem;
    padding: 0.82rem 0.9rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 34%, var(--panel-border));
    border-radius: 0.95rem;
    background:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--admin-accent) 14%, transparent), transparent 38%),
        linear-gradient(135deg, color-mix(in srgb, var(--admin-accent) 8%, var(--panel-strong)), var(--panel));
    box-shadow: 0 0.45rem 1.4rem color-mix(in srgb, var(--admin-accent) 8%, transparent);
}

.admin-page-hero::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.24rem;
    background: linear-gradient(180deg, var(--admin-accent), var(--admin-accent-strong));
    content: "";
}

.admin-page-hero__icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, #fff 22%, transparent);
    border-radius: 0.9rem;
    color: #fff;
    background: linear-gradient(145deg, var(--admin-accent), var(--admin-accent-strong));
    box-shadow: 0 0.6rem 1.3rem color-mix(in srgb, var(--admin-accent) 27%, transparent);
}

.admin-page-hero__icon svg {
    width: 1.45rem;
    height: 1.45rem;
    stroke-width: 2;
}

.admin-page-hero__copy {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.16rem;
}

.admin-page-hero__copy .eyebrow {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0;
    color: var(--admin-accent);
    font-size: 0.62rem;
    letter-spacing: 0.105em;
}

.admin-page-hero__copy .eyebrow i {
    color: var(--text-muted);
    font-style: normal;
    opacity: 0.65;
}

.admin-page-hero__copy h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.18rem, 1.7vw, 1.48rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.admin-page-hero__copy > p:last-child {
    max-width: 62rem;
    margin: 0;
    color: var(--text-soft);
    font-size: 0.74rem;
    line-height: 1.45;
}

.admin-page-hero__actions {
    position: relative;
    z-index: 1;
    display: flex;
    max-width: 25rem;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.admin-page-hero__actions .status-pill {
    min-height: 2.2rem;
    padding-inline: 0.7rem;
    border-color: color-mix(in srgb, var(--admin-accent) 35%, var(--panel-border));
    background: color-mix(in srgb, var(--admin-accent) 9%, var(--panel));
}

.admin-page-hero__actions .status-pill svg,
.admin-page-hero__actions .toolbar-button svg {
    width: 0.95rem;
    height: 0.95rem;
}

.admin-page > :is(.chart-card, .table-shell, .admin-schema-contract, .admin-import-preview, .admin-import-history-card),
.admin-page :is(.enterprise-admin-section, .ai-admin-connector-card, .admin-token-guidance) {
    border-color: color-mix(in srgb, var(--admin-accent) 16%, var(--panel-border));
    box-shadow: 0 0.35rem 1.15rem rgba(15, 23, 42, 0.045);
}

.admin-page :is(.chart-card, .table-shell) {
    border-radius: 0.88rem;
}

.admin-page :is(.chart-card__head, .table-head) h3 {
    margin-top: 0.08rem;
    color: var(--text);
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: -0.012em;
}

.admin-page :is(.chart-card__head, .table-head) .eyebrow {
    color: var(--admin-accent);
}

.admin-page .chart-card__head {
    position: relative;
    padding-left: 0.7rem;
}

.admin-page .chart-card__head::before {
    position: absolute;
    top: 0.1rem;
    bottom: 0.1rem;
    left: 0;
    width: 0.18rem;
    border-radius: 999px;
    background: var(--admin-accent);
    content: "";
}

.admin-page .dataset-tabs {
    display: flex;
    gap: 0.42rem;
    margin: 0;
    padding: 0.42rem;
    overflow-x: auto;
    border: 1px solid var(--panel-border);
    border-radius: 0.82rem;
    background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
    scrollbar-width: thin;
}

.admin-page .dataset-tab {
    display: inline-flex;
    min-width: max-content;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.46rem 0.72rem;
    border: 1px solid transparent;
    border-radius: 0.62rem;
    color: var(--text-soft);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 750;
}

.admin-page .dataset-tab:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--admin-accent) 25%, var(--panel-border));
    background: color-mix(in srgb, var(--admin-accent) 7%, var(--panel));
}

.admin-page .dataset-tab.active {
    color: var(--admin-accent-strong);
    border-color: color-mix(in srgb, var(--admin-accent) 40%, var(--panel-border));
    background: color-mix(in srgb, var(--admin-accent) 12%, var(--panel));
    box-shadow: inset 0 -0.16rem 0 var(--admin-accent);
}

.admin-page .dataset-tab svg {
    width: 0.95rem;
    height: 0.95rem;
}

.admin-page .admin-scope-grid {
    position: relative;
    margin: 0;
    padding: 0.68rem 0.72rem 0.68rem 0.88rem;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--admin-accent) 22%, var(--panel-border));
    border-radius: 0.82rem;
    background: color-mix(in srgb, var(--admin-accent) 4%, var(--panel-strong));
}

.admin-page .admin-scope-grid::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.2rem;
    background: var(--admin-accent);
    content: "";
}

.admin-page :is(input, select, textarea):focus {
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--admin-accent) 14%, transparent);
    outline: none;
}

.admin-page .primary-button {
    border-color: color-mix(in srgb, var(--admin-accent-strong) 78%, #0000);
    color: #fff;
    background: linear-gradient(135deg, var(--admin-accent), var(--admin-accent-strong));
}

.admin-page .primary-button:hover {
    background: linear-gradient(135deg, var(--admin-accent-strong), var(--admin-accent));
}

.admin-page .toolbar-button:hover {
    border-color: color-mix(in srgb, var(--admin-accent) 50%, var(--panel-border));
    color: var(--admin-accent-strong);
}

.admin-page .notice-card {
    margin: 0;
    border-radius: 0.78rem;
    font-size: 0.72rem;
    line-height: 1.45;
}

.admin-page .table-wrap {
    border-radius: 0.75rem;
    scrollbar-width: thin;
}

/* Unified tenant and platform administration table system. Every managed
   table receives the same search, count, page-size, export, column, frame,
   row, and pagination treatment. */
.admin-page .admin-unified-table-toolbar {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) auto auto auto;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    margin: 0;
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 20%, var(--panel-border));
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--panel-strong) 94%, var(--admin-accent) 6%);
    box-shadow: 0 0.45rem 1.15rem color-mix(in srgb, var(--admin-accent) 6%, transparent);
}

.admin-page .admin-unified-table-toolbar.easyclick-table-tools--inline {
    grid-column: 1 / -1;
    flex: 1 1 100%;
    max-width: none;
}

.admin-page .admin-unified-table-toolbar > .easyclick-table-search {
    order: 1;
    width: 100%;
    max-width: none;
    min-height: 2.7rem;
    border-color: color-mix(in srgb, var(--admin-accent) 25%, var(--panel-border));
    border-radius: 0.75rem;
    background: var(--panel);
}

.admin-page .admin-unified-table-toolbar > .easyclick-table-result-count {
    order: 2;
    min-width: max-content;
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 700;
}

.admin-page .admin-unified-table-toolbar > .easyclick-table-page-size {
    order: 3;
}

.admin-page .admin-unified-table-toolbar > .easyclick-table-filter {
    order: 4;
}

.admin-page .admin-unified-table-toolbar > .easyclick-table-tool-actions {
    order: 5;
}

.admin-page .easyclick-table-page-size {
    display: inline-flex;
    min-width: max-content;
    min-height: 2.7rem;
    align-items: center;
    gap: 0.45rem;
    padding-left: 0.55rem;
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 750;
}

.admin-page .easyclick-table-page-size select {
    min-width: 4.75rem;
    height: 2.7rem;
    padding: 0 1.8rem 0 0.65rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 24%, var(--panel-border));
    border-radius: 0.72rem;
    color: var(--text);
    background: var(--panel);
    font: inherit;
}

.admin-page :is(.easyclick-table-filter > summary, .easyclick-table-export) {
    display: inline-grid;
    width: 2.7rem;
    min-width: 2.7rem;
    height: 2.7rem;
    min-height: 2.7rem;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 26%, var(--panel-border));
    border-radius: 0.72rem;
    color: var(--text);
    background: var(--panel);
    cursor: pointer;
    list-style: none;
}

.admin-page .easyclick-table-filter {
    position: relative;
}

.admin-page .easyclick-table-filter > summary::-webkit-details-marker {
    display: none;
}

.admin-page :is(.easyclick-table-filter > summary, .easyclick-table-export):is(:hover, :focus-visible),
.admin-page .easyclick-table-filter[open] > summary {
    border-color: var(--admin-accent);
    color: var(--admin-accent);
    outline: none;
    background: color-mix(in srgb, var(--admin-accent) 10%, var(--panel));
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--admin-accent) 12%, transparent);
}

.admin-page :is(.easyclick-table-filter > summary, .easyclick-table-export) svg {
    width: 1rem;
    height: 1rem;
}

.admin-page .easyclick-table-filter__panel {
    position: absolute;
    z-index: 90;
    top: calc(100% + 0.4rem);
    right: 0;
    display: grid;
    gap: 0.55rem;
    width: min(21rem, 82vw);
    padding: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 24%, var(--panel-border));
    border-radius: 0.8rem;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.admin-page .easyclick-table-filter__panel > label {
    display: grid;
    gap: 0.3rem;
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 700;
}

.admin-page .easyclick-table-filter__panel :is(select, input) {
    width: 100%;
    min-height: 2.3rem;
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.62rem;
    color: var(--text);
    background: var(--panel-strong);
}

.admin-page .easyclick-table-filter__panel > div {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
}

.admin-page .admin-unified-table-toolbar .easyclick-table-tool-actions {
    min-height: 2.7rem;
}

.admin-page .admin-unified-table-toolbar .easyclick-table-tool-actions .easyclick-column-menu > summary {
    width: 2.7rem;
    min-width: 2.7rem;
    max-width: 2.7rem;
    height: 2.7rem;
    min-height: 2.7rem;
    max-height: 2.7rem;
    border-color: color-mix(in srgb, var(--admin-accent) 26%, var(--panel-border));
    border-radius: 0.72rem;
    background: var(--panel);
}

.admin-page .easyclick-admin-table-filter-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0;
    overflow: visible;
    position: relative;
    z-index: 12;
}

.admin-page .easyclick-admin-table-filter-chip {
    position: relative;
    flex: 0 0 auto;
}

.admin-page .easyclick-admin-table-filter-chip[open] {
    z-index: 20;
}

.admin-page .easyclick-admin-table-filter-chip:last-child .easyclick-admin-table-filter-chip__panel {
    left: auto;
    right: 0;
}

.admin-page :is(.chart-card, .table-shell):has(.easyclick-admin-table-filter-chip[open]) {
    position: relative;
    z-index: 20;
    overflow: visible;
}

.admin-page .easyclick-admin-table-filter-chip > summary {
    display: inline-flex;
    min-height: 2.55rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 22%, var(--panel-border));
    border-radius: 0.72rem;
    color: var(--text);
    background: var(--panel);
    cursor: pointer;
    list-style: none;
}

.admin-page .easyclick-admin-table-filter-chip > summary::-webkit-details-marker {
    display: none;
}

.admin-page .easyclick-admin-table-filter-chip > summary strong {
    font-size: 0.76rem;
    font-weight: 800;
}

.admin-page .easyclick-admin-table-filter-chip > summary span {
    display: inline-flex;
    min-width: 2.1rem;
    min-height: 1.65rem;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.48rem;
    border-radius: 999px;
    color: color-mix(in srgb, var(--admin-accent) 75%, var(--text));
    background: color-mix(in srgb, var(--admin-accent) 13%, var(--panel-strong));
    font-size: 0.72rem;
    font-weight: 800;
}

.admin-page .easyclick-admin-table-filter-chip > summary svg {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--text-soft);
    transform: rotate(90deg);
    transition: transform 140ms ease;
}

.admin-page .easyclick-admin-table-filter-chip[open] > summary {
    border-color: var(--admin-accent);
    box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--admin-accent) 12%, transparent);
}

.admin-page .easyclick-admin-table-filter-chip[open] > summary svg {
    transform: rotate(-90deg);
}

.admin-page .easyclick-admin-table-filter-chip__panel {
    position: absolute;
    z-index: 85;
    top: calc(100% + 0.35rem);
    left: 0;
    display: grid;
    gap: 0.2rem;
    min-width: 13rem;
    max-width: min(24rem, 80vw);
    max-height: 18rem;
    overflow: auto;
    padding: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 22%, var(--panel-border));
    border-radius: 0.72rem;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.admin-page .easyclick-admin-table-filter-chip__panel button {
    width: 100%;
    min-height: 2.1rem;
    padding: 0.38rem 0.55rem;
    border: 0;
    border-radius: 0.5rem;
    color: var(--text);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.admin-page .easyclick-admin-table-filter-chip__panel button:hover {
    color: var(--admin-accent);
    background: color-mix(in srgb, var(--admin-accent) 9%, var(--panel));
}

.admin-page .admin-unified-table-wrap {
    max-width: 100%;
    margin: 0;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 20%, var(--panel-border));
    border-radius: 0.9rem;
    background: var(--panel);
    box-shadow: 0 0.45rem 1.2rem rgba(0, 0, 0, 0.08);
    scrollbar-gutter: stable;
}

.admin-page .admin-unified-table {
    width: 100%;
    min-width: max-content;
    border-collapse: separate;
    border-spacing: 0;
}

.admin-page .admin-unified-table thead th {
    height: 3.2rem;
    padding: 0.72rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--admin-accent) 20%, var(--panel-border));
    color: var(--text);
    background: color-mix(in srgb, var(--panel-strong) 92%, var(--admin-accent) 8%) !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    white-space: nowrap;
}

.admin-page .admin-unified-table tbody td {
    min-height: 3.4rem;
    padding: 0.78rem 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
    color: var(--text);
    background: var(--panel);
    vertical-align: middle;
}

.admin-page .admin-unified-table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--panel-strong) 94%, var(--admin-accent) 6%);
}

.admin-page .admin-unified-table tbody tr:hover td {
    background: color-mix(in srgb, var(--admin-accent) 9%, var(--panel)) !important;
}

.admin-page .easyclick-admin-table-footer {
    display: flex;
    min-height: 4.2rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin: 0;
    padding: 0.6rem 0.45rem 0.2rem;
}

.admin-page .easyclick-admin-table-footer__status {
    color: var(--text-soft);
    font-size: 0.76rem;
}

.admin-page .easyclick-admin-table-pager {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.admin-page .easyclick-admin-table-pages {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.admin-page .easyclick-admin-table-ellipsis {
    width: 1rem;
    flex: 0 0 1rem;
    color: var(--text-muted);
    text-align: center;
}

.admin-page .easyclick-admin-table-pager button,
.admin-page .easyclick-admin-table-page {
    display: inline-flex;
    width: 2.55rem;
    min-width: 2.55rem;
    height: 2.55rem;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 20%, var(--panel-border));
    border-radius: 999px;
    color: var(--text-soft);
    background: var(--panel);
}

.admin-page .easyclick-admin-table-pager button {
    cursor: pointer;
}

.admin-page .easyclick-admin-table-pager button:is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--admin-accent);
    color: var(--admin-accent);
    outline: none;
    background: color-mix(in srgb, var(--admin-accent) 9%, var(--panel));
}

.admin-page .easyclick-admin-table-pager button:disabled {
    opacity: 0.38;
    cursor: default;
}

.admin-page .easyclick-admin-table-pager button svg {
    width: 0.78rem;
    height: 0.78rem;
}

.admin-page .easyclick-admin-table-pager button svg + svg {
    margin-left: -0.48rem;
}

.admin-page .easyclick-admin-table-page.is-active {
    border-color: color-mix(in srgb, var(--admin-accent) 72%, var(--panel-border));
    color: var(--text);
    background: color-mix(in srgb, var(--admin-accent) 11%, var(--panel));
    font-weight: 850;
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--admin-accent) 16%, transparent);
}

@container (max-width: 62rem) {
    .admin-page .admin-unified-table-toolbar {
        grid-template-columns: minmax(10rem, 1fr) auto auto auto;
    }

    .admin-page .admin-unified-table-toolbar > .easyclick-table-search {
        grid-column: auto;
        min-width: 0;
    }
}

@container (max-width: 38rem) {
    .admin-page .admin-unified-table-toolbar {
        display: flex;
        align-items: stretch;
        flex-wrap: wrap;
    }

    .admin-page .admin-unified-table-toolbar > .easyclick-table-search {
        flex: 1 0 100%;
    }

    .admin-page .admin-unified-table-toolbar > .easyclick-table-result-count {
        margin-right: auto;
    }

    .admin-page .easyclick-admin-table-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-page .easyclick-admin-table-pager {
        width: 100%;
        justify-content: center;
    }
}

.admin-page :is(.table-wrap, .table-shell) table thead th {
    color: var(--text-soft);
    font-size: 0.66rem;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.admin-page :is(.table-wrap, .table-shell) tbody tr:hover {
    background: color-mix(in srgb, var(--admin-accent) 7%, var(--panel));
}

.admin-page .empty-state {
    min-height: 7.5rem;
    border: 1px dashed color-mix(in srgb, var(--admin-accent) 24%, var(--panel-border));
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--admin-accent) 3%, transparent);
}

.admin-page .enterprise-summary-grid,
.admin-page .admin-workspace-summary {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(10.75rem, 1fr);
    grid-template-columns: none;
    gap: 0.52rem;
    margin: 0;
    padding: 0.05rem 0.05rem 0.42rem;
    overflow-x: auto;
    overflow-y: hidden !important;
    scrollbar-width: thin;
}

.admin-page .enterprise-summary-grid article,
.admin-page .admin-workspace-summary > article {
    min-height: 4.65rem;
    padding: 0.62rem;
    border-color: color-mix(in srgb, var(--admin-accent) 18%, var(--panel-border));
    border-radius: 0.78rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--admin-accent) 5%, var(--panel-strong)), var(--panel));
}

.admin-page .enterprise-summary-grid article > span,
.admin-page .admin-workspace-summary > article > span {
    color: #fff;
    background: linear-gradient(145deg, var(--admin-accent), var(--admin-accent-strong));
    box-shadow: 0 0.35rem 0.8rem color-mix(in srgb, var(--admin-accent) 20%, transparent);
}

.admin-page .admin-token-guidance ul {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.admin-page .admin-token-guidance li {
    position: relative;
    padding: 0.48rem 0.55rem 0.48rem 1.85rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.64rem;
    color: var(--text-soft);
    background: var(--panel);
    font-size: 0.71rem;
}

.admin-page .admin-token-guidance li::before {
    position: absolute;
    top: 0.53rem;
    left: 0.62rem;
    display: grid;
    width: 0.82rem;
    height: 0.82rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--admin-accent);
    content: "✓";
    font-size: 0.55rem;
    font-weight: 900;
}

.admin-page--rules .servicenow-performance-policy,
.admin-page--rules .servicenow-rule {
    border-color: color-mix(in srgb, var(--admin-accent) 24%, var(--panel-border));
    background: color-mix(in srgb, var(--admin-accent) 4%, var(--panel));
}

.admin-page--rules .servicenow-rule {
    border-left: 0.2rem solid var(--admin-accent);
}

.jira-policy-card {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
    border-color: color-mix(in srgb, #818cf8 34%, var(--panel-border));
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, #818cf8 9%, transparent), transparent 22rem),
        var(--surface-raised);
}

.jira-policy-card__head {
    align-items: flex-start;
}

.jira-policy-card__head .muted-copy {
    max-width: 64rem;
    margin: 0.25rem 0 0;
}

.jira-policy-formula {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, #818cf8 34%, var(--panel-border));
    border-radius: 0.85rem;
    background: color-mix(in srgb, #818cf8 7%, var(--panel));
}

.jira-policy-formula > span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 0.75rem;
    color: #a5b4fc;
    background: color-mix(in srgb, #818cf8 16%, var(--panel-strong));
}

.jira-policy-formula svg {
    width: 1.15rem;
    height: 1.15rem;
}

.jira-policy-formula > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.jira-policy-formula code {
    width: fit-content;
    max-width: 100%;
    color: #c7d2fe;
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.jira-policy-formula small,
.jira-policy-group p,
.jira-policy-field small {
    color: var(--text-muted);
    font-size: 0.69rem;
    line-height: 1.4;
}

.jira-policy-editor {
    display: grid;
    gap: 0.75rem;
}

.jira-policy-editor__identity {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) auto;
    align-items: end;
    gap: 0.65rem;
}

.jira-policy-editor__identity > label,
.jira-policy-editor__footer > label {
    display: grid;
    gap: 0.32rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.jira-policy-editor__identity > div {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.12rem 0.45rem;
    min-width: 8rem;
    padding: 0.55rem 0.72rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.72rem;
    background: var(--panel);
}

.jira-policy-editor__identity > div small {
    grid-column: 1 / -1;
    color: var(--text-muted);
}

.jira-policy-editor__identity > div strong {
    color: #a5b4fc;
}

.jira-policy-editor__identity > div span {
    color: var(--text-soft);
    font-size: 0.7rem;
}

.jira-policy-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.jira-policy-group {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--panel-strong) 92%, #818cf8 8%);
}

.jira-policy-group > header {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
}

.jira-policy-group > header > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 0.62rem;
    color: #a5b4fc;
    background: color-mix(in srgb, #818cf8 15%, var(--panel));
}

.jira-policy-group > header svg {
    width: 1rem;
    height: 1rem;
}

.jira-policy-group h4,
.jira-policy-group p {
    margin: 0;
}

.jira-policy-group__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
}

.jira-policy-field {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    min-width: 0;
    color: var(--text-soft);
    font-size: 0.69rem;
    font-weight: 750;
}

.jira-policy-field--wide {
    grid-column: 1 / -1;
}

.jira-policy-field__control {
    position: relative;
    display: block;
}

.jira-policy-field__control input,
.jira-policy-field > input {
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
}

.jira-policy-field__control input {
    padding: 0.45rem 5.8rem 0.45rem 0.65rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.62rem;
    color: var(--text);
    background: var(--panel);
    font: inherit;
}

.jira-policy-field__control em {
    position: absolute;
    top: 50%;
    right: 0.55rem;
    max-width: 5rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-style: normal;
    text-align: right;
    pointer-events: none;
}

.jira-policy-editor__footer {
    display: grid;
    grid-template-columns: auto minmax(16rem, 1fr) auto;
    align-items: end;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, #818cf8 28%, var(--panel-border));
    border-radius: 0.85rem;
    background: var(--panel);
}

.jira-policy-totals {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    align-self: center;
    flex-wrap: wrap;
}

.jira-policy-editor__footer textarea {
    width: 100%;
    min-height: 3.6rem;
    resize: vertical;
    padding: 0.58rem 0.68rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.65rem;
    color: var(--text);
    background: var(--surface);
    font: inherit;
}

.jira-policy-history {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.jira-policy-history h4 {
    margin: 0;
}

.jira-policy-history > .table-wrap {
    max-height: 20rem;
}

.jira-policy-history table {
    min-width: 58rem;
}

@media (max-width: 72rem) {
    .jira-policy-grid,
    .jira-policy-editor__footer {
        grid-template-columns: minmax(0, 1fr);
    }

    .jira-policy-editor__footer .toolbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 42rem) {
    .jira-policy-editor__identity,
    .jira-policy-group__fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .jira-policy-field--wide {
        grid-column: auto;
    }
}

.admin-page--compliance #tabbedDatasetMount > .table-shell {
    margin: 0;
    box-shadow: none;
}

.admin-page--audit .date-range {
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 18%, var(--panel-border));
    border-radius: 0.72rem;
    background: var(--panel);
}

/* Administrator sidebar: distinct, readable icons in both themes. */
.sidebar .nav-group[data-nav-group="admin"] .nav-group__toggle {
    border-color: color-mix(in srgb, #34d399 28%, var(--panel-border));
}

.sidebar .nav-group[data-nav-group="admin"] .nav-group__items {
    border-left-color: color-mix(in srgb, #34d399 25%, var(--panel-border));
}

.sidebar .nav-group[data-nav-group="admin"] .nav-link--child {
    border: 1px solid transparent;
    background: linear-gradient(90deg, color-mix(in srgb, var(--nav-accent) 4%, var(--panel)), var(--panel));
}

.sidebar .nav-group[data-nav-group="admin"] .nav-link--child .nav-link__icon {
    color: var(--nav-accent);
    border: 1px solid color-mix(in srgb, var(--nav-accent) 24%, var(--panel-border));
    background: color-mix(in srgb, var(--nav-accent) 11%, var(--panel-strong));
    box-shadow: 0 0.35rem 0.85rem color-mix(in srgb, var(--nav-accent) 12%, transparent);
}

.sidebar .nav-group[data-nav-group="admin"] .nav-link--child:hover {
    border-color: color-mix(in srgb, var(--nav-accent) 28%, var(--panel-border));
    transform: translateX(0.1rem);
}

.sidebar .nav-group[data-nav-group="admin"] .nav-link--child.active {
    border-color: color-mix(in srgb, var(--nav-accent) 52%, var(--panel-border));
    background: linear-gradient(90deg, color-mix(in srgb, var(--nav-accent) 14%, var(--panel)), var(--panel));
    box-shadow: inset 0.2rem 0 0 var(--nav-accent);
}

.sidebar .nav-group[data-nav-group="admin"] .nav-link--child.active .nav-link__icon {
    color: #fff;
    background: linear-gradient(145deg, var(--nav-accent), color-mix(in srgb, var(--nav-accent) 72%, #111827));
}

.sidebar .nav-group[data-nav-group="super_admin"] .nav-group__toggle {
    border-color: color-mix(in srgb, #f59e0b 42%, var(--panel-border));
    background: linear-gradient(110deg, color-mix(in srgb, #f59e0b 9%, var(--panel)), var(--panel));
}

.sidebar .nav-group[data-nav-group="super_admin"] .nav-group__items {
    border-left-color: color-mix(in srgb, #f59e0b 38%, var(--panel-border));
}

.sidebar .nav-group[data-nav-group="super_admin"] .nav-link--child {
    border: 1px solid color-mix(in srgb, var(--nav-accent) 12%, var(--panel-border));
    background: linear-gradient(90deg, color-mix(in srgb, var(--nav-accent) 6%, var(--panel)), var(--panel));
}

.sidebar .nav-group[data-nav-group="super_admin"] .nav-link--child .nav-link__icon {
    color: var(--nav-accent);
    border: 1px solid color-mix(in srgb, var(--nav-accent) 30%, var(--panel-border));
    background: color-mix(in srgb, var(--nav-accent) 13%, var(--panel-strong));
}

.sidebar .nav-group[data-nav-group="super_admin"] .nav-link--child:hover,
.sidebar .nav-group[data-nav-group="super_admin"] .nav-link--child.active {
    border-color: color-mix(in srgb, var(--nav-accent) 54%, var(--panel-border));
    box-shadow: inset 0.2rem 0 0 var(--nav-accent);
}

.sidebar .nav-group[data-nav-group="super_admin"] .nav-link--child.active .nav-link__icon {
    color: #fff;
    background: linear-gradient(145deg, var(--nav-accent), color-mix(in srgb, var(--nav-accent) 70%, #111827));
}

.super-admin-workspace {
    align-content: start;
}

.super-admin-summary-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(11rem, 1fr);
    gap: 0.55rem;
    padding: 0.05rem 0.05rem 0.4rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.super-admin-metric {
    position: relative;
    display: grid;
    min-height: 5rem;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: center;
    gap: 0.62rem;
    padding: 0.65rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 19%, var(--panel-border));
    border-radius: 0.78rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--admin-accent) 6%, var(--panel-strong)), var(--panel));
}

.super-admin-metric::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.2rem;
    background: var(--admin-accent);
    content: "";
}

.super-admin-metric__icon {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: 0.68rem;
    color: #fff;
    background: linear-gradient(145deg, var(--admin-accent), var(--admin-accent-strong));
}

.super-admin-metric__icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.super-admin-metric div {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.super-admin-metric small,
.super-admin-metric em {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 0.65rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.super-admin-metric strong {
    color: var(--text);
    font-size: 1.18rem;
    line-height: 1.1;
}

.super-admin-section,
.super-admin-policy-editor {
    display: grid;
    gap: 0.72rem;
    padding: 0.8rem;
}

.super-admin-coverage-table,
.super-admin-object-table {
    overflow: auto;
    scrollbar-gutter: stable;
}

/* Keep the coverage count inline with its heading; an unconstrained SVG made
   this status badge expand the entire audit header and clip its count text. */
html[data-theme] body .super-admin-workspace .super-admin-audit-heading {
    align-items: center;
    flex-wrap: wrap;
    min-height: 0;
    gap: .35rem .75rem !important;
    margin: 0;
    padding-block: 0 !important;
}
html[data-theme] body .super-admin-audit-heading > div { min-width: 0; }
html[data-theme] body .super-admin-audit-heading > .super-admin-audit-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: .35rem;
    width: auto;
    min-width: 0;
    min-height: 0;
    padding: .25rem .5rem;
    font-size: .75rem;
    line-height: 1.25;
    white-space: nowrap;
}
html[data-theme] body .super-admin-audit-status > svg {
    display: block;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    max-width: 1rem;
    max-height: 1rem;
    flex: 0 0 1rem;
}

.super-admin-coverage-table {
    max-height: 23rem;
}

.super-admin-object-table {
    max-height: min(38rem, 66vh);
}

.super-admin-coverage-table thead,
.super-admin-object-table thead {
    position: sticky;
    top: 0;
    z-index: 3;
}

.super-admin-coverage-table td small,
.super-admin-object-table td small {
    display: block;
    max-width: 32rem;
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.63rem;
    line-height: 1.4;
}

.super-admin-object-table tr.requires-review {
    background: color-mix(in srgb, #f59e0b 5%, var(--panel));
}

.super-admin-capability {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    color: var(--text-muted);
    font-size: 0.66rem;
    white-space: nowrap;
}

.super-admin-capability + .super-admin-capability {
    margin-top: 0.24rem;
}

.super-admin-capability svg {
    width: 0.82rem;
    height: 0.82rem;
}

.super-admin-capability.is-enabled {
    color: var(--success);
}

.super-admin-filterbar {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 0.34fr) minmax(10rem, 0.34fr) auto;
    align-items: end;
    gap: 0.55rem;
    padding: 0.62rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 18%, var(--panel-border));
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--admin-accent) 4%, var(--panel-strong));
}

.super-admin-filterbar label,
.super-admin-policy-form label {
    display: grid;
    min-width: 0;
    gap: 0.28rem;
    color: var(--text-soft);
    font-size: 0.66rem;
    font-weight: 750;
}

.super-admin-filterbar :is(input, select),
.super-admin-policy-form :is(select, textarea) {
    width: 100%;
    min-height: 2.45rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.62rem;
    color: var(--text);
    background: var(--panel);
}

.super-admin-policy-editor {
    border-color: color-mix(in srgb, var(--admin-accent) 38%, var(--panel-border)) !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--admin-accent) 8%, var(--panel)), var(--panel));
}

.super-admin-policy-editor.is-empty {
    grid-template-columns: 2.7rem minmax(0, 1fr);
    align-items: center;
}

.super-admin-policy-editor__icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border-radius: 0.7rem;
    color: var(--admin-accent);
    background: color-mix(in srgb, var(--admin-accent) 13%, var(--panel-strong));
}

.super-admin-policy-editor__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.super-admin-policy-editor h3,
.super-admin-policy-editor p {
    margin: 0;
}

.super-admin-policy-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(10rem, 1fr));
    align-items: end;
    gap: 0.62rem;
}

.super-admin-policy-form .checkbox-field {
    display: flex;
    min-height: 2.45rem;
    align-items: center;
    gap: 0.48rem;
    padding: 0.55rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.62rem;
    background: var(--panel);
}

.super-admin-policy-form .checkbox-field input {
    width: 1rem;
    height: 1rem;
}

.super-admin-policy-form__rationale,
.super-admin-policy-form .toolbar-actions {
    grid-column: 1 / -1;
}

.super-admin-policy-form textarea {
    min-height: 4.6rem;
    padding: 0.62rem;
    resize: vertical;
}

@container (max-width: 54rem) {
    .super-admin-filterbar,
    .super-admin-policy-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (max-width: 34rem) {
    .super-admin-filterbar,
    .super-admin-policy-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .super-admin-policy-form__rationale,
    .super-admin-policy-form .toolbar-actions {
        grid-column: auto;
    }
}

@container (max-width: 48rem) {
    .admin-page-hero {
        grid-template-columns: 2.85rem minmax(0, 1fr);
        align-items: start;
    }

    .admin-page-hero__icon {
        width: 2.85rem;
        height: 2.85rem;
        border-radius: 0.78rem;
    }

    .admin-page-hero__actions {
        grid-column: 1 / -1;
        max-width: none;
        justify-content: flex-start;
        padding-left: 3.65rem;
    }
}

@container (max-width: 32rem) {
    .admin-page {
        gap: 0.62rem;
        padding: 0.55rem;
    }

    .admin-page-hero {
        gap: 0.62rem;
        padding: 0.7rem;
    }

    .admin-page-hero__copy .eyebrow span:last-child,
    .admin-page-hero__copy .eyebrow i:last-of-type {
        display: none;
    }

    .admin-page-hero__copy > p:last-child {
        font-size: 0.68rem;
    }

    .admin-page-hero__actions {
        padding-left: 0;
    }

    .admin-page-hero__actions > * {
        flex: 1 1 auto;
        justify-content: center;
    }

    .admin-page .enterprise-summary-grid,
    .admin-page .admin-workspace-summary {
        grid-auto-columns: minmax(9.8rem, 78vw);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar .nav-group[data-nav-group="admin"] .nav-link--child {
        transition: none;
    }
}

/* Tenant and user AI allowance tracking. */
.enterprise-admin-workspace,
.enterprise-admin-section {
    min-width: 0;
}

.enterprise-admin-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    gap: 0.8rem;
    overflow: hidden;
}

/* Enterprise administration uses the long-page shell. That shell normally
   restores visible overflow on top-level cards, which must not expose a wide
   managed table's intrinsic width to the document. Keep each table available
   through its own horizontal scroller while containing the page itself. */
.app-shell.app-shell--page-flow .content-stage > .enterprise-admin-workspace {
    overflow: hidden;
}

.enterprise-admin-workspace > *,
.enterprise-admin-workspace .dashboard-grid,
.enterprise-admin-workspace .table-wrap {
    min-width: 0;
    max-width: 100%;
}

.enterprise-admin-workspace .table-wrap {
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
}

.enterprise-admin-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.enterprise-admin-hero h3 {
    margin: 0.12rem 0 0.24rem;
}

.enterprise-admin-hero .toolbar-actions {
    flex: 0 0 auto;
}

.enterprise-summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
}

.enterprise-summary-grid article {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.enterprise-summary-grid article > span {
    display: grid;
    place-items: center;
    flex: 0 0 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.enterprise-summary-grid svg {
    width: 1rem;
    height: 1rem;
}

.enterprise-summary-grid small,
.enterprise-summary-grid strong {
    display: block;
}

.enterprise-summary-grid small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.enterprise-summary-grid strong {
    margin-top: 0.12rem;
    font-size: 1.05rem;
}

.enterprise-admin-section {
    padding: 0.8rem;
}

.enterprise-user-access__tenant {
    display: grid;
    gap: 0.28rem;
    min-width: 13rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.enterprise-user-access__tenant select {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.45rem 2rem 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.65rem;
    color: var(--text);
    background: var(--panel);
}

.enterprise-user-access__table {
    max-height: 30rem;
}

.enterprise-user-access__table table {
    min-width: 76rem;
}

.enterprise-user-access__table td > small {
    display: block;
    max-width: 18rem;
    margin-top: 0.22rem;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.enterprise-user-access__table td > strong {
    display: block;
}

.enterprise-user-access__table .status-pill svg {
    width: 0.78rem;
    height: 0.78rem;
}

.enterprise-usage-table {
    max-height: 24rem;
}

.enterprise-usage-table td:first-child strong,
.enterprise-usage-table td:first-child small,
.enterprise-raci-table td:first-child strong,
.enterprise-raci-table td:first-child small {
    display: block;
}

.enterprise-usage-table td:first-child small,
.enterprise-raci-table td:first-child small {
    margin-top: 0.12rem;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.enterprise-usage-cell {
    display: grid;
    gap: 0.28rem;
    min-width: 11rem;
}

.enterprise-usage-cell > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.enterprise-usage-cell span,
.enterprise-usage-cell em {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-style: normal;
}

.enterprise-usage-cell em {
    margin-left: auto;
    color: var(--accent);
}

.enterprise-usage-meter,
.account-usage-meter {
    position: relative;
    height: 0.42rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
}

.enterprise-usage-meter > span,
.account-usage-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2f80ed, #00bceb);
}

.enterprise-usage-meter.is-exceeded > span {
    background: linear-gradient(90deg, #f59e0b, #ef4444);
}

.enterprise-admin-tabs {
    align-items: stretch;
}

.enterprise-admin-tabs .dataset-tab {
    gap: 0.38rem;
}

.enterprise-admin-tabs .dataset-tab em {
    display: inline-grid;
    min-width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    padding: 0 0.3rem;
    border-radius: 999px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--admin-accent) 9%, var(--panel));
    font-size: 0.62rem;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.enterprise-admin-tabs .dataset-tab.active em {
    color: var(--admin-accent-strong);
    background: color-mix(in srgb, var(--admin-accent) 17%, var(--panel));
}

.enterprise-admin-workspace .enterprise-usage-count {
    flex: 0 0 auto;
    white-space: nowrap;
}

.enterprise-admin-workspace .enterprise-usage-count svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.enterprise-admin-workspace .chart-card__head > .status-pill svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.enterprise-report-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.4rem;
    vertical-align: middle;
}

.enterprise-report-heading-icon svg {
    width: 1rem;
    height: 1rem;
}

.enterprise-admin-workspace .enterprise-governance-editor:not(.is-open) {
    display: none;
}

.enterprise-governance-editor__close {
    margin-left: auto;
}

.enterprise-admin-workspace table tbody tr[data-enterprise-detail-ready] {
    cursor: pointer;
}

.enterprise-admin-workspace table tbody tr[data-enterprise-detail-ready]:focus-visible {
    outline: 2px solid var(--admin-accent);
    outline-offset: -2px;
}

.enterprise-row-dialog {
    width: min(44rem, calc(100vw - 2rem));
    max-height: min(80vh, 50rem);
    padding: 0;
    overflow: auto;
    border: 1px solid var(--panel-border);
    border-radius: 1rem;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}

.enterprise-row-dialog::backdrop {
    background: rgba(0, 0, 0, 0.62);
}

.enterprise-row-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    padding: 1.2rem 1.4rem;
    border-bottom: 1px solid var(--panel-border);
    background: var(--panel);
}

.enterprise-row-dialog__head h3 {
    margin: 0.2rem 0 0;
}

.enterprise-row-dialog__fields {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0.4rem 1.4rem 1.4rem;
}

.enterprise-row-dialog__fields > div {
    display: grid;
    grid-template-columns: minmax(9rem, 32%) minmax(0, 1fr);
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--panel-border);
}

.enterprise-row-dialog__fields dt {
    color: var(--text-muted);
    font-weight: 700;
}

.enterprise-row-dialog__fields dd {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

@media (max-width: 36rem) {
    .enterprise-row-dialog__fields > div { grid-template-columns: 1fr; gap: 0.2rem; }
}

.enterprise-governance-shell,
.enterprise-governance-stack {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
}

.enterprise-governance-banner {
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 26%, var(--panel-border));
    border-radius: 0.85rem;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--admin-accent) 8%, var(--panel)), var(--panel));
}

.enterprise-governance-banner > span:first-child {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border-radius: 0.72rem;
    color: #fff;
    background: linear-gradient(145deg, var(--admin-accent), var(--admin-accent-strong));
}

.enterprise-governance-banner > span:first-child svg {
    width: 1.25rem;
    height: 1.25rem;
}

.enterprise-governance-banner h3,
.enterprise-governance-banner p {
    margin: 0;
}

.enterprise-governance-banner .eyebrow {
    margin-bottom: 0.12rem;
    color: var(--admin-accent);
}

.enterprise-governance-banner h3 {
    font-size: 1rem;
}

.enterprise-governance-banner h3 + p {
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.enterprise-governance-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(11rem, 1fr)) minmax(12rem, 1fr) auto;
    align-items: end;
    gap: 0.55rem;
}

.enterprise-governance-scope__context {
    display: grid;
    align-content: center;
    min-height: 3.2rem;
    padding: 0.45rem 0.58rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 18%, var(--panel-border));
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--admin-accent) 4%, var(--panel));
}

.enterprise-governance-scope__context small,
.enterprise-governance-scope__context strong,
.enterprise-governance-scope__context span {
    display: block;
}

.enterprise-governance-scope__context small {
    color: var(--text-muted);
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.enterprise-governance-scope__context strong {
    margin-top: 0.08rem;
    font-size: 0.75rem;
}

.enterprise-governance-scope__context span {
    margin-top: 0.08rem;
    color: var(--text-muted);
    font-size: 0.65rem;
}

.enterprise-governance-summary {
    display: grid;
    grid-template-columns: repeat(7, minmax(7.8rem, 1fr));
    gap: 0.48rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
}

.enterprise-governance-summary article {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    align-items: center;
    gap: 0.52rem;
    min-width: 7.8rem;
    padding: 0.58rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.7rem;
    background: color-mix(in srgb, var(--admin-accent) 3%, var(--panel));
}

.enterprise-governance-summary article > span {
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border-radius: 0.58rem;
    color: var(--admin-accent);
    background: color-mix(in srgb, var(--admin-accent) 11%, transparent);
}

.enterprise-governance-summary svg {
    width: 0.9rem;
    height: 0.9rem;
}

.enterprise-governance-summary small,
.enterprise-governance-summary strong {
    display: block;
}

.enterprise-governance-summary small {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-governance-summary strong {
    margin-top: 0.08rem;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.enterprise-governance-section,
.enterprise-governance-editor {
    min-width: 0;
    padding: 0.8rem;
}

.enterprise-governance-section .chart-card__head,
.enterprise-governance-editor .chart-card__head {
    align-items: flex-start;
}

.enterprise-governance-editor .chart-card__head > svg {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    color: var(--admin-accent);
}

.enterprise-governance-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
    min-width: 0;
}

.enterprise-governance-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.58rem;
    margin-top: 0.68rem;
}

.enterprise-governance-form--wide {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.enterprise-governance-form label {
    display: grid;
    align-content: start;
    gap: 0.28rem;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.enterprise-governance-form :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.enterprise-governance-form textarea {
    resize: vertical;
}

.enterprise-governance-form label > small {
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 500;
    line-height: 1.35;
}

.enterprise-governance-form__wide {
    grid-column: 1 / -1;
}

.enterprise-governance-form .checkbox-field {
    display: flex;
    min-height: 2.3rem;
    align-items: center;
}

.enterprise-governance-form .checkbox-field input {
    width: auto;
}

.enterprise-governance-form .toolbar-actions {
    align-self: end;
    justify-content: flex-end;
}

.enterprise-governance-table {
    max-height: min(30rem, 62vh);
    overflow: auto;
}

.enterprise-governance-table table {
    min-width: 48rem;
}

.enterprise-governance-table td > strong,
.enterprise-governance-table td > small {
    display: block;
}

.enterprise-governance-table td > small {
    margin-top: 0.12rem;
    color: var(--text-muted);
    font-size: 0.66rem;
}

.enterprise-governance-table code,
.enterprise-governance-value {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 0.68rem;
}

.enterprise-governance-row-action {
    min-height: 1.9rem;
    padding: 0.3rem 0.48rem;
    font-size: 0.66rem;
    white-space: nowrap;
}

.enterprise-governance-value {
    display: inline-block;
    max-width: 20rem;
    overflow-wrap: anywhere;
    white-space: normal;
}

.enterprise-governance-empty {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.22rem;
    text-align: center;
}

.enterprise-governance-empty span {
    max-width: 38rem;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.enterprise-policy-source {
    width: max-content;
    white-space: nowrap;
}

.enterprise-policy-source--provider {
    color: #9a3412;
    border-color: color-mix(in srgb, #f97316 42%, var(--panel-border));
    background: color-mix(in srgb, #f97316 11%, var(--panel));
}

.enterprise-policy-source--provider-default {
    color: #854d0e;
    border-color: color-mix(in srgb, #eab308 38%, var(--panel-border));
    background: color-mix(in srgb, #eab308 9%, var(--panel));
}

.enterprise-policy-source--plan {
    color: #5b21b6;
    border-color: color-mix(in srgb, #8b5cf6 42%, var(--panel-border));
    background: color-mix(in srgb, #8b5cf6 11%, var(--panel));
}

.enterprise-policy-source--tenant {
    color: #1d4ed8;
    border-color: color-mix(in srgb, #3b82f6 42%, var(--panel-border));
    background: color-mix(in srgb, #3b82f6 11%, var(--panel));
}

.enterprise-policy-source--customer {
    color: #0f766e;
    border-color: color-mix(in srgb, #14b8a6 42%, var(--panel-border));
    background: color-mix(in srgb, #14b8a6 11%, var(--panel));
}

.enterprise-policy-hash {
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.62rem;
    margin: 0.7rem 0;
    padding: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--success) 32%, var(--panel-border));
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--success) 5%, var(--panel));
}

.enterprise-policy-hash > span {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border-radius: 0.62rem;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.enterprise-policy-hash small,
.enterprise-policy-hash code {
    display: block;
}

.enterprise-policy-hash small {
    color: var(--text-muted);
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.enterprise-policy-hash code {
    overflow: hidden;
    margin-top: 0.08rem;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.enterprise-policy-hash em {
    color: var(--text-muted);
    font-size: 0.67rem;
    font-style: normal;
}

@media (max-width: 72rem) {
    .enterprise-governance-scope {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .enterprise-governance-summary {
        grid-template-columns: repeat(3, minmax(8.5rem, 1fr));
    }
}

@media (max-width: 54rem) {
    .enterprise-governance-editor-grid,
    .enterprise-governance-form--wide {
        grid-template-columns: minmax(0, 1fr);
    }

    .enterprise-governance-banner {
        grid-template-columns: 2.65rem minmax(0, 1fr);
    }

    .enterprise-governance-banner > .status-pill {
        grid-column: 2;
        justify-self: start;
    }

    .enterprise-policy-hash {
        grid-template-columns: 2.15rem minmax(0, 1fr);
    }

    .enterprise-policy-hash em {
        grid-column: 2;
    }
}

@media (max-width: 38rem) {
    .enterprise-governance-scope,
    .enterprise-governance-form,
    .enterprise-governance-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .enterprise-governance-scope .toolbar-button {
        width: 100%;
        justify-content: center;
    }
}

.account-usage-card {
    grid-column: 1 / -1;
}

.account-usage-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.account-usage-summary > div,
.account-usage-periods > div {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
}

.account-usage-summary span,
.account-usage-periods span {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.account-usage-periods {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.65rem;
}

@media (max-width: 70rem) {
    .enterprise-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 48rem) {
    .enterprise-admin-hero {
        flex-direction: column;
    }

    .enterprise-summary-grid,
    .account-usage-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop application frame: the header is a real grid row, not an offset
   element inside the workspace.  This keeps it flush with the window top and
   puts both the navigation and page body directly beneath it. */
@media (min-width: 64.01rem) {
    .app-shell,
    .app-shell.sidebar-collapsed {
        display: grid;
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
        grid-template-rows: var(--agentic-full-header-height) minmax(0, 1fr);
        grid-template-areas:
            "header header"
            "sidebar workspace";
        min-height: 100dvh;
        height: 100dvh;
    }

    .app-shell.sidebar-collapsed {
        grid-template-columns: 5.3rem minmax(0, 1fr);
    }

    .topbar {
        grid-area: header;
        position: relative;
        inset: auto !important;
        z-index: 60;
        width: 100% !important;
        max-width: none;
        min-height: var(--agentic-full-header-height);
        height: var(--agentic-full-header-height);
        margin: 0;
        border-radius: 0;
        box-sizing: border-box;
    }

    .app-shell.sidebar-collapsed .topbar {
        left: auto;
    }

    .sidebar {
        grid-area: sidebar;
        top: auto;
        height: auto;
        min-height: 0;
        margin: 0;
        border-radius: 0;
        box-sizing: border-box;
        overflow-y: auto;
    }

    .workspace {
        grid-area: workspace;
        height: auto;
        min-height: 0;
        padding: 1.1rem;
        box-sizing: border-box;
        overflow: auto;
    }
}

/* Enterprise sign-in lockout and administrator account controls. */
.login-lockout-countdown {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.72rem;
    margin-top: 0.72rem;
    padding-top: 0.72rem;
    border-top: 1px solid color-mix(in srgb, var(--danger) 36%, transparent);
}

.login-lockout-countdown__icon {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--danger) 16%, var(--surface-strong));
    color: var(--danger);
    font-size: 1.15rem;
}

.login-lockout-countdown > div {
    display: grid;
    gap: 0.18rem;
}

.login-lockout-countdown strong,
.login-lockout-countdown small {
    color: inherit;
}

.login-lockout-countdown [data-lockout-countdown],
.enterprise-user-lockout [data-account-lock-countdown] {
    color: var(--danger);
    font-variant-numeric: tabular-nums;
}

.login-lockout-countdown.is-expired [data-lockout-countdown] {
    color: var(--success);
}

.enterprise-user-lockout {
    display: grid;
    gap: 0.16rem;
    margin-top: 0.28rem;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.enterprise-user-access__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.42rem;
}

.enterprise-user-access__actions .toolbar-button {
    min-height: 2rem;
    padding: 0.35rem 0.62rem;
    white-space: nowrap;
}

.enterprise-user-drawer {
    position: fixed;
    z-index: 12000;
    inset: 0;
    display: flex;
    justify-content: flex-end;
}
.enterprise-user-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(3 8 20 / 56%);
    backdrop-filter: blur(3px);
}
.enterprise-user-drawer__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(64rem, 100vw);
    height: 100dvh;
    overflow: auto;
    border-left: 1px solid var(--panel-border);
    border-radius: 1rem 0 0 1rem;
    background: var(--panel-strong);
    color: var(--text);
    box-shadow: -1rem 0 3rem rgb(0 0 0 / 25%);
}
.enterprise-user-drawer__head {
    position: sticky;
    z-index: 1;
    top: 0;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid var(--panel-border);
    background: var(--panel-strong);
}
.enterprise-user-drawer__head h3 { margin: 0.16rem 0; font-size: 1.28rem; }
.enterprise-user-drawer__head p { margin: 0; color: var(--text-muted); }
.enterprise-user-drawer__form { display: grid; grid-template-columns: minmax(0,1fr); gap: .8rem; padding: 1rem 1.25rem; min-width: 0; }
.enterprise-user-drawer__form > *, [data-create-rights], [data-create-roles], [data-enterprise-effective-rights], [data-enterprise-role-editor] { min-width: 0; }
.enterprise-user-drawer__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; color: var(--text-muted); font-size: 0.75rem; }
.enterprise-user-drawer__form fieldset {
    display: grid;
    gap: 0.55rem;
    min-width: 0;
    margin: 0;
    padding: 0.9rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.85rem;
}
.enterprise-user-drawer__form legend { padding: 0 0.35rem; color: var(--text); font-weight: 750; }
.enterprise-user-drawer__form label:not(.checkbox-field) { display: grid; gap: 0.3rem; color: var(--text-muted); font-size: 0.76rem; font-weight: 650; }
.enterprise-user-drawer__form :is(input, select) {
    min-width: 0;
    min-height: 2.35rem;
    padding: 0.44rem 0.6rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.55rem;
    background: var(--panel);
    color: var(--text);
    font: inherit;
}
.enterprise-user-drawer__form input[type="checkbox"] { min-height: auto; }
.enterprise-user-drawer__form fieldset:disabled { opacity: 0.65; }
.enterprise-user-drawer__readout { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.7rem; color: var(--text-muted); font-size: 0.76rem; }
.enterprise-user-drawer__readout strong { color: var(--text); }
.enterprise-user-drawer__actions { display: flex; justify-content: flex-end; gap: 0.5rem; padding-top: 0.4rem; }
.enterprise-user-create-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: .5rem 0 1rem; }
.enterprise-user-create-toolbar p { flex: 1 1 18rem; margin: 0; }
.enterprise-user-create { width: min(60rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--panel-border); border-radius: 1rem; background: var(--panel-strong); color: var(--text); box-shadow: 0 1rem 4rem rgb(0 0 0 / 35%); }
.enterprise-user-create::backdrop { background: rgb(3 8 20 / 65%); backdrop-filter: blur(3px); }
.enterprise-user-create > header, .enterprise-user-create > footer { position: sticky; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .65rem; background: var(--panel-strong); padding: 1rem 1.25rem; }
.enterprise-user-create > header { top: 0; border-bottom: 1px solid var(--panel-border); }
.enterprise-user-create > footer { bottom: 0; border-top: 1px solid var(--panel-border); }
.enterprise-user-create h3, .enterprise-user-create h4 { margin: .2rem 0 .6rem; }
.enterprise-user-create summary { cursor: pointer; padding: .65rem 0; }
.enterprise-user-create textarea { resize: vertical; min-width: 0; max-width: 100%; padding: .7rem; border: 1px solid var(--panel-border); border-radius: .6rem; color: var(--text); background: var(--panel); font: .85rem ui-monospace,monospace; }
.enterprise-user-create__preview { padding: 0 1.25rem 1rem; overflow-wrap: anywhere; }
.enterprise-user-create__preview:empty { display: none; }
.enterprise-user-create [role="alert"] { color: var(--danger, #d65768); }
.enterprise-privileges { min-width: 0; }
.enterprise-privileges h4 { display: flex; align-items: center; gap: .4rem; margin: .6rem 0; }
.enterprise-privileges p { margin: .3rem 0; font-size: .82rem; }
.enterprise-privileges code, .enterprise-privileges small { font-size: .75rem; color: var(--text-muted); }
.enterprise-user-create .checkbox-field { display: flex; align-items: start; gap: .5rem; margin: .5rem 0; }
.enterprise-user-create .checkbox-field small { display: block; color: var(--text-muted); }
.enterprise-user-create button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.enterprise-user-create [hidden] { display: none !important; }
/* All icons in these overlays are UI glyphs, never fluid illustrations.
   Dialogs live outside #appContent, so workspace-only SVG sizing is insufficient. */
:is(.enterprise-user-create, .enterprise-user-drawer, .enterprise-privileges) svg {
    width: 1.1rem; height: 1.1rem; min-width: 1.1rem; max-width: 1.1rem; max-height: 1.1rem;
    flex: 0 0 1.1rem; vertical-align: middle; display: inline-block;
}
:is(.enterprise-user-create, .enterprise-user-drawer) { font-size: .86rem; line-height: 1.45; }
:is(.enterprise-user-create, .enterprise-user-drawer) :is(.eyebrow, .muted-copy) { font-size: .76rem; line-height: 1.45; }
:is(.enterprise-user-create, .enterprise-user-drawer) .eyebrow { margin: 0; }
:is(.enterprise-user-create, .enterprise-user-drawer) .status-pill { width: fit-content; max-width: 100%; font-size: .72rem; padding: .2rem .5rem; }
:is(.enterprise-user-create, .enterprise-user-drawer) :is(.toolbar-button, .primary-button) { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.2rem; padding: .45rem .7rem; font-size: .78rem; white-space: normal; }
:is(.enterprise-user-create, .enterprise-user-drawer) .toolbar-button { background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); box-shadow: none; }
:is(.enterprise-user-create, .enterprise-user-drawer) .toolbar-button.danger { color: var(--danger, #d65768); }
:is(.enterprise-user-create, .enterprise-user-drawer) .status-pill.success { color: #4f9877; background: rgb(69 157 111 / 12%); }
:is(.enterprise-user-create, .enterprise-user-drawer) .status-pill.danger { color: var(--danger, #d65768); background: rgb(207 69 88 / 12%); }
:is(.enterprise-user-create, .enterprise-user-drawer) .status-pill.warning { color: var(--warning, #b67b24); background: rgb(204 151 42 / 12%); }
:is(.enterprise-user-create, .enterprise-user-drawer) .icon-button { flex: 0 0 2.2rem; width: 2.2rem; min-height: 2.2rem; height: 2.2rem; padding: .4rem; }
:is(.enterprise-user-create, .enterprise-user-drawer) [class*="head"] > .icon-button { margin-left: auto; }
:is(.enterprise-user-create, .enterprise-user-drawer) :is(input, select, textarea) { font-size: .82rem; }
:is(.enterprise-user-create, .enterprise-user-drawer) input[type="checkbox"] { width: 1rem; height: 1rem; min-width: 1rem; min-height: 1rem; margin: .15rem 0; padding: 0; flex: 0 0 1rem; }
:is(.enterprise-user-create, .enterprise-user-drawer) .checkbox-field { display: flex; align-items: center; gap: .5rem; font-size: .82rem; }
:is(.enterprise-user-create, .enterprise-user-drawer) :focus-visible { outline: 2px solid var(--accent, #728bff); outline-offset: 2px; }
.enterprise-user-heading { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.enterprise-user-emblem { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; border-radius: .7rem; color: var(--accent, #728bff); background: var(--panel); border: 1px solid var(--panel-border); }
.enterprise-user-profile-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .8rem; align-items: start; }
.enterprise-user-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
.enterprise-user-fields label:has(input[name="email"]) { grid-column: 1 / -1; }
.enterprise-user-quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-bottom: .6rem; border-bottom: 1px solid var(--panel-border); }
.enterprise-user-section-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; }
.enterprise-user-section-head h4 { margin: .3rem 0; display: flex; align-items: center; gap: .4rem; }
.enterprise-user-note { display: flex; align-items: start; gap: .5rem; padding: .6rem .75rem; margin: 0; border: 1px solid var(--panel-border); border-radius: .6rem; background: var(--panel); color: var(--text-muted); font-size: .78rem; }
.enterprise-user-empty { padding: .6rem; margin: .3rem 0; color: var(--text-muted); border: 1px dashed var(--panel-border); border-radius: .5rem; }
.enterprise-access-table { overflow: auto; min-width: 0; max-width: 100%; max-height: 17rem; border: 1px solid var(--panel-border); border-radius: .6rem; margin: .4rem 0; background: var(--panel); }
.enterprise-access-table table { width: 100%; min-width: 32rem; border-collapse: collapse; table-layout: auto; font-size: .78rem; }
.enterprise-access-table :is(th,td) { padding: .5rem .65rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--panel-border); white-space: normal; overflow-wrap: anywhere; }
.enterprise-access-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel-strong); color: var(--text-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; }
.enterprise-access-table td :is(code,small) { display: block; color: var(--text-muted); font-size: .7rem; background: transparent; }
.enterprise-access-table tbody tr:last-child td { border-bottom: 0; }
.enterprise-role-choices { max-height: 14rem; }
.enterprise-role-choices table { min-width: 24rem; }
.enterprise-role-choices th:first-child { width: 4rem; white-space: nowrap; }
.enterprise-role-add { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; align-items: end; gap: .5rem; margin: .75rem 0; }
.enterprise-user-help { border-top: 1px solid var(--panel-border); margin-top: .5rem; font-size: .78rem; color: var(--text-muted); }
.enterprise-user-help summary { cursor: pointer; padding: .5rem 0; color: var(--text); }
.enterprise-user-help p { margin: .25rem 0 .5rem; }
.enterprise-user-drawer__actions { position: sticky; bottom: -1rem; z-index: 2; background: var(--panel-strong); border-top: 1px solid var(--panel-border); margin: 0 -1.25rem -1rem; padding: .8rem 1.25rem; }
.enterprise-user-create > header { flex-wrap: nowrap; padding: .8rem 1.1rem; }
.enterprise-user-create > footer { padding: .7rem 1.1rem; justify-content: flex-end; }
.enterprise-user-create > footer [data-create-progress] { flex: 1 1 12rem; font-size: .75rem; }
.enterprise-user-create > footer [data-create-progress]:empty { display: none; }
.enterprise-user-drawer__head { align-items: center; padding: .8rem 1.1rem; }
@media (max-width: 45rem) {
    .enterprise-user-profile-grid { grid-template-columns: minmax(0,1fr); }
    .enterprise-role-add { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 30rem) {
    .enterprise-user-fields { grid-template-columns: minmax(0,1fr); }
    :is(.enterprise-user-create, .enterprise-user-drawer) .enterprise-user-drawer__form { padding: .75rem; }
    .enterprise-user-drawer__actions { bottom: -.75rem; margin: 0 -.75rem -.75rem; padding: .75rem; }
    .enterprise-user-emblem { display: none; }
}
@media (min-width: 40rem) { .enterprise-user-create__identity { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .enterprise-user-drawer__panel { border-radius: 0; } }

@media (max-width: 30rem) {
    .enterprise-summary-grid,
    .account-usage-summary {
        grid-template-columns: 1fr;
    }
}

.infra-ios-xe-picker,
.infra-ios-xe-build {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-picker__shell {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-picker__header {
    display: grid;
    gap: 0.8rem;
}

.infra-ios-xe-picker__field {
    display: grid;
    gap: 0.45rem;
}

.infra-ios-xe-picker__field--wide {
    grid-column: 1 / -1;
}

.infra-ios-xe-picker__actions {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.2rem;
    white-space: nowrap;
    scrollbar-width: thin;
}

.infra-ios-xe-picker__header > .infra-ios-xe-picker__actions {
    display: flex;
    align-items: center;
    min-width: 0;
}

.infra-ios-xe-picker__actions .toolbar-search {
    flex: 0 0 clamp(18rem, 24vw, 24rem);
    min-width: 18rem;
}

.infra-ios-xe-picker__actions > * {
    flex: 0 0 auto;
    white-space: nowrap;
}

.infra-ios-xe-picker__run-actions,
.infra-ios-xe-picker__floating-actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
    white-space: nowrap;
}

.infra-ios-xe-picker__run-button {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

.infra-ios-xe-picker__run-button-icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
}

.infra-ios-xe-picker__run-button-icon svg {
    width: 1rem;
    height: 1rem;
}

.infra-ios-xe-picker__toggle.is-active {
    background: rgba(29, 138, 88, 0.12);
    border-color: rgba(29, 138, 88, 0.28);
    color: var(--success);
}

.infra-ios-xe-picker__search-note {
    margin-top: -0.35rem;
}

.infra-ios-xe-picker__checkline {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.infra-ios-xe-picker__credential-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.85rem;
}

.infra-ios-xe-picker__command-row,
.infra-ios-xe-picker__countline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.infra-ios-xe-picker__pager,
.infra-ios-xe-picker__pager-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.infra-ios-xe-picker__table-wrap {
    max-height: 30rem;
}

.infra-ios-xe-picker__floating-run {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 255, 0.98));
    box-shadow: 0 -14px 30px rgba(15, 23, 42, 0.06);
}

.infra-ios-xe-picker__floating-meta,
.infra-ios-xe-picker__floating-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.infra-ios-xe-picker__table {
    width: 100%;
    min-width: 72rem;
    table-layout: fixed;
}

.infra-ios-xe-picker__th {
    position: relative;
    user-select: none;
    white-space: nowrap;
}

.infra-ios-xe-picker__th[data-infra-hld-sort] {
    cursor: pointer;
}

.infra-ios-xe-picker__resize {
    position: absolute;
    top: 0;
    right: 0;
    width: 0.75rem;
    height: 100%;
    cursor: col-resize;
}

.infra-ios-xe-picker__resize::after {
    content: "";
    position: absolute;
    top: 22%;
    bottom: 22%;
    right: 0.2rem;
    width: 0.14rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.48);
}

.infra-ios-xe-picker__row {
    cursor: pointer;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.infra-ios-xe-picker__row.is-selected td {
    background: rgba(219, 234, 254, 0.48);
}

.infra-ios-xe-picker__row:hover td {
    background: rgba(239, 246, 255, 0.72);
}

.infra-ios-xe-picker__select-cell {
    width: 4.25rem;
    text-align: center;
}

.infra-ios-xe-picker__select-cell input {
    margin: 0;
}

.infra-ios-xe-picker__device-cell {
    display: grid;
    gap: 0.2rem;
    min-width: 15rem;
}

.infra-ios-xe-picker__device-cell strong {
    color: var(--text);
    word-break: break-word;
}

.infra-ios-xe-picker__device-cell small {
    color: var(--text-soft);
}

.infra-ios-xe-picker__list {
    display: grid;
    gap: 0.7rem;
    max-height: 28rem;
    overflow: auto;
    padding-right: 0.2rem;
}

.infra-ios-xe-picker__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    cursor: pointer;
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.infra-ios-xe-picker__item:hover,
.infra-ios-xe-picker__item.is-selected {
    border-color: rgba(59, 130, 246, 0.28);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(59, 130, 246, 0.08);
}

.infra-ios-xe-picker__item input {
    margin-top: 0.25rem;
}

.infra-ios-xe-picker__item-copy {
    display: grid;
    gap: 0.22rem;
}

.infra-ios-xe-picker__item-copy strong {
    color: var(--text);
    word-break: break-word;
}

.infra-ios-xe-picker__item-copy small,
.infra-ios-xe-picker__item-copy .muted-copy {
    color: var(--text-soft);
}

.infra-ios-xe-picker__textarea {
    width: 100%;
    min-height: 6.75rem;
    resize: vertical;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    font: 0.92rem/1.5 "Cascadia Code", "Consolas", monospace;
}

.infra-ios-xe-picker__textarea--tall {
    min-height: 14rem;
}

.infra-ios-xe-picker__textarea:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.36);
    box-shadow: 0 0 0 0.18rem rgba(59, 130, 246, 0.12);
}

.infra-ios-xe-picker__candidate-command-list {
    max-height: 24rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.25rem;
}

.infra-ios-xe-picker__candidate-command-list .detail-item {
    min-height: 4.35rem;
}

.infra-ios-xe-hld__identity-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.55rem;
}

.infra-ios-xe-build__hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(59, 130, 246, 0.18);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.82), rgba(248, 250, 252, 0.95));
}

.infra-ios-xe-build__copy {
    display: grid;
    gap: 0.25rem;
}

.infra-ios-xe-build__copy h3 {
    margin: 0;
    color: var(--text);
}

.infra-ios-xe-build__spinner {
    width: 4rem;
    height: 4rem;
    position: relative;
    display: grid;
    place-items: center;
}

.infra-ios-xe-build__spinner span {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 2px solid rgba(59, 130, 246, 0.22);
    animation: infra-ios-xe-build-pulse 1.9s ease-in-out infinite;
}

.infra-ios-xe-build__spinner span:nth-child(2) {
    inset: 0.45rem;
    animation-delay: 0.18s;
}

.infra-ios-xe-build__spinner span:nth-child(3) {
    inset: 0.9rem;
    animation-delay: 0.36s;
}

.infra-ios-xe-build__meter {
    height: 0.82rem;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(148, 163, 184, 0.18);
}

.infra-ios-xe-build__meter-bar {
    width: 8%;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #38bdf8, #2563eb);
    box-shadow: 0 0 18px rgba(37, 99, 235, 0.22);
    transition: width 180ms linear;
}

.infra-ios-xe-build__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--text);
}

.infra-ios-xe-build__status span {
    color: var(--text-soft);
    white-space: nowrap;
}

.infra-ios-xe-build__steps {
    display: grid;
    gap: 0.65rem;
}

.infra-ios-xe-build__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.72rem 0.85rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(255, 255, 255, 0.94);
    color: var(--text);
}

.infra-ios-xe-build__step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.infra-ios-xe-build__step-copy {
    min-width: 0;
}

.infra-ios-xe-build__step-state {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.infra-ios-xe-build__step.is-running {
    border-color: rgba(14, 165, 233, 0.28);
    background: rgba(239, 246, 255, 0.96);
}

.infra-ios-xe-build__step.is-complete {
    border-color: rgba(34, 197, 94, 0.26);
    background: rgba(240, 253, 244, 0.96);
}

.infra-ios-xe-build__step.is-running .infra-ios-xe-build__step-state {
    color: #0f6db1;
}

.infra-ios-xe-build__step.is-complete .infra-ios-xe-build__step-state {
    color: #166534;
}

.infra-ios-xe-build__step.is-complete .infra-ios-xe-build__step-state svg {
    width: 0.9rem;
    height: 0.9rem;
    color: currentColor;
}

.infra-ios-xe-build__step svg {
    width: 1rem;
    height: 1rem;
    color: #0f6db1;
}

@keyframes infra-ios-xe-build-pulse {
    0%, 100% {
        opacity: 0.28;
        transform: scale(0.98);
    }
    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

.infra-ios-xe-hld-launch__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.infra-ios-xe-hld-launch > .table-head {
    display: grid;
    grid-template-columns: minmax(24rem, 1fr) auto;
    align-items: start;
    gap: 1.1rem;
}

.infra-ios-xe-hld-launch .toolbar-actions {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0.7rem;
    min-width: max-content;
}

.infra-ios-xe-hld-launch__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.infra-ios-xe-hld-launch__button {
    --infra-ios-xe-action-bg: linear-gradient(135deg, #4f7ed8 0%, #66b7e4 100%);
    --infra-ios-xe-action-color: #fff;
    --infra-ios-xe-action-border: transparent;
    min-width: min(23rem, 100%);
    min-height: 4.65rem;
    padding: 0.9rem 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.8rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--infra-ios-xe-action-color);
    border: 1px solid var(--infra-ios-xe-action-border);
    background: var(--infra-ios-xe-action-bg);
    border-radius: 999px;
    box-shadow: 0 14px 26px rgba(14, 95, 170, 0.16), 0 4px 10px rgba(15, 23, 42, 0.08);
}

.infra-ios-xe-hld-launch__button--hld {
    --infra-ios-xe-action-bg: linear-gradient(135deg, #4e7ed6 0%, #66b6e3 100%);
}

.infra-ios-xe-hld-launch__button--automation {
    --infra-ios-xe-action-bg: linear-gradient(135deg, #3287ca 0%, #28c0d0 100%);
}

.infra-ios-xe-hld-launch__button--history {
    --infra-ios-xe-action-bg: #fff;
    --infra-ios-xe-action-color: #234577;
    --infra-ios-xe-action-border: rgba(147, 197, 253, 0.72);
}

.infra-ios-xe-hld-launch__button-icon,
.infra-ios-xe-hld-launch__fab {
    background:
        radial-gradient(circle at 35% 25%, rgba(134, 239, 172, 0.72), transparent 42%),
        linear-gradient(135deg, #45b9c6 0%, #8065ee 100%);
}

.infra-ios-xe-hld-launch__button-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.infra-ios-xe-hld-launch__button-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.infra-ios-xe-hld-launch__button:hover,
.infra-ios-xe-hld-launch__button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 32px rgba(14, 95, 170, 0.2), 0 6px 14px rgba(15, 23, 42, 0.1);
}

.infra-ios-xe-hld-launch__fab-stack {
    position: fixed;
    right: clamp(1rem, 2vw, 1.35rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 34;
    display: grid;
    gap: 0.65rem;
}

.infra-ios-xe-hld-launch__fab {
    width: 3.2rem;
    height: 3.2rem;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.infra-ios-xe-hld-launch__fab:hover,
.infra-ios-xe-hld-launch__fab:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 22px 40px rgba(15, 23, 42, 0.24);
}

.infra-ios-xe-hld-launch__fab svg {
    width: 1.3rem;
    height: 1.3rem;
}

.infra-ios-xe-hld-history {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-hld-history__filters {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(8rem, 10rem) repeat(2, minmax(10rem, 12rem)) auto auto;
    gap: 0.75rem;
    align-items: center;
}

.infra-ios-xe-hld-history__table td {
    vertical-align: top;
}

.infra-ios-xe-hld-history__actions {
    min-width: 13.5rem;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.infra-ios-xe-hld {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-hld__accordion {
    --infra-ios-xe-hld-accent-rgb: 14, 165, 233;
    border-radius: 1.2rem;
    border: 1px solid rgba(var(--infra-ios-xe-hld-accent-rgb), 0.2);
    background:
        linear-gradient(180deg, rgba(var(--infra-ios-xe-hld-accent-rgb), 0.08), rgba(var(--infra-ios-xe-hld-accent-rgb), 0.03)),
        rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.infra-ios-xe-hld__accordion--sky { --infra-ios-xe-hld-accent-rgb: 14, 165, 233; }
.infra-ios-xe-hld__accordion--mint { --infra-ios-xe-hld-accent-rgb: 16, 185, 129; }
.infra-ios-xe-hld__accordion--amber { --infra-ios-xe-hld-accent-rgb: 245, 158, 11; }
.infra-ios-xe-hld__accordion--rose { --infra-ios-xe-hld-accent-rgb: 244, 63, 94; }
.infra-ios-xe-hld__accordion--violet { --infra-ios-xe-hld-accent-rgb: 124, 58, 237; }
.infra-ios-xe-hld__accordion--ocean { --infra-ios-xe-hld-accent-rgb: 37, 99, 235; }

.infra-ios-xe-hld__accordion-summary {
    position: relative;
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    cursor: pointer;
    background:
        linear-gradient(135deg, rgba(var(--infra-ios-xe-hld-accent-rgb), 0.14), rgba(var(--infra-ios-xe-hld-accent-rgb), 0.05)),
        rgba(255, 255, 255, 0.84);
}

.infra-ios-xe-hld__accordion-summary::-webkit-details-marker {
    display: none;
}

.infra-ios-xe-hld__accordion-main {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    min-width: 0;
}

.infra-ios-xe-hld__accordion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.95rem;
    flex: 0 0 auto;
    background: rgba(var(--infra-ios-xe-hld-accent-rgb), 0.14);
    color: rgb(var(--infra-ios-xe-hld-accent-rgb));
    box-shadow: inset 0 0 0 1px rgba(var(--infra-ios-xe-hld-accent-rgb), 0.12);
}

.infra-ios-xe-hld__accordion-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.infra-ios-xe-hld__accordion-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.infra-ios-xe-hld__accordion-copy h3 {
    margin: 0;
    color: var(--text);
}

.infra-ios-xe-hld__accordion-copy-meta {
    color: var(--text-soft);
}

.infra-ios-xe-hld__accordion-copy-meta .muted-copy {
    margin: 0;
}

.infra-ios-xe-hld__accordion-side {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding-right: 1.35rem;
}

.infra-ios-xe-hld__accordion-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.62rem;
    height: 0.62rem;
    border-right: 2px solid rgba(var(--infra-ios-xe-hld-accent-rgb), 0.72);
    border-bottom: 2px solid rgba(var(--infra-ios-xe-hld-accent-rgb), 0.72);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 180ms ease;
}

.infra-ios-xe-hld__accordion[open] > .infra-ios-xe-hld__accordion-summary .infra-ios-xe-hld__accordion-toggle {
    transform: translateY(-40%) rotate(225deg);
}

.infra-ios-xe-hld__accordion-body {
    padding: 0.9rem;
    display: grid;
    gap: 1rem;
    content-visibility: auto;
    contain-intrinsic-size: 42rem;
}

.infra-ios-xe-hld__accordion-lazy-placeholder {
    padding: 0.2rem 0;
}

.infra-ios-xe-hld__accordion-lazy-placeholder .muted-copy {
    margin: 0;
}

.infra-ios-xe-hld__shell,
.infra-ios-xe-hld__tables {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-hld__controls {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
    gap: 0.65rem;
}

.infra-ios-xe-hld__controls .toolbar-search {
    flex: 1 0 22rem;
    min-width: 22rem;
}

.infra-ios-xe-hld__controls > * {
    flex: 0 0 auto;
}

.infra-ios-xe-hld__controls .toolbar-select,
.infra-ios-xe-hld__controls .toolbar-button {
    min-width: max-content;
}

.infra-ios-xe-hld__filter-shell {
    display: grid;
    gap: 0.75rem;
}

.infra-ios-xe-hld__filter-summary {
    align-items: center;
}

.infra-ios-xe-hld__floating-actions {
    position: sticky;
    bottom: 0.8rem;
    z-index: 4;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}

.infra-ios-xe-hld__floating-actions .toolbar-button {
    pointer-events: auto;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.98);
}

.infra-ios-xe-hld__route-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(19rem, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.infra-ios-xe-hld__route-table {
    min-width: 0;
}

.infra-ios-xe-hld__route-detail-panel {
    position: sticky;
    top: 0.5rem;
    max-height: calc(95vh - 18rem);
    overflow: auto;
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 34px rgba(15, 23, 42, 0.06);
}

.infra-ios-xe-hld__route-detail {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-hld__route-detail-head {
    display: grid;
    gap: 0.65rem;
}

.infra-ios-xe-hld__route-detail-head h3 {
    margin: 0;
    color: var(--text);
}

.infra-ios-xe-hld__route-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.infra-ios-xe-hld__route-detail-section {
    display: grid;
    gap: 0.65rem;
}

.infra-ios-xe-hld__route-detail-section-head {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--text);
}

.infra-ios-xe-hld__route-detail-section-head svg,
.infra-ios-xe-hld__detail-chip svg,
.infra-ios-xe-hld__protocol-chip svg {
    width: 0.95rem;
    height: 0.95rem;
    color: #0f6db1;
    flex: 0 0 auto;
}

.infra-ios-xe-hld__detail-chip-row,
.infra-ios-xe-hld__protocol-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.infra-ios-xe-hld__protocol-cell--compact {
    gap: 0.35rem;
    min-width: 14rem;
}

.infra-ios-xe-hld__detail-chip,
.infra-ios-xe-hld__protocol-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.46rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.95);
    color: var(--text);
    font-size: 0.8rem;
}

.infra-ios-xe-hld__protocol-chip strong,
.infra-ios-xe-hld__protocol-chip small {
    line-height: 1;
}

.infra-ios-xe-hld__protocol-chip strong {
    font-size: 0.78rem;
}

.infra-ios-xe-hld__protocol-chip small {
    color: var(--text-soft);
    font-weight: 700;
}

.infra-ios-xe-hld__protocol-chip--bgp {
    border-color: rgba(59, 130, 246, 0.24);
    background: rgba(239, 246, 255, 0.96);
}

.infra-ios-xe-hld__protocol-chip--eigrp,
.infra-ios-xe-hld__protocol-chip--ospf {
    border-color: rgba(14, 165, 233, 0.24);
    background: rgba(236, 254, 255, 0.96);
}

.infra-ios-xe-hld__protocol-chip--connected {
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(240, 253, 244, 0.96);
}

.infra-ios-xe-hld__protocol-chip--static,
.infra-ios-xe-hld__protocol-chip--aggregate {
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(255, 251, 235, 0.96);
}

.infra-ios-xe-hld__protocol-breakdown {
    display: grid;
    gap: 0.7rem;
}

.infra-ios-xe-hld__protocol-breakdown-row {
    display: grid;
    grid-template-columns: minmax(11rem, auto) minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    padding: 0.75rem 0.8rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.95);
}

.infra-ios-xe-hld__protocol-breakdown-copy {
    display: grid;
    gap: 0.18rem;
}

.infra-ios-xe-hld__protocol-breakdown-copy strong {
    color: var(--text);
    font-size: 0.86rem;
}

.infra-ios-xe-hld__protocol-breakdown-copy small {
    color: var(--text-soft);
}

.infra-ios-xe-hld__route-row {
    cursor: pointer;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

.infra-ios-xe-hld__route-row:hover td {
    background: rgba(239, 246, 255, 0.72);
}

.infra-ios-xe-hld__route-row.is-selected td {
    background: rgba(219, 234, 254, 0.72);
    box-shadow: inset 0 1px 0 rgba(59, 130, 246, 0.1), inset 0 -1px 0 rgba(59, 130, 246, 0.08);
}

.infra-ios-xe-hld__compare {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-hld__compare-toolbar,
.infra-ios-xe-hld__compare-actions {
    display: flex;
    align-items: end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.infra-ios-xe-hld__compare-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.infra-ios-xe-hld__compare-table-shell {
    overflow: auto;
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 16px 30px rgba(15, 23, 42, 0.05);
}

.infra-ios-xe-hld__compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 48rem;
}

.infra-ios-xe-hld__compare-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.85rem 0.95rem;
    text-align: left;
    color: #f8fafc;
    background: linear-gradient(180deg, #0f172a, #111827);
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.infra-ios-xe-hld__compare-table tbody th,
.infra-ios-xe-hld__compare-table tbody td {
    padding: 0.85rem 0.95rem;
    vertical-align: top;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}

.infra-ios-xe-hld__compare-table tbody th {
    min-width: 11rem;
    color: var(--text);
    font-size: 0.84rem;
    font-weight: 800;
    background: rgba(248, 250, 252, 0.72);
}

.infra-ios-xe-hld__compare-table tbody td {
    color: var(--text);
    background: rgba(255, 255, 255, 0.92);
}

.infra-ios-xe-hld__compare-table tbody tr:nth-child(even) td,
.infra-ios-xe-hld__compare-table tbody tr:nth-child(even) th {
    background: rgba(248, 250, 252, 0.9);
}

.infra-ios-xe-hld__compare-table tbody tr:hover td,
.infra-ios-xe-hld__compare-table tbody tr:hover th {
    background: rgba(239, 246, 255, 0.78);
}

.infra-ios-xe-hld__compare-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.infra-ios-xe-hld__compare-inline-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.infra-ios-xe-hld__compare-diff-detail {
    display: grid;
    gap: 0.85rem;
}

.infra-ios-xe-hld__compare-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.infra-ios-xe-hld__compare-detail-head h4 {
    margin: 0.18rem 0 0.3rem;
    color: var(--text);
}

.infra-ios-xe-hld__compare-table--detail-rows {
    min-width: 64rem;
}

.infra-ios-xe-hld__compare-detail-row--primary td,
.infra-ios-xe-hld__compare-detail-row--primary th {
    background: rgba(255, 241, 242, 0.92);
}

.infra-ios-xe-hld__compare-detail-row--secondary td,
.infra-ios-xe-hld__compare-detail-row--secondary th {
    background: rgba(240, 253, 244, 0.92);
}

.infra-ios-xe-hld__compare-side-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(248, 250, 252, 0.96);
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.infra-ios-xe-hld__compare-side-pill--primary {
    border-color: rgba(248, 113, 113, 0.26);
    background: rgba(255, 241, 242, 0.98);
    color: #b91c1c;
}

.infra-ios-xe-hld__compare-side-pill--secondary {
    border-color: rgba(74, 222, 128, 0.28);
    background: rgba(240, 253, 244, 0.98);
    color: #166534;
}

.infra-ios-xe-hld__compare-detail-value {
    min-width: 18rem;
    word-break: break-word;
    white-space: normal;
}

.infra-ios-xe-hld__compare-card,
.infra-ios-xe-hld__compare-diff-card,
.infra-ios-xe-bgp__device-card {
    padding: 1rem;
    border-radius: 1.1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 16px 30px rgba(15, 23, 42, 0.05);
}

.infra-ios-xe-hld__compare-device-head,
.infra-ios-xe-bgp__device-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.infra-ios-xe-bgp__device-icon {
    display: inline-flex;
    width: 4.25rem;
    height: 4.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    border: 1px solid rgba(147, 197, 253, 0.5);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(219, 234, 254, 0.92));
}

.infra-ios-xe-bgp__device-icon svg {
    width: 3.3rem;
    height: 3.3rem;
}

.infra-ios-xe-hld__compare-card h4,
.infra-ios-xe-bgp__dc-head h4 {
    margin: 0;
    color: var(--text);
}

.infra-ios-xe-hld__compare-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.infra-ios-xe-hld__compare-metric {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) auto auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(248, 250, 252, 0.92);
}

.infra-ios-xe-hld__compare-metric span:first-child {
    color: var(--text-soft);
    font-size: 0.78rem;
}

.infra-ios-xe-hld__compare-metric strong {
    color: var(--text);
}

.infra-ios-xe-hld__compare-diff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.infra-ios-xe-hld__compare-diff-card {
    display: grid;
    gap: 0.7rem;
}

.infra-ios-xe-hld__compare-diff-card h4 {
    margin: 0;
    color: var(--text);
}

.infra-ios-xe-hld__diff-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.infra-ios-xe-hld__diff-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.44rem 0.62rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    font-size: 0.78rem;
    font-weight: 700;
}

.infra-ios-xe-hld__diff-chip--add {
    color: #166534;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(240, 253, 244, 0.96);
}

.infra-ios-xe-hld__diff-chip--remove {
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(254, 242, 242, 0.96);
}

.infra-ios-xe-bgp {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-bgp__overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.infra-ios-xe-bgp__overview-card,
.infra-ios-xe-bgp__summary-pill {
    display: grid;
    gap: 0.15rem;
    padding: 0.82rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.96);
}

.infra-ios-xe-bgp__overview-card span,
.infra-ios-xe-bgp__summary-pill span {
    color: var(--text-soft);
    font-size: 0.77rem;
    font-weight: 700;
}

.infra-ios-xe-bgp__overview-card strong,
.infra-ios-xe-bgp__summary-pill strong {
    color: var(--text);
    font-size: 1.05rem;
}

.infra-ios-xe-bgp__overview-card small {
    color: var(--text-soft);
}

.infra-ios-xe-bgp__dc {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(191, 219, 254, 0.8);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

.infra-ios-xe-bgp__dc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.infra-ios-xe-bgp__device-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1rem;
}

.infra-ios-xe-bgp__device-copy {
    display: grid;
    gap: 0.35rem;
}

.infra-ios-xe-bgp__device-copy strong {
    color: var(--text);
    font-size: 1rem;
}

.infra-ios-xe-bgp__device-copy small {
    color: var(--text-soft);
}

.infra-ios-xe-bgp__summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.95rem;
}

.infra-ios-xe-bgp__session-table {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.95rem;
}

.infra-ios-xe-bgp__session-table-head,
.infra-ios-xe-bgp__session-row {
    display: grid;
    grid-template-columns: minmax(9.5rem, 0.85fr) minmax(13rem, 1.3fr) minmax(11rem, 1fr) minmax(10rem, 0.9fr) minmax(14rem, 1.15fr);
    gap: 0.75rem;
    align-items: start;
}

.infra-ios-xe-bgp__session-table-head {
    padding: 0 0.25rem;
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.infra-ios-xe-bgp__session-row {
    padding: 0.8rem 0.9rem;
    text-align: left;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.infra-ios-xe-bgp__session-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.infra-ios-xe-bgp__session-row--active {
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(240, 253, 244, 0.96);
}

.infra-ios-xe-bgp__session-row--planned {
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(255, 251, 235, 0.96);
}

.infra-ios-xe-bgp__session-row--inactive {
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(254, 242, 242, 0.96);
}

.infra-ios-xe-bgp__session-cell {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.infra-ios-xe-bgp__session-cell strong {
    color: var(--text);
}

.infra-ios-xe-bgp__session-cell small {
    color: var(--text-soft);
}

.infra-ios-xe-bgp__session-meta-row {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    flex-wrap: wrap;
}

.infra-ios-xe-bgp__session-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.16rem 0.48rem;
    border-radius: 999px;
    border: 1px solid rgba(11, 116, 199, 0.16);
    background: rgba(11, 116, 199, 0.08);
    color: #0b74c7;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    width: fit-content;
}

.infra-ios-xe-bgp__session-tag--soft {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(241, 245, 249, 0.92);
    color: var(--text-soft);
}

.infra-ios-xe-bgp__session-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(241, 245, 249, 0.95);
}

.infra-ios-xe-bgp__session-state-badge--active {
    color: #166534;
    border-color: rgba(34, 197, 94, 0.24);
    background: rgba(240, 253, 244, 0.96);
}

.infra-ios-xe-bgp__session-state-badge--planned {
    color: #92400e;
    border-color: rgba(245, 158, 11, 0.24);
    background: rgba(255, 251, 235, 0.96);
}

.infra-ios-xe-bgp__session-state-badge--inactive {
    color: #b91c1c;
    border-color: rgba(239, 68, 68, 0.24);
    background: rgba(254, 242, 242, 0.96);
}

.infra-ios-xe-hld-window.is-large .popup-window__dialog {
    width: min(99vw, 136rem);
    height: min(98vh, 88rem);
}

.infra-ios-xe-diagram {
    display: grid;
    gap: 0.85rem;
}

.infra-ios-xe-diagram__toolbar {
    display: grid;
    gap: 0.7rem;
}

.infra-ios-xe-diagram__toolbar-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: thin;
}

.infra-ios-xe-diagram__color-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.55rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: thin;
}

.infra-ios-xe-diagram__color-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.infra-ios-xe-diagram__color-chip span {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    background: var(--diagram-color);
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08) inset;
}

.infra-ios-xe-diagram__color-chip strong {
    font-size: 0.78rem;
    font-weight: 700;
}

.infra-ios-xe-diagram__color-chip:hover,
.infra-ios-xe-diagram__color-chip.active {
    transform: translateY(-1px);
    border-color: rgba(14, 165, 233, 0.32);
    box-shadow: 0 12px 24px rgba(14, 165, 233, 0.08);
}

.infra-ios-xe-diagram__note {
    color: var(--text-soft);
    font-size: 0.84rem;
}

.infra-ios-xe-diagram__canvas {
    position: relative;
    min-height: 40rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(191, 219, 254, 0.8);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 20px 42px rgba(15, 23, 42, 0.06);
}

.infra-ios-xe-diagram__canvas[data-tool="inspect"] {
    cursor: grab;
}

.infra-ios-xe-diagram__canvas[data-tool="draw"] {
    cursor: crosshair;
}

.infra-ios-xe-diagram__canvas[data-tool="erase"] {
    cursor: cell;
}

.infra-ios-xe-diagram__svg {
    display: block;
    width: 100%;
    height: clamp(38rem, 72vh, 62rem);
    user-select: none;
    touch-action: none;
}

.infra-ios-xe-diagram__annotations {
    pointer-events: none;
}

.infra-ios-xe-diagram__canvas[data-tool="erase"] .infra-ios-xe-diagram__annotations {
    pointer-events: auto;
}

.infra-ios-xe-diagram__annotations path:hover {
    filter: drop-shadow(0 0 4px rgba(15, 23, 42, 0.18));
}

.infra-ios-xe-diagram__node {
    cursor: grab;
    transition: filter 140ms ease;
}

.infra-ios-xe-diagram__node:hover,
.infra-ios-xe-diagram__node:focus {
    filter: drop-shadow(0 12px 18px rgba(15, 23, 42, 0.12));
}

.infra-ios-xe-diagram__node.is-dragging {
    cursor: grabbing;
    filter: drop-shadow(0 18px 26px rgba(15, 23, 42, 0.18));
}

.infra-ios-xe-diagram__tooltip {
    position: absolute;
    z-index: 6;
    max-width: 25rem;
    padding: 0.9rem 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(51, 65, 85, 0.18);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16);
}

.infra-ios-xe-diagram__tooltip.hidden {
    display: none;
}

.infra-ios-xe-diagram__tooltip-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.7rem;
}

.infra-ios-xe-diagram__tooltip-head strong {
    color: var(--text);
}

.infra-ios-xe-diagram__tooltip-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 0.8rem;
}

.infra-ios-xe-diagram__tooltip-grid span {
    display: block;
    color: var(--text-soft);
    font-size: 0.72rem;
    margin-bottom: 0.15rem;
}

.infra-ios-xe-diagram__tooltip-grid strong {
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.35;
    word-break: break-word;
}

.infra-ios-xe-diagram__tooltip-list {
    display: grid;
    gap: 0.28rem;
    margin-top: 0.75rem;
}

.infra-ios-xe-diagram__tooltip-list span {
    color: var(--text-soft);
    font-size: 0.76rem;
}

.infra-ios-xe-hld__topology {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-hld__backbone {
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(59, 130, 246, 0.18);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.82), rgba(248, 250, 252, 0.95));
}

.infra-ios-xe-hld__hub {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(96, 165, 250, 0.18);
    box-shadow: 0 18px 32px rgba(59, 130, 246, 0.08);
}

.infra-ios-xe-hld__hub strong,
.infra-ios-xe-hld__region-head h3,
.infra-ios-xe-hld__node-copy strong,
.infra-ios-xe-hld__config-head strong {
    color: var(--text);
}

.infra-ios-xe-hld__hub small,
.infra-ios-xe-hld__node-copy small,
.infra-ios-xe-hld__config-card summary small {
    color: var(--text-soft);
}

.infra-ios-xe-hld__hub-icon,
.infra-ios-xe-hld__node-icon {
    width: 4.4rem;
    height: 3rem;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(191, 219, 254, 0.94));
    border: 1px solid rgba(59, 130, 246, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 12px 24px rgba(59, 130, 246, 0.12);
}

.infra-ios-xe-hld__hub-icon svg,
.infra-ios-xe-hld__node-icon svg {
    width: 100%;
    height: 100%;
}

.infra-ios-xe-router-art {
    display: block;
    width: 100%;
    height: 100%;
}

.infra-ios-xe-hld__regions {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-hld__region {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 36px rgba(148, 163, 184, 0.08);
}

.infra-ios-xe-hld__region-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.infra-ios-xe-hld__node-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 0.9rem;
}

.infra-ios-xe-hld__node {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.06);
}

.infra-ios-xe-hld__node--success {
    border-color: rgba(16, 185, 129, 0.22);
}

.infra-ios-xe-hld__node--warning {
    border-color: rgba(245, 158, 11, 0.24);
}

.infra-ios-xe-hld__node--timeout,
.infra-ios-xe-hld__node--failed {
    border-color: rgba(244, 63, 94, 0.2);
}

.infra-ios-xe-hld__node-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.infra-ios-xe-hld__node-copy {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.infra-ios-xe-hld__node-copy strong,
.infra-ios-xe-hld__config-card summary strong {
    word-break: break-word;
}

.infra-ios-xe-hld__node-head .status-pill {
    margin-left: auto;
}

.infra-ios-xe-hld__node-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--text-soft);
    font-size: 0.84rem;
}

.infra-ios-xe-hld__chip-row,
.infra-ios-xe-hld__vrf-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.infra-ios-xe-hld__chip,
.infra-ios-xe-hld__vrf-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(248, 250, 252, 0.95);
    color: var(--text);
    font-size: 0.83rem;
}

.infra-ios-xe-hld__chip svg {
    width: 0.95rem;
    height: 0.95rem;
    color: #0f6db1;
}

.infra-ios-xe-hld__chip--accent {
    border-color: rgba(14, 165, 233, 0.26);
    background: linear-gradient(180deg, rgba(224, 242, 254, 0.95), rgba(240, 249, 255, 0.98));
}

.infra-ios-xe-hld__vrf-pill {
    text-align: left;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.infra-ios-xe-hld__vrf-pill:hover {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.08);
}

.infra-ios-xe-hld__vrf-pill strong,
.infra-ios-xe-hld__vrf-pill small {
    display: block;
}

.infra-ios-xe-hld__vrf-pill small,
.infra-ios-xe-hld__node-note,
.infra-ios-xe-hld__config-card summary small {
    color: var(--text-soft);
}

.infra-ios-xe-hld__node-note {
    margin: 0;
}

.infra-ios-xe-hld__config-grid {
    display: grid;
    gap: 0.85rem;
}

.infra-ios-xe-hld__config-card {
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.94);
    overflow: hidden;
}

.infra-ios-xe-hld__config-card summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    list-style: none;
    cursor: pointer;
    padding: 0.9rem 1rem;
}

.infra-ios-xe-hld__config-card summary::-webkit-details-marker {
    display: none;
}

.infra-ios-xe-hld__config-body {
    display: grid;
    gap: 0.85rem;
    padding: 0 1rem 1rem;
}

.infra-ios-xe-hld__config-section {
    display: grid;
    gap: 0.45rem;
}

.infra-ios-xe-hld__config-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

.infra-ios-xe-hld__config-section pre {
    margin: 0;
    padding: 0.9rem;
    border-radius: 0.9rem;
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.16);
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font: 0.8rem/1.5 "Cascadia Code", "Consolas", monospace;
}

.infra-ios-xe-neighbor {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-neighbor__masthead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.05rem 1.2rem;
    border-radius: 1.55rem;
    background:
        radial-gradient(circle at top right, rgba(147, 197, 253, 0.2), transparent 34%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.95));
    border: 1px solid rgba(191, 219, 254, 0.9);
    box-shadow: 0 20px 42px rgba(37, 99, 235, 0.08);
}

.infra-ios-xe-neighbor__masthead-copy {
    display: grid;
    gap: 0.35rem;
}

.infra-ios-xe-neighbor__masthead-copy h4 {
    margin: 0;
    color: #0f172a;
    font-size: 1.16rem;
}

.infra-ios-xe-neighbor__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.infra-ios-xe-neighbor__legend-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.48rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.72);
    background: rgba(255, 255, 255, 0.98);
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.infra-ios-xe-neighbor__legend-pill--cdp {
    border-color: rgba(96, 165, 250, 0.84);
    background: rgba(239, 246, 255, 0.98);
    color: #1d4ed8;
}

.infra-ios-xe-neighbor__legend-pill--lldp {
    border-color: rgba(74, 222, 128, 0.82);
    background: rgba(240, 253, 244, 0.98);
    color: #15803d;
}

.infra-ios-xe-neighbor__legend-pill--dual {
    border-color: rgba(196, 181, 253, 0.88);
    background: rgba(245, 243, 255, 0.98);
    color: #6d28d9;
}

.infra-ios-xe-neighbor__legend-pill--scope {
    border-color: rgba(148, 163, 184, 0.7);
    background: rgba(248, 250, 252, 0.98);
    color: #334155;
}

.infra-ios-xe-neighbor__legend-pill--soft {
    border-color: rgba(148, 163, 184, 0.7);
    background: rgba(248, 250, 252, 0.98);
    color: #334155;
}

.infra-ios-xe-neighbor__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(20rem, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.infra-ios-xe-neighbor__canvas-card,
.infra-ios-xe-neighbor__panel {
    border-radius: 1.6rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    box-shadow: 0 24px 58px rgba(15, 23, 42, 0.08);
}

.infra-ios-xe-neighbor__canvas-card {
    padding: 0.92rem;
    overflow: hidden;
}

.infra-ios-xe-neighbor__canvas-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.78rem;
}

.infra-ios-xe-neighbor__canvas-head h4,
.infra-ios-xe-neighbor__panel h4 {
    margin: 0.18rem 0 0.3rem;
    color: #0f172a;
    font-size: 1.1rem;
}

.infra-ios-xe-neighbor__canvas-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.infra-ios-xe-neighbor__canvas-meta {
    display: grid;
    gap: 0.7rem;
    justify-items: end;
}

.infra-ios-xe-neighbor__canvas-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.infra-ios-xe-neighbor__canvas-badges span {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.62rem;
    border-radius: 999px;
    background: rgba(30, 64, 175, 0.08);
    color: #1d4ed8;
    font-size: 0.7rem;
    font-weight: 800;
}

.infra-ios-xe-neighbor__hover-panel {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding: 0.82rem 0.9rem;
    border-radius: 1.12rem;
    border: 1px solid rgba(191, 219, 254, 0.84);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(239, 246, 255, 0.96)),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 36%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 16px 28px rgba(37, 99, 235, 0.08);
}

.infra-ios-xe-neighbor__hover-panel.is-empty {
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.5);
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98)),
        radial-gradient(circle at top right, rgba(148, 163, 184, 0.08), transparent 38%);
}

.infra-ios-xe-neighbor__hover-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}

.infra-ios-xe-neighbor__hover-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0.72rem;
    min-width: 0;
}

.infra-ios-xe-neighbor__hover-title-wrap > div {
    min-width: 0;
}

.infra-ios-xe-neighbor__hover-icon {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 0.78rem;
    border: 1px solid rgba(191, 219, 254, 0.88);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94));
    color: #2563eb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
    flex: 0 0 auto;
}

.infra-ios-xe-neighbor__hover-icon svg {
    width: 0.92rem;
    height: 0.92rem;
}

.infra-ios-xe-neighbor__hover-icon--router {
    color: #2563eb;
}

.infra-ios-xe-neighbor__hover-icon--switch {
    border-color: rgba(94, 234, 212, 0.88);
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.98), rgba(204, 251, 241, 0.92));
    color: #0f766e;
}

.infra-ios-xe-neighbor__hover-icon--firewall {
    border-color: rgba(253, 186, 116, 0.9);
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(254, 215, 170, 0.9));
    color: #c2410c;
}

.infra-ios-xe-neighbor__hover-icon--server {
    border-color: rgba(203, 213, 225, 0.9);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.92));
    color: #334155;
}

.infra-ios-xe-neighbor__hover-icon--network,
.infra-ios-xe-neighbor__hover-icon--scope {
    border-color: rgba(147, 197, 253, 0.9);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.92));
    color: #1d4ed8;
}

.infra-ios-xe-neighbor__hover-icon--external {
    border-color: rgba(253, 186, 116, 0.9);
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 240, 138, 0.88));
    color: #b45309;
}

.infra-ios-xe-neighbor__hover-head h5 {
    margin: 0.12rem 0 0.24rem;
    color: #0f172a;
    font-size: 1rem;
}

.infra-ios-xe-neighbor__hover-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.infra-ios-xe-neighbor__hover-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.7rem;
}

.infra-ios-xe-neighbor__hover-item {
    display: grid;
    gap: 0.14rem;
    padding: 0.66rem 0.74rem;
    border-radius: 0.95rem;
    border: 1px solid rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.94);
    min-width: 0;
}

.infra-ios-xe-neighbor__hover-item strong {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.infra-ios-xe-neighbor__hover-item small {
    color: #0f172a;
    font-size: 0.84rem;
    line-height: 1.5;
    word-break: break-word;
}

.infra-ios-xe-neighbor__canvas-viewport {
    overflow: auto;
    cursor: grab;
    scrollbar-width: thin;
    max-height: clamp(27rem, 69vh, 54rem);
    overscroll-behavior: contain;
    padding: 0.3rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(191, 219, 254, 0.84);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94)),
        radial-gradient(circle at top, rgba(96, 165, 250, 0.12), transparent 40%);
    touch-action: none;
}

.infra-ios-xe-neighbor__canvas-viewport.is-dragging,
.infra-ios-xe-neighbor__drag-scroll.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.infra-ios-xe-neighbor__canvas-scroll-hint {
    margin: 0.62rem 0 0;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
}

.infra-ios-xe-neighbor__canvas {
    display: grid;
    gap: 0.68rem;
    width: max-content;
    min-width: 58rem;
    padding: 0.2rem;
}

.infra-ios-xe-neighbor__lane {
    display: grid;
    grid-template-columns: minmax(12.9rem, 13.7rem) minmax(24.5rem, 1fr);
    gap: 0.68rem;
    align-items: start;
    padding: 0.72rem;
    border-radius: 1.05rem;
    border: 1px solid rgba(191, 219, 254, 0.72);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(246, 250, 255, 0.98)),
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.08), transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 14px 26px rgba(37, 99, 235, 0.06);
}

.infra-ios-xe-neighbor__lane--empty {
    border-style: dashed;
    border-color: rgba(191, 219, 254, 0.86);
}

.infra-ios-xe-neighbor__local-card,
.infra-ios-xe-neighbor__remote-card,
.infra-ios-xe-neighbor__path-card {
    border-radius: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.98);
}

.infra-ios-xe-neighbor__local-card {
    display: grid;
    gap: 0.55rem;
    padding: 0.68rem 0.74rem;
    position: sticky;
    top: 0.2rem;
    overflow: visible;
}

.infra-ios-xe-neighbor__local-card::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1.05rem;
    width: 1.05rem;
    height: 0.18rem;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(96, 165, 250, 0.82), rgba(191, 219, 254, 0.16));
}

.infra-ios-xe-neighbor__local-card--good {
    border-color: rgba(134, 239, 172, 0.82);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__local-card--warn {
    border-color: rgba(253, 186, 116, 0.86);
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__local-card--bad {
    border-color: rgba(251, 113, 133, 0.84);
    background: linear-gradient(180deg, rgba(255, 241, 242, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__local-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    padding: 0.18rem 0.46rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: #334155;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.infra-ios-xe-neighbor__card-head {
    display: flex;
    align-items: flex-start;
    gap: 0.58rem;
}

.infra-ios-xe-neighbor__card-icon {
    width: 1.92rem;
    height: 1.92rem;
    display: grid;
    place-items: center;
    border-radius: 0.7rem;
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(191, 219, 254, 0.94));
    color: #1d4ed8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    flex: 0 0 auto;
}

.infra-ios-xe-neighbor__card-icon svg {
    width: 0.84rem;
    height: 0.84rem;
}

.infra-ios-xe-neighbor__card-icon--mini {
    width: 1.58rem;
    height: 1.58rem;
    border-radius: 0.58rem;
}

.infra-ios-xe-neighbor__card-icon--router {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(191, 219, 254, 0.94));
    color: #1d4ed8;
}

.infra-ios-xe-neighbor__card-icon--switch {
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.98), rgba(204, 251, 241, 0.92));
    color: #0f766e;
}

.infra-ios-xe-neighbor__card-icon--firewall {
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(254, 215, 170, 0.92));
    color: #c2410c;
}

.infra-ios-xe-neighbor__card-icon--server {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.92));
    color: #334155;
}

.infra-ios-xe-neighbor__card-icon--network {
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.92));
    color: #2563eb;
}

.infra-ios-xe-neighbor__card-icon--external {
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 240, 138, 0.9));
    color: #b45309;
}

.infra-ios-xe-neighbor__card-icon--remote {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.96));
    color: #334155;
}

.infra-ios-xe-neighbor__card-copy {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.infra-ios-xe-neighbor__card-topline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    flex-wrap: wrap;
}

.infra-ios-xe-neighbor__card-copy strong {
    color: #0f172a;
    font-size: 0.8rem;
    line-height: 1.24;
    word-break: break-word;
}

.infra-ios-xe-neighbor__card-copy small {
    font-size: 0.68rem;
    line-height: 1.42;
    word-break: break-word;
}

.infra-ios-xe-neighbor__card-copy-subtle {
    color: #64748b;
    font-size: 0.64rem;
    line-height: 1.4;
}

.infra-ios-xe-neighbor__node-type {
    display: inline-flex;
    align-items: center;
    min-height: 1.2rem;
    padding: 0.12rem 0.42rem;
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.infra-ios-xe-neighbor__node-type--router {
    background: rgba(219, 234, 254, 0.96);
    color: #1d4ed8;
}

.infra-ios-xe-neighbor__node-type--switch {
    background: rgba(204, 251, 241, 0.96);
    color: #0f766e;
}

.infra-ios-xe-neighbor__node-type--firewall {
    background: rgba(254, 215, 170, 0.94);
    color: #c2410c;
}

.infra-ios-xe-neighbor__node-type--server {
    background: rgba(226, 232, 240, 0.96);
    color: #334155;
}

.infra-ios-xe-neighbor__node-type--network {
    background: rgba(219, 234, 254, 0.9);
    color: #2563eb;
}

.infra-ios-xe-neighbor__node-type--external {
    background: rgba(254, 240, 138, 0.92);
    color: #a16207;
}

.infra-ios-xe-neighbor__card-copy small,
.infra-ios-xe-neighbor__card-note,
.infra-ios-xe-neighbor__card-foot,
.infra-ios-xe-neighbor__remote-description,
.infra-ios-xe-neighbor__remote-grid span {
    color: #475569;
}

.infra-ios-xe-neighbor__card-head .status-pill {
    margin-left: auto;
}

.infra-ios-xe-neighbor__card-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
}

.infra-ios-xe-neighbor__card-metrics span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.46rem;
    border-radius: 999px;
    background: rgba(239, 246, 255, 0.92);
    color: #1e3a8a;
    font-size: 0.66rem;
    font-weight: 700;
}

.infra-ios-xe-neighbor__card-metrics span svg {
    width: 0.8rem;
    height: 0.8rem;
}

.infra-ios-xe-neighbor__card-metrics span strong {
    color: #0f172a;
}

.infra-ios-xe-neighbor__card-note,
.infra-ios-xe-neighbor__card-foot,
.infra-ios-xe-neighbor__remote-description {
    margin: 0;
    line-height: 1.45;
}

.infra-ios-xe-neighbor__card-note {
    font-size: 0.72rem;
}

.infra-ios-xe-neighbor__local-footer {
    display: grid;
    gap: 0.4rem;
}

.infra-ios-xe-neighbor__local-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
    align-items: center;
}

.infra-ios-xe-neighbor__local-address {
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 0.26rem 0.52rem;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.9);
    background: rgba(239, 246, 255, 0.92);
    color: #1e3a8a;
    font-size: 0.66rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.infra-ios-xe-neighbor__local-inline-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.48rem;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.94);
    color: #475569;
    font-size: 0.66rem;
    font-weight: 700;
}

.infra-ios-xe-neighbor__card-foot {
    font-size: 0.68rem;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.infra-ios-xe-neighbor__neighbor-stack {
    display: grid;
    gap: 0.62rem;
    padding-left: 0.4rem;
}

.infra-ios-xe-neighbor__neighbor-row {
    --neighbor-accent: #94a3b8;
    position: relative;
    display: grid;
    grid-template-columns: minmax(12.4rem, 13.6rem) minmax(10.6rem, 12.2rem);
    gap: 0.62rem;
    align-items: center;
    padding-left: 1rem;
    transition: transform 160ms ease, filter 160ms ease;
}

.infra-ios-xe-neighbor__neighbor-row::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1.08rem;
    height: 0.15rem;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(191, 219, 254, 0), var(--neighbor-accent));
}

.infra-ios-xe-neighbor__neighbor-row::after {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 0.68rem;
    height: 0.68rem;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: #ffffff;
    border: 0.12rem solid var(--neighbor-accent);
    box-shadow: 0 0 0 0.22rem rgba(255, 255, 255, 0.92);
}

.infra-ios-xe-neighbor__neighbor-row--cdp {
    --neighbor-accent: #3b82f6;
}

.infra-ios-xe-neighbor__neighbor-row--lldp {
    --neighbor-accent: #22c55e;
}

.infra-ios-xe-neighbor__neighbor-row--dual {
    --neighbor-accent: #8b5cf6;
}

.infra-ios-xe-neighbor__neighbor-row--soft {
    --neighbor-accent: #94a3b8;
}

.infra-ios-xe-neighbor__neighbor-row:hover,
.infra-ios-xe-neighbor__neighbor-row.is-active {
    transform: translateY(-1px);
    filter: saturate(1.03);
}

.infra-ios-xe-neighbor__neighbor-row:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.22);
    outline-offset: 0.3rem;
    border-radius: 1.2rem;
}

.infra-ios-xe-neighbor__path-card {
    display: grid;
    gap: 0.42rem;
    align-content: start;
    padding: 0.62rem 0.7rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.infra-ios-xe-neighbor__path-rail {
    display: grid;
    grid-template-columns: auto minmax(6rem, 1fr) auto;
    align-items: center;
    gap: 0.42rem;
}

.infra-ios-xe-neighbor__path-port {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.52rem;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(191, 219, 254, 0.9);
    background: rgba(255, 255, 255, 0.98);
    color: #0f172a;
    font-size: 0.66rem;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}

.infra-ios-xe-neighbor__path-port--remote {
    border-color: rgba(203, 213, 225, 0.94);
    background: rgba(248, 250, 252, 0.98);
    color: #334155;
}

.infra-ios-xe-neighbor__path-line {
    position: relative;
    display: block;
    min-width: 4rem;
    height: 1.36rem;
}

.infra-ios-xe-neighbor__path-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 0.18rem;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(191, 219, 254, 0.36), var(--neighbor-accent), rgba(191, 219, 254, 0.24));
}

.infra-ios-xe-neighbor__path-line::after {
    content: "";
    position: absolute;
    left: 0.28rem;
    right: 0.28rem;
    top: 50%;
    height: 0.08rem;
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
}

.infra-ios-xe-neighbor__path-line-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.24rem;
    height: 1.24rem;
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 0.12rem solid var(--neighbor-accent);
    background: #ffffff;
    color: var(--neighbor-accent);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.1);
}

.infra-ios-xe-neighbor__path-line-core svg {
    width: 0.66rem;
    height: 0.66rem;
}

.infra-ios-xe-neighbor__path-meta {
    display: grid;
    gap: 0.24rem;
}

.infra-ios-xe-neighbor__path-card strong {
    color: #0f172a;
    font-size: 0.82rem;
}

.infra-ios-xe-neighbor__path-card small {
    color: #64748b;
    font-weight: 700;
}

.infra-ios-xe-neighbor__path-copy {
    color: #64748b;
    font-size: 0.64rem;
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.infra-ios-xe-neighbor__path-card--cdp {
    border-color: rgba(96, 165, 250, 0.86);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__path-card--lldp {
    border-color: rgba(74, 222, 128, 0.82);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__path-card--dual {
    border-color: rgba(196, 181, 253, 0.9);
    background: linear-gradient(180deg, rgba(245, 243, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__path-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
    margin-top: 0.1rem;
}

.infra-ios-xe-neighbor__remote-card {
    position: relative;
    display: grid;
    gap: 0.32rem;
    padding: 0.62rem 0.72rem;
    box-shadow: 0 10px 18px rgba(15, 23, 42, 0.05);
    overflow: visible;
}

.infra-ios-xe-neighbor__remote-card::before {
    content: "";
    position: absolute;
    left: -0.45rem;
    top: 50%;
    width: 0.78rem;
    height: 0.78rem;
    transform: translateY(-50%);
    border-radius: 999px;
    background: #ffffff;
    border: 0.15rem solid var(--neighbor-accent);
    box-shadow: 0 0 0 0.34rem rgba(255, 255, 255, 0.92), 0 10px 20px rgba(15, 23, 42, 0.08);
}

.infra-ios-xe-neighbor__remote-card--cdp {
    border-color: rgba(96, 165, 250, 0.86);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__remote-card--lldp {
    border-color: rgba(74, 222, 128, 0.82);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__remote-card--dual {
    border-color: rgba(196, 181, 253, 0.9);
    background: linear-gradient(180deg, rgba(245, 243, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__neighbor-row:hover .infra-ios-xe-neighbor__path-card,
.infra-ios-xe-neighbor__neighbor-row:hover .infra-ios-xe-neighbor__remote-card,
.infra-ios-xe-neighbor__neighbor-row.is-active .infra-ios-xe-neighbor__path-card,
.infra-ios-xe-neighbor__neighbor-row.is-active .infra-ios-xe-neighbor__remote-card {
    border-color: var(--neighbor-accent);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.12);
}

.infra-ios-xe-neighbor__remote-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.infra-ios-xe-neighbor__remote-summary span {
    display: inline-flex;
    align-items: center;
    min-height: 1.42rem;
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.94);
    color: #475569;
    font-size: 0.63rem;
    font-weight: 700;
}

.infra-ios-xe-neighbor__remote-hint {
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.infra-ios-xe-neighbor__detail-pop {
    position: absolute;
    left: calc(100% + 0.8rem);
    top: 50%;
    z-index: 8;
    width: 18rem;
    display: grid;
    gap: 0.5rem;
    padding: 0.72rem 0.8rem;
    border-radius: 0.92rem;
    border: 1px solid rgba(191, 219, 254, 0.92);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.98)),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 42%);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
    transform: translateY(-50%) scale(0.98);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.infra-ios-xe-neighbor__neighbor-row:hover .infra-ios-xe-neighbor__detail-pop,
.infra-ios-xe-neighbor__neighbor-row.is-active .infra-ios-xe-neighbor__detail-pop,
.infra-ios-xe-neighbor__neighbor-row:focus-within .infra-ios-xe-neighbor__detail-pop {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.infra-ios-xe-neighbor__detail-pop-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.infra-ios-xe-neighbor__detail-pop-title {
    display: flex;
    align-items: flex-start;
    gap: 0.54rem;
    min-width: 0;
}

.infra-ios-xe-neighbor__detail-pop-title-copy {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.infra-ios-xe-neighbor__detail-pop-title-copy small {
    color: #64748b;
    font-size: 0.68rem;
    line-height: 1.45;
    word-break: break-word;
}

.infra-ios-xe-neighbor__detail-pop-head strong {
    color: #0f172a;
    font-size: 0.82rem;
    line-height: 1.45;
}

.infra-ios-xe-neighbor__detail-pop-copy {
    margin: 0;
    color: #475569;
    font-size: 0.72rem;
    line-height: 1.5;
}

.infra-ios-xe-neighbor__detail-pop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.5rem;
}

.infra-ios-xe-neighbor__detail-pop-grid span {
    display: grid;
    gap: 0.12rem;
    padding: 0.42rem 0.5rem;
    border-radius: 0.82rem;
    border: 1px solid rgba(226, 232, 240, 0.94);
    background: rgba(255, 255, 255, 0.94);
    color: #0f172a;
    font-size: 0.68rem;
    line-height: 1.4;
}

.infra-ios-xe-neighbor__detail-pop-grid span strong {
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.infra-ios-xe-neighbor__remote-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 0.7rem;
}

.infra-ios-xe-neighbor__remote-grid span {
    display: grid;
    gap: 0.12rem;
    padding: 0.62rem 0.72rem;
    border-radius: 0.95rem;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.94);
    font-size: 0.82rem;
}

.infra-ios-xe-neighbor__remote-grid span strong {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.infra-ios-xe-neighbor__sidebar {
    display: grid;
    gap: 0.9rem;
}

.infra-ios-xe-neighbor__panel {
    padding: 1rem 1.05rem;
}

.infra-ios-xe-neighbor__panel--table .compact-table-shell,
.infra-ios-xe-neighbor__panel .compact-table-shell {
    margin-top: 0.75rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(226, 232, 240, 0.92);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.05);
}

.infra-ios-xe-neighbor__output-list {
    display: grid;
    gap: 0.8rem;
    margin-top: 0.75rem;
}

.infra-ios-xe-neighbor__output-card {
    border-radius: 1.15rem;
    border: 1px solid rgba(226, 232, 240, 0.92);
    background: rgba(255, 255, 255, 0.98);
    overflow: hidden;
}

.infra-ios-xe-neighbor__output-card summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0.88rem 1rem;
    cursor: pointer;
    list-style: none;
}

.infra-ios-xe-neighbor__output-card summary::-webkit-details-marker {
    display: none;
}

.infra-ios-xe-neighbor__output-card summary strong {
    color: #0f172a;
    font-size: 0.94rem;
}

.infra-ios-xe-neighbor__output-card summary small {
    display: block;
    margin-top: 0.14rem;
    color: #64748b;
}

.infra-ios-xe-neighbor__output-grid {
    display: grid;
    gap: 0.8rem;
    padding: 0 1rem 1rem;
}

.infra-ios-xe-neighbor__output-section {
    display: grid;
    gap: 0.55rem;
    padding: 0.88rem 0.92rem;
    border-radius: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.92);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__output-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.infra-ios-xe-neighbor__output-head strong {
    color: #0f172a;
    font-size: 0.88rem;
}

.infra-ios-xe-neighbor__output-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.26rem 0.58rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.infra-ios-xe-neighbor__output-badge--good {
    background: rgba(220, 252, 231, 0.98);
    color: #15803d;
}

.infra-ios-xe-neighbor__output-badge--soft {
    background: rgba(241, 245, 249, 0.98);
    color: #475569;
}

.infra-ios-xe-neighbor__output-pre {
    margin: 0;
    max-height: 16rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.infra-ios-xe-neighbor__callout {
    padding: 0.95rem 1rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(147, 197, 253, 0.86);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__callout p {
    margin: 0;
    color: #1e3a8a;
    line-height: 1.62;
}

.infra-ios-xe-neighbor__state-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
}

.infra-ios-xe-neighbor__state-card {
    display: grid;
    gap: 0.22rem;
    padding: 0.82rem 0.88rem;
    border-radius: 1rem;
    border: 1px solid rgba(226, 232, 240, 0.92);
    background: rgba(248, 250, 252, 0.96);
}

.infra-ios-xe-neighbor__state-card span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.infra-ios-xe-neighbor__state-card strong {
    color: #0f172a;
    font-size: 1.08rem;
}

.infra-ios-xe-neighbor__state-card small {
    color: #475569;
}

.infra-ios-xe-neighbor__state-card--good {
    border-color: rgba(134, 239, 172, 0.82);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__state-card--warn {
    border-color: rgba(253, 186, 116, 0.84);
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__state-card--info {
    border-color: rgba(147, 197, 253, 0.86);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__state-card--planned {
    border-color: rgba(196, 181, 253, 0.88);
    background: linear-gradient(180deg, rgba(245, 243, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__state-card--soft {
    border-color: rgba(203, 213, 225, 0.92);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-neighbor__summary-row td {
    background: rgba(248, 250, 252, 0.7);
}

.infra-ios-xe-neighbor__summary-row--empty td {
    background: rgba(248, 250, 252, 0.94);
    color: #64748b;
}

.infra-ios-xe-neighbor__table-row--cdp td {
    background: rgba(239, 246, 255, 0.76);
}

.infra-ios-xe-neighbor__table-row--lldp td {
    background: rgba(240, 253, 244, 0.76);
}

.infra-ios-xe-neighbor__table-row--dual td {
    background: rgba(245, 243, 255, 0.8);
}

.infra-ios-xe-neighbor__table-row--soft td {
    background: rgba(248, 250, 252, 0.84);
}

.infra-ios-xe-neighbor__drag-scroll {
    cursor: grab;
    touch-action: none;
}

@media (max-width: 1180px) {
    .infra-ios-xe-hld-launch > .table-head {
        grid-template-columns: minmax(0, 1fr);
    }

    .infra-ios-xe-hld-launch .toolbar-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        min-width: 0;
    }

    .infra-ios-xe-hld-history__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .infra-ios-xe-neighbor__layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .infra-ios-xe-neighbor__canvas {
        min-width: 56rem;
    }
}

@media (max-width: 920px) {
    .infra-ios-xe-neighbor__masthead,
    .infra-ios-xe-neighbor__canvas-head,
    .infra-ios-xe-neighbor__hover-head {
        flex-direction: column;
    }

    .infra-ios-xe-neighbor__canvas-meta {
        width: 100%;
        justify-items: stretch;
    }

    .infra-ios-xe-neighbor__canvas-actions,
    .infra-ios-xe-neighbor__canvas-badges {
        justify-content: flex-start;
    }

    .infra-ios-xe-neighbor__legend,
    .infra-ios-xe-neighbor__canvas-badges,
    .infra-ios-xe-neighbor__hover-chips {
        justify-content: flex-start;
    }

    .infra-ios-xe-neighbor__lane {
        grid-template-columns: minmax(0, 1fr);
    }

    .infra-ios-xe-neighbor__local-card {
        position: static;
    }

    .infra-ios-xe-neighbor__local-card::after,
    .infra-ios-xe-neighbor__neighbor-row::before,
    .infra-ios-xe-neighbor__neighbor-row::after,
    .infra-ios-xe-neighbor__remote-card::before {
        display: none;
    }

    .infra-ios-xe-neighbor__detail-pop {
        left: 0;
        right: 0;
        top: calc(100% + 0.45rem);
        width: auto;
        transform: translateY(0) scale(0.98);
        transform-origin: top center;
    }

    .infra-ios-xe-neighbor__neighbor-row:hover .infra-ios-xe-neighbor__detail-pop,
    .infra-ios-xe-neighbor__neighbor-row.is-active .infra-ios-xe-neighbor__detail-pop,
    .infra-ios-xe-neighbor__neighbor-row:focus-within .infra-ios-xe-neighbor__detail-pop {
        transform: translateY(0) scale(1);
    }

    .infra-ios-xe-neighbor__neighbor-stack {
        padding-left: 0;
    }

    .infra-ios-xe-neighbor__neighbor-row {
        grid-template-columns: minmax(0, 1fr);
        padding-left: 0;
    }
}

@media (max-width: 720px) {
    .infra-ios-xe-hld-launch__button {
        min-width: 0;
        width: 100%;
    }

    .infra-ios-xe-hld-history__filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .infra-ios-xe-neighbor__canvas {
        min-width: 45rem;
    }

    .infra-ios-xe-neighbor__state-grid,
    .infra-ios-xe-neighbor__hover-grid,
    .infra-ios-xe-neighbor__remote-grid,
    .infra-ios-xe-neighbor__detail-pop-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@keyframes infraIosXeVrfDesignDash {
    to {
        stroke-dashoffset: -28;
    }
}

.infra-ios-xe-vrf-design {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-vrf-design__sheet {
    display: grid;
    gap: 1rem;
}

.infra-ios-xe-vrf-design__masthead {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.05rem 1.25rem 1.15rem;
    border-radius: 1.8rem;
    background:
        radial-gradient(circle at top right, rgba(147, 197, 253, 0.24), transparent 32%),
        linear-gradient(135deg, #182347, #28398c 54%, #3d4fbe 100%);
    color: #eff6ff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.infra-ios-xe-vrf-design__masthead-copy {
    display: grid;
    gap: 0.32rem;
}

.infra-ios-xe-vrf-design__masthead-line {
    margin: 0;
    color: #eff6ff;
    font-size: 1.34rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.infra-ios-xe-vrf-design__masthead-line--muted {
    color: rgba(239, 246, 255, 0.9);
    font-size: 0.98rem;
    font-weight: 600;
}

.infra-ios-xe-vrf-design__masthead-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.infra-ios-xe-vrf-design__scope-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.78rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #eff6ff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.infra-ios-xe-vrf-design__toolbar-row {
    display: grid;
    gap: 0.75rem;
}

.infra-ios-xe-vrf-design__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0;
}

.infra-ios-xe-vrf-design__toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.infra-ios-xe-vrf-design__controls .toolbar-button,
.infra-ios-xe-vrf-design__controls .toolbar-select {
    min-height: 2.8rem;
}

.infra-ios-xe-vrf-design__controls .toolbar-button {
    padding-inline: 1rem 1.1rem;
    border-radius: 999px;
    border-color: rgba(191, 219, 254, 0.85);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 243, 255, 0.96));
    box-shadow: 0 14px 24px rgba(37, 99, 235, 0.08);
}

.infra-ios-xe-vrf-design__controls .toolbar-button .toolbar-button__icon {
    color: #1d4ed8;
}

.infra-ios-xe-vrf-design__focus {
    display: grid;
    gap: 0.32rem;
    min-width: min(24rem, 62vw);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
}

.infra-ios-xe-vrf-design__focus .toolbar-select {
    min-width: 100%;
    border-color: rgba(191, 219, 254, 0.84);
    background: rgba(255, 255, 255, 0.98);
    color: #0f172a;
}

.infra-ios-xe-vrf-design__explain-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.infra-ios-xe-vrf-design__explain-copy {
    margin: 0;
    color: #334155;
    font-size: 0.98rem;
    font-weight: 700;
}

.infra-ios-xe-vrf-design__identity-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(11rem, 1fr);
    gap: 0.8rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
}

.infra-ios-xe-vrf-design__identity-card {
    min-width: 11rem;
    padding: 0.82rem 0.95rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(191, 219, 254, 0.72);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 249, 255, 0.96));
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.05);
}

.infra-ios-xe-vrf-design__identity-card span {
    display: block;
    margin-bottom: 0.28rem;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.infra-ios-xe-vrf-design__identity-card strong {
    display: block;
    color: #0f172a;
    font-size: 0.98rem;
}

.infra-ios-xe-vrf-design__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    color: #475569;
    font-size: 0.92rem;
}

.infra-ios-xe-vrf-design__legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.infra-ios-xe-vrf-design__dot {
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    display: inline-block;
}

.infra-ios-xe-vrf-design__dot--active {
    background: #16a34a;
}

.infra-ios-xe-vrf-design__dot--idle {
    background: #f59e0b;
}

.infra-ios-xe-vrf-design__dot--ibgp {
    background: #7c3aed;
}

.infra-ios-xe-vrf-design__dot--external {
    background: #4f7cff;
}

.infra-ios-xe-vrf-design__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(18rem, 0.95fr);
    gap: 1rem;
    align-items: start;
}

.infra-ios-xe-vrf-design__canvas-card,
.infra-ios-xe-vrf-design__panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 1.7rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
}

.infra-ios-xe-vrf-design__canvas-card {
    position: relative;
    padding: 1rem;
    overflow: hidden;
}

.infra-ios-xe-vrf-design__canvas-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.infra-ios-xe-vrf-design__canvas-head h4 {
    margin: 0.2rem 0 0.35rem;
    color: #0f172a;
    font-size: 1.16rem;
}

.infra-ios-xe-vrf-design__canvas-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.infra-ios-xe-vrf-design__canvas-badges span {
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.72rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.08);
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 700;
}

.infra-ios-xe-vrf-design__traffic-shell {
    display: grid;
    gap: 0.7rem;
    margin-bottom: 0.95rem;
    padding: 0.95rem 1rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(191, 219, 254, 0.82);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94)),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.12), transparent 34%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 16px 28px rgba(37, 99, 235, 0.07);
}

.infra-ios-xe-vrf-design__traffic-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}

.infra-ios-xe-vrf-design__traffic-head h5 {
    margin: 0.15rem 0 0;
    color: #0f172a;
    font-size: 1rem;
}

.infra-ios-xe-vrf-design__traffic-head span {
    display: inline-flex;
    align-items: center;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.1);
    color: #1d4ed8;
    font-size: 0.76rem;
    font-weight: 800;
}

.infra-ios-xe-vrf-design__traffic-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(14rem, 15.8rem);
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.2rem;
    scrollbar-width: thin;
}

.infra-ios-xe-vrf-design__traffic-card {
    appearance: none;
    border: 1px solid rgba(147, 197, 253, 0.74);
    border-radius: 1.15rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.96));
    padding: 0.86rem 0.92rem;
    display: grid;
    gap: 0.28rem;
    text-align: left;
    cursor: pointer;
    color: #0f172a;
    box-shadow: 0 14px 22px rgba(59, 130, 246, 0.08);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.infra-ios-xe-vrf-design__traffic-card:hover,
.infra-ios-xe-vrf-design__traffic-card:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(37, 99, 235, 0.42);
    box-shadow: 0 18px 26px rgba(37, 99, 235, 0.12);
}

.infra-ios-xe-vrf-design__traffic-card:focus-visible {
    outline: 2px solid rgba(37, 99, 235, 0.28);
    outline-offset: 2px;
}

.infra-ios-xe-vrf-design__traffic-card-label {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.infra-ios-xe-vrf-design__traffic-card strong {
    color: #0f172a;
    font-size: 0.94rem;
}

.infra-ios-xe-vrf-design__traffic-card small {
    color: #475569;
    line-height: 1.45;
}

.infra-ios-xe-vrf-design__traffic-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.infra-ios-xe-vrf-design__traffic-meta span,
.infra-ios-xe-vrf-design__traffic-as {
    display: inline-flex;
    align-items: center;
    padding: 0.36rem 0.58rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.infra-ios-xe-vrf-design__traffic-meta span {
    background: rgba(239, 246, 255, 0.96);
    color: #1d4ed8;
}

.infra-ios-xe-vrf-design__traffic-as {
    width: fit-content;
    background: rgba(237, 233, 254, 0.96);
    color: #6d28d9;
}

.infra-ios-xe-vrf-design__canvas-viewport {
    overflow: auto;
    cursor: grab;
    scrollbar-width: thin;
    max-height: clamp(32rem, 72vh, 56rem);
    overscroll-behavior: contain;
    padding: 0.28rem;
    border-radius: 1.35rem;
    border: 1px solid rgba(191, 219, 254, 0.82);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.94)),
        radial-gradient(circle at top, rgba(96, 165, 250, 0.12), transparent 38%);
    border-radius: 1.35rem;
    touch-action: none;
}

.infra-ios-xe-vrf-design__canvas-viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.infra-ios-xe-vrf-design__canvas-scroll-hint {
    margin: 0.58rem 0 0;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 700;
}

.infra-ios-xe-vrf-design__canvas {
    display: block;
    width: auto;
    min-width: 62rem;
    max-width: none;
    height: auto;
}

.infra-ios-xe-vrf-design__sidebar {
    display: grid;
    gap: 0.9rem;
}

.infra-ios-xe-vrf-design__panel {
    padding: 1rem 1.05rem;
}

.infra-ios-xe-vrf-design__panel--under-diagram {
    margin-top: 1rem;
    border-radius: 1.45rem;
    border-color: rgba(191, 219, 254, 0.9);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(246, 250, 255, 0.98)),
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.08), transparent 34%);
    box-shadow: 0 18px 42px rgba(37, 99, 235, 0.08);
}

.infra-ios-xe-vrf-design__panel h4 {
    margin: 0 0 0.65rem;
    font-size: 1.08rem;
    color: #0f172a;
}

.infra-ios-xe-vrf-design__panel p {
    margin: 0;
    color: #475569;
    line-height: 1.62;
}

.infra-ios-xe-vrf-design__panel .muted-copy + .compact-table-shell,
.infra-ios-xe-vrf-design__panel .muted-copy + .infra-ios-xe-vrf-design__state-grid {
    margin-top: 0.8rem;
}

.infra-ios-xe-vrf-design__panel--table .compact-table-shell,
.infra-ios-xe-vrf-design__panel .compact-table-shell {
    margin-top: 0.8rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(226, 232, 240, 0.92);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}

.infra-ios-xe-vrf-design__panel .compact-table__toolbar {
    gap: 0.7rem;
}

.infra-ios-xe-vrf-design__state-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.infra-ios-xe-vrf-design__state-card {
    display: grid;
    gap: 0.22rem;
    padding: 0.84rem 0.9rem;
    border-radius: 1.05rem;
    border: 1px solid rgba(226, 232, 240, 0.92);
    background: rgba(248, 250, 252, 0.94);
}

.infra-ios-xe-vrf-design__state-card span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.infra-ios-xe-vrf-design__state-card strong {
    color: #0f172a;
    font-size: 1.12rem;
}

.infra-ios-xe-vrf-design__state-card small {
    color: #475569;
}

.infra-ios-xe-vrf-design__state-card--good {
    border-color: rgba(134, 239, 172, 0.85);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-vrf-design__state-card--info {
    border-color: rgba(147, 197, 253, 0.9);
    background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-vrf-design__state-card--warn {
    border-color: rgba(253, 186, 116, 0.86);
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-vrf-design__state-card--planned {
    border-color: rgba(196, 181, 253, 0.9);
    background: linear-gradient(180deg, rgba(245, 243, 255, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-vrf-design__state-card--soft {
    border-color: rgba(203, 213, 225, 0.92);
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-vrf-design__table-row--good td {
    background: rgba(240, 253, 244, 0.72);
}

.infra-ios-xe-vrf-design__table-row--info td {
    background: rgba(239, 246, 255, 0.78);
}

.infra-ios-xe-vrf-design__table-row--warn td {
    background: rgba(255, 247, 237, 0.8);
}

.infra-ios-xe-vrf-design__table-row--planned td {
    background: rgba(245, 243, 255, 0.82);
}

.infra-ios-xe-vrf-design__table-row--soft td {
    background: rgba(248, 250, 252, 0.82);
}

.infra-ios-xe-vrf-design__diff-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.8rem;
}

.infra-ios-xe-vrf-design__diff-metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    align-items: center;
    padding: 0.72rem 0.8rem;
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.94);
}

.infra-ios-xe-vrf-design__diff-metric span {
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.infra-ios-xe-vrf-design__diff-metric strong {
    color: #0f172a;
    font-size: 0.9rem;
}

.infra-ios-xe-vrf-design__diff-grid {
    display: grid;
    gap: 0.75rem;
}

.infra-ios-xe-vrf-design__diff-block {
    display: grid;
    gap: 0.3rem;
    padding: 0.82rem 0.9rem;
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(226, 232, 240, 0.94);
}

.infra-ios-xe-vrf-design__diff-block strong {
    color: #0f172a;
    font-size: 0.88rem;
}

.infra-ios-xe-vrf-design__diff-block small {
    color: #64748b;
}

.infra-ios-xe-vrf-design__panel--warm {
    border-color: rgba(249, 115, 22, 0.24);
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.96), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-vrf-design__callout {
    padding: 1rem 1.05rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(134, 239, 172, 0.62);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-vrf-design__callout--warm {
    border-color: rgba(253, 186, 116, 0.78);
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.98), rgba(255, 255, 255, 0.98));
}

.infra-ios-xe-vrf-design__callout--warm p {
    color: #9a3412;
}

.infra-ios-xe-vrf-design__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.75rem;
}

.infra-ios-xe-vrf-design__metrics span {
    padding: 0.7rem 0.8rem;
    border-radius: 1rem;
    background: rgba(239, 246, 255, 0.92);
    color: #1e3a8a;
    font-size: 0.88rem;
    font-weight: 600;
}

.infra-ios-xe-vrf-design__metrics strong {
    display: block;
    margin-bottom: 0.18rem;
    font-size: 1rem;
}

.infra-ios-xe-vrf-design__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.8rem;
}

.infra-ios-xe-vrf-design__chips span {
    display: inline-flex;
    align-items: center;
    padding: 0.48rem 0.75rem;
    border-radius: 999px;
    background: rgba(30, 64, 175, 0.08);
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 700;
}

.infra-ios-xe-vrf-design__connection-list {
    display: grid;
    gap: 0.6rem;
}

.infra-ios-xe-vrf-design__connection-row {
    display: grid;
    gap: 0.22rem;
    padding: 0.78rem 0.85rem;
    border-radius: 1rem;
    background: rgba(239, 246, 255, 0.72);
    border: 1px solid rgba(191, 219, 254, 0.7);
}

.infra-ios-xe-vrf-design__connection-row strong {
    color: #0f172a;
    font-size: 0.88rem;
}

.infra-ios-xe-vrf-design__connection-row span,
.infra-ios-xe-vrf-design__connection-row small {
    color: #475569;
}

.infra-ios-xe-vrf-design__peer-table {
    display: grid;
    gap: 0.45rem;
}

.infra-ios-xe-vrf-design__peer-head,
.infra-ios-xe-vrf-design__peer-row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.05fr) minmax(4.8rem, 0.55fr) minmax(0, 1.45fr);
    gap: 0.75rem;
    align-items: start;
}

.infra-ios-xe-vrf-design__peer-head {
    padding: 0 0.1rem 0.35rem;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.infra-ios-xe-vrf-design__peer-row {
    padding: 0.78rem 0.82rem;
    border-radius: 1rem;
    background: rgba(248, 250, 252, 0.98);
    border: 1px solid rgba(226, 232, 240, 0.9);
    color: #0f172a;
    font-size: 0.84rem;
}

.infra-ios-xe-vrf-design__peer-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
}

.infra-ios-xe-vrf-design__peer-status--active {
    color: #15803d;
}

.infra-ios-xe-vrf-design__peer-status--inactive {
    color: #c2410c;
}

.infra-ios-xe-vrf-design__peer-status--ibgp {
    color: #6d28d9;
}

.infra-ios-xe-vrf-design__peer-card rect,
.infra-ios-xe-vrf-design__router-card rect,
.infra-ios-xe-vrf-design__route-card rect {
    filter: drop-shadow(0 18px 24px rgba(15, 23, 42, 0.08));
}

.infra-ios-xe-vrf-design__peer-title,
.infra-ios-xe-vrf-design__router-title,
.infra-ios-xe-vrf-design__route-title,
.infra-ios-xe-vrf-design__core-label {
    font-family: var(--sidebar-font-sans, system-ui, Arial, sans-serif);
    font-weight: 800;
}

.infra-ios-xe-vrf-design__peer-title,
.infra-ios-xe-vrf-design__router-title,
.infra-ios-xe-vrf-design__route-title {
    fill: #0f172a;
    font-size: 0.92rem;
}

.infra-ios-xe-vrf-design__peer-copy,
.infra-ios-xe-vrf-design__router-copy,
.infra-ios-xe-vrf-design__route-copy,
.infra-ios-xe-vrf-design__core-copy,
.infra-ios-xe-vrf-design__link-label {
    fill: #475569;
    font: 0.76rem var(--gui-font-sans);
}

.infra-ios-xe-vrf-design__core-label {
    fill: #1d4ed8;
    font-size: 0.96rem;
    letter-spacing: 0.04em;
}

.infra-ios-xe-vrf-design__core-copy {
    font-size: 0.8rem;
}

.infra-ios-xe-vrf-design__core-vrf-badge rect {
    fill: rgba(255, 255, 255, 0.96);
    stroke: rgba(37, 99, 235, 0.28);
    stroke-width: 1.6;
    filter: drop-shadow(0 12px 20px rgba(37, 99, 235, 0.1));
}

.infra-ios-xe-vrf-design__core-vrf-badge-copy {
    fill: #1d4ed8;
    font: 800 0.8rem var(--gui-font-sans);
    letter-spacing: 0.08em;
}

.infra-ios-xe-vrf-design__top-flow-label {
    fill: #2563eb;
    font: 700 0.8rem var(--gui-font-sans);
    letter-spacing: 0.04em;
}

.infra-ios-xe-vrf-design__vrf-router-icon rect,
.infra-ios-xe-vrf-design__vrf-router-icon path,
.infra-ios-xe-vrf-design__vrf-router-icon circle {
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.infra-ios-xe-vrf-design__vrf-router-copy {
    fill: #1d4ed8;
    font: 700 0.62rem var(--gui-font-sans);
    letter-spacing: 0.14em;
}

.infra-ios-xe-vrf-design__info-trigger {
    cursor: pointer;
    outline: none;
}

.infra-ios-xe-vrf-design__info-trigger circle {
    fill: rgba(255, 255, 255, 0.96);
    stroke: #2563eb;
    stroke-width: 2;
    filter: drop-shadow(0 10px 18px rgba(37, 99, 235, 0.16));
}

.infra-ios-xe-vrf-design__info-trigger--green circle {
    stroke: #16a34a;
}

.infra-ios-xe-vrf-design__info-trigger--purple circle {
    stroke: #7c3aed;
}

.infra-ios-xe-vrf-design__info-trigger-copy {
    fill: #0f172a;
    font: 800 0.82rem var(--gui-font-sans);
    pointer-events: none;
}

.infra-ios-xe-vrf-design__info-trigger:hover circle,
.infra-ios-xe-vrf-design__info-trigger:focus circle {
    fill: #eff6ff;
    stroke-width: 2.4;
}

.infra-ios-xe-vrf-design__link {
    fill: none;
    stroke-linecap: round;
    stroke-width: 4;
    stroke-dasharray: 12 11;
}

.infra-ios-xe-vrf-design__link--active {
    stroke: #16a34a;
}

.infra-ios-xe-vrf-design__link--idle {
    stroke: #f59e0b;
    stroke-dasharray: 14 12;
}

.infra-ios-xe-vrf-design__link--ibgp {
    stroke: #7c3aed;
}

.infra-ios-xe-vrf-design__link--route {
    stroke: #2563eb;
    stroke-width: 3.5;
    stroke-dasharray: 10 8;
}

.infra-ios-xe-vrf-design__link--animated {
    animation: infraIosXeVrfDesignDash 1.75s linear infinite;
}

.infra-ios-xe-vrf-design.is-paused .infra-ios-xe-vrf-design__link--animated {
    animation-play-state: paused;
}

.infra-ios-xe-vrf-design__info-popover {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: min(28rem, calc(100% - 2rem));
    padding: 0.95rem 1rem 1rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 28px 54px rgba(15, 23, 42, 0.14);
    backdrop-filter: blur(12px);
}

.infra-ios-xe-vrf-design__info-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 0.8rem;
}

.infra-ios-xe-vrf-design__info-head h4 {
    margin: 0.2rem 0 0;
    color: #0f172a;
    font-size: 1rem;
}

.infra-ios-xe-vrf-design__info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.infra-ios-xe-vrf-design__info-actions .toolbar-button {
    min-height: 2.5rem;
}

.infra-ios-xe-vrf-design__info-text {
    width: 100%;
    min-height: 14rem;
    padding: 0.85rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid rgba(191, 219, 254, 0.78);
    background: #f8fafc;
    color: #0f172a;
    resize: vertical;
    font: 0.82rem/1.55 "Cascadia Code", "Consolas", monospace;
}

@media (max-width: 1180px) {
    .infra-ios-xe-vrf-design__layout {
        grid-template-columns: 1fr;
    }

    .infra-ios-xe-vrf-design__canvas {
        min-width: 48rem;
    }
}

@media (max-width: 900px) {
    .infra-ios-xe-vrf-design__masthead,
    .infra-ios-xe-vrf-design__controls,
    .infra-ios-xe-vrf-design__canvas-head,
    .infra-ios-xe-vrf-design__explain-row,
    .infra-ios-xe-vrf-design__info-head,
    .infra-ios-xe-vrf-design__info-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .infra-ios-xe-vrf-design__masthead-line {
        font-size: 1.05rem;
    }

    .infra-ios-xe-vrf-design__controls {
        justify-content: flex-start;
    }

    .infra-ios-xe-vrf-design__masthead-tags,
    .infra-ios-xe-vrf-design__canvas-badges,
    .infra-ios-xe-vrf-design__legend {
        justify-content: flex-start;
    }

    .infra-ios-xe-vrf-design__traffic-head {
        flex-direction: column;
    }

    .infra-ios-xe-vrf-design__traffic-row {
        grid-auto-columns: minmax(13rem, 1fr);
    }

    .infra-ios-xe-vrf-design__focus {
        min-width: 100%;
    }

    .infra-ios-xe-vrf-design__metrics,
    .infra-ios-xe-vrf-design__diff-metrics,
    .infra-ios-xe-vrf-design__peer-head,
    .infra-ios-xe-vrf-design__peer-row {
        grid-template-columns: 1fr;
    }

    .infra-ios-xe-vrf-design__info-popover {
        position: static;
        width: auto;
        margin-top: 0.9rem;
    }

    .infra-ios-xe-vrf-design__canvas {
        min-width: 42rem;
    }
}

@media (max-width: 900px) {
    .infra-ios-xe-hld-window .popup-window__dialog,
    .popup-window--infra-circuit .popup-window__dialog {
        width: min(98vw, 112rem);
        height: min(96vh, 78rem);
    }

    .infra-ios-xe-build__status,
    .infra-ios-xe-picker__pager,
    .infra-ios-xe-picker__pager-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .infra-ios-xe-build__hero {
        grid-template-columns: 1fr;
    }

    .infra-ios-xe-hld__controls,
    .infra-ios-xe-hld__accordion-summary,
    .infra-ios-xe-hld__region-head,
    .infra-ios-xe-hld__config-card summary,
    .infra-ios-xe-hld__compare-toolbar,
    .infra-ios-xe-hld__compare-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .infra-ios-xe-hld__route-layout {
        grid-template-columns: 1fr;
    }

    .infra-ios-xe-hld__compare-grid,
    .infra-ios-xe-hld__compare-diff-grid,
    .infra-ios-xe-bgp__device-grid {
        grid-template-columns: 1fr;
    }

    .infra-ios-xe-bgp__overview,
    .infra-ios-xe-bgp__summary-row,
    .infra-ios-xe-bgp__session-table-head,
    .infra-ios-xe-bgp__session-row {
        grid-template-columns: 1fr;
    }

    .infra-ios-xe-build__step {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .infra-ios-xe-hld__route-detail-panel {
        position: static;
        max-height: none;
    }

    .infra-ios-xe-hld__controls .toolbar-search {
        min-width: 100%;
    }

    .infra-ios-xe-hld__node-grid {
        grid-template-columns: 1fr;
    }

    .infra-ios-xe-hld__node-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .infra-ios-xe-hld__node-head .status-pill {
        margin-left: 0;
    }

    .infra-ios-xe-diagram__toolbar-group,
    .infra-ios-xe-diagram__color-row {
        width: 100%;
    }

    .infra-ios-xe-diagram__tooltip-grid {
        grid-template-columns: 1fr;
    }

    .infra-ios-xe-hld__route-detail-grid,
    .infra-ios-xe-hld__protocol-breakdown-row,
    .infra-ios-xe-hld__compare-metric {
        grid-template-columns: 1fr;
    }
}

.jira-workspace__notice {
    margin-bottom: 1rem;
}

.jira-workspace > .table-head,
.jira-workspace > .table-head .toolbar-actions,
.jira-workspace__notice,
.jira-workspace__helper,
.jira-workspace__metrics,
.jira-workspace__metrics .metric-card {
    -webkit-user-select: none;
    user-select: none;
}

.jira-workspace__helper {
    margin: 0.18rem 0 0;
}

.jira-workspace__head {
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0;
}

.jira-workspace__head .eyebrow,
.jira-workspace__head h3,
.jira-workspace__head .muted-copy {
    margin-top: 0;
    margin-bottom: 0.15rem;
}

.jira-workspace__head .muted-copy {
    line-height: 1.3;
}

.jira-workspace__head .toolbar-actions {
    flex-wrap: nowrap;
    gap: 0.4rem;
}

.jira-workspace__layout {
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    align-items: start;
}

.jira-workflow {
    display: grid;
    gap: 1rem;
    overflow: hidden;
}

.jira-workflow [hidden] {
    display: none !important;
}

.jira-workflow__header {
    display: flex;
    gap: 1rem;
    align-items: end;
    justify-content: space-between;
}

.jira-workflow__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.jira-workflow__steps span {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-muted);
    background: var(--panel-soft);
    font-size: 0.75rem;
    white-space: nowrap;
}

.jira-workflow__steps strong {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    color: #fff;
    background: var(--brand-600);
}

.jira-workflow__tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0;
    border: 0;
    background: transparent;
}

.integration-workspace__tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.integration-workspace__tabs--webex {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.jira-workflow__tab {
    --jira-tab-accent: var(--brand-500);
    --jira-tab-tint: color-mix(in srgb, var(--brand-500) 12%, var(--panel));
    display: grid;
    grid-template-columns: 2.65rem minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    min-width: 0;
    min-height: 5.7rem;
    padding: 0.9rem 1rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--jira-tab-accent) 28%, var(--panel-border));
    border-left: 5px solid var(--jira-tab-accent);
    border-radius: 1rem;
    color: var(--text-muted);
    background: linear-gradient(135deg, var(--jira-tab-tint), var(--panel) 66%);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--jira-tab-accent) 10%, transparent);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.jira-workflow__tab--search {
    --jira-tab-accent: #2563eb;
    --jira-tab-tint: color-mix(in srgb, #2563eb 15%, var(--panel));
}

.jira-workflow__tab--actions {
    --jira-tab-accent: #7c3aed;
    --jira-tab-tint: color-mix(in srgb, #7c3aed 15%, var(--panel));
}

.jira-workflow__tab--bulk {
    --jira-tab-accent: #0f9f74;
    --jira-tab-tint: color-mix(in srgb, #0f9f74 15%, var(--panel));
}

.jira-workflow__tab > svg {
    width: 1.3rem;
    height: 1.3rem;
    padding: 0.62rem;
    overflow: visible;
    border-radius: 0.7rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--jira-tab-accent), color-mix(in srgb, var(--jira-tab-accent) 58%, #ffffff 42%));
    box-shadow: 0 7px 16px color-mix(in srgb, var(--jira-tab-accent) 18%, transparent);
}

.jira-workflow__tab span,
.jira-workflow__tab strong,
.jira-workflow__tab small {
    display: block;
    min-width: 0;
}

.jira-workflow__tab em {
    align-self: start;
    padding: 0.3rem 0.52rem;
    border: 1px solid color-mix(in srgb, var(--jira-tab-accent) 32%, var(--panel-border));
    border-radius: 999px;
    color: var(--jira-tab-accent);
    background: color-mix(in srgb, var(--jira-tab-accent) 10%, var(--panel));
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.jira-workflow__tab strong {
    color: var(--text-strong);
    font-size: 0.9rem;
}

.jira-workflow__tab small {
    margin-top: 0.12rem;
    overflow: hidden;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jira-workflow__tab:hover,
.jira-workflow__tab.is-active {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--jira-tab-accent) 62%, var(--panel-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--jira-tab-accent) 23%, var(--panel)), var(--panel) 72%);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--jira-tab-accent) 20%, transparent);
}

.jira-workflow__tab.is-active {
    box-shadow: inset 0 -0.22rem 0 var(--jira-tab-accent), 0 16px 32px color-mix(in srgb, var(--jira-tab-accent) 22%, transparent);
}

html[data-theme="dark"] .jira-workflow__tab {
    background: linear-gradient(135deg, color-mix(in srgb, var(--jira-tab-accent) 22%, var(--panel)), var(--panel) 72%);
}

.jira-workflow__panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--panel-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--panel) 94%, var(--panel-soft));
}

.jira-workflow__panel > .table-head {
    margin-bottom: 0.8rem;
}

.jira-workflow__panel .toolbar-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.jira-workflow__panel .toolbar-row--stack {
    grid-template-columns: 1fr;
}

.jira-form-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.jira-form-field__label {
    color: var(--text-strong);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.jira-form-field__hint {
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.35;
}

.jira-form-field > input,
.jira-form-field > select,
.jira-form-field > textarea {
    width: 100%;
    min-width: 0;
}

.jira-workspace__panel {
    min-height: 100%;
}

.jira-distribution {
    display: grid;
    gap: 0.45rem;
    margin: 0.55rem 0;
    padding-top: 0.55rem;
    border-top: 1px solid var(--panel-border);
}

.jira-distribution__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(16rem, 1fr));
    gap: 0.75rem;
    align-items: stretch;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.12rem 0 0.55rem;
}

.jira-distribution__heading,
.jira-distribution-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.jira-distribution__heading > div {
    min-width: 0;
}

.jira-organization-groups { display: grid; gap: 0.4rem; }
.jira-organization-groups__heading { display: flex; align-items: end; justify-content: space-between; gap: 0.75rem; }
.jira-organization-groups__grid { display: grid; grid-template-columns: repeat(3, minmax(16rem, 1fr)); gap: 0.75rem; }
.jira-organization-group-card { min-width: 0; }
.jira-organization-group-card__list { display: grid; gap: 0.45rem; max-height: 22rem; overflow: auto; padding: 0.15rem; scrollbar-gutter: stable; }
.jira-organization-group-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.55rem; width: 100%; min-height: 3.4rem; padding: 0.55rem 0.65rem; border: 1px solid var(--panel-border); border-radius: 0.75rem; color: var(--text-main); background: var(--panel); text-align: left; cursor: pointer; }
.jira-organization-group-row:hover, .jira-organization-group-row:focus-visible, .jira-organization-group-row.is-filtered { border-color: color-mix(in srgb, var(--brand-500) 58%, var(--panel-border)); background: color-mix(in srgb, var(--brand-500) 10%, var(--panel)); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-500) 12%, transparent); }
.jira-organization-group-row__copy { display: grid; gap: 0.12rem; min-width: 0; }
.jira-organization-group-row__copy > strong, .jira-organization-group-row__copy > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jira-organization-group-row__copy > small { color: var(--text-muted); }
.jira-organization-group-row__share { color: var(--text-muted); font-size: 0.76rem; font-weight: 800; white-space: nowrap; }
.jira-organization-group-row__count { min-width: 2rem; color: var(--text-strong); text-align: right; }

@media (max-width: 980px) {
    .jira-organization-groups__grid { grid-template-columns: 1fr; }
}

.jira-chart-refresh {
    flex: 0 0 auto;
    border-color: color-mix(in srgb, var(--brand-500) 42%, var(--panel-border));
    color: var(--brand-700);
    background: color-mix(in srgb, var(--brand-500) 10%, var(--panel));
}

.jira-chart-refresh .icon-inline,
[data-jira-refresh-all-analytics] .icon-inline {
    stroke-width: 2.5;
}

.jira-chart-refresh > svg,
[data-jira-refresh-all-analytics] > svg {
    display: block;
    width: 1rem !important;
    min-width: 1rem;
    max-width: 1rem;
    height: 1rem !important;
    min-height: 1rem;
    max-height: 1rem;
    padding: 0;
    margin: 0;
    flex: 0 0 1rem;
    stroke-width: 2.35;
}

[data-jira-refresh-all-analytics] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    white-space: nowrap;
}

.jira-refresh-all-button > svg.icon-inline {
    box-sizing: border-box !important;
    width: 1rem !important;
    min-width: 1rem !important;
    max-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    max-height: 1rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    flex: 0 0 1rem !important;
}

.jira-distribution-card {
    min-width: 16rem;
    min-height: 18rem;
}

.jira-distribution-card .chart-card__head {
    align-items: center;
}

.jira-distribution-card__count {
    padding: 0.35rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 26%, var(--panel-border));
    border-radius: 999px;
    color: var(--brand-600);
    background: color-mix(in srgb, var(--brand-500) 10%, var(--panel));
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.jira-distribution-card .donut-card__body {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0.55rem;
}

.jira-distribution-card .donut-chart,
.jira-distribution-card .donut-chart__ring {
    width: min(14rem, 100%);
}

.jira-distribution-card .donut-chart__svg--modern {
    position: relative;
    z-index: 1;
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
}

.jira-distribution-card .donut-chart__track {
    stroke: color-mix(in srgb, var(--panel-border) 58%, transparent);
    stroke-width: 28;
}

.jira-distribution-card .donut-slice-path {
    opacity: 1 !important;
    visibility: visible !important;
    filter: saturate(1.35) drop-shadow(0 5px 8px rgba(15, 23, 42, 0.18));
}

.jira-distribution-card .donut-slice-path:hover,
.jira-distribution-card .donut-slice-path:focus,
.jira-distribution-card .donut-slice-path.is-active,
.jira-distribution-card .donut-slice-path.is-filtered {
    filter: saturate(1.55) brightness(1.04) drop-shadow(0 8px 14px rgba(13, 110, 253, 0.32));
}

.jira-distribution-card .donut-chart__center {
    position: relative;
    z-index: 2;
    border: 2px solid color-mix(in srgb, var(--brand-500) 28%, var(--panel-border));
}

.jira-distribution-card .legend-row__dot {
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent), 0 2px 8px rgba(15, 23, 42, 0.2);
}

.jira-distribution-card .legend-row.is-active {
    border-color: color-mix(in srgb, var(--brand-500) 50%, var(--panel-border));
    background: color-mix(in srgb, var(--brand-500) 12%, var(--panel));
}

.jira-distribution-card .legend-row.is-filtered {
    border-color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 18%, var(--panel));
    box-shadow: inset 4px 0 0 var(--brand-500), 0 5px 14px color-mix(in srgb, var(--brand-500) 14%, transparent);
}

.jira-distribution-card [data-donut-key] {
    cursor: pointer;
}

.jira-chart-filter-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.jira-workspace .jira-cell-label .icon-inline,
.jira-workspace .jira-signal .icon-inline {
    color: var(--brand-700);
    stroke-width: 2.35;
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--brand-500) 26%, transparent));
}

.jira-workspace .jira-signal,
.jira-workspace .jira-age {
    font-weight: 700;
    border-width: 1.5px;
}

html[data-theme="dark"] .jira-distribution-card .donut-slice-path {
    filter: saturate(1.45) brightness(1.08) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.42));
}

html[data-theme="dark"] .jira-workspace .jira-cell-label .icon-inline,
html[data-theme="dark"] .jira-workspace .jira-signal .icon-inline {
    color: var(--brand-400);
}

.jira-bulk-result-detail {
    min-width: 20rem;
    max-width: 42rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--success) 28%, var(--panel-border));
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--success) 8%, var(--panel));
    color: var(--text);
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: normal;
}

.jira-bulk-result-detail--failed {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--panel-border));
    background: color-mix(in srgb, var(--danger) 10%, var(--panel));
    color: color-mix(in srgb, var(--danger) 82%, var(--text));
    font-weight: 700;
}

.jira-distribution-card .donut-legend {
    max-height: 12rem;
    overflow: auto;
}

.jira-distribution-card .legend-row {
    grid-template-columns: 0.65rem minmax(0, 1fr) auto auto;
}

.jira-distribution-card__share {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.jira-time-series {
    min-width: 0;
    overflow: hidden;
}

.jira-time-series .chart-card__head {
    align-items: flex-start;
}

.jira-activity-flash-cards {
    grid-template-columns: repeat(4, minmax(10.5rem, 1fr));
    margin: 0.2rem 0 0.85rem;
    overflow-x: auto;
    padding: 0.12rem 0 0.45rem;
}

.jira-activity-flash-cards .metric-card {
    min-width: 10.5rem;
    min-height: 7.2rem;
    border-left: 4px solid var(--brand-500);
}

.jira-activity-flash-cards .metric-card:nth-child(2) {
    border-left-color: #0f9f74;
}

.jira-activity-flash-cards .metric-card:nth-child(3) {
    border-left-color: #8b5cf6;
}

.jira-activity-flash-cards .metric-card:nth-child(4) {
    border-left-color: #f59e0b;
}

.jira-activity-flash-cards .metric-card__value {
    font-size: 1.55rem;
}

.jira-time-series__legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

.jira-time-series__key {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 90%, transparent);
    color: var(--text-muted);
    font-size: 0.72rem;
    white-space: nowrap;
}

.jira-time-series__key::before {
    width: 0.58rem;
    height: 0.58rem;
    border-radius: 999px;
    background: var(--brand-500);
    content: "";
}

.jira-time-series__key--created::before {
    background: var(--success);
}

.jira-time-series__key--user::before {
    width: 1.25rem;
    height: 0;
    border-top: 3px dotted var(--jira-series-color);
    border-radius: 0;
    background: none;
}

.jira-time-series__plot {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--panel-border);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--panel) 96%, var(--panel-soft));
}

.jira-activity-bar-canvas {
    min-width: 75rem;
}

.jira-activity-bar-canvas svg {
    display: block;
    width: 100%;
    height: auto;
}

.jira-time-series__grid {
    stroke: var(--panel-border);
    stroke-width: 1;
}

.jira-time-series__axis-label {
    fill: var(--text-muted);
    font-size: 11px;
}

.jira-time-series__axis-title {
    fill: var(--text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.jira-activity-bar {
    cursor: pointer;
    vector-effect: non-scaling-stroke;
    stroke: color-mix(in srgb, var(--panel) 78%, transparent);
    stroke-width: 0.8;
    transform-box: fill-box;
    transform-origin: center bottom;
    transition: filter 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.jira-activity-bar--updated {
    fill: #2563eb;
    filter: drop-shadow(0 3px 4px rgba(37, 99, 235, 0.22));
}

.jira-activity-bar--created {
    fill: #10b981;
    filter: drop-shadow(0 3px 4px rgba(16, 185, 129, 0.2));
}

.jira-activity-bar:hover,
.jira-activity-bar:focus {
    filter: brightness(1.12) saturate(1.18) drop-shadow(0 6px 7px rgba(15, 23, 42, 0.28));
    transform: scaleY(1.02);
}

.jira-activity-data-table {
    width: 100%;
    min-width: 75rem;
    border-collapse: collapse;
    table-layout: fixed;
    border-top: 1px solid var(--panel-border);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.jira-activity-data-table th,
.jira-activity-data-table td {
    min-width: 2.25rem;
    padding: 0.28rem 0.2rem;
    border-right: 1px solid var(--panel-border);
    border-bottom: 1px solid var(--panel-border);
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
}

.jira-activity-data-table th:first-child {
    width: 6rem;
    color: var(--text-strong);
    text-align: left;
}

.jira-activity-data-table tbody th {
    font-weight: 800;
}

.jira-activity-data-key {
    display: inline-block;
    width: 0.58rem;
    height: 0.58rem;
    margin-right: 0.35rem;
    border-radius: 0.14rem;
    vertical-align: -0.04rem;
}

.jira-activity-data-key--updated { background: #2563eb; }
.jira-activity-data-key--created { background: #10b981; }

.jira-activity-user-line {
    fill: none;
    stroke-width: 3;
    stroke-dasharray: 2 8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.24));
}

.jira-activity-user-point {
    cursor: pointer;
    stroke: var(--panel);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    transition: r 160ms ease, filter 160ms ease;
}

.jira-activity-user-point:hover,
.jira-activity-user-point:focus {
    r: 6px;
    filter: brightness(1.18) drop-shadow(0 3px 5px rgba(15, 23, 42, 0.35));
    outline: none;
}

.jira-time-series__line {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
}

.jira-time-series__line--updated {
    stroke: #2563eb;
    filter: drop-shadow(0 2px 3px rgba(37, 99, 235, 0.3));
}

.jira-time-series__line--created {
    stroke: #0f9f74;
    stroke-dasharray: 10 6;
    filter: drop-shadow(0 2px 3px rgba(15, 159, 116, 0.28));
}

.jira-time-series__point {
    vector-effect: non-scaling-stroke;
    stroke: var(--panel);
    stroke-width: 1.5;
}

.jira-time-series__point--updated {
    fill: #2563eb;
}

.jira-time-series__point--created {
    fill: #0f9f74;
}

html[data-theme="dark"] .jira-time-series__grid {
    stroke: color-mix(in srgb, var(--panel-border) 72%, transparent);
}

html[data-theme="dark"] .jira-activity-bar--updated { fill: #60a5fa; }
html[data-theme="dark"] .jira-activity-bar--created { fill: #34d399; }
html[data-theme="dark"] .jira-activity-data-key--updated { background: #60a5fa; }
html[data-theme="dark"] .jira-activity-data-key--created { background: #34d399; }

html[data-theme="dark"] .jira-time-series__line--updated,
html[data-theme="dark"] .jira-time-series__point--updated {
    stroke: #60a5fa;
}

html[data-theme="dark"] .jira-time-series__line--created,
html[data-theme="dark"] .jira-time-series__point--created {
    stroke: #34d399;
}

@media (max-width: 620px) {
    .jira-time-series .chart-card__head {
        display: grid;
        gap: 0.75rem;
    }

    .jira-time-series__legend {
        justify-content: flex-start;
    }

    .jira-distribution__heading,
    .jira-chart-filter-notice {
        align-items: stretch;
        flex-direction: column;
    }

    .jira-activity-flash-cards {
        grid-template-columns: repeat(4, minmax(9.75rem, 1fr));
    }
}

.jira-workspace__toolbar--subtle {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--panel-border);
}

.jira-workspace__textarea {
    min-width: 100%;
    min-height: 7.5rem;
    resize: vertical;
}

.jira-workspace__textarea--compact {
    min-height: 6rem;
}

.jira-workspace__select {
    min-width: min(22rem, 100%);
}

.jira-workspace__field {
    display: grid;
    gap: 0.4rem;
    width: 100%;
}

.jira-workspace__multi-select {
    min-width: 100%;
    min-height: 12rem;
    padding: 0.8rem;
    border-radius: 1rem;
}

.jira-workspace__selector-actions {
    margin-bottom: 0.75rem;
}

.jira-workspace__summary {
    margin-bottom: 1rem;
}

.jira-workspace__summary-item {
    min-width: 11rem;
}

.jira-summary-flash-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 0.8fr) minmax(12rem, 0.8fr) minmax(16rem, 1fr) minmax(20rem, 1.7fr);
    gap: 0.75rem;
    margin: 0 0 1rem;
}

.jira-summary-flash {
    --jira-flash-accent: var(--brand-500);
    position: relative;
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    min-height: 5.5rem;
    padding: 0.85rem 1rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--jira-flash-accent) 30%, var(--panel-border));
    border-radius: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--jira-flash-accent) 11%, var(--panel)), var(--panel) 72%);
    box-shadow: 0 0.7rem 1.6rem color-mix(in srgb, var(--jira-flash-accent) 8%, transparent);
}

.jira-summary-flash::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.22rem;
    background: var(--jira-flash-accent);
}

.jira-summary-flash__icon {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--jira-flash-accent), color-mix(in srgb, var(--jira-flash-accent) 58%, #ffffff 42%));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 9px 20px color-mix(in srgb, var(--jira-flash-accent) 26%, transparent);
}

.jira-summary-flash__icon svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.35; }

.metric-card__icon,
.dashboard-mini-card__icon,
.jira-summary-flash__icon,
.selection-flash__emblem-icon,
.selection-stat__icon,
.jira-workflow__tab > svg {
    isolation: isolate;
}

html[data-theme="dark"] .metric-card__icon,
html[data-theme="dark"] .dashboard-mini-card__icon,
html[data-theme="dark"] .jira-summary-flash__icon,
html[data-theme="dark"] .selection-flash__emblem-icon,
html[data-theme="dark"] .selection-stat__icon,
html[data-theme="dark"] .jira-workflow__tab > svg {
    filter: saturate(1.12) brightness(1.08);
    border-color: rgba(255, 255, 255, 0.24);
}
.jira-summary-flash__copy { display: grid; gap: 0.15rem; min-width: 0; }
.jira-summary-flash__label { margin: 0; color: var(--text-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.jira-summary-flash__value { overflow: hidden; color: var(--text-strong); font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.jira-summary-flash__hint { color: var(--text-muted); font-size: 0.72rem; }
.jira-summary-flash--ocean { --jira-flash-accent: #2f81f7; }
.jira-summary-flash--mint { --jira-flash-accent: #2da44e; }
.jira-summary-flash--amber { --jira-flash-accent: #bf8700; }
.jira-summary-flash--violet { --jira-flash-accent: #8250df; }
.jira-summary-flash--slate { --jira-flash-accent: #6e7781; }

@media (max-width: 1180px) {
    .jira-summary-flash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jira-summary-flash--wide { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .jira-summary-flash-grid { grid-template-columns: 1fr; }
    .jira-summary-flash--wide { grid-column: auto; }
}

/* Cisco Intersight is feature-gated and fully scoped so it cannot alter legacy views. */
.vendor-mark--intersight { --vendor-color: #00bceb; }

.intersight-workspace {
    min-width: 0;
    padding-bottom: clamp(1rem, 3vh, 2.5rem);
}

.intersight-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 34rem);
    align-items: center;
    gap: 1rem 1.5rem;
    overflow: visible;
    background:
        radial-gradient(circle at 7% 0%, rgba(0, 188, 235, 0.12), transparent 32rem),
        linear-gradient(135deg, rgba(23, 35, 49, 0.98), rgba(14, 21, 31, 0.98));
}

.intersight-hero__identity {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.intersight-hero__identity h2,
.intersight-sync-scope h3,
.intersight-inventory h3 {
    margin: 0.2rem 0 0.35rem;
    color: var(--text);
    line-height: 1.2;
}

.intersight-hero__mark {
    display: grid;
    flex: 0 0 3.25rem;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    border: 1px solid rgba(0, 188, 235, 0.38);
    border-radius: 0.9rem;
    color: #00bceb;
    background: linear-gradient(145deg, rgba(0, 188, 235, 0.18), rgba(101, 192, 79, 0.1));
    box-shadow: 0 0.8rem 1.8rem rgba(0, 188, 235, 0.12);
}

.intersight-hero__mark .vendor-mark {
    width: 2rem;
    height: 2rem;
}

.intersight-hero__controls {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.intersight-hero__controls > label,
.intersight-setup__form > label {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    color: var(--text-soft);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.intersight-hero__controls select,
.intersight-setup__form input,
.intersight-setup__form select,
.intersight-inventory__filters input,
.intersight-inventory__filters select {
    width: 100%;
    min-width: 0;
}

.intersight-hero__controls .toolbar-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.intersight-setup {
    overflow: visible;
}

.intersight-setup > summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: var(--text);
    list-style: none;
}

.intersight-setup > summary::-webkit-details-marker { display: none; }
.intersight-setup > summary svg { width: 1.2rem; height: 1.2rem; color: #65c04f; }
.intersight-setup > summary span:last-child { display: grid; gap: 0.12rem; }
.intersight-setup > summary small { color: var(--text-soft); font-weight: 500; }

.intersight-setup__form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.intersight-setup__help {
    grid-column: 1 / -1;
    margin: 0;
}

.intersight-setup__form > .toolbar-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
}

.intersight-metrics {
    overflow: visible;
}

.intersight-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
}

.intersight-resource-chip {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
    color: var(--text-soft);
    background: var(--panel-soft);
    cursor: pointer;
    transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.intersight-resource-chip:hover {
    border-color: rgba(0, 188, 235, 0.58);
    transform: translateY(-1px);
}

.intersight-resource-chip:has(input:checked) {
    border-color: rgba(0, 188, 235, 0.75);
    color: var(--text);
    background: rgba(0, 188, 235, 0.1);
}

.intersight-resource-chip.is-loaded {
    border-color: color-mix(in srgb, var(--success) 36%, var(--line));
}

.intersight-resource-chip.is-loaded small {
    color: var(--success);
}

.intersight-resource-chip.is-failed {
    border-color: color-mix(in srgb, var(--danger) 40%, var(--line));
    background: color-mix(in srgb, var(--danger) 5%, var(--panel-soft));
}

.intersight-resource-chip.is-failed small {
    color: var(--danger);
}

.intersight-resource-chip.is-empty small,
.intersight-resource-chip.is-pending small {
    color: var(--text-soft);
}

.intersight-resource-chip > span:nth-child(2) {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 0.55rem;
    color: #72ddf7;
    background: rgba(0, 188, 235, 0.13);
}

.intersight-resource-chip svg { width: 1rem; height: 1rem; }
.intersight-resource-chip > span:last-child { display: grid; gap: 0.12rem; min-width: 0; }
.intersight-resource-chip strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intersight-resource-chip small { color: var(--text-soft); text-transform: capitalize; }

.intersight-inventory__filters {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 20rem) auto;
    gap: 0.65rem;
    align-items: center;
    margin: 0.9rem 0;
}

.intersight-empty {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 0;
}

.intersight-empty .integration-empty__icon {
    flex: 0 0 auto;
    color: #00bceb;
}

@media (max-width: 1200px) {
    .intersight-hero { grid-template-columns: minmax(0, 1fr); }
    .intersight-hero__controls .toolbar-actions { justify-content: flex-start; }
    .intersight-resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .intersight-setup__form,
    .intersight-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .intersight-inventory__filters { grid-template-columns: minmax(0, 1fr); }
    .intersight-inventory__filters .toolbar-button { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
    .intersight-hero__identity { display: grid; }
    .intersight-setup__form,
    .intersight-resource-grid { grid-template-columns: minmax(0, 1fr); }
    .intersight-hero__controls .toolbar-actions > button { flex: 1 1 100%; justify-content: center; }
}

/* Agentic Network inherits the Automation review language while keeping chat compact. */
.agentic-workspace {
    height: clamp(38rem, calc(100dvh - 9rem), 62rem);
    min-height: 0;
    max-height: calc(100dvh - 7rem);
}

.agentic-chat-panel {
    min-height: 0;
    overflow: hidden;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.agentic-workflow-tabs {
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.35rem 0.55rem 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
    scrollbar-width: thin;
}

.agentic-workflow-tab {
    min-width: max-content;
    min-height: 3rem;
    display: grid;
    grid-template-columns: 1.1rem auto auto;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.65rem;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-soft);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.agentic-workflow-tab:hover:not(:disabled),
.agentic-workflow-tab.is-active {
    color: var(--text);
    border-bottom-color: #f78166;
    background: var(--surface);
}

.agentic-workflow-tab:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.agentic-workflow-tab span,
.agentic-workflow-tab span svg {
    width: 1rem;
    height: 1rem;
}

.agentic-workflow-tab strong {
    font-size: 0.77rem;
    white-space: nowrap;
}

.agentic-workflow-tab small {
    min-width: 1.35rem;
    padding: 0.12rem 0.35rem;
    border-radius: 999px;
    color: #0969da;
    background: color-mix(in srgb, #0969da 10%, var(--surface));
    font-size: 0.68rem;
    font-weight: 800;
    text-align: center;
}

.agentic-conversation {
    min-height: 0;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.agentic-message {
    width: min(88%, 58rem);
    max-width: none;
    grid-template-areas: "avatar body";
    margin-right: auto;
    margin-left: 0;
}

.agentic-message__avatar { grid-area: avatar; }
.agentic-message__body {
    min-width: 0;
    grid-area: body;
    overflow-wrap: anywhere;
}

.agentic-message--user {
    width: min(76%, 50rem);
    grid-template-columns: minmax(0, 1fr) 2.2rem;
    grid-template-areas: "body avatar";
    margin-right: 0;
    margin-left: auto;
}

.agentic-message--user .agentic-message__body {
    border-radius: 1rem 0.2rem 1rem 1rem;
}

.agentic-message--assistant {
    grid-template-columns: 2.2rem minmax(0, 1fr);
}

.agentic-voice-button.is-enabled {
    color: #1f883d;
    border-color: color-mix(in srgb, #1f883d 48%, var(--border));
    background: color-mix(in srgb, #1f883d 10%, var(--surface));
}

.agentic-voice-button.is-listening {
    color: white;
    border-color: #cf222e;
    background: #cf222e;
}

.agentic-dictation-button.is-listening {
    color: white;
    border-color: #cf222e;
    background: #cf222e;
    box-shadow: 0 0 0 3px color-mix(in srgb, #cf222e 18%, transparent);
}

.agentic-dictation-button:disabled,
.agentic-send-button:disabled { opacity: .55; cursor: not-allowed; }

@keyframes agentic-voice-connecting-spin {
    to { transform: rotate(360deg); }
}

.agentic-voice-button.is-connecting,
.agentic-history-panel__rail-action.is-connecting,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar__status.is-connecting {
    color: var(--info, #58a6ff);
    border-color: color-mix(in srgb, var(--info, #58a6ff) 58%, var(--border));
}

.agentic-voice-button.is-connecting svg,
.agentic-history-panel__rail-action.is-connecting svg,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar__status.is-connecting svg {
    animation: agentic-voice-connecting-spin 0.85s linear infinite;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar__status.is-wake-standby {
    color: var(--success, #3fb950);
    border-color: color-mix(in srgb, var(--success, #3fb950) 52%, var(--border));
    background: color-mix(in srgb, var(--success, #3fb950) 8%, var(--panel-strong));
}

.agentic-target-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.3rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.85rem;
    background: var(--surface-muted);
}

.agentic-target-tabs button {
    min-height: 2.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.65rem;
    color: var(--muted);
    background: transparent;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.agentic-target-tabs button.active {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
}

.agentic-target-tabs svg {
    width: 1rem;
    height: 1rem;
}

.agentic-customer-cascade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.agentic-customer-cascade--infra {
    grid-template-columns: minmax(14rem, 24rem);
}

.agentic-customer-cascade > label {
    min-width: 0;
    display: grid;
    gap: 0.28rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.agentic-device-option__badges {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.agentic-device-picker__footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding: 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    backdrop-filter: blur(12px);
}

@media (max-width: 900px) {
    .agentic-workspace {
        height: auto;
        max-height: none;
    }
    .agentic-customer-cascade { grid-template-columns: 1fr; }
    .agentic-message,
    .agentic-message--user { width: 96%; }
}

/* Compact donut legends and glossary controls across every workspace. */

.donut-card__body .donut-legend,
.donut-card__body--single .donut-legend {
    gap: 0.28rem;
    max-height: 15rem;
    min-width: 0;
    padding-right: 0.12rem;
    overflow-x: hidden;
    overflow-y: auto;
}

.donut-card__body .legend-row,
.donut-card__body--single .legend-row {
    min-width: 0;
    min-height: 2.15rem;
    align-items: center;
    gap: 0.36rem;
    padding: 0.34rem 0.44rem;
    border-radius: 0.58rem;
    font-size: 0.8rem;
}

.donut-card__body .legend-row:hover,
.donut-card__body--single .legend-row:hover,
.donut-card__body .legend-row.is-active,
.donut-card__body--single .legend-row.is-active {
    transform: translateY(-1px);
}

.donut-card__body .legend-row__label,
.donut-card__body--single .legend-row__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
}

.donut-card__body .legend-row__dot,
.donut-card__body--single .legend-row__dot,
.donut-glossary-popup .legend-row__dot {
    width: 0.58rem;
    height: 0.58rem;
    box-shadow: none;
}

.donut-card__body .legend-row__check input,
.donut-card__body--single .legend-row__check input {
    width: 0.82rem;
    height: 0.82rem;
}

.donut-card__body .legend-row__share,
.donut-card__body--single .legend-row__share {
    font-size: 0.68rem;
}

.donut-card__body .legend-row > strong,
.donut-card__body--single .legend-row > strong {
    font-size: 0.82rem;
}

.donut-card__body .legend-row__selected-mark,
.donut-card__body--single .legend-row__selected-mark {
    width: 0.9rem;
    height: 0.9rem;
}

.donut-card__body .legend-row__action-button,
.donut-card__body--single .legend-row__action-button {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    padding: 0.38rem;
    border-radius: 0.5rem;
}

.donut-glossary-trigger {
    gap: 0.28rem;
    padding: 0.24rem 0.32rem;
    border-radius: 0.68rem;
}

.donut-glossary-trigger__button {
    min-height: 1.75rem;
    padding: 0.3rem 0.52rem;
    font-size: 0.74rem;
}

.donut-glossary-trigger .muted-copy {
    padding: 0.14rem 0.42rem;
    font-size: 0.66rem;
}

.donut-glossary-popup-window .popup-window__dialog {
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(82vh, 44rem);
}

.donut-glossary-popup-window .popup-window__body {
    padding: 0.62rem 0.72rem 0.78rem;
}

.donut-glossary-popup .donut-glossary__actions {
    gap: 0.42rem;
    padding: 0 0 0.42rem;
}

.donut-glossary-popup .donut-glossary__actions .toolbar-actions {
    gap: 0.3rem;
}

.donut-glossary-popup .donut-glossary__actions :is(.toolbar-button, .primary-button) {
    min-height: 1.9rem;
    padding: 0.34rem 0.54rem;
    font-size: 0.72rem;
}

.donut-glossary-popup .donut-glossary__status {
    margin-top: 0.24rem;
    padding: 0.14rem 0.46rem;
    font-size: 0.68rem;
}

.donut-glossary-popup .donut-glossary__search-shell {
    gap: 0.22rem;
    margin: 0.34rem 0 0.48rem;
}

.donut-glossary-popup .donut-glossary__search-shell .toolbar-search {
    min-height: 2rem;
    padding: 0.38rem 0.56rem;
    font-size: 0.78rem;
}

.donut-glossary-popup .donut-glossary__list {
    gap: 0.28rem;
    max-height: min(48vh, 24rem);
    padding: 0 0.12rem 0.12rem 0;
}

.donut-glossary-popup .donut-glossary__item {
    gap: 0.38rem;
    min-height: 2.1rem;
    padding: 0.32rem 0.44rem;
    border-radius: 0.56rem;
    font-size: 0.78rem;
}

.donut-glossary-popup .donut-glossary__item input {
    width: 0.82rem;
    height: 0.82rem;
}

.donut-glossary-popup .donut-glossary__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
}

@media (max-width: 680px) {
    .donut-glossary-popup-window .popup-window__dialog {
        width: 100%;
        max-height: 100dvh;
    }

    .donut-glossary-popup .donut-glossary__actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Webex evidence, ranking, exports, and right-side record detail. */
.toolbar-button--compact,
.primary-button--compact,
.integration-workspace__header-actions .toolbar-button,
.integration-analytics-dashboard__actions .toolbar-button {
    min-height: 2.25rem;
    padding: 0.45rem 0.7rem;
    gap: 0.38rem;
    font-size: 0.75rem;
    line-height: 1;
}

.toolbar-button--compact svg,
.primary-button--compact svg,
.integration-workspace__header-actions .toolbar-button svg,
.integration-analytics-dashboard__actions .toolbar-button svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem;
    max-width: 1rem;
    flex: 0 0 1rem;
    stroke-width: 2.35;
}

.integration-workspace__header-actions,
.integration-analytics-dashboard__actions,
.webex-summary-toolbar {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.integration-record-row,
.webex-message-row {
    --webex-row-tone: #5b8def;
    cursor: pointer;
    transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.integration-record-row.tone-success { --webex-row-tone: #32c48d; }
.integration-record-row.tone-info { --webex-row-tone: #5b8def; }
.integration-record-row.tone-danger { --webex-row-tone: #ef6576; }
.integration-record-row.tone-soft { --webex-row-tone: #9a8cf4; }
.webex-message-row.is-mine { --webex-row-tone: #32c48d; }
.webex-message-row.is-participant { --webex-row-tone: #5b8def; }

.integration-record-row td:first-child,
.webex-message-row td:first-child {
    box-shadow: inset 4px 0 var(--webex-row-tone);
}

.integration-record-row:hover,
.integration-record-row:focus-visible,
.webex-message-row:hover,
.webex-message-row:focus-visible {
    outline: none;
    background: color-mix(in srgb, var(--webex-row-tone) 10%, var(--surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--webex-row-tone) 48%, transparent);
}

.integration-evidence {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
}

.integration-evidence.is-ready { color: #64d9ac; }
.integration-evidence svg { width: 0.9rem; height: 0.9rem; flex: 0 0 0.9rem; stroke-width: 2.35; }

.webex-summary-toolbar {
    display: flex;
    gap: 0.45rem;
}

.webex-summary-mode {
    display: inline-flex;
    padding: 0.2rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.65rem;
    background: var(--surface);
}

.webex-summary-mode button {
    min-height: 1.8rem;
    padding: 0.32rem 0.65rem;
    color: var(--muted);
    border: 0;
    border-radius: 0.46rem;
    background: transparent;
    font-size: 0.7rem;
    font-weight: 850;
}

.webex-summary-mode button.is-active {
    color: #ffffff;
    background: linear-gradient(135deg, #246fd4, #7458dd);
    box-shadow: 0 0.35rem 0.8rem rgba(62, 112, 225, 0.24);
}

.webex-weekly-table table { min-width: 64rem; }

.webex-rank-summary-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(25rem, 0.8fr) minmax(30rem, 1.2fr);
    gap: 1rem;
}

.webex-rank-badge {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    background: #53657c;
}

.webex-rank-badge.rank-1 { color: #241900; background: linear-gradient(135deg, #ffe285, #e6a91c); box-shadow: 0 0 0.8rem rgba(255, 190, 43, 0.3); }
.webex-rank-badge.rank-2 { color: #202733; background: linear-gradient(135deg, #eef4ff, #9eabc1); }
.webex-rank-badge.rank-3 { color: #2c1509; background: linear-gradient(135deg, #f1a978, #a95a33); }

.webex-space-summaries > div:last-child {
    display: grid;
    gap: 0.55rem;
}

.webex-space-summaries article {
    --space-tone: #5b8def;
    min-width: 0;
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    padding: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--space-tone) 34%, var(--panel-border));
    border-left: 4px solid var(--space-tone);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--space-tone) 8%, var(--surface)), var(--surface));
}

.webex-space-summaries article.tone-purple { --space-tone: #8c64ff; }
.webex-space-summaries article.tone-mint { --space-tone: #32c48d; }
.webex-space-summaries article.tone-sun { --space-tone: #ffb020; }
.webex-space-summaries article > span { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; color: #ffffff; border-radius: 0.65rem; background: var(--space-tone); }
.webex-space-summaries article > span svg { width: 1.15rem; height: 1.15rem; stroke-width: 2.35; }
.webex-space-summaries article div { min-width: 0; display: grid; gap: 0.2rem; }
.webex-space-summaries article small { color: var(--muted); font-size: 0.69rem; }
.webex-space-summaries article p { margin: 0.15rem 0 0; color: var(--text-soft); font-size: 0.76rem; line-height: 1.42; }

.webex-space-activity {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.38rem !important;
    margin-top: 0.2rem;
}

.webex-space-activity > span {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
    padding: 0.38rem 0.45rem;
    color: var(--text-soft);
    border: 1px solid color-mix(in srgb, var(--space-tone) 24%, var(--panel-border));
    border-radius: 0.48rem;
    background: color-mix(in srgb, var(--space-tone) 5%, var(--panel));
    font-size: 0.66rem;
    overflow-wrap: anywhere;
}

.webex-space-activity b {
    color: var(--space-tone);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.webex-space-activity em {
    color: var(--muted);
    font-size: 0.6rem;
    font-style: normal;
}

.webex-sort-button {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.42rem;
    padding: 0;
    color: inherit;
    border: 0;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
}

.webex-sort-button i {
    position: relative;
    width: 0.55rem;
    height: 0.7rem;
    flex: 0 0 0.55rem;
}

.webex-sort-button i::before,
.webex-sort-button i::after {
    content: "";
    position: absolute;
    left: 0;
    border-left: 0.25rem solid transparent;
    border-right: 0.25rem solid transparent;
    opacity: 0.42;
}

.webex-sort-button i::before { top: 0; border-bottom: 0.28rem solid currentColor; }
.webex-sort-button i::after { bottom: 0; border-top: 0.28rem solid currentColor; }
th[aria-sort="ascending"] .webex-sort-button i::before,
th[aria-sort="descending"] .webex-sort-button i::after { opacity: 1; color: #78aaff; }

#detailDrawer[data-detail-mode="webex-record"] { width: min(40rem, 94vw); }

.webex-detail-hero {
    --webex-detail-tone: #5b8def;
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 1rem;
    margin-bottom: 0.9rem;
    border: 1px solid color-mix(in srgb, var(--webex-detail-tone) 44%, var(--panel-border));
    border-left: 4px solid var(--webex-detail-tone);
    border-radius: 0.9rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--webex-detail-tone) 12%, var(--surface)), var(--surface));
}

.webex-detail-hero.tone-success { --webex-detail-tone: #32c48d; }
.webex-detail-hero.tone-danger { --webex-detail-tone: #ef6576; }
.webex-detail-hero.tone-soft { --webex-detail-tone: #8c64ff; }
.webex-detail-hero__icon { width: 3.6rem; height: 3.6rem; display: grid; place-items: center; border-radius: 0.9rem; background: color-mix(in srgb, var(--webex-detail-tone) 18%, var(--panel)); }
.webex-detail-hero__icon svg { width: 2.15rem !important; height: 2.15rem !important; }
.webex-detail-hero h3 { margin: 0.15rem 0 0.45rem; overflow-wrap: anywhere; }

.webex-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.webex-detail-grid .detail-item { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr); gap: 0.6rem; align-items: center; }
.webex-detail-grid__icon { --detail-icon-tone: #5b8def; width: 2.15rem; height: 2.15rem; display: grid; place-items: center; color: var(--detail-icon-tone); border-radius: 0.6rem; background: color-mix(in srgb, var(--detail-icon-tone) 16%, var(--panel)); }
.webex-detail-grid__icon.tone-purple { --detail-icon-tone: #8c64ff; }
.webex-detail-grid__icon.tone-mint { --detail-icon-tone: #32c48d; }
.webex-detail-grid__icon.tone-sun { --detail-icon-tone: #ffb020; }
.webex-detail-grid__icon svg { width: 1.05rem; height: 1.05rem; stroke-width: 2.35; }
.webex-detail-message { margin-top: 0.75rem; }
.webex-detail-message > p:last-child { color: var(--text-soft); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 1100px) {
    .webex-rank-summary-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .webex-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .webex-summary-toolbar { justify-content: flex-start; }
    .webex-space-activity { grid-template-columns: minmax(0, 1fr); }
}

/* Final compact table and overlay interaction authority. */
.dashboard-engineer-sla-case-stack {
    align-content: start;
    gap: 0.32rem;
    min-width: 10rem;
}

.dashboard-engineer-sla-cases {
    flex-wrap: nowrap;
}

.dashboard-engineer-sla-case-more {
    width: fit-content;
}

.dashboard-engineer-sla-case-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.28rem 0.58rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--brand) 7%, var(--panel));
    color: var(--brand);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.dashboard-engineer-sla-case-more > summary::-webkit-details-marker {
    display: none;
}

.dashboard-engineer-sla-case-more__ellipsis {
    font-size: 1.15rem;
    line-height: 0.7;
    letter-spacing: 0.08em;
}

.dashboard-engineer-sla-cases--expanded {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.detail-drawer.open,
.detail-drawer.open .detail-drawer__panel,
.detail-drawer.open .detail-drawer__head,
.detail-drawer.open .detail-drawer__content,
.detail-drawer.open #detailDrawerClose {
    pointer-events: auto !important;
}

.detail-drawer.open .detail-drawer__content {
    position: relative;
    scrollbar-gutter: stable;
}

/* Keep donut legends concise across every workspace and theme. */
.donut-card__body .donut-legend,
.donut-glossary-popup-window .donut-glossary__list {
    gap: 0.28rem;
    max-height: 15rem;
}

.donut-card__body .legend-row,
.donut-glossary-popup-window .donut-glossary__row {
    min-height: 2.15rem;
    padding: 0.32rem 0.45rem;
}

.donut-glossary-popup-window .popup-window__dialog {
    width: min(46rem, calc(100vw - 2rem));
}

/* Compact professional workspace status bar. */
:root {
    --easyclick-footer-reserve: 4.8rem;
}

.workspace-footer,
html[data-theme="dark"] .workspace-footer,
html[data-theme="light"] .workspace-footer {
    display: grid;
    grid-template-columns: repeat(4, minmax(14rem, 1fr));
    grid-auto-flow: column;
    gap: 0.45rem;
    min-height: 3.75rem;
    height: auto;
    padding: 0.38rem 0.55rem calc(0.38rem + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-top: 1px solid #21262d;
    border-radius: 0;
    background: #010409;
    box-shadow: 0 -10px 30px rgba(1, 4, 9, 0.3);
    scrollbar-width: thin;
    scrollbar-color: #30363d #010409;
}

.workspace-footer .footer-pill {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
    min-height: 2.95rem;
    padding: 0.38rem 0.62rem;
    border: 1px solid #21262d;
    border-radius: 0.72rem;
    background: linear-gradient(180deg, #0d1117, #0a0e14);
    color: #f0f6fc;
    box-shadow: inset 0 1px 0 rgba(240, 246, 252, 0.035);
}

.workspace-footer .footer-pill__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid color-mix(in srgb, var(--footer-accent, #58a6ff) 32%, #30363d);
    border-radius: 0.58rem;
    background: color-mix(in srgb, var(--footer-accent, #58a6ff) 14%, #161b22);
    color: var(--footer-accent, #58a6ff);
}

.workspace-footer .footer-pill__icon svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.footer-pill--workspace { --footer-accent: #58a6ff; }
.footer-pill--security { --footer-accent: #d2a8ff; }
.footer-pill--session { --footer-accent: #f2cc60; }
.footer-pill--clock { --footer-accent: #3fb950; }

.workspace-footer .footer-pill__copy {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.workspace-footer .footer-pill__label {
    margin: 0;
    color: #8b949e;
    font-size: 0.59rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.11em;
}

.workspace-footer .footer-pill strong,
.workspace-footer .footer-pill time {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #f0f6fc;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.workspace-footer .footer-pill__meta {
    max-width: 7rem;
    overflow: hidden;
    color: #8b949e;
    font-size: 0.62rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-footer .footer-pill__meta--live {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #56d364;
}

.workspace-footer .footer-pill__meta--live > span {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #3fb950;
    box-shadow: 0 0 0 0.2rem rgba(63, 185, 80, 0.12);
}

@media (max-width: 1100px) {
    .workspace-footer,
    html[data-theme="dark"] .workspace-footer,
    html[data-theme="light"] .workspace-footer {
        grid-template-columns: repeat(4, minmax(15rem, 1fr));
    }
}

/* Agentic chat final cascade: stable left/right cards, compact icons, and run controls. */
.agentic-message {
    grid-template-columns: 2.35rem minmax(0, 1fr);
    grid-template-areas: "avatar body";
    width: min(88%, 72rem);
    max-width: none;
    margin: 0 auto 1rem 0;
    align-items: start;
}

.agentic-message--user {
    grid-template-columns: minmax(0, 1fr) 2.35rem;
    grid-template-areas: "body avatar";
    width: min(76%, 58rem);
    margin-right: 0;
    margin-left: auto;
}

.agentic-message__avatar {
    grid-area: avatar;
    width: 2.35rem;
    min-width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.72rem;
    color: #ffffff;
    background: #2da44e;
    box-shadow: 0 8px 18px rgba(45, 164, 78, 0.18);
}

.agentic-message--user .agentic-message__avatar {
    background: #0969da;
    box-shadow: 0 8px 18px rgba(9, 105, 218, 0.2);
}

.agentic-message__avatar svg,
.agentic-workspace .agentic-control-button svg,
.agentic-workspace .agentic-stop-button svg,
.agentic-message__meta-actions button svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
    min-width: 0 !important;
    max-width: 1.05rem !important;
}

.agentic-message__body {
    grid-area: body;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    border: 1px solid color-mix(in srgb, #2da44e 24%, var(--line));
    border-radius: 0.95rem 0.95rem 0.95rem 0.24rem;
    background: var(--panel);
    box-shadow: 0 10px 26px rgba(31, 35, 40, 0.08);
}

.agentic-message--user .agentic-message__body {
    border-color: color-mix(in srgb, #0969da 25%, var(--line));
    border-radius: 0.95rem 0.95rem 0.24rem 0.95rem;
    background: color-mix(in srgb, #0969da 5%, var(--panel));
}

.agentic-message__meta {
    min-width: 0;
    padding: 0.58rem 0.78rem;
    color: #ffffff;
    background: linear-gradient(100deg, #1f883d, #2da44e);
}

.agentic-message--user .agentic-message__meta {
    background: linear-gradient(100deg, #0550ae, #0969da);
}

.agentic-message__meta strong,
.agentic-message__meta time {
    color: #ffffff;
}

.agentic-message__meta-actions {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
}

.agentic-message__meta-actions time {
    overflow: hidden;
    max-width: 19rem;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.9;
}

.agentic-message__meta-actions button {
    display: inline-grid;
    width: 1.75rem;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.5rem;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.agentic-message__meta-actions button:hover {
    background: rgba(255, 255, 255, 0.24);
}

.agentic-message__content {
    min-width: 0;
    padding: 0.8rem 0.9rem;
}

.agentic-message__content > p {
    margin: 0;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.agentic-header-tools {
    display: flex;
    min-width: 0;
    align-items: flex-end;
    flex-direction: column;
    gap: 0.5rem;
}

.agentic-run-metrics {
    display: grid;
    grid-template-columns: minmax(7rem, 1.5fr) repeat(4, minmax(4.4rem, 1fr));
    gap: 0.34rem;
}

.agentic-run-metrics > span {
    display: flex;
    min-width: 0;
    padding: 0.36rem 0.5rem;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 0.62rem;
    background: var(--panel-soft);
}

.agentic-run-metrics small {
    color: var(--muted);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.agentic-run-metrics strong {
    overflow: hidden;
    max-width: 11rem;
    color: var(--ink);
    font-size: 0.74rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentic-stop-button,
.agentic-inline-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    border-color: color-mix(in srgb, #cf222e 45%, var(--line));
    color: #ffffff;
    background: #cf222e;
}

.agentic-stop-button {
    min-height: 2rem;
    padding: 0.36rem 0.7rem;
    border-radius: 0.65rem;
    font-weight: 750;
}

.agentic-stop-button:disabled {
    color: var(--muted);
    background: var(--panel-soft);
    opacity: 0.65;
}

.agentic-inline-stop {
    animation: agentic-stop-pulse 1.25s ease-in-out infinite;
}

@keyframes agentic-stop-pulse {
    50% { box-shadow: 0 0 0 0.35rem rgba(207, 34, 46, 0.12); }
}

@media (max-width: 980px) {
    .agentic-chat-panel__head { align-items: flex-start; flex-direction: column; }
    .agentic-header-tools { width: 100%; align-items: stretch; }
    .agentic-run-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .agentic-message,
    .agentic-message--user { width: 96%; }
}

/* Final Agentic layout overrides must follow legacy workspace rules. */
.agentic-workspace {
    height: clamp(38rem, calc(100dvh - 9rem), 62rem);
    min-height: 0;
    max-height: calc(100dvh - 7rem);
}

.agentic-chat-panel {
    min-height: 0;
    overflow: hidden;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
}

.agentic-conversation {
    min-height: 0;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.agentic-message {
    width: min(88%, 58rem);
    max-width: none;
    grid-template-areas: "avatar body";
    margin-right: auto;
    margin-left: 0;
}

.agentic-message__avatar { grid-area: avatar; }
.agentic-message__body { min-width: 0; grid-area: body; overflow-wrap: anywhere; }

.agentic-message--user {
    width: min(76%, 50rem);
    grid-template-columns: minmax(0, 1fr) 2.2rem;
    grid-template-areas: "body avatar";
    margin-right: 0;
    margin-left: auto;
}

.agentic-message--user .agentic-message__body { border-radius: 1rem 0.2rem 1rem 1rem; }
.agentic-message--assistant { grid-template-columns: 2.2rem minmax(0, 1fr); }

@media (max-width: 900px) {
    .agentic-workspace { height: auto; max-height: none; }
    .agentic-message,
    .agentic-message--user { width: 96%; }
}

@media (max-width: 680px) {
    .workspace-footer .footer-pill__meta {
        display: none;
    }

    .workspace-footer .footer-pill {
        grid-template-columns: auto minmax(0, 1fr);
    }
}

.jira-workspace__results-table table {
    min-width: 64rem;
}

.jira-drawer__hero {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.jira-drawer__summary {
    margin: 0;
}

.jira-drawer__hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.jira-drawer__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(16rem, 0.95fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.jira-drawer__sidebar {
    display: grid;
    gap: 1rem;
    align-content: start;
}

.jira-drawer__section--primary {
    min-height: 100%;
}

.jira-drawer__detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.jira-drawer__detail-item {
    min-width: 0;
}

.jira-drawer__description {
    white-space: pre-wrap;
}

.jira-drawer__comment .muted-copy {
    white-space: pre-wrap;
}

.jira-timestamp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
}

.jira-relative-age {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: 0.18rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 28%, var(--panel-border));
    border-radius: 999px;
    color: var(--brand-700);
    background: color-mix(in srgb, var(--brand-500) 10%, var(--panel));
    font-size: 0.74rem;
    font-weight: 700;
    white-space: nowrap;
}

.jira-drawer__comments {
    gap: 0.75rem;
}

.jira-table-selection-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    min-height: 2.6rem;
    padding: 0.38rem 0.6rem;
    border: 1px solid var(--panel-border);
    border-bottom: 0;
    border-radius: 0.8rem 0.8rem 0 0;
    background: color-mix(in srgb, var(--brand-500) 7%, var(--panel));
}

.jira-selection-cell {
    width: 3rem;
    min-width: 3rem;
    max-width: 3rem;
    padding-inline: 0.65rem !important;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
}

.jira-selection-cell + th,
.jira-selection-cell + td {
    width: 11rem;
    min-width: 11rem;
    padding-left: 0.9rem !important;
}

.jira-selection-check {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.55rem;
    cursor: pointer;
    overflow: hidden;
}

.jira-selection-check:hover {
    background: color-mix(in srgb, var(--brand-500) 12%, transparent);
}

.jira-selection-check input {
    display: block;
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--brand-600);
    cursor: pointer;
}

.jira-assignee-picker {
    display: grid;
    gap: 0.75rem;
    width: 100%;
    padding: 0.9rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--brand-500) 5%, var(--panel));
}

.jira-assignee-picker__header,
.jira-assignee-picker__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}

.jira-assignee-picker__header > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.jira-assignee-picker__sync-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: auto;
    min-height: 2.35rem;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
}

.jira-assignee-picker__sync-button > svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem;
    max-width: 1rem;
    flex: 0 0 1rem;
    stroke-width: 2.25;
}

.jira-bulk-status-row {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(11rem, 1fr) minmax(12rem, 1fr) auto;
    align-items: end;
    width: 100%;
}

.jira-bulk-status-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.75rem;
    white-space: nowrap;
}

.jira-bulk-status-refresh > svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem;
    max-width: 1rem;
    flex: 0 0 1rem;
}

.jira-assignee-picker__search {
    width: 100%;
}

.jira-assignee-picker__actions {
    justify-content: flex-start;
}

.jira-assignee-picker__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 0.5rem;
    max-height: 19rem;
    overflow: auto;
    padding: 0.25rem;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.jira-assignee-option {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.7rem;
    color: var(--text-main);
    background: var(--panel);
    cursor: pointer;
}

.jira-assignee-option:hover,
.jira-assignee-option:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand-500) 55%, var(--panel-border));
    background: color-mix(in srgb, var(--brand-500) 10%, var(--panel));
}

.jira-assignee-option input {
    width: 1rem;
    height: 1rem;
    margin: 0.12rem 0 0;
    accent-color: var(--brand-600);
}

.jira-assignee-option span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.jira-assignee-option.is-search-hidden,
.jira-assignee-option[hidden] {
    display: none !important;
}

.jira-assignee-picker__action {
    min-height: 2.35rem;
}

.jira-assignee-picker__action > svg {
    width: 1rem;
    height: 1rem;
    color: var(--brand-600);
}

.jira-assignee-picker__action--clear > svg {
    color: #cf222e;
}

.jira-dashboard-query-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.7rem;
    margin: 0.3rem 0 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.jira-dashboard-query-picker__topbar {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(14rem, 0.72fr) minmax(14rem, 0.55fr);
    align-items: start;
    gap: 0.75rem;
    min-width: 0;
}

.jira-dashboard-query-picker__topbar.has-custom {
    grid-template-columns: minmax(17rem, 0.75fr) minmax(14rem, 0.6fr) minmax(22rem, 1.1fr) minmax(14rem, 0.5fr);
}

.jira-dashboard-query-picker__topbar.has-date-range {
    grid-template-columns: minmax(17rem, 0.65fr) minmax(14rem, 0.5fr) minmax(52rem, 1.75fr) minmax(14rem, 0.5fr);
}

.jira-dashboard-query-picker .jira-form-field {
    min-width: 0;
}

.jira-dashboard-assignee-picker {
    display: block;
    grid-column: 1 / -1;
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--brand-500) 24%, var(--panel-border));
    background: color-mix(in srgb, var(--brand-500) 4%, var(--panel));
}

.jira-dashboard-assignee-picker[open] {
    border-color: color-mix(in srgb, var(--brand-500) 52%, var(--panel-border));
    box-shadow: 0 0.8rem 2rem color-mix(in srgb, #000 13%, transparent);
}

.jira-dashboard-query-picker__apply {
    align-self: start;
    margin-top: 1.32rem;
    min-height: 2.55rem;
    width: 100%;
}

.jira-dashboard-assignee-picker__summary {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    min-height: 3.2rem;
    padding: 0.55rem 0.75rem;
    color: var(--text-strong);
    cursor: pointer;
    list-style: none;
}

.jira-dashboard-assignee-picker__summary::after {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    margin-left: 0.05rem;
    border-right: 2px solid var(--brand-600);
    border-bottom: 2px solid var(--brand-600);
    transform: rotate(45deg) translateY(-0.12rem);
    transition: transform 160ms ease;
}

.jira-dashboard-assignee-picker[open] > .jira-dashboard-assignee-picker__summary {
    border-bottom: 1px solid var(--panel-border);
}

.jira-dashboard-assignee-picker[open] > .jira-dashboard-assignee-picker__summary::after {
    transform: rotate(225deg) translate(-0.08rem, -0.08rem);
}

.jira-dashboard-assignee-picker__summary strong {
    font-size: 0.92rem;
    line-height: 1.2;
}

.jira-dashboard-assignee-picker__summary::-webkit-details-marker {
    display: none;
}

.jira-dashboard-assignee-picker__summary > span:first-child {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.jira-dashboard-assignee-picker__summary small {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.3;
}

.jira-dashboard-assignee-picker__count {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.3rem 0.6rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 35%, var(--panel-border));
    border-radius: 999px;
    color: var(--brand-700);
    background: color-mix(in srgb, var(--brand-500) 11%, var(--panel));
    white-space: nowrap;
}

.jira-dashboard-assignee-picker__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
    min-width: 0;
    padding: 0.75rem;
}

.jira-dashboard-assignee-picker__body > .jira-assignee-picker__header {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
}

.jira-dashboard-assignee-picker__body .jira-assignee-picker__search {
    flex: 1 1 20rem;
    min-height: 2.35rem;
    padding: 0.52rem 0.72rem;
    font-size: 0.84rem;
}

.jira-assignee-picker__find-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 2.35rem;
    padding: 0.48rem 0.72rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.jira-assignee-picker__find-button > svg {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 0.95rem;
}

.jira-dashboard-assignee-picker__list {
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    max-height: min(25rem, 48vh);
    overflow-x: hidden;
    padding: 0.15rem 0.2rem 0.25rem;
}

.jira-dashboard-assignee-picker__list .jira-assignee-option {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    min-height: 2.55rem;
    padding: 0.5rem 0.58rem;
    font-size: 0.82rem;
}

.jira-dashboard-assignee-option__dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 2px solid color-mix(in srgb, currentColor 15%, transparent);
    border-radius: 999px;
    box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 5%, transparent);
}

.jira-dashboard-assignee-option__name {
    min-width: 0;
    overflow: hidden;
    color: var(--text-strong);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jira-dashboard-assignee-option__share {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.jira-dashboard-assignee-option__count {
    min-width: 2rem;
    color: var(--text-strong);
    text-align: right;
}

html[data-theme="dark"] .jira-dashboard-assignee-picker__count {
    color: #dbeafe;
    background: color-mix(in srgb, var(--brand-500) 22%, var(--panel));
}

.jira-dashboard-query-picker__custom[hidden] {
    display: none;
}

.jira-dashboard-query-picker__custom .toolbar-search {
    width: 100%;
}

.jira-dashboard-query-picker__custom {
    min-width: 0;
}

.jira-dashboard-query-picker__dates {
    display: grid;
    grid-template-columns: minmax(14rem, 0.62fr) repeat(3, minmax(9.5rem, 0.42fr)) minmax(20rem, 1fr);
    align-items: start;
    gap: 0.35rem 0.65rem;
    min-width: 0;
}

.jira-dashboard-query-picker__dates[hidden] {
    display: none;
}

.jira-dashboard-query-picker__dates .toolbar-search {
    width: 100%;
    min-width: 0;
    color-scheme: light;
}

html[data-theme="dark"] .jira-dashboard-query-picker__dates .toolbar-search {
    color-scheme: dark;
}

.jira-dashboard-issue-key {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace);
    text-transform: uppercase;
}

.jira-dashboard-query-picker__dates > .jira-form-field__hint {
    grid-column: 1 / -1;
}

.jira-issue-link {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    display: inline-flex;
    text-align: left;
    color: var(--brand-600);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

.jira-issue-link:hover,
.jira-issue-link:focus-visible {
    color: var(--brand-700);
}

/* Structured Jira case table and issue drawer. */
.jira-workspace__results-table .compact-table-shell {
    gap: 0;
    border: 1px solid var(--panel-border);
    border-radius: 0.8rem;
    overflow: hidden;
    background: var(--panel);
}

.jira-workspace__results-table > .jira-table-selection-toolbar + .compact-table-shell {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.jira-workspace__results-table .table-filter-strip {
    align-items: center;
    gap: 0.38rem;
    margin: 0;
    padding: 0.48rem 0.62rem;
    border-bottom: 1px solid var(--panel-border);
    background: color-mix(in srgb, var(--panel-soft) 62%, var(--panel));
}

.jira-workspace__results-table .table-filter__summary {
    min-height: 2.15rem;
    padding: 0.32rem 0.55rem;
}

.jira-workspace__results-table .compact-table__toolbar {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.62rem;
    border-bottom: 1px solid var(--panel-border);
    background: var(--panel);
}

.jira-workspace__results-table .compact-table__toolbar .toolbar-search {
    min-height: 2.35rem;
    margin: 0;
}

.jira-workspace__results-table .table-widget__meta {
    justify-content: flex-end;
    width: auto;
    min-width: max-content;
    gap: 0.55rem;
}

.jira-workspace__results-table .table-widget__actions {
    gap: 0.4rem;
    margin-left: 0;
}

.jira-workspace__results-table .table-widget__rows {
    gap: 0.35rem;
}

.jira-workspace__results-table .compact-select,
.jira-workspace__results-table .icon-button {
    min-height: 2.25rem;
}

.jira-workspace__results-table .dashboard-pager {
    margin: 0;
    padding: 0.42rem 0.62rem;
    border-top: 1px solid var(--panel-border);
}

.jira-workspace__results-table th,
.jira-workspace__results-table td { vertical-align: middle; }

.jira-summary-cell {
    display: block;
    min-width: 18rem;
    max-width: 32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 650;
}

.jira-cell-label,
.jira-signal,
.jira-age {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.jira-cell-label .icon-inline,
.jira-signal .icon-inline,
.jira-drawer__quick-facts .icon-inline {
    width: 1rem;
    height: 1rem;
    color: var(--brand-600);
}

.jira-workspace .jira-signal--critical .icon-inline { color: #ca3521; }
.jira-workspace .jira-signal--high .icon-inline { color: #e56910; }
.jira-workspace .jira-signal--medium .icon-inline { color: #f5a524; }
.jira-workspace .jira-signal--low .icon-inline { color: #0c66e4; }

.jira-workspace .jira-status-icon--done .icon-inline { color: #22a06b; }
.jira-workspace .jira-status-icon--progress .icon-inline { color: #0c66e4; }
.jira-workspace .jira-status-icon--todo .icon-inline { color: #8590a2; }
.jira-workspace .jira-status-icon--blocked .icon-inline { color: #ca3521; }

.jira-workspace .jira-issue-type--epic .icon-inline { color: #6e5dc6; }
.jira-workspace .jira-issue-type--story .icon-inline { color: #22a06b; }
.jira-workspace .jira-issue-type--bug .icon-inline { color: #ca3521; }
.jira-workspace .jira-issue-type--task .icon-inline { color: #0c66e4; }
.jira-workspace .jira-issue-type--subtask .icon-inline { color: #2898bd; }
.jira-workspace .jira-issue-type--improvement .icon-inline { color: #00a3bf; }

.jira-workspace .jira-signal[style*="--jira-icon-color"] .icon-inline {
    color: var(--jira-icon-color) !important;
}

.jira-workspace .jira-issue-type .icon-inline {
    box-sizing: border-box;
    width: 1.08rem;
    height: 1.08rem;
    padding: 0.14rem;
    border-radius: 0.16rem;
    color: #fff !important;
    background: var(--jira-icon-color);
    stroke-width: 2.4;
}

.jira-cell-label--date { min-width: 10.5rem; white-space: nowrap; }

.jira-labels {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    max-width: min(22rem, 100%);
}

.jira-label-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.2rem 0.48rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 32%, var(--panel-border));
    border-radius: 0.35rem;
    background: color-mix(in srgb, var(--brand-500) 12%, var(--panel));
    color: var(--brand-700);
    font-size: clamp(0.75rem, 0.72rem + 0.08vw, 0.84rem);
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.jira-labels--empty {
    color: var(--muted);
    font-size: 0.8rem;
}

.jira-signal,
.jira-age {
    padding: 0.34rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 999px;
    white-space: nowrap;
    background: color-mix(in srgb, var(--panel-soft) 90%, transparent);
}

.jira-signal--critical, .jira-age--critical { color: #cf222e; background: color-mix(in srgb, #cf222e 12%, var(--panel)); border-color: color-mix(in srgb, #cf222e 28%, transparent); }
.jira-signal--high, .jira-age--high { color: #bc6b00; background: color-mix(in srgb, #d29922 14%, var(--panel)); border-color: color-mix(in srgb, #d29922 32%, transparent); }
.jira-signal--medium, .jira-age--medium { color: var(--brand-700); background: color-mix(in srgb, var(--brand-500) 12%, var(--panel)); border-color: color-mix(in srgb, var(--brand-500) 28%, transparent); }
.jira-signal--low, .jira-age--low { color: #1a7f37; background: color-mix(in srgb, #2da44e 12%, var(--panel)); border-color: color-mix(in srgb, #2da44e 28%, transparent); }
.jira-signal--type { color: var(--brand-700); border-color: var(--panel-border); }
.jira-age span { font-size: 0.72rem; opacity: 0.8; }

.jira-drawer__hero {
    position: relative;
    padding: 1rem;
    padding-right: 9.5rem;
    border: 1px solid var(--panel-border);
    border-radius: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 8%, var(--panel)), var(--panel));
}

.jira-drawer__copy-record {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
}

.jira-drawer__quick-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding-top: 0.25rem;
}

.jira-drawer__quick-facts > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.55rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--panel-soft) 84%, transparent);
    color: var(--text-muted);
    font-size: 0.78rem;
}

.jira-drawer__detail-item {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) 2rem;
    gap: 0.6rem;
    align-items: start;
    position: relative;
}

.jira-drawer__item-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
    color: var(--brand-600);
    background: color-mix(in srgb, var(--brand-500) 12%, var(--panel));
}

.jira-drawer__item-icon svg {
    width: 1.12rem;
    height: 1.12rem;
    stroke-width: 2.35;
    filter: drop-shadow(0 1px 1px currentColor);
}

.jira-drawer__item-icon {
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    font-weight: 900;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
}
.jira-drawer__item-copy { min-width: 0; }
.jira-drawer__copy-item { align-self: start; }

.jira-drawer__item-icon--blue { color: #0969da; background: color-mix(in srgb, #0969da 13%, var(--panel)); }
.jira-drawer__item-icon--violet { color: #8250df; background: color-mix(in srgb, #8250df 14%, var(--panel)); }
.jira-drawer__item-icon--teal { color: #0a7f75; background: color-mix(in srgb, #0a7f75 13%, var(--panel)); }
.jira-drawer__item-icon--green { color: #1a7f37; background: color-mix(in srgb, #2da44e 13%, var(--panel)); }
.jira-drawer__item-icon--rose { color: #cf222e; background: color-mix(in srgb, #cf222e 12%, var(--panel)); }
.jira-drawer__item-icon--amber { color: #9a6700; background: color-mix(in srgb, #d29922 15%, var(--panel)); }

@media (max-width: 1600px) {
    .jira-dashboard-query-picker__topbar.has-date-range {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jira-dashboard-query-picker__topbar.has-date-range .jira-dashboard-query-picker__dates,
    .jira-dashboard-query-picker__topbar.has-date-range .jira-dashboard-query-picker__apply {
        grid-column: 1 / -1;
    }

    .jira-dashboard-query-picker__topbar.has-date-range .jira-dashboard-query-picker__apply {
        margin-top: 0;
    }
}

@media (max-width: 980px) {
    .jira-workflow__header {
        align-items: start;
        flex-direction: column;
    }

    .jira-workflow__tabs {
        grid-template-columns: 1fr;
    }

    .jira-workspace__results-table table {
        min-width: 48rem;
    }

    .jira-workspace__results-table .compact-table__toolbar {
        grid-template-columns: 1fr;
    }

    .jira-workspace__results-table .table-widget__meta {
        justify-content: space-between;
        width: 100%;
        min-width: 0;
    }

    .jira-drawer__layout {
        grid-template-columns: 1fr;
    }

    .jira-workspace__multi-select {
        min-height: 10rem;
    }

    .jira-drawer__hero {
        padding-right: 1rem;
    }

    .jira-drawer__copy-record {
        position: static;
        margin: 0 0 0.85rem auto;
    }

    .jira-dashboard-query-picker {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .jira-dashboard-query-picker__topbar,
    .jira-dashboard-query-picker__topbar.has-custom,
    .jira-dashboard-query-picker__topbar.has-date-range {
        grid-template-columns: minmax(0, 1fr);
    }

    .jira-dashboard-query-picker__apply {
        margin-top: 0;
    }

    .jira-dashboard-query-picker__dates {
        grid-template-columns: minmax(0, 1fr);
    }

    .jira-dashboard-assignee-picker__body > .jira-assignee-picker__header {
        grid-template-columns: minmax(0, 1fr);
    }

    .jira-assignee-picker__find-button {
        width: 100%;
    }

    .jira-dashboard-assignee-picker__list {
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    }
}

/* Typography tuning
   Use a standard UI font stack and reduce the heaviest shared weights so the
   workspace feels less oversized while keeping enterprise density readable. */

:root {
    --easyclick-font-sans-ui: var(--gui-font-sans);
    --easyclick-font-size-body: 14px;
    --easyclick-font-size-control: 0.86rem;
    --easyclick-font-size-label: 0.66rem;
    --easyclick-font-size-brand: 1.42rem;
    --easyclick-font-size-card-title: clamp(0.96rem, 0.92vw, 1.12rem);
    --easyclick-font-weight-regular: 400;
    --easyclick-font-weight-medium: 500;
    --easyclick-font-weight-semibold: 600;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--easyclick-font-sans-ui);
}

body {
    font-size: var(--easyclick-font-size-body);
    font-weight: var(--easyclick-font-weight-regular);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: var(--easyclick-font-weight-semibold);
    letter-spacing: -0.01em;
}

strong,
b {
    font-weight: var(--easyclick-font-weight-semibold);
}

.primary-button,
.secondary-button,
.toolbar-button,
.mode-switch button,
.user-pill,
.toolbar-search,
.toolbar-select,
.login-form input,
textarea {
    font-size: var(--easyclick-font-size-control);
}

.primary-button,
.secondary-button,
.toolbar-button,
.mode-switch button,
.user-pill {
    font-weight: var(--easyclick-font-weight-medium);
}

.brand-copy h1 {
    font-size: var(--easyclick-font-size-brand);
    font-weight: var(--easyclick-font-weight-semibold);
}

#viewTitle,
.login-panel h1,
.popup-window__head h3,
.detail-drawer__head h3,
.ai-assistant__head h3 {
    font-weight: var(--easyclick-font-weight-semibold);
}

#viewTitle {
    font-size: clamp(0.92rem, 1.05vw, 1.02rem);
}

.eyebrow,
.sidebar-foot__label,
.topbar-sync__label,
.footer-pill__label,
th {
    font-size: var(--easyclick-font-size-label);
    font-weight: var(--easyclick-font-weight-semibold);
    letter-spacing: 0.1em;
}

.sidebar-foot__value,
.topbar-sync__value,
.footer-pill strong,
.jira-issue-link {
    font-weight: var(--easyclick-font-weight-semibold);
}

/* Tighten donut-chart headers so the chart content starts higher. */

.donut-card {
    gap: 0.44rem;
}

.donut-card .chart-card__head {
    gap: 0.2rem;
}

.donut-card .chart-card__head > div {
    gap: 0.04rem;
}

.donut-card .chart-card__head h3 {
    line-height: 1;
}

.chart-countline {
    gap: 0.3rem;
    margin: 0.18rem 0 0;
}

.chart-count-badge {
    padding: 0.2rem 0.48rem;
    font-size: 0.68rem;
}

.donut-card .chart-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.18rem 0.34rem;
    align-items: start;
    align-self: start;
    width: min(100%, 18.75rem);
    overflow: visible;
}

.donut-card .chart-controls > * {
    min-width: 0;
}

.donut-card .chart-controls .toolbar-search,
.donut-card .chart-controls .compact-search {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 1.86rem;
    padding: 0.38rem 0.62rem;
}

.donut-card .chart-controls .icon-button {
    grid-column: 1;
    justify-self: start;
    width: 1.9rem;
    height: 1.9rem;
}

.donut-glossary-trigger {
    gap: 0.34rem;
}

.donut-card .chart-controls .donut-glossary-trigger {
    grid-column: 2;
    justify-self: end;
}

.donut-glossary-trigger__button {
    padding: 0.42rem 0.68rem;
}

.donut-glossary-trigger .muted-copy {
    padding: 0.18rem 0.54rem;
    font-size: 0.7rem;
}

.donut-card__body--single {
    gap: 0.54rem;
}

/* Dashboard snapshot charts replace the old shared-progress bars. */

.dashboard-snapshot-stack {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.8rem;
    align-items: stretch;
}

.dashboard-snapshot-card {
    display: grid;
    align-content: start;
    gap: 0.72rem;
    min-height: 100%;
}

.dashboard-snapshot-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.dashboard-snapshot-card__head > div {
    display: grid;
    gap: 0.14rem;
}

.dashboard-snapshot-card__head h3 {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.08;
}

.dashboard-log-chart,
.dashboard-status-chart,
.dashboard-change-snapshot__legend,
.dashboard-change-snapshot__kpis {
    display: grid;
    gap: 0.48rem;
}

.dashboard-log-chart__row,
.dashboard-status-chart__row {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.72rem;
}

.dashboard-status-chart__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "identity value"
        "bar bar";
    gap: 0.42rem 0.72rem;
    padding: 0.54rem 0.62rem;
    border: 1px solid color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 20%, var(--panel-border));
    border-radius: 0.95rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 8%, var(--surface)), color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 3%, var(--surface-strong)));
}

.dashboard-log-chart__identity,
.dashboard-status-chart__identity {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.52rem;
}

.dashboard-status-chart__identity {
    grid-area: identity;
}

.dashboard-log-chart__icon,
.dashboard-status-chart__icon {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.48rem;
    background: color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 16%, transparent);
    color: var(--dashboard-snapshot-accent, #58a6ff);
    flex: 0 0 auto;
}

.dashboard-log-chart__icon svg,
.dashboard-status-chart__icon svg {
    width: 0.9rem;
    height: 0.9rem;
}

.dashboard-log-chart__label,
.dashboard-status-chart__label {
    min-width: 0;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-log-chart__bar,
.dashboard-status-chart__bar {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-width: 0;
    height: 0.82rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 10%, rgba(148, 163, 184, 0.16));
}

.dashboard-status-chart__bar {
    grid-area: bar;
    height: 0.74rem;
}

.dashboard-log-chart__fill,
.dashboard-status-chart__fill {
    display: block;
    height: 100%;
    width: var(--dashboard-snapshot-width, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 94%, white 6%), color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 68%, white 32%));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 18%, transparent), 0 4px 14px color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 18%, transparent);
}

.dashboard-log-chart__value,
.dashboard-status-chart__value {
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dashboard-status-chart__value {
    grid-area: value;
}

.dashboard-log-chart__axis {
    display: grid;
    gap: 0.28rem;
}

.dashboard-log-chart__axis-label {
    color: var(--text-soft);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-log-chart__ticks {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    color: var(--text-soft);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.dashboard-change-snapshot__layout {
    display: grid;
    grid-template-columns: minmax(12rem, 14rem) minmax(0, 1fr);
    gap: 0.8rem;
    align-items: start;
}

.dashboard-change-snapshot__chart {
    min-width: 0;
}

.dashboard-change-snapshot__chart .donut-chart__hint {
    margin-top: 0.45rem;
}

.dashboard-change-snapshot__legend-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.48rem 0.56rem;
    border-radius: 0.8rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
    cursor: default;
}

.dashboard-change-snapshot__legend-row:hover,
.dashboard-change-snapshot__legend-row:focus-visible,
.dashboard-change-snapshot__legend-row.is-active {
    border-color: color-mix(in srgb, var(--donut-hover-color, rgba(88, 166, 255, 0.36)) 60%, var(--panel-border));
    box-shadow: 0 12px 26px color-mix(in srgb, var(--donut-hover-color, rgba(88, 166, 255, 0.2)) 24%, transparent);
}

.dashboard-change-snapshot__legend-dot {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
}

.dashboard-change-snapshot__legend-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.dashboard-change-snapshot__legend-share {
    color: var(--text-soft);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.dashboard-change-snapshot__empty {
    min-height: 16rem;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--surface-strong) 88%, transparent), color-mix(in srgb, var(--surface) 90%, transparent));
}

.dashboard-change-snapshot__kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-change-snapshot__kpi {
    display: grid;
    gap: 0.16rem;
    padding: 0.56rem 0.62rem;
    border-radius: 0.92rem;
    border: 1px solid color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 22%, var(--panel-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 9%, var(--surface)), color-mix(in srgb, var(--dashboard-snapshot-accent, #58a6ff) 3%, var(--surface-strong)));
}

.dashboard-change-snapshot__kpi span {
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dashboard-change-snapshot__kpi strong {
    font-size: 1rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dashboard-change-snapshot__kpi--ocean { --dashboard-snapshot-accent: #58a6ff; }
.dashboard-change-snapshot__kpi--sun { --dashboard-snapshot-accent: #fbbf24; }
.dashboard-change-snapshot__kpi--rose { --dashboard-snapshot-accent: #fb7185; }
.dashboard-change-snapshot__kpi--mint { --dashboard-snapshot-accent: #34d399; }

@media (max-width: 1100px) {
    .dashboard-change-snapshot__layout {
        grid-template-columns: 1fr;
    }

    .dashboard-change-snapshot__kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .dashboard-log-chart__row {
        grid-template-columns: 1fr;
        gap: 0.34rem;
    }

    .dashboard-log-chart__value {
        justify-self: flex-start;
    }

    .dashboard-log-chart__ticks {
        flex-wrap: wrap;
    }

    .dashboard-change-snapshot__kpis {
        grid-template-columns: 1fr;
    }
}

/* Make the dashboard snapshot tiles read smaller and denser. */

.dashboard-flash-group {
    gap: 0.28rem;
    padding: 0.36rem 0.44rem 0.42rem;
}

.dashboard-flash-group--troubleshooting,
.dashboard-flash-group--changes {
    padding-top: 0.28rem;
}

.dashboard-flash-group__head {
    gap: 0.14rem 0.3rem;
    padding-bottom: 0.02rem;
}

.dashboard-flash-group__head > div {
    gap: 0;
}

.dashboard-flash-group__head h3 {
    font-size: 0.74rem;
    line-height: 1.02;
}

.dashboard-flash-group__head .eyebrow {
    font-size: 0.46rem;
}

.dashboard-flash-group__head .status-pill {
    padding: 0.12rem 0.32rem;
    font-size: 0.46rem;
}

.dashboard-flash-group__grid {
    gap: 0.3rem;
    grid-template-columns: repeat(auto-fit, minmax(clamp(8.8rem, 12vw, 10.8rem), 1fr));
}

.dashboard-flash-group__bars {
    display: grid;
    gap: 0.42rem;
}

.dashboard-flash-bar {
    --flash-bar-accent: #58a6ff;
    display: grid;
    gap: 0.34rem;
    padding: 0.48rem 0.56rem 0.54rem;
    border-radius: 0.92rem;
    border: 1px solid color-mix(in srgb, var(--flash-bar-accent) 28%, var(--panel-border));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--flash-bar-accent) 9%, var(--surface)), color-mix(in srgb, var(--flash-bar-accent) 4%, var(--surface-strong))),
        var(--surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.dashboard-flash-bar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.dashboard-flash-bar__title {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.44rem;
}

.dashboard-flash-bar__icon {
    width: 1.42rem;
    height: 1.42rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.42rem;
    background: color-mix(in srgb, var(--flash-bar-accent) 16%, transparent);
    color: var(--flash-bar-accent);
    flex: 0 0 auto;
}

.dashboard-flash-bar__icon svg {
    width: 0.76rem;
    height: 0.76rem;
}

.dashboard-flash-bar__label {
    min-width: 0;
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-flash-bar__value {
    flex: 0 0 auto;
    color: var(--text);
    font-size: 1.16rem;
    font-weight: 900;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.dashboard-flash-bar__track {
    position: relative;
    width: 100%;
    height: 0.62rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--flash-bar-accent) 10%, rgba(148, 163, 184, 0.18));
}

.dashboard-flash-bar__fill {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--flash-bar-accent) 92%, white 8%), color-mix(in srgb, var(--flash-bar-accent) 68%, white 32%));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--flash-bar-accent) 22%, transparent), 0 4px 14px color-mix(in srgb, var(--flash-bar-accent) 22%, transparent);
}

.dashboard-flash-bar--ocean,
.dashboard-flash-bar--sky {
    --flash-bar-accent: #58a6ff;
}

.dashboard-flash-bar--mint {
    --flash-bar-accent: #34d399;
}

.dashboard-flash-bar--sun,
.dashboard-flash-bar--amber {
    --flash-bar-accent: #fbbf24;
}

.dashboard-flash-bar--rose {
    --flash-bar-accent: #fb7185;
}

.dashboard-flash-bar--violet {
    --flash-bar-accent: #a78bfa;
}

.dashboard-flash-bar--slate {
    --flash-bar-accent: #94a3b8;
}

html[data-theme="dark"] .dashboard-flash-bar {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


.dashboard-mini-card {
    min-height: clamp(2.05rem, 2.7vw, 2.45rem);
    padding: 0.18rem 0.3rem;
    gap: 0.26rem;
}

.dashboard-mini-card__top {
    gap: 0.05rem;
}

.dashboard-mini-card__icon {
    width: 1.48rem;
    height: 1.48rem;
    border-radius: 0.4rem;
}

.dashboard-mini-card__icon svg {
    width: 0.78rem;
    height: 0.78rem;
}

.dashboard-mini-card__body {
    gap: 0;
}

.dashboard-mini-card__label {
    font-size: 0.94rem;
    line-height: 0.98;
}

.dashboard-mini-card__value {
    font-size: 1.22rem;
    line-height: 0.98;
}

/* Keep dataset search close to the table and simplify the controls row. */

.table-searchband--simple {
    margin-bottom: 0.48rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    align-items: center;
}

.table-searchband--simple .table-searchband__main {
    flex: 1 1 20rem;
    gap: 0;
}

.table-searchband__search {
    width: 100%;
    max-width: 34rem;
}

.table-searchband--simple .table-searchband__side {
    flex: 1 1 28rem;
}

.table-searchband--simple .toolbar-actions {
    justify-content: flex-end;
    gap: 0.42rem;
}

html[data-theme="dark"] .table-searchband--simple {
    background: transparent;
}

/* Meeting workspace */

/* Compact Automation & AI shell and keep session status visible. */
.topbar {
    min-height: 3.45rem;
    padding-block: 0.28rem;
}

.topbar__left {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
}

html[data-theme] .topbar .workspace-tagline {
    margin-bottom: 0;
    padding: 0.3rem 0.72rem;
    font-size: clamp(0.74rem, 0.9vw, 0.86rem);
}

.jira-workspace,
.jira-workflow {
    gap: 0.65rem;
    padding: 0.75rem;
}

.jira-workspace__head {
    min-height: 0;
    padding-block: 0;
}

.workspace-footer {
    position: sticky;
    bottom: 0;
    z-index: 11;
}

.meeting-hero {
    padding: 0.7rem 0.9rem;
    align-items: center;
}

.meeting-workspace {
    display: grid;
    gap: 0.95rem;
}

.meeting-workspace-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
    padding: 0.42rem;
    border: 1px solid rgba(143, 179, 255, 0.24);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-muted) 82%, transparent);
}

.meeting-workspace-group {
    display: flex;
    align-items: center;
    gap: 0.72rem;
    min-width: 0;
    min-height: 4rem;
    padding: 0.72rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 0.8rem;
    color: var(--muted);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.meeting-workspace-group > span:first-child {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    border-radius: 0.72rem;
    color: #60a5fa;
    background: color-mix(in srgb, #3b82f6 14%, var(--surface));
}

.meeting-workspace-group > span:last-child { display: grid; gap: 0.1rem; min-width: 0; }
.meeting-workspace-group strong { color: var(--text); font-size: 0.95rem; }
.meeting-workspace-group small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meeting-workspace-group.is-active {
    border-color: rgba(96, 165, 250, 0.42);
    background: color-mix(in srgb, #2563eb 12%, var(--surface));
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.12);
}

.meeting-hero,
.meeting-panel,
.meeting-list-panel {
    border: 1px solid rgba(143, 179, 255, 0.28);
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.09), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(244, 248, 255, 0.95));
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.meeting-hero {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    align-items: start;
}

.meeting-hero__copy {
    display: grid;
    gap: 0.24rem;
    max-width: 60rem;
}

.meeting-hero__copy h3 {
    margin: 0;
    font-size: 1.1rem;
}

.meeting-hero__actions,
.meeting-panel__actions,
.meeting-toolbar__actions {
    display: flex;
    gap: 0.46rem;
    flex-wrap: wrap;
    align-items: center;
}

.meeting-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.72rem;
}

.meeting-metric-card {
    --meeting-kpi-accent: #4c8dff;
    --meeting-kpi-start: #3b82f6;
    --meeting-kpi-end: #2563eb;
    display: flex;
    gap: 0.72rem;
    align-items: center;
    min-height: 5.6rem;
    padding: 0.82rem 0.92rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
    border-left: 3px solid var(--meeting-kpi-accent);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.94));
}

.meeting-metric-card__icon {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 0.78rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--meeting-kpi-start), var(--meeting-kpi-end));
    box-shadow:
        0 9px 22px color-mix(in srgb, var(--meeting-kpi-accent) 30%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.meeting-metric-card__icon svg {
    width: 1.18rem;
    height: 1.18rem;
    stroke-width: 2.25;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.24));
}

.meeting-metric-card__body {
    display: grid;
    gap: 0.08rem;
}

.meeting-metric-card__label,
.meeting-metric-card__meta {
    color: #5f7394;
}

.meeting-metric-card__label {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.meeting-metric-card__value {
    font-size: 1.46rem;
    line-height: 1;
}

.meeting-metric-card__meta {
    font-size: 0.82rem;
}

.meeting-metric-card--blue { --meeting-kpi-accent: #4c8dff; --meeting-kpi-start: #4f8cff; --meeting-kpi-end: #2457d6; }
.meeting-metric-card--emerald,
.meeting-metric-card--good { --meeting-kpi-accent: #39d98a; --meeting-kpi-start: #2ecc8f; --meeting-kpi-end: #087f5b; }
.meeting-metric-card--amber,
.meeting-metric-card--warn { --meeting-kpi-accent: #ffc247; --meeting-kpi-start: #ffb020; --meeting-kpi-end: #c96b05; }
.meeting-metric-card--cyan { --meeting-kpi-accent: #35d6ed; --meeting-kpi-start: #22c9df; --meeting-kpi-end: #087ca7; }
.meeting-metric-card--teal { --meeting-kpi-accent: #43e0c2; --meeting-kpi-start: #2dd4bf; --meeting-kpi-end: #087f75; }
.meeting-metric-card--bad { --meeting-kpi-accent: #ff6b78; --meeting-kpi-start: #f45b69; --meeting-kpi-end: #b4233f; }

.meeting-panel {
    padding: 0.95rem 1rem;
}

.meeting-panel__head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: 0.78rem;
}

.meeting-panel__head h3 {
    margin: 0;
    font-size: 1rem;
}

.meeting-panel__head--detail {
    margin-bottom: 0.52rem;
}

.meeting-panel__head--compact {
    margin-bottom: 0;
}

.meeting-relations-panel__toggle {
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.meeting-relations-panel__meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.meeting-relations-panel__state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.8rem;
    min-height: 2.2rem;
    padding: 0.4rem 0.72rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    background: rgba(241, 245, 249, 0.82);
    color: #334155;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.meeting-relations-panel__toggle:hover .meeting-relations-panel__state {
    border-color: rgba(59, 130, 246, 0.34);
    color: #2563eb;
}

.meeting-relations-panel__body {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.78rem;
}

.meeting-panel__body {
    display: grid;
    gap: 0.8rem;
}

.meeting-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.72rem;
}

.meeting-form-grid .field,
.meeting-complete-form .field {
    display: grid;
    gap: 0.34rem;
}

.meeting-form-grid .field--full,
.meeting-complete-form .field--full {
    grid-column: 1 / -1;
}

.meeting-form-grid .field span,
.meeting-complete-form .field span {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f7394;
}

.meeting-complete-form {
    display: grid;
    gap: 0.8rem;
}

.meeting-complete-form textarea,
.meeting-form-grid textarea {
    width: 100%;
    min-height: 11rem;
    padding: 0.84rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.95);
    color: inherit;
    font: inherit;
    resize: vertical;
}

.meeting-recorder {
    display: grid;
    gap: 0.78rem;
    margin-bottom: 0.9rem;
    padding: 0.9rem;
    border: 1px solid rgba(59, 130, 246, 0.24);
    border-radius: 1rem;
    background: rgba(239, 246, 255, 0.7);
}

.meeting-recorder.is-recording {
    border-color: rgba(239, 68, 68, 0.42);
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.08);
}

.meeting-recorder.is-paused {
    border-color: rgba(245, 158, 11, 0.42);
}

.meeting-recorder__head,
.meeting-recorder__meta,
.meeting-recorder__actions,
.meeting-translation-table__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.meeting-recorder__head h3 {
    margin: 0;
}

.meeting-recorder__actions,
.meeting-recorder__meta {
    justify-content: flex-start;
}

.meeting-form-grid--scope { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.meeting-form-grid .field--wide { grid-column: span 2; }

.meeting-form-grid--scope .field-message {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.meeting-form-grid--scope .field-message--warning {
    color: var(--warning-text, #d97706);
}

.meeting-create-flow {
    display: grid;
    gap: 0.72rem;
}

.meeting-create-step {
    display: grid;
    grid-template-columns: 2.45rem minmax(0, 1fr);
    gap: 0.82rem;
    padding: 0.88rem;
    border: 1px solid color-mix(in srgb, var(--border) 88%, #60a5fa);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--surface-muted) 54%, transparent);
}

.meeting-create-step__number {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.72rem;
    color: #fff;
    background: linear-gradient(135deg, #3b82f6, #6558e8);
    font-weight: 800;
}

.meeting-create-step__body { min-width: 0; display: grid; gap: 0.72rem; }
.meeting-create-step__head > div { display: grid; gap: 0.12rem; }
.meeting-create-step__head strong { color: var(--text); }
.meeting-create-step__head small { color: var(--muted); }

.meeting-create-lookup {
    display: grid;
    grid-template-columns: minmax(10rem, 0.6fr) minmax(16rem, 1.6fr) auto;
    gap: 0.55rem;
}

.meeting-create-link-results,
.meeting-pending-documents,
.meeting-attachment-grid { display: grid; gap: 0.5rem; }

.meeting-create-link-results { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.meeting-link-option.is-selected { border-color: #39d98a; background: color-mix(in srgb, #22c55e 10%, var(--surface)); }

.meeting-selected-link,
.meeting-pending-documents > div,
.meeting-attachment-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.62rem 0.72rem;
    border: 1px solid var(--border);
    border-radius: 0.78rem;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.meeting-selected-link > div,
.meeting-attachment-card > div:not(.meeting-attachment-card__actions) { display: grid; gap: 0.12rem; min-width: 0; flex: 1; }
.meeting-selected-link small,
.meeting-pending-documents small,
.meeting-attachment-card small { color: var(--muted); }
.meeting-selected-link .icon-button,
.meeting-pending-documents .icon-button { margin-left: auto; }

.meeting-document-dropzone {
    display: grid;
    place-items: center;
    gap: 0.24rem;
    min-height: 7.5rem;
    padding: 1rem;
    border: 1px dashed rgba(96, 165, 250, 0.5);
    border-radius: 0.9rem;
    color: var(--text);
    background: color-mix(in srgb, #3b82f6 6%, var(--surface));
    cursor: pointer;
}

.meeting-document-dropzone input,
.meeting-attachment-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.meeting-document-dropzone > span { color: #60a5fa; }
.meeting-document-dropzone small { color: var(--muted); }

.meeting-attachment-card { padding: 0.72rem 0.82rem; }
.meeting-attachment-card__icon { color: #60a5fa; }
.meeting-attachment-card__actions { display: flex; gap: 0.35rem; margin-left: auto; }
.meeting-attachment-add { position: relative; cursor: pointer; }
.meeting-attachment-add.is-disabled { opacity: 0.5; pointer-events: none; }

.meeting-recorder__actions button:not(.meeting-recorder__rec-counter),
.meeting-recorder__auto-detection button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
}

.meeting-recorder__actions button svg,
.meeting-recorder__auto-detection svg {
    width: 1.08rem;
    height: 1.08rem;
    stroke-width: 2.25;
}

.meeting-recorder__start-button,
.meeting-recorder__save-button {
    border-color: color-mix(in srgb, #22c55e 62%, var(--panel-border));
    background: linear-gradient(135deg, #15803d, #22c55e);
    color: #ffffff;
    box-shadow: 0 0.55rem 1.25rem rgba(34, 197, 94, 0.2);
}

.meeting-recorder__discard-button {
    border-color: color-mix(in srgb, #ef4444 58%, var(--panel-border));
    background: color-mix(in srgb, #ef4444 14%, var(--surface-strong));
    color: color-mix(in srgb, #ef4444 82%, #ffffff);
}

.meeting-recorder__discard-button:hover:not(:disabled) {
    border-color: #ef4444;
    background: color-mix(in srgb, #ef4444 23%, var(--surface-strong));
}

.meeting-recorder__auto-detection {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.68rem;
    padding: 0.7rem 0.76rem;
    border: 1px solid color-mix(in srgb, #38bdf8 34%, var(--panel-border));
    border-radius: 0.88rem;
    background: color-mix(in srgb, #0ea5e9 8%, var(--surface-strong));
}

.meeting-recorder__auto-detection > div {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.meeting-recorder__auto-detection small {
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.meeting-recorder__auto-icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    background: linear-gradient(145deg, #0284c7, #2563eb);
    color: #ffffff;
    box-shadow: 0 0.5rem 1rem rgba(37, 99, 235, 0.22);
}

.meeting-recorder__auto-detection.is-detecting .meeting-recorder__auto-icon svg {
    animation: meeting-auto-detect-pulse 1.15s ease-in-out infinite;
}

@keyframes meeting-auto-detect-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.08); }
}

.meeting-recorder__rec-counter {
    min-width: 8.2rem;
    min-height: 2.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.62rem 0.86rem;
    border: 1px solid color-mix(in srgb, var(--danger) 44%, var(--panel-border));
    border-radius: 0.86rem;
    background: color-mix(in srgb, var(--danger) 13%, var(--surface-strong));
    color: var(--danger);
    font: inherit;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.035em;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 7%, transparent);
}

.meeting-recorder__rec-counter.is-paused {
    border-color: color-mix(in srgb, var(--warning) 46%, var(--panel-border));
    background: color-mix(in srgb, var(--warning) 14%, var(--surface-strong));
    color: var(--warning);
}

.meeting-recorder__inline-hint {
    padding: 0.72rem 0.84rem;
    border: 1px dashed color-mix(in srgb, var(--warning) 46%, var(--panel-border));
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--warning) 10%, var(--surface-strong));
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.meeting-recorder__settings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.68rem;
    align-items: end;
}

.meeting-recorder__device-picker {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto;
    gap: 0.45rem;
}

.meeting-recorder__settings .field {
    display: grid;
    gap: 0.34rem;
}

.meeting-recorder__settings .field > span,
.meeting-recorder__destinations legend {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5f7394;
}

.meeting-recorder__source-option,
.meeting-recorder__destination-pill {
    display: flex;
    align-items: center;
    gap: 0.46rem;
    cursor: pointer;
}

.meeting-recorder__source-option {
    min-height: 2.55rem;
    padding: 0.55rem 0.68rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 0.78rem;
}

.meeting-recorder__destinations {
    margin: 0;
    padding: 0.7rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 0.85rem;
}

.meeting-recorder__destination-grid {
    display: flex;
    gap: 0.42rem;
    flex-wrap: wrap;
    margin-top: 0.45rem;
}

.meeting-recorder__destination-pill {
    padding: 0.4rem 0.58rem;
    border-radius: 999px;
    background: rgba(219, 234, 254, 0.62);
    font-size: 0.82rem;
}

.meeting-recorder__transcript-shell,
.meeting-translation-table-shell {
    min-width: 0;
    max-width: 100%;
    padding: 0.78rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.78);
}

.meeting-recorder__transcript {
    min-height: 5rem;
    max-height: 12rem;
    margin-top: 0.38rem;
    padding: 0.15rem 0.65rem 0.15rem 0;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: pre-wrap;
    line-height: 1.55;
    scrollbar-gutter: stable;
}

.meeting-translation-table-shell {
    overflow-x: auto;
}

.meeting-translation-table__head {
    margin-bottom: 0.58rem;
}

.meeting-translation-table {
    width: 100%;
    border-collapse: collapse;
}

.meeting-translation-table th,
.meeting-translation-table td {
    padding: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    text-align: left;
    vertical-align: top;
}

.meeting-translation-table th:first-child,
.meeting-translation-table td:first-child {
    width: 13rem;
}

.meeting-audio-card {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) minmax(16rem, 2fr) auto;
    gap: 0.8rem;
    align-items: center;
    padding: 0.78rem;
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 0.9rem;
    background: rgba(236, 253, 245, 0.72);
}

.meeting-audio-card audio {
    width: 100%;
}

.meeting-link-picker {
    display: grid;
    grid-template-columns: minmax(11rem, 0.45fr) minmax(16rem, 1.5fr) auto;
    gap: 0.58rem;
    margin-bottom: 0.7rem;
}

.meeting-link-results,
.meeting-related-grid {
    display: grid;
    gap: 0.5rem;
}

.meeting-link-results {
    max-height: 16rem;
    overflow-y: auto;
    margin-bottom: 0.7rem;
}

.meeting-link-option,
.meeting-related-link-card {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    align-items: center;
    padding: 0.68rem 0.76rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 0.82rem;
    background: rgba(255, 255, 255, 0.78);
    color: inherit;
    text-align: left;
}

.meeting-link-option span:first-child,
.meeting-related-link-card > div {
    display: grid;
    gap: 0.2rem;
}

.meeting-link-option small {
    color: #64748b;
}

.meeting-inline-note {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
}

.meeting-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: end;
    flex-wrap: wrap;
}

.meeting-toolbar__filters {
    display: grid;
    grid-template-columns: minmax(16rem, 1.6fr) repeat(4, minmax(8rem, 0.7fr));
    gap: 0.52rem;
    flex: 1 1 52rem;
}

.meeting-workspace__grid {
    display: grid;
    grid-template-columns: minmax(18rem, 26rem) minmax(0, 1fr);
    gap: 0.92rem;
    align-items: start;
}

.meeting-list-panel {
    padding: 0.92rem;
}

.meeting-list-panel--history {
    margin-top: 0;
}

.meeting-list-panel__head {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: center;
    margin-bottom: 0.76rem;
}

.meeting-list-panel__body,
.meeting-followup-list {
    display: grid;
    gap: 0.58rem;
}

.meeting-list-panel__body--table {
    display: block;
}

.meeting-list-item,
.meeting-followup-item {
    width: 100%;
    text-align: left;
    padding: 0.84rem 0.92rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.9);
    color: inherit;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.meeting-list-item:hover,
.meeting-followup-item:hover,
.meeting-list-item.is-active {
    transform: translateY(-1px);
    border-color: rgba(59, 130, 246, 0.34);
    box-shadow: 0 14px 32px rgba(37, 99, 235, 0.1);
}

.meeting-list-item__head,
.meeting-list-item__meta,
.meeting-followup-item,
.meeting-related-card__head,
.meeting-transcript-card__head,
.meeting-detail-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: start;
}

.meeting-list-item__badges,
.meeting-followup-item__badges {
    display: flex;
    gap: 0.36rem;
    flex-wrap: wrap;
    justify-content: end;
}

.meeting-list-item__meta {
    margin: 0.48rem 0 0.26rem;
    align-items: center;
    color: #5f7394;
    font-size: 0.83rem;
}

.jira-chart-refresh {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0.55rem;
    overflow: visible;
}

.jira-chart-refresh > svg {
    overflow: visible;
    transform: none !important;
    stroke: currentColor;
    stroke-width: 2.35;
}

.meeting-list-item__preview {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.meeting-list-item__preview--muted {
    color: #7c8daa;
}

.meeting-history-table-shell {
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 1rem;
    overflow: auto;
    background: rgba(255, 255, 255, 0.9);
}

.meeting-history-table {
    width: 100%;
    min-width: 1680px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.88rem;
}

.meeting-history-table th,
.meeting-history-table td {
    padding: 0.78rem 0.82rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.meeting-history-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: rgba(241, 245, 249, 0.94);
    color: #5f7394;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.meeting-history-table tbody tr:last-child td {
    border-bottom: none;
}

.meeting-history-table__row {
    transition: background 120ms ease;
}

.meeting-history-table__row:hover {
    background: rgba(59, 130, 246, 0.05);
}

.meeting-history-table__row.is-active {
    background: rgba(59, 130, 246, 0.09);
}

.meeting-history-table__title-cell {
    min-width: 15rem;
}

.meeting-history-table__link {
    appearance: none;
    border: 0;
    padding: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
}

.meeting-history-table__link:hover {
    color: #2563eb;
}

.meeting-history-table__subline {
    margin-top: 0.22rem;
    color: #6b7d9b;
    font-size: 0.79rem;
    line-height: 1.35;
}

.meeting-history-table__count {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.table-head h3,
.chart-card__head h3 {
    font-size: var(--easyclick-font-size-card-title);
    line-height: 1.12;
}

.popup-window__head h3,
.detail-drawer__head h3,
.ai-assistant__head h3 {
    font-size: 1rem;
    line-height: 1.2;
}

/* Agentic network engineer workspace. */
.agentic-workspace {
    min-height: calc(100vh - 10.5rem);
    display: grid;
    grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: var(--surface);
}

.agentic-history-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-right: 1px solid var(--border);
    background: color-mix(in srgb, var(--surface-muted) 86%, transparent);
}

.agentic-history-panel__head,
.agentic-chat-panel__head,
.agentic-device-picker__footer,
.agentic-composer__scope,
.agentic-message__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.agentic-history-panel h2,
.agentic-chat-panel h2,
.agentic-empty-state h3 {
    margin: 0;
}

.agentic-history-panel__new,
.agentic-inventory-card .toolbar-button {
    width: 100%;
    justify-content: center;
}

.agentic-safety-card,
.agentic-inventory-card {
    padding: 0.9rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
}

.agentic-safety-card {
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: 0.7rem;
    color: var(--success);
}

.agentic-safety-card svg,
.agentic-message__avatar svg,
.agentic-device-option__icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.agentic-safety-card p,
.agentic-inventory-card p {
    margin: 0.3rem 0 0.8rem;
    color: var(--muted);
    line-height: 1.45;
}

.agentic-chat-panel {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(18rem, 1fr) auto;
    background: var(--background);
}

.agentic-chat-panel__head {
    padding: 1.1rem 1.35rem;
    border-bottom: 1px solid var(--border);
}

.agentic-chat-panel__head p {
    margin: 0.25rem 0 0;
}

.agentic-conversation {
    overflow: auto;
    padding: 1.35rem max(1.25rem, 8vw);
}

.agentic-empty-state {
    min-height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.75rem;
    text-align: center;
    color: var(--muted);
}

.agentic-empty-state > span {
    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;
    border-radius: 1.1rem;
    color: white;
    background: linear-gradient(135deg, #0969da, #2da44e);
    box-shadow: 0 16px 34px rgba(9, 105, 218, 0.22);
}

.agentic-empty-state > span svg {
    width: 1.8rem;
    height: 1.8rem;
}

.agentic-prompt-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
}

.agentic-prompt-examples button {
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
}

.agentic-message {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.2rem;
}

.agentic-message__avatar {
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 0.7rem;
    color: white;
    background: #0969da;
}

.agentic-message--assistant .agentic-message__avatar { background: #2da44e; }

.agentic-message__body {
    padding: 0.85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 0.2rem 1rem 1rem;
    background: var(--surface);
}

.agentic-message--user .agentic-message__body {
    background: color-mix(in srgb, #0969da 8%, var(--surface));
}

.agentic-message__body > p,
.agentic-command-list article p {
    margin: 0.45rem 0 0;
    line-height: 1.55;
}

.agentic-message__meta span,
.agentic-command-list article p,
.agentic-composer__scope span,
.agentic-composer__notice {
    color: var(--muted);
    font-size: 0.8rem;
}

.agentic-command-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.agentic-command-list article {
    padding: 0.7rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: var(--surface-muted);
}

.agentic-command-list article > div {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.agentic-command-list code { overflow-wrap: anywhere; }
.agentic-message__actions { margin-top: 0.85rem; }

.agentic-command-table-wrap {
    margin-top: 0.8rem;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface-muted);
}

.agentic-command-table {
    width: 100%;
    min-width: 48rem;
    border-collapse: collapse;
    color: var(--text);
    font-size: 0.76rem;
}

.agentic-command-table th,
.agentic-command-table td {
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}

.meeting-translation-table td:last-child {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.agentic-command-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: var(--table-header-text, #f0f6fc);
    background: var(--table-header-bg, #0d1117);
    font-size: 0.69rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.meeting-history-table__sort {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

.meeting-history-table__sort:hover,
.meeting-history-table__sort:focus-visible {
    color: #60a5fa;
}

.meeting-history-table__age {
    display: block;
    margin-top: 0.22rem;
    color: #60a5fa;
    font-size: 0.75rem;
    font-weight: 750;
    white-space: nowrap;
}

.meeting-history-table__actions {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    min-width: 12.5rem;
}

.meeting-history-table__actions .icon-button {
    flex: 0 0 auto;
}

.agentic-command-table tbody:last-child tr:last-child td {
    border-bottom: 0;
}

.agentic-command-table td:first-child,
.agentic-command-table th:first-child {
    width: 3.4rem;
    text-align: center;
}

.agentic-command-table td:nth-child(2) {
    white-space: nowrap;
}

.agentic-command-table code {
    color: var(--text);
    font-size: 0.75rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.agentic-command-severity {
    --agentic-severity-color: var(--success, #22c55e);
    display: inline-grid;
    grid-template-columns: 0.82rem auto;
    align-items: center;
    gap: 0.32rem;
    min-width: 5.4rem;
    justify-content: start;
    color: var(--agentic-severity-color) !important;
    border-color: color-mix(in srgb, var(--agentic-severity-color) 48%, var(--border)) !important;
    background: color-mix(in srgb, var(--agentic-severity-color) 13%, var(--surface)) !important;
}

.agentic-command-severity--medium { --agentic-severity-color: var(--warning, #f59e0b); }
.agentic-command-severity--high { --agentic-severity-color: #f97316; }
.agentic-command-severity--critical { --agentic-severity-color: var(--danger, #ef4444); }

.agentic-command-severity > svg {
    width: 0.78rem !important;
    min-width: 0.78rem !important;
    max-width: 0.78rem !important;
    height: 0.78rem !important;
    min-height: 0.78rem !important;
    max-height: 0.78rem !important;
}

.agentic-command-group {
    --agentic-ios-color: #2f81f7;
}

.agentic-command-group--tone-1 { --agentic-ios-color: #3fb950; }
.agentic-command-group--tone-2 { --agentic-ios-color: #d29922; }
.agentic-command-group--tone-3 { --agentic-ios-color: #a371f7; }
.agentic-command-group--tone-4 { --agentic-ios-color: #f778ba; }
.agentic-command-group--tone-5 { --agentic-ios-color: #39c5cf; }

.agentic-command-group__heading th {
    padding: 0.48rem 0.65rem;
    border-left: 0.26rem solid var(--agentic-ios-color);
    color: var(--text);
    background: color-mix(in srgb, var(--agentic-ios-color) 12%, var(--surface));
    text-align: left;
}

.agentic-command-group__heading th > span,
.agentic-command-group__heading th > strong,
.agentic-command-group__heading th > small {
    display: inline-flex;
    align-items: center;
    margin-right: 0.5rem;
}

.agentic-command-group__heading svg {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--agentic-ios-color);
}

.agentic-command-group__heading small {
    color: var(--muted);
    font-weight: 600;
}

.agentic-ios-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.46rem;
    border: 1px solid color-mix(in srgb, var(--agentic-ios-color) 45%, var(--border));
    border-radius: 999px;
    color: var(--agentic-ios-color);
    background: color-mix(in srgb, var(--agentic-ios-color) 10%, var(--surface));
    font-weight: 800;
}

.agentic-composer {
    padding: 0.85rem max(1rem, 6vw) 1rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.agentic-composer__input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 0.55rem;
    margin-top: 0.55rem;
    padding: 0.55rem;
    border: 1px solid var(--border-strong);
    border-radius: 1.15rem;
    background: var(--background);
    box-shadow: var(--shadow-soft);
}

.agentic-composer textarea {
    min-height: 3rem;
    max-height: 10rem;
    resize: vertical;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
}

.agentic-voice-button.is-listening {
    color: white;
    background: #cf222e;
    animation: pulse 1.2s infinite;
}

.agentic-composer__notice {
    margin: 0.45rem 0 0;
    text-align: center;
}

.agentic-voice-selector {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.agentic-voice-selector label {
    display: grid;
    place-items: center;
    color: #58a6ff;
}

.agentic-voice-selector label svg,
.agentic-voice-selector button svg {
    width: 0.95rem;
    height: 0.95rem;
}

.agentic-voice-selector select {
    width: min(20rem, 35vw);
    min-height: 1.95rem;
    padding: 0.28rem 1.8rem 0.28rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    color: var(--text);
    background: var(--surface-muted);
    font: inherit;
    font-size: 0.72rem;
}

.agentic-voice-selector button {
    width: 1.95rem;
    height: 1.95rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    color: var(--text);
    background: var(--surface-muted);
    cursor: pointer;
}

.agentic-composer__status {
    width: min(100%, 58rem);
    margin: 0.3rem auto 0;
    color: var(--muted);
    font-size: 0.69rem;
    text-align: center;
}

.agentic-device-picker {
    display: grid;
    gap: 0.8rem;
}

.agentic-device-picker__list {
    max-height: 58vh;
    overflow: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.agentic-device-option {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    background: var(--surface-muted);
    cursor: pointer;
}

.agentic-device-option:has(input:checked) {
    border-color: #0969da;
    background: color-mix(in srgb, #0969da 8%, var(--surface));
}

.agentic-device-option__icon {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    border-radius: 0.65rem;
    color: #0969da;
    background: color-mix(in srgb, #0969da 12%, var(--surface));
}

.agentic-device-option strong,
.agentic-device-option small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentic-device-option small {
    margin-top: 0.18rem;
    color: var(--muted);
}

/* Keep the Agentic workspace compact and isolated from generic action sizing. */
.agentic-workspace {
    min-height: 42rem;
    height: calc(100vh - 9.5rem);
    grid-template-columns: 17rem minmax(0, 1fr);
    border-radius: 1rem;
    box-shadow: var(--shadow-soft);
}

.agentic-workspace button svg,
.agentic-workspace .toolbar-button svg,
.agentic-workspace .secondary-button svg,
.agentic-workspace .primary-button svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem;
    flex: 0 0 1rem;
}

.agentic-history-panel {
    gap: 0.75rem;
    padding: 0.9rem;
}

.agentic-history-panel__head h2,
.agentic-chat-panel__head h2 {
    font-size: 1.05rem;
}

.agentic-online-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 0.3rem color-mix(in srgb, var(--success) 16%, transparent);
}

.agentic-history-panel__new {
    width: 100%;
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: 0.7rem;
    color: var(--text);
    background: var(--surface);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.agentic-profile-card {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: linear-gradient(135deg, color-mix(in srgb, #0969da 9%, var(--surface)), var(--surface));
}

.agentic-profile-card__mark,
.agentic-card-heading > span {
    display: grid;
    place-items: center;
    color: #58a6ff;
}

.agentic-profile-card__mark {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.7rem;
    color: white;
    background: linear-gradient(135deg, #0969da, #2da44e);
}

.agentic-profile-card p {
    margin: 0.18rem 0 0;
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.agentic-card-heading {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
}

.agentic-inventory-card__metric {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.agentic-inventory-card__metric strong {
    font-size: 1.45rem;
}

.agentic-inventory-card__metric span {
    color: var(--muted);
    font-size: 0.75rem;
}

.agentic-safety-card,
.agentic-inventory-card {
    padding: 0.75rem;
    border-radius: 0.8rem;
}

.agentic-safety-card {
    margin-top: auto;
}

.agentic-safety-card p,
.agentic-inventory-card p {
    margin: 0.25rem 0 0.65rem;
    font-size: 0.76rem;
}

.agentic-chat-panel {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.agentic-chat-panel__head {
    min-height: 4.5rem;
    padding: 0.8rem 1.15rem;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.agentic-chat-panel__head p {
    font-size: 0.8rem;
}

.agentic-header-badges {
    display: flex;
    gap: 0.4rem;
}

.agentic-conversation {
    min-height: 0;
    padding: 1.15rem clamp(1rem, 6vw, 5rem);
}

.agentic-message {
    max-width: 56rem;
    margin-right: auto;
    margin-left: auto;
}

.agentic-empty-state {
    width: min(100%, 58rem);
    min-height: 100%;
    margin: 0 auto;
    gap: 0.45rem;
}

.agentic-empty-state__mark {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 0.85rem !important;
}
.agentic-empty-state__mark img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.topbar-profile-popup__tabs { display: flex; gap: .5rem; flex-wrap: wrap; padding: .25rem; border: 1px solid #dce4f2; border-radius: 1rem; background: #f5f7fb; }
.topbar-profile-popup__tab { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; flex: 1 1 10rem; min-height: 2.75rem; padding: .55rem .75rem; border: 1px solid transparent; border-radius: .75rem; background: transparent; color: #4d5d79; font: inherit; font-weight: 700; cursor: pointer; }
.topbar-profile-popup__tab svg { width: 1.1rem; height: 1.1rem; }
.topbar-profile-popup__tab:hover, .topbar-profile-popup__tab:focus-visible { color: #344fe1; background: #e8edff; }
.topbar-profile-popup__tab.is-active { color: #2447d8; background: #fff; border-color: #bfcbf6; box-shadow: 0 .2rem .75rem rgba(30,55,120,.10); }
.topbar-profile-popup__tab-panel[hidden] { display: none !important; }
.topbar-profile-popup__tab-panel { display: grid; gap: .65rem; }
.topbar-profile-token-request { display: grid; gap: .65rem; padding: .9rem; border: 1px solid #f3d7a0; border-radius: .8rem; background: #fff9ed; }
.topbar-profile-token-request p { margin: 0; }
.topbar-profile-token-request label { display: grid; gap: .25rem; font-weight: 600; }
.topbar-profile-token-request input { width: 100%; min-height: 2.4rem; padding: .45rem .65rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; color: #16213a; }
.topbar-profile-token-request .primary-button { justify-self: start; }

.agentic-empty-state > p:not(.eyebrow) {
    max-width: 36rem;
    margin: 0.2rem 0 0.8rem;
}

.agentic-prompt-examples {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    text-align: left;
}

.agentic-prompt-catalog {
    width: 100%;
    display: grid;
    gap: 0.7rem;
}

.agentic-prompt-section {
    min-width: 0;
    display: grid;
    gap: 0.38rem;
}

.agentic-prompt-section > header {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    padding-inline: 0.2rem;
    color: var(--text);
    text-align: left;
}

.agentic-prompt-section > header > span {
    width: 1.45rem;
    height: 1.45rem;
    display: grid;
    flex: 0 0 1.45rem;
    place-items: center;
    border-radius: 0.42rem;
    color: #7aa7ff;
    background: color-mix(in srgb, #3b82f6 12%, var(--surface));
}

.agentic-prompt-section > header svg {
    width: 0.8rem;
    height: 0.8rem;
}

.agentic-prompt-section > header :is(strong, small) {
    display: block;
}

.agentic-prompt-section > header strong {
    font-size: 0.72rem;
}

.agentic-prompt-section > header small {
    margin-top: 0.02rem;
    color: var(--muted);
    font-size: 0.62rem;
}

.agentic-prompt-section--frequent {
    padding: 0.5rem;
    border: 1px solid color-mix(in srgb, #34d399 30%, var(--border));
    border-radius: 0.82rem;
    background: color-mix(in srgb, #10b981 5%, transparent);
}

.agentic-prompt-card.is-personalized > span:first-child {
    color: #6ee7b7;
    background: color-mix(in srgb, #10b981 13%, var(--surface));
}

.agentic-prompt-examples .agentic-prompt-card {
    min-height: 3.75rem;
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    text-align: left;
}

.agentic-prompt-card > span:first-child {
    width: 1.7rem;
    height: 1.7rem;
    display: grid;
    place-items: center;
    border-radius: 0.5rem;
    color: #58a6ff;
    background: color-mix(in srgb, #0969da 12%, var(--surface));
}

.agentic-prompt-card strong,
.agentic-prompt-card small {
    display: block;
}

.agentic-prompt-card strong {
    font-size: 0.8rem;
}

.agentic-prompt-card small {
    margin-top: 0.12rem;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentic-composer {
    padding: 0.65rem clamp(1rem, 6vw, 5rem) 0.7rem;
}

.agentic-composer__scope,
.agentic-composer__input,
.agentic-composer__notice {
    width: min(100%, 58rem);
    margin-right: auto;
    margin-left: auto;
}

.agentic-scope-button {
    min-height: 1.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    background: var(--surface-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}

.agentic-composer__input {
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem 2.5rem;
    align-items: center;
    min-height: 3.4rem;
    padding: 0.4rem 0.45rem 0.4rem 0.8rem;
    border-radius: 0.9rem;
}

.agentic-composer textarea {
    min-height: 2rem;
    max-height: 7rem;
    padding: 0.35rem 0;
    resize: none;
    font-size: 0.88rem;
}

.agentic-control-button {
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
    color: var(--text);
    background: var(--surface-muted);
    cursor: pointer;
}

.agentic-send-button {
    color: white;
    border-color: #0969da;
    background: #0969da;
}

.agentic-send-button svg {
    width: 1.25rem;
    height: 1.25rem;
    transform: translateX(1px);
}

.agentic-send-button:hover {
    border-color: #388bfd;
    background: #388bfd;
}

.agentic-message__actions .secondary-button,
.agentic-message__actions .primary-button {
    min-height: 2.25rem;
    padding: 0.45rem 0.7rem;
    font-size: 0.78rem;
}

@media (max-width: 900px) {
    .agentic-workspace { grid-template-columns: 1fr; }
    .agentic-history-panel { border-right: 0; border-bottom: 1px solid var(--border); }
    .agentic-device-picker__list { grid-template-columns: 1fr; }
    .agentic-conversation { padding-inline: 0.8rem; }
    .agentic-composer__input { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem 2.5rem; }
    .agentic-composer__scope { align-items: flex-start; flex-direction: column; }
    .agentic-voice-selector { width: 100%; }
    .agentic-voice-selector select { width: 100%; flex: 1; }
}

@media (max-width: 680px) {
    .detail-drawer__panel,
    .detail-drawer[data-detail-mode="jira-issue"] .detail-drawer__panel {
        width: 100%;
        border-radius: 0;
    }

    .detail-drawer__head,
    .detail-drawer__content {
        padding-right: 0.85rem;
        padding-left: 0.85rem;
    }

    .jira-drawer__detail-grid {
        grid-template-columns: 1fr;
    }
}

.meeting-history-table__transcript,
.meeting-history-table__file-size {
    display: grid;
    justify-items: start;
    gap: 0.34rem;
    min-width: 7rem;
}

.meeting-history-table__transcript {
    min-width: 16rem;
}

.meeting-history-table__transcript-preview {
    display: -webkit-box;
    max-width: 24rem;
    overflow: hidden;
    color: #5f7394;
    font-size: 0.79rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.meeting-history-table__file-size strong {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.meeting-history-table__audio-cell {
    display: flex;
    align-items: center;
    gap: 0.54rem;
    min-width: 21rem;
}

.meeting-history-table__audio {
    width: 15rem;
    height: 2.25rem;
    color-scheme: light;
}

.meeting-history-table__download {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.42rem 0.58rem;
    border: 1px solid rgba(37, 99, 235, 0.25);
    border-radius: 0.68rem;
    background: rgba(219, 234, 254, 0.7);
    color: #1d4ed8;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.meeting-history-table__download svg {
    width: 1rem;
    height: 1rem;
}

.meeting-history-table__download:hover {
    border-color: rgba(37, 99, 235, 0.45);
    background: rgba(191, 219, 254, 0.88);
}

.meeting-history-table__summary {
    display: block;
    min-width: 18rem;
    max-width: 26rem;
    color: #5f7394;
    line-height: 1.45;
}

.meeting-history-table__summary--muted {
    color: #7c8daa;
}

.meeting-detail-panel {
    display: grid;
    gap: 0.92rem;
}

.meeting-detail-panel--full {
    grid-column: 1 / -1;
}

.meeting-tabbar {
    display: flex;
    gap: 0.48rem;
    flex-wrap: wrap;
    margin-bottom: 0.76rem;
}

.meeting-tab {
    padding: 0.52rem 0.88rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 999px;
    background: rgba(241, 245, 249, 0.82);
    color: #334155;
    font: inherit;
    font-weight: 600;
}

.meeting-tab.is-active {
    color: #0f172a;
    border-color: rgba(37, 99, 235, 0.32);
    background: rgba(191, 219, 254, 0.48);
}

.meeting-summary-grid,
.meeting-analysis-grid,
.meeting-followups {
    display: grid;
    gap: 0.78rem;
}

.meeting-summary-grid {
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
}

.meeting-score-card,
.meeting-summary-card,
.meeting-analysis-card,
.meeting-related-card,
.meeting-transcript-card {
    padding: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
}

.meeting-score-card {
    display: grid;
    gap: 0.34rem;
}

.meeting-score-card strong {
    font-size: 2rem;
    line-height: 1;
}

.meeting-score-card strong span {
    font-size: 1rem;
    color: #64748b;
}

.meeting-score-card--good {
    background: linear-gradient(180deg, rgba(236, 253, 245, 0.98), rgba(221, 250, 234, 0.88));
}

.meeting-score-card--warn {
    background: linear-gradient(180deg, rgba(255, 251, 235, 0.98), rgba(254, 243, 199, 0.88));
}

.meeting-score-card--bad {
    background: linear-gradient(180deg, rgba(254, 242, 242, 0.98), rgba(254, 226, 226, 0.9));
}

.meeting-summary-card__body {
    white-space: pre-wrap;
    line-height: 1.58;
    color: #23324d;
}

.meeting-analysis-grid {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.meeting-analysis-card {
    display: grid;
    gap: 0.58rem;
}

.meeting-analysis-card__head {
    display: flex;
    gap: 0.62rem;
    align-items: center;
}

.meeting-analysis-card__icon {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.7rem;
    background: rgba(191, 219, 254, 0.34);
    color: #1d4ed8;
}

.meeting-analysis-card ul {
    margin: 0;
    padding-left: 1rem;
    display: grid;
    gap: 0.34rem;
}

.meeting-transcript-card__head {
    margin-bottom: 0.7rem;
}

.meeting-transcript-card__body {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.56;
    color: #23324d;
}

.meeting-related-card__actions {
    margin-top: 0.72rem;
}

.meeting-followup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

html[data-theme="dark"] .meeting-hero,
html[data-theme="dark"] .meeting-panel,
html[data-theme="dark"] .meeting-list-panel,
html[data-theme="dark"] .meeting-metric-card,
html[data-theme="dark"] .meeting-score-card,
html[data-theme="dark"] .meeting-summary-card,
html[data-theme="dark"] .meeting-analysis-card,
html[data-theme="dark"] .meeting-related-card,
html[data-theme="dark"] .meeting-transcript-card,
html[data-theme="dark"] .meeting-list-item,
html[data-theme="dark"] .meeting-followup-item {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.97), rgba(15, 23, 42, 0.92));
    border-color: rgba(96, 165, 250, 0.18);
    color: #e5eefc;
}

html[data-theme="dark"] .meeting-history-table-shell {
    background: rgba(2, 6, 23, 0.38);
    border-color: rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] .meeting-history-table th {
    background: rgba(15, 23, 42, 0.94);
    color: #c3d1ea;
}

html[data-theme="dark"] .meeting-history-table th,
html[data-theme="dark"] .meeting-history-table td {
    border-bottom-color: rgba(96, 165, 250, 0.12);
}

html[data-theme="dark"] .meeting-history-table__row:hover {
    background: rgba(37, 99, 235, 0.1);
}

html[data-theme="dark"] .meeting-history-table__row.is-active {
    background: rgba(37, 99, 235, 0.16);
}

html[data-theme="dark"] .meeting-history-table__link:hover {
    color: #93c5fd;
}

html[data-theme="dark"] .meeting-history-table__subline,
html[data-theme="dark"] .meeting-history-table__summary,
html[data-theme="dark"] .meeting-history-table__transcript-preview {
    color: #c3d1ea;
}

html[data-theme="dark"] .meeting-history-table__summary--muted {
    color: #94a8c9;
}

html[data-theme="dark"] .meeting-history-table__audio {
    color-scheme: dark;
}

html[data-theme="dark"] .meeting-history-table__download {
    border-color: rgba(88, 166, 255, 0.28);
    background: rgba(31, 111, 235, 0.16);
    color: #79c0ff;
}

html[data-theme="dark"] .meeting-history-table__download:hover {
    border-color: rgba(88, 166, 255, 0.48);
    background: rgba(31, 111, 235, 0.26);
}

html[data-theme="dark"] .meeting-recorder {
    background: rgba(15, 23, 42, 0.72);
    border-color: rgba(96, 165, 250, 0.24);
}

html[data-theme="dark"] .meeting-recorder__source-option,
html[data-theme="dark"] .meeting-recorder__destinations,
html[data-theme="dark"] .meeting-recorder__transcript-shell,
html[data-theme="dark"] .meeting-translation-table-shell {
    background: rgba(2, 6, 23, 0.38);
    border-color: rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] .meeting-recorder__destination-pill {
    background: rgba(37, 99, 235, 0.2);
}

html[data-theme="dark"] .meeting-audio-card,
html[data-theme="dark"] .meeting-link-option,
html[data-theme="dark"] .meeting-related-link-card {
    background: rgba(2, 6, 23, 0.38);
    border-color: rgba(96, 165, 250, 0.18);
}

html[data-theme="dark"] .meeting-metric-card__label,
html[data-theme="dark"] .meeting-metric-card__meta,
html[data-theme="dark"] .meeting-list-item__meta,
html[data-theme="dark"] .meeting-summary-card__body,
html[data-theme="dark"] .meeting-transcript-card__body {
    color: #c3d1ea;
}

html[data-theme="dark"] .meeting-relations-panel__state {
    background: rgba(30, 41, 59, 0.84);
    border-color: rgba(96, 165, 250, 0.18);
    color: #d8e5fb;
}

html[data-theme="dark"] .meeting-relations-panel__toggle:hover .meeting-relations-panel__state {
    border-color: rgba(96, 165, 250, 0.28);
    color: #93c5fd;
}

html[data-theme="dark"] .meeting-tab {
    background: rgba(30, 41, 59, 0.84);
    color: #d8e5fb;
}

html[data-theme="dark"] .meeting-tab.is-active {
    background: rgba(37, 99, 235, 0.25);
    color: #ffffff;
}

@media (max-width: 1080px) {
    .meeting-workspace__grid,
    .meeting-summary-grid {
        grid-template-columns: 1fr;
    }

    .meeting-toolbar__filters {
        grid-template-columns: 1fr 1fr;
    }

    .meeting-recorder__settings {
        grid-template-columns: 1fr 1fr;
    }

    .meeting-audio-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .meeting-hero,
    .meeting-panel__head,
    .meeting-toolbar,
    .meeting-followup-item {
        flex-direction: column;
    }

    .meeting-toolbar__filters {
        grid-template-columns: 1fr;
    }

    .meeting-recorder__settings {
        grid-template-columns: 1fr;
    }

    .meeting-recorder__device-picker {
        grid-template-columns: 1fr;
    }

    .meeting-recorder__auto-detection {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .meeting-recorder__auto-detection button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .meeting-link-picker {
        grid-template-columns: 1fr;
    }

    .meeting-workspace-groups,
    .meeting-form-grid--scope,
    .meeting-create-lookup {
        grid-template-columns: 1fr;
    }

    .meeting-form-grid .field--wide { grid-column: auto; }

    .meeting-create-step {
        grid-template-columns: 1fr;
    }
}

.sdwan-hld-frame {
    position: relative;
    min-height: 36rem;
    height: clamp(36rem, 72vh, 48rem);
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: 1.1rem;
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        #f8fbff;
    background-size: 22px 22px;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.sdwan-hld-frame.is-dragging {
    cursor: grabbing;
}

.sdwan-hld-toolbar {
    position: absolute;
    z-index: 4;
    top: 0.8rem;
    left: 0.8rem;
    right: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.42rem 0.58rem 0.42rem 0.78rem;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.88);
    color: #64748b;
    font-size: 0.84rem;
    backdrop-filter: blur(12px);
}

.sdwan-hld-canvas {
    width: max-content;
    transform-origin: 0 0;
}

.sdwan-hld-node {
    cursor: help;
}

.sdwan-hld-tooltip {
    position: absolute;
    z-index: 6;
    max-width: min(34rem, calc(100% - 2rem));
    display: grid;
    gap: 0.28rem;
    padding: 0.62rem 0.72rem;
    border: 1px solid rgba(37, 99, 235, 0.28);
    border-radius: 0.75rem;
    background: rgba(15, 23, 42, 0.94);
    color: #e5eefc;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
    pointer-events: none;
}

.sdwan-hld-tooltip strong {
    color: #ffffff;
    font-size: 0.9rem;
}

.sdwan-hld-tooltip span {
    color: #cbd5e1;
    font-size: 0.78rem;
    line-height: 1.45;
}

.sdwan-discovery__sdw-table {
    max-height: 24rem;
    overflow: auto;
}

.sdwan-discovery__sdw-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.sdwan-discovery__actionbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.58rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    width: 100%;
}

.sdwan-discovery__actionbar .toolbar-button {
    min-height: 2.9rem;
    border-radius: 0.85rem;
    padding: 0.72rem 1rem;
    color: #102033;
    border-color: rgba(96, 165, 250, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(239, 246, 255, 0.92));
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}

.sdwan-discovery__actionbar .toolbar-button__icon {
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.64rem;
    color: #ffffff;
    background: #3b82f6;
}

.sdwan-accordion {
    padding: 0;
    overflow: hidden;
}

.sdwan-accordion__summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 4.4rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.88), rgba(255, 255, 255, 0.96));
}

.sdwan-accordion__summary::-webkit-details-marker {
    display: none;
}

.sdwan-accordion__summary-icon {
    display: inline-grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.9rem;
    color: #0f6db1;
    background: linear-gradient(135deg, rgba(186, 230, 253, 0.95), rgba(219, 234, 254, 0.92));
    box-shadow: 0 12px 24px rgba(14, 165, 233, 0.12);
}

.sdwan-accordion__summary-icon svg {
    width: 1.18rem;
    height: 1.18rem;
}

.sdwan-accordion__title {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.sdwan-accordion__title strong {
    color: var(--text-strong);
    font-size: 1.05rem;
    line-height: 1.18;
}

.sdwan-accordion__title small {
    color: var(--text-soft);
    font-size: 0.82rem;
    line-height: 1.35;
}

.sdwan-accordion__count {
    white-space: nowrap;
}

.sdwan-accordion__chevron {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: #2563eb;
    background: rgba(219, 234, 254, 0.72);
    transition: transform 180ms ease, background 180ms ease;
}

.sdwan-accordion[open] .sdwan-accordion__chevron {
    transform: rotate(90deg);
}

.sdwan-accordion__body {
    display: grid;
    gap: 1rem;
    padding: 1rem 1.15rem 1.15rem;
}

.sdwan-accordion__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    flex-wrap: wrap;
}

.sdwan-accordion__toolbar .muted-copy {
    margin: 0;
}

.sdwan-discovery__selection-stack {
    display: grid;
    gap: 1rem;
}

.sdwan-discovery__device-panel,
.sdwan-discovery__command-panel {
    margin: 0;
}

.sdwan-discovery__device-groups {
    display: grid;
    gap: 0.95rem;
}

.sdwan-discovery__device-group {
    overflow: hidden;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.06);
}

.sdwan-discovery__device-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.85rem 0.95rem;
}

.sdwan-discovery__device-group-title {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.sdwan-discovery__device-group-title strong {
    display: block;
    color: var(--text-strong);
    font-size: 0.98rem;
}

.sdwan-discovery__device-group-title span:not(.sdwan-discovery__device-group-icon) {
    display: block;
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.sdwan-discovery__device-group-icon {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    border-radius: 0.86rem;
    color: #0f766e;
    background: linear-gradient(135deg, rgba(204, 251, 241, 0.96), rgba(224, 242, 254, 0.92));
}

.sdwan-discovery__device-group-icon svg {
    width: 1.16rem;
    height: 1.16rem;
}

.sdwan-discovery__device-group-table {
    max-height: 18rem;
    overflow: auto;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 0;
}

.sdwan-discovery__device-group-table table,
.sdwan-discovery__sdw-table table {
    min-width: 64rem;
}

.sdwan-discovery__command-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 0.9rem;
}

.sdwan-discovery__command-group {
    display: grid;
    align-content: start;
    gap: 0.58rem;
    padding: 0.9rem;
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.05);
}

.sdwan-discovery__command-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.sdwan-discovery__command-row {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    color: var(--text);
}

.sdwan-discovery__command-row input {
    width: 1rem;
    height: 1rem;
    accent-color: #3b82f6;
}

.sdwan-discovery__command-row code {
    white-space: normal;
    overflow-wrap: anywhere;
}

.sdwan-discovery__mini-button {
    min-height: 2.25rem;
    padding: 0.42rem 0.68rem;
    border-radius: 0.72rem;
}

.sdwan-discovery__mini-button .toolbar-button__icon {
    width: 1.45rem;
    height: 1.45rem;
}

.sdwan-discovery__button--run {
    background: linear-gradient(135deg, #2563eb, #15b8a6) !important;
    border-color: rgba(37, 99, 235, 0.32) !important;
    color: #ffffff !important;
}

.sdwan-discovery__button--run .toolbar-button__icon {
    background: rgba(255, 255, 255, 0.2);
}

.sdwan-discovery__button--load .toolbar-button__icon {
    background: #14b8a6;
}

.sdwan-discovery__button--pdf .toolbar-button__icon {
    background: #ef4444;
}

.sdwan-discovery__button--markdown .toolbar-button__icon {
    background: #7c3aed;
}

.sdwan-discovery__button--visio .toolbar-button__icon {
    background: #f59e0b;
}

.sdwan-discovery__button--json .toolbar-button__icon {
    background: #475569;
}

.sdwan-table-shell .table-wrap {
    max-height: 34rem;
    overflow: auto;
}

.sdwan-table-shell thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.sdwan-table__toolbar {
    align-items: center;
    justify-content: space-between;
}

.sdwan-table__toolbar .toolbar-search {
    flex: 1 1 22rem;
}

.sdwan-table__footer {
    align-items: center;
    justify-content: space-between;
}

.sdwan-table__group-row td {
    background: rgba(219, 234, 254, 0.74);
    color: #1e3a8a;
}

.sdwan-flash-card-grid {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

html[data-theme="dark"] .sdwan-hld-frame {
    border-color: rgba(96, 165, 250, 0.22);
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        #0b1220;
}

html[data-theme="dark"] .sdwan-hld-toolbar {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(96, 165, 250, 0.2);
    color: #cbd5e1;
}

html[data-theme="dark"] .sdwan-discovery__actionbar .toolbar-button {
    color: #e5eefc;
    border-color: rgba(96, 165, 250, 0.22);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.92));
}

html[data-theme="dark"] .sdwan-accordion__summary {
    border-color: rgba(96, 165, 250, 0.14);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.9));
}

html[data-theme="dark"] .sdwan-accordion__summary-icon {
    color: #bfdbfe;
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.45), rgba(15, 118, 110, 0.28));
}

html[data-theme="dark"] .sdwan-accordion__chevron {
    color: #bfdbfe;
    background: rgba(30, 64, 175, 0.24);
}

html[data-theme="dark"] .sdwan-discovery__device-group,
html[data-theme="dark"] .sdwan-discovery__command-group {
    border-color: rgba(96, 165, 250, 0.14);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.78));
}

html[data-theme="dark"] .sdwan-discovery__device-group-icon {
    color: #99f6e4;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(37, 99, 235, 0.22));
}

html[data-theme="dark"] .sdwan-table__group-row td {
    background: rgba(30, 64, 175, 0.22);
    color: #bfdbfe;
}

.f5-bigip__hero {
    display: grid;
    gap: 1rem;
}

.f5-bigip__actionbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.f5-bigip__actionbar .toolbar-button {
    min-height: 2.85rem;
    border-radius: 0.85rem;
    padding: 0.72rem 1rem;
    color: #122033;
    border-color: rgba(20, 184, 166, 0.24);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(240, 253, 250, 0.94));
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}

.f5-bigip__actionbar .toolbar-button__icon {
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.64rem;
    color: #ffffff;
    background: #0f766e;
}

.f5-bigip__button--parse .toolbar-button__icon {
    background: linear-gradient(135deg, #0ea5e9, #14b8a6);
}

.f5-bigip__button--pdf .toolbar-button__icon,
.f5-bigip__button--markdown .toolbar-button__icon,
.f5-bigip__button--json .toolbar-button__icon {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

.f5-bigip__button--clear .toolbar-button__icon {
    background: linear-gradient(135deg, #ef4444, #f97316);
}

.f5-bigip__config-input {
    width: 100%;
    min-height: 14rem;
    resize: vertical;
    border: 1px solid rgba(148, 163, 184, 0.38);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    color: var(--text-strong);
    background: rgba(248, 250, 252, 0.92);
    font: 700 0.92rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.f5-bigip__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.8rem;
}

.f5-bigip__metrics--compact {
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

.f5-bigip__metric {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 6rem;
    padding: 0.95rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
}

.f5-bigip__metric-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.95rem;
    color: #ffffff;
    background: #2563eb;
}

.f5-bigip__metric-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.f5-bigip__metric-body {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.f5-bigip__metric-label,
.f5-bigip__metric-body small {
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 800;
}

.f5-bigip__metric-body strong {
    color: var(--text-strong);
    font-size: 1.45rem;
    line-height: 1;
}

.f5-bigip__metric--cyan .f5-bigip__metric-icon { background: linear-gradient(135deg, #06b6d4, #2563eb); }
.f5-bigip__metric--green .f5-bigip__metric-icon { background: linear-gradient(135deg, #16a34a, #14b8a6); }
.f5-bigip__metric--violet .f5-bigip__metric-icon { background: linear-gradient(135deg, #7c3aed, #2563eb); }
.f5-bigip__metric--amber .f5-bigip__metric-icon { background: linear-gradient(135deg, #f59e0b, #f97316); }
.f5-bigip__metric--slate .f5-bigip__metric-icon { background: linear-gradient(135deg, #475569, #0f172a); }

.f5-bigip__run-scope {
    display: grid;
    gap: 1rem;
    border-color: rgba(20, 184, 166, 0.2);
    background:
        linear-gradient(135deg, rgba(240, 253, 250, 0.86), rgba(239, 246, 255, 0.76)),
        rgba(255, 255, 255, 0.96);
}

.f5-bigip__run-scope > .table-head {
    gap: 1rem;
}

.f5-bigip__run-scope .toolbar-actions {
    align-items: center;
    gap: 0.55rem;
}

.f5-bigip__run-grid {
    display: grid;
    grid-template-columns: minmax(22rem, 0.95fr) minmax(24rem, 1.05fr);
    gap: 1rem;
    align-items: start;
}

.f5-bigip__device-panel,
.f5-bigip__command-panel {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 1.05rem;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.07);
}

.f5-bigip__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.f5-bigip__panel-head h4 {
    margin: 0.1rem 0 0;
    color: var(--text-strong);
    font-size: 1.05rem;
}

.f5-bigip__device-list {
    max-height: 22rem;
    overflow: auto;
    border-radius: 0.95rem;
}

.f5-bigip__device-list table {
    min-width: 44rem;
}

.f5-bigip__command-list {
    display: grid;
    gap: 0.62rem;
    max-height: 19rem;
    overflow: auto;
    padding-right: 0.25rem;
}

.f5-bigip__command-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    padding: 0.78rem 0.85rem;
    border: 1px solid rgba(96, 165, 250, 0.18);
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.88));
}

.f5-bigip__command-row span {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.f5-bigip__command-row code {
    white-space: normal;
    word-break: break-word;
}

.f5-bigip__command-row small {
    color: var(--text-soft);
    font-weight: 700;
    line-height: 1.35;
}

.f5-bigip__credentials {
    display: grid;
    gap: 0.7rem;
    padding-top: 0.2rem;
}

.f5-bigip__credentials .checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text-strong);
    font-weight: 800;
}

.f5-bigip__accordion {
    padding: 0;
    overflow: hidden;
}

.f5-bigip__accordion-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 4.4rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    border-bottom: 1px solid rgba(148, 163, 184, 0.16);
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.86), rgba(255, 255, 255, 0.96));
}

.f5-bigip__accordion-summary::-webkit-details-marker {
    display: none;
}

.f5-bigip__accordion-icon {
    display: inline-grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.9rem;
    color: #047857;
    background: linear-gradient(135deg, rgba(153, 246, 228, 0.95), rgba(219, 234, 254, 0.86));
    box-shadow: 0 12px 24px rgba(20, 184, 166, 0.12);
}

.f5-bigip__accordion-icon svg {
    width: 1.18rem;
    height: 1.18rem;
}

.f5-bigip__accordion-title {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.f5-bigip__accordion-title strong {
    color: var(--text-strong);
    font-size: 1.05rem;
}

.f5-bigip__accordion-title small {
    color: var(--text-soft);
    font-size: 0.82rem;
}

.f5-bigip__accordion-chev {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: #0f766e;
    background: rgba(204, 251, 241, 0.72);
    transition: transform 180ms ease;
}

.f5-bigip__accordion[open] .f5-bigip__accordion-chev {
    transform: rotate(90deg);
}

.f5-bigip__accordion-body {
    display: grid;
    gap: 1rem;
    padding: 1rem 1.15rem 1.15rem;
}

.f5-bigip__flash-grid {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.f5-topology-frame {
    position: relative;
    min-height: 35rem;
    overflow: hidden;
    border: 1px solid rgba(20, 184, 166, 0.24);
    border-radius: 1.1rem;
    background:
        linear-gradient(rgba(14, 165, 233, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 165, 233, 0.08) 1px, transparent 1px),
        linear-gradient(135deg, rgba(240, 253, 250, 0.9), rgba(239, 246, 255, 0.9));
    background-size: 24px 24px, 24px 24px, auto;
    cursor: grab;
}

.f5-topology-filters {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    flex-wrap: wrap;
    padding: 0.85rem;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 253, 250, 0.82));
}

.f5-topology-filters label {
    display: grid;
    gap: 0.25rem;
    min-width: min(18rem, 100%);
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.f5-topology-filters select {
    min-height: 2.65rem;
    border-radius: 0.8rem;
    font-size: 0.92rem;
    letter-spacing: 0;
    text-transform: none;
}

.f5-topology-frame.is-dragging {
    cursor: grabbing;
}

.f5-topology-toolbar {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(10px);
}

.f5-topology-canvas {
    width: min(92rem, 120vw);
    min-height: 34rem;
    margin: 4rem auto 2rem;
    transform-origin: center top;
    transition: transform 80ms ease;
}

.f5-topology-tier {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    margin: 0.65rem auto;
}

.f5-topology-tier--cluster,
.f5-topology-tier--vips,
.f5-topology-tier--customers,
.f5-topology-tier--backends {
    max-width: 76rem;
}

.f5-topology-link {
    width: 2px;
    height: 1.6rem;
    margin: 0 auto;
    background: linear-gradient(180deg, #0ea5e9, #14b8a6);
}

.f5-topology-ha {
    width: max-content;
    max-width: calc(100% - 2rem);
    margin: 0.5rem auto;
    padding: 0.46rem 0.8rem;
    border: 1px dashed rgba(20, 184, 166, 0.45);
    border-radius: 999px;
    color: #0f766e;
    background: rgba(240, 253, 250, 0.88);
    font-size: 0.82rem;
    font-weight: 800;
}

.f5-topology-node {
    display: grid;
    gap: 0.24rem;
    min-width: 11.5rem;
    max-width: 17rem;
    min-height: 4.2rem;
    padding: 0.76rem 0.9rem;
    border: 1px solid rgba(96, 165, 250, 0.26);
    border-radius: 1rem;
    color: #0f172a;
    text-align: left;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.1);
}

.f5-topology-node strong,
.f5-topology-node span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.f5-topology-node strong {
    font-size: 0.9rem;
}

.f5-topology-node span {
    color: #64748b;
    font-size: 0.75rem;
    font-weight: 800;
}

.f5-topology-node.internet {
    border-color: rgba(14, 165, 233, 0.34);
    background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.f5-topology-node.active {
    border-color: rgba(34, 197, 94, 0.52);
    background: linear-gradient(135deg, #dcfce7, #ffffff);
}

.f5-topology-node.standby {
    border-color: rgba(245, 158, 11, 0.52);
    background: linear-gradient(135deg, #fef3c7, #ffffff);
}

.f5-topology-node.vip {
    border-color: rgba(59, 130, 246, 0.48);
    background: linear-gradient(135deg, #dbeafe, #ffffff);
}

.f5-topology-node.customer {
    border-color: rgba(20, 184, 166, 0.45);
    background: linear-gradient(135deg, #ccfbf1, #ffffff);
}

.f5-topology-node.backend {
    border-color: rgba(124, 58, 237, 0.3);
    background: linear-gradient(135deg, #ede9fe, #ffffff);
}

.f5-topology-tooltip {
    position: absolute;
    z-index: 5;
    display: grid;
    gap: 0.28rem;
    max-width: 24rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(96, 165, 250, 0.24);
    border-radius: 0.8rem;
    color: #e5eefc;
    background: rgba(15, 23, 42, 0.94);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
    pointer-events: none;
}

.f5-topology-tooltip strong {
    color: #ffffff;
}

.f5-topology-tooltip span {
    color: #cbd5e1;
    font-size: 0.8rem;
}

.f5-bigip__table-shell .table-wrap {
    max-height: 34rem;
    overflow: auto;
}

.f5-bigip__table-shell thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

.f5-bigip__table-toolbar {
    align-items: center;
    justify-content: space-between;
}

.f5-bigip__table-toolbar .toolbar-search {
    flex: 1 1 22rem;
}

.f5-bigip__table-footer {
    align-items: center;
    justify-content: space-between;
}

.f5-bigip__table-group-row td {
    background: rgba(204, 251, 241, 0.72);
    color: #115e59;
}

html[data-theme="dark"] .f5-bigip__actionbar .toolbar-button,
html[data-theme="dark"] .f5-bigip__metric,
html[data-theme="dark"] .f5-bigip__config-input,
html[data-theme="dark"] .f5-bigip__device-panel,
html[data-theme="dark"] .f5-bigip__command-panel,
html[data-theme="dark"] .f5-bigip__command-row {
    color: #e5eefc;
    border-color: rgba(45, 212, 191, 0.18);
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.94), rgba(15, 23, 42, 0.92));
}

html[data-theme="dark"] .f5-bigip__run-scope {
    border-color: rgba(45, 212, 191, 0.16);
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.94), rgba(17, 24, 39, 0.9)),
        #0b1220;
}

html[data-theme="dark"] .f5-bigip__accordion-summary {
    border-color: rgba(45, 212, 191, 0.14);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(17, 24, 39, 0.9));
}

html[data-theme="dark"] .f5-bigip__accordion-icon {
    color: #99f6e4;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(37, 99, 235, 0.22));
}

html[data-theme="dark"] .f5-bigip__accordion-chev {
    color: #99f6e4;
    background: rgba(20, 184, 166, 0.16);
}

html[data-theme="dark"] .f5-topology-frame {
    border-color: rgba(45, 212, 191, 0.2);
    background:
        linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
        #0b1220;
}

html[data-theme="dark"] .f5-topology-filters {
    border-color: rgba(45, 212, 191, 0.16);
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.78));
}

html[data-theme="dark"] .f5-topology-toolbar {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(45, 212, 191, 0.18);
}

html[data-theme="dark"] .f5-topology-node {
    color: #e5eefc;
    border-color: rgba(96, 165, 250, 0.24);
    background: rgba(15, 23, 42, 0.94);
}

html[data-theme="dark"] .f5-topology-node span {
    color: #cbd5e1;
}

html[data-theme="dark"] .f5-topology-ha {
    color: #99f6e4;
    background: rgba(20, 184, 166, 0.12);
}

html[data-theme="dark"] .f5-bigip__table-group-row td {
    background: rgba(20, 184, 166, 0.16);
    color: #99f6e4;
}

@media (max-width: 1100px) {
    .f5-bigip__run-grid {
        grid-template-columns: 1fr;
    }

    .f5-bigip__panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media print {
    .sdwan-hld-frame {
        height: auto;
        min-height: 0;
        overflow: visible;
        page-break-inside: avoid;
    }

    .sdwan-hld-toolbar,
    .sdwan-hld-tooltip {
        display: none !important;
    }

    .sdwan-hld-canvas {
        transform: none !important;
    }

    .f5-bigip__hero,
    .f5-topology-frame {
        page-break-inside: avoid;
    }

    .f5-bigip__config-input,
    .f5-topology-toolbar,
    .f5-topology-tooltip {
        display: none !important;
    }

    .f5-topology-canvas {
        transform: none !important;
    }
}

/* GitHub-inspired universal theme override */

:root {
    color-scheme: light;
    --bg: #f6f8fa;
    --bg-alt: #ffffff;
    --panel: rgba(255, 255, 255, 0.96);
    --panel-strong: #ffffff;
    --panel-border: rgba(208, 215, 222, 0.92);
    --text: #1f2328;
    --text-soft: #656d76;
    --text-strong: #0d1117;
    --text-muted: #656d76;
    --surface: var(--panel);
    --surface-strong: var(--panel-strong);
    --surface-muted: var(--bg-alt);
    --background: var(--bg);
    --border: var(--panel-border);
    --border-strong: var(--panel-border);
    --muted: var(--text-soft);
    --brand: #0969da;
    --brand-strong: #0550ae;
    --accent: #8250df;
    --accent-soft: rgba(130, 80, 223, 0.14);
    --success: #1a7f37;
    --warning: #9a6700;
    --danger: #cf222e;
    --shadow: 0 20px 40px rgba(31, 35, 40, 0.08);
    --shadow-soft: 0 12px 24px rgba(31, 35, 40, 0.06);
    --shell-bg: linear-gradient(180deg, #010409 0%, #0d1117 100%);
    --shell-surface: rgba(1, 4, 9, 0.97);
    --shell-surface-strong: rgba(13, 17, 23, 0.98);
    --shell-border: rgba(48, 54, 61, 0.92);
    --shell-text: #e6edf3;
    --shell-text-soft: rgba(139, 148, 158, 0.92);
    --shell-accent: #91c8ff;
    --sidebar-hover-edge: #79c0ff;
    --project-scroll-track: rgba(48, 54, 61, 0.6);
    --project-scroll-start: #6e7681;
    --project-scroll-mid: #8b949e;
    --project-scroll-end: #b1bac4;
    --sidebar-scroll-track: var(--project-scroll-track);
    --sidebar-scroll-start: var(--project-scroll-start);
    --sidebar-scroll-mid: var(--project-scroll-mid);
    --sidebar-scroll-end: var(--project-scroll-end);
    --workspace-shell-match-bg: linear-gradient(180deg, rgba(1, 4, 9, 0.99), rgba(13, 17, 23, 0.985)), #010409;
    --app-glow-a: rgba(130, 80, 223, 0.12);
    --app-glow-b: rgba(9, 105, 218, 0.08);
    --brand-gradient: linear-gradient(135deg, var(--brand-strong) 0%, var(--brand) 100%);
    --brand-accent-gradient: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    --brand-spectrum-gradient: linear-gradient(92deg, var(--accent) 0%, var(--brand) 28%, var(--success) 62%, #bf8700 82%, var(--danger) 100%);
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d1117;
    --bg-alt: #010409;
    --panel: #161b22;
    --panel-strong: #161b22;
    --panel-border: #30363d;
    --text: #c9d1d9;
    --text-soft: #8b949e;
    --text-strong: #f0f6fc;
    --text-muted: #8b949e;
    --surface: var(--panel);
    --surface-strong: var(--panel-strong);
    --brand: #58a6ff;
    --brand-strong: #1f6feb;
    --accent: #a371f7;
    --accent-soft: rgba(163, 113, 247, 0.18);
    --success: #3fb950;
    --warning: #d29922;
    --danger: #f85149;
    --shadow: 0 20px 48px rgba(1, 4, 9, 0.42);
    --shadow-soft: 0 12px 28px rgba(1, 4, 9, 0.28);
    --shell-bg: linear-gradient(180deg, #010409 0%, #0d1117 100%);
    --shell-surface: #010409;
    --shell-surface-strong: #0d1117;
    --shell-border: #30363d;
    --shell-text: #c9d1d9;
    --shell-text-soft: #8b949e;
    --shell-accent: #58a6ff;
    --sidebar-hover-edge: #58a6ff;
    --project-scroll-track: rgba(48, 54, 61, 0.6);
    --project-scroll-start: #6e7681;
    --project-scroll-mid: #8b949e;
    --project-scroll-end: #b1bac4;
    --sidebar-scroll-track: var(--project-scroll-track);
    --sidebar-scroll-start: var(--project-scroll-start);
    --sidebar-scroll-mid: var(--project-scroll-mid);
    --sidebar-scroll-end: var(--project-scroll-end);
    --workspace-shell-match-bg: #010409;
    --app-glow-a: rgba(163, 113, 247, 0.07);
    --app-glow-b: rgba(121, 192, 255, 0.04);
    --brand-gradient: linear-gradient(135deg, #1f6feb 0%, var(--brand) 100%);
    --brand-accent-gradient: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
    --brand-spectrum-gradient: linear-gradient(92deg, var(--accent) 0%, var(--brand) 28%, var(--success) 62%, #d29922 82%, var(--danger) 100%);
}

html,
body {
    background:
        radial-gradient(circle at top right, var(--app-glow-a), transparent 24rem),
        radial-gradient(circle at top left, var(--app-glow-b), transparent 18rem),
        linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 42%, var(--bg) 100%);
    color: var(--text);
}

body {
    color: var(--text);
}

::selection {
    background: color-mix(in srgb, var(--brand) 28%, transparent);
    color: var(--text-strong);
}

.primary-button {
    background: var(--brand-gradient);
    color: #ffffff;
    box-shadow: var(--shadow-soft);
}

.primary-button:hover,
.primary-button:focus-visible {
    box-shadow: 0 16px 28px color-mix(in srgb, var(--brand) 18%, transparent);
}

.secondary-button,
.toolbar-button,
.icon-button,
.toolbar-select,
.toolbar-search,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
    background: color-mix(in srgb, var(--surface-strong) 94%, transparent);
    border-color: var(--panel-border);
    color: var(--text);
}

input::placeholder,
textarea::placeholder,
.toolbar-search::placeholder {
    color: var(--text-soft);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.toolbar-search:focus-visible,
.toolbar-select:focus-visible,
.toolbar-button:focus-visible,
.icon-button:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--brand) 55%, var(--panel-border));
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--brand) 22%, transparent);
}

.toolbar-search.is-filled,
.toolbar-search:focus,
.toolbar-search:focus-visible {
    border-color: color-mix(in srgb, var(--success) 38%, var(--brand));
    box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--brand) 14%, transparent);
}

.brand-wordmark {
    color: var(--brand);
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--brand) 16%, transparent));
}

.brand-wordmark::after {
    background: var(--brand-spectrum-gradient);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .brand-wordmark {
        background: var(--brand-spectrum-gradient);
        -webkit-background-clip: text;
        background-clip: text;
    }
}

.topbar,
.sidebar,
.workspace-footer,
.sidebar-foot,
.user-pill,
.mode-switch {
    background: var(--workspace-shell-match-bg);
    color: var(--shell-text);
    border-color: var(--shell-border);
}

.sidebar {
    border-right: 1px solid var(--shell-border);
    box-shadow: 0 18px 38px color-mix(in srgb, var(--text-strong) 12%, transparent);
}

.topbar,
.workspace-footer {
    box-shadow: 0 10px 24px color-mix(in srgb, var(--text-strong) 8%, transparent);
}

.workspace-footer .footer-pill {
    background: color-mix(in srgb, var(--shell-surface-strong) 96%, transparent);
    border-color: var(--shell-border);
    color: var(--shell-text);
    box-shadow: 0 10px 24px rgba(1, 4, 9, 0.22);
}

.workspace-footer .footer-pill__label {
    color: var(--shell-text-soft);
}

.workspace-footer .footer-pill strong {
    color: var(--shell-text);
}

.topbar .toolbar-search,
.topbar .toolbar-select,
.sidebar .toolbar-search,
.sidebar .toolbar-select,
.mode-switch,
.user-pill,
.sidebar-foot,
.ai-launch-button--sidebar,
.ai-launch-button--topbar {
    background: color-mix(in srgb, var(--shell-surface-strong) 96%, transparent);
    border-color: var(--shell-border);
    color: var(--shell-text);
}

.sidebar .nav-link,
.sidebar .nav-group__toggle,
.sidebar .sidebar-foot__label,
.sidebar .sidebar-foot__value,
.sidebar .brand-copy h1,
.sidebar .muted-copy,
.sidebar .sidebar-section__title,
.topbar,
.workspace-footer {
    color: var(--shell-text);
}

.sidebar .sidebar-foot__label,
.sidebar .sidebar-utility__caption,
.sidebar .muted-copy,
.topbar-sync__meta,
.topbar .muted-copy {
    color: var(--shell-text-soft);
}

.nav-link,
.nav-group__toggle {
    border-color: color-mix(in srgb, var(--shell-border) 88%, transparent);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--shell-surface) 95%, transparent),
        color-mix(in srgb, var(--shell-surface-strong) 94%, transparent)
    );
}

.nav-link:hover,
.nav-group__toggle:hover,
.sidebar .nav-link:hover,
.sidebar .nav-group__toggle:hover {
    border-color: color-mix(in srgb, var(--brand) 35%, var(--shell-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand) 12%, var(--shell-surface)),
        color-mix(in srgb, var(--accent) 10%, var(--shell-surface-strong))
    );
    box-shadow:
        0 16px 28px color-mix(in srgb, var(--text-strong) 14%, transparent),
        inset -0.24rem 0 0 var(--sidebar-hover-edge);
}

.nav-link.active,
.nav-group__toggle.active,
.sidebar .nav-link.active,
.sidebar .nav-group__toggle.active {
    border-color: color-mix(in srgb, var(--brand) 42%, var(--shell-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand) 16%, var(--shell-surface)),
        color-mix(in srgb, var(--accent) 14%, var(--shell-surface-strong))
    );
    box-shadow: 0 14px 26px color-mix(in srgb, var(--text-strong) 14%, transparent);
}

.nav-link__icon,
.sidebar .nav-link__icon,
.sidebar .nav-group__toggle .nav-link__icon {
    color: var(--nav-accent, var(--shell-accent));
}

.nav-link.active .nav-link__icon,
.nav-group__toggle.active .nav-link__icon,
.sidebar .nav-link.active .nav-link__icon,
.sidebar .nav-group__toggle.active .nav-link__icon {
    color: var(--nav-accent, var(--shell-accent));
    filter: drop-shadow(0 3px 10px color-mix(in srgb, var(--nav-accent, var(--shell-accent)) 22%, transparent));
}

.app-shell.sidebar-collapsed .nav-link:hover::after {
    background: color-mix(in srgb, var(--shell-surface-strong) 98%, transparent);
    color: var(--shell-text);
    border: 1px solid var(--shell-border);
    box-shadow: var(--shadow-soft);
}

table thead th,
.table--compact thead th,
.device-command-table thead th,
.device-command-ai-suggest .device-command-table thead th,
.infra-ios-xe-hld__compare-table thead th,
.sdwan-discovery__sdw-table thead th {
    background: var(--shell-surface);
    color: var(--shell-text);
    border-color: var(--shell-border);
}

.table-shell,
.content-card,
.chart-card,
.login-panel,
.showcase-card,
.footer-pill,
.popup-window__dialog {
    border-color: var(--panel-border);
    box-shadow: var(--shadow-soft);
}

.device-command-popup__sticky-head {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--surface-strong) 98%, transparent) 0%,
        color-mix(in srgb, var(--surface) 94%, transparent) 78%,
        color-mix(in srgb, var(--surface) 72%, transparent) 100%
    );
}

html[data-theme="dark"] .device-command-popup__sticky-head {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--shell-surface-strong) 98%, transparent) 0%,
        color-mix(in srgb, var(--shell-surface) 95%, transparent) 78%,
        color-mix(in srgb, var(--shell-surface) 78%, transparent) 100%
    );
}

.device-command-popup__hero,
.device-command-popup__hero-note,
.device-command-popup__summary .detail-item,
.device-command-accordion--result .device-command-accordion__summary-button {
    border-color: color-mix(in srgb, var(--brand) 24%, var(--shell-border));
    background:
        radial-gradient(circle at top right, var(--accent-soft), transparent 28%),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--shell-surface-strong) 96%, transparent),
            color-mix(in srgb, var(--shell-surface) 96%, transparent)
        );
    box-shadow: var(--shadow-soft);
}

.device-command-popup__hero-copy h3,
.device-command-popup__hero-note strong,
.device-command-popup__summary .detail-item__value,
.device-command-accordion--result .device-command-accordion__summary-copy strong,
.device-command-accordion--result .device-command-accordion__summary-copy small,
.device-command-accordion--result .device-command-accordion__summary-toggle {
    color: var(--shell-text);
}

.device-command-popup__hero-copy .muted-copy,
.device-command-popup__hero-note .muted-copy,
.device-command-popup__summary .muted-copy {
    color: var(--shell-text-soft);
}

.device-command-popup__summary .detail-item__label,
.device-command-popup__hero-pill--targets,
.device-command-popup__hero-pill--commands,
.device-command-popup__hero-pill--credentials,
.device-command-popup__hero-pill--session {
    color: var(--shell-accent);
}

.device-command-popup__hero-pill {
    background: color-mix(in srgb, var(--shell-surface) 84%, transparent);
    border-color: color-mix(in srgb, var(--shell-border) 88%, transparent);
    color: var(--shell-text);
}

.change-record-step__badge {
    border-color: color-mix(in srgb, var(--brand) 24%, var(--panel-border));
    background: color-mix(in srgb, var(--brand) 10%, var(--surface-strong));
    color: var(--brand);
}

.change-record-step.active {
    border-color: color-mix(in srgb, var(--brand) 30%, var(--panel-border));
    box-shadow: 0 14px 26px color-mix(in srgb, var(--brand) 10%, transparent);
}

.change-record-step.active .change-record-step__badge,
.change-record-step.completed .change-record-step__badge {
    background: color-mix(in srgb, var(--success) 16%, var(--surface-strong));
    border-color: color-mix(in srgb, var(--success) 26%, var(--panel-border));
    color: var(--success);
}

.change-record-step.required .change-record-step__badge {
    background: color-mix(in srgb, var(--warning) 16%, var(--surface-strong));
    border-color: color-mix(in srgb, var(--warning) 28%, var(--panel-border));
    color: var(--warning);
}

.change-record-step-guide {
    border-color: color-mix(in srgb, var(--brand) 16%, var(--panel-border));
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand) 7%, var(--surface-strong)),
        color-mix(in srgb, var(--surface) 96%, transparent)
    );
}

.change-record-progress__bar span {
    background: var(--brand-spectrum-gradient);
}

* {
    scrollbar-color: var(--project-scroll-mid) var(--project-scroll-track);
}

*::-webkit-scrollbar-track {
    background: linear-gradient(180deg, color-mix(in srgb, var(--project-scroll-track) 80%, transparent), var(--project-scroll-track));
}

*::-webkit-scrollbar-thumb {
    border: 2px solid color-mix(in srgb, var(--shell-border) 85%, transparent);
    background: linear-gradient(180deg, var(--project-scroll-start) 0%, var(--project-scroll-mid) 45%, var(--project-scroll-end) 100%);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--text-strong) 10%, transparent);
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--project-scroll-start) 86%, #ffffff) 0%,
        color-mix(in srgb, var(--project-scroll-mid) 90%, #ffffff) 45%,
        color-mix(in srgb, var(--project-scroll-end) 86%, #ffffff) 100%
    );
}

:root {
    --widget-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 248, 250, 0.96));
    --widget-bg-strong: linear-gradient(180deg, rgba(255, 255, 255, 0.995), rgba(246, 248, 250, 0.985));
    --widget-bg-soft: rgba(246, 248, 250, 0.86);
    --widget-border: rgba(208, 215, 222, 0.92);
    --widget-shadow: 0 12px 24px rgba(31, 35, 40, 0.06);
    --widget-shadow-strong: 0 18px 34px rgba(31, 35, 40, 0.09);
    --widget-highlight: color-mix(in srgb, var(--brand) 8%, var(--surface-strong));
    --canvas-grid: rgba(208, 215, 222, 0.16);
    --canvas-glow: rgba(130, 80, 223, 0.1);
    --canvas-base: linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(246, 248, 250, 0.98));
    --login-fact-glow: rgba(9, 105, 218, 0.14);
    --login-fact-dot: linear-gradient(135deg, #0969da, #8250df);
    --login-fact-ring: rgba(9, 105, 218, 0.16);
    --login-fact-text: #0550ae;
}

html[data-theme="dark"] {
    --widget-bg: linear-gradient(180deg, rgba(13, 17, 23, 0.985), rgba(1, 4, 9, 0.98));
    --widget-bg-strong: linear-gradient(180deg, rgba(22, 27, 34, 0.99), rgba(13, 17, 23, 0.985));
    --widget-bg-soft: rgba(13, 17, 23, 0.9);
    --widget-border: rgba(48, 54, 61, 0.92);
    --widget-shadow: 0 16px 30px rgba(1, 4, 9, 0.28);
    --widget-shadow-strong: 0 20px 38px rgba(1, 4, 9, 0.34);
    --widget-highlight: color-mix(in srgb, var(--brand) 7%, var(--surface-strong));
    --canvas-grid: rgba(48, 54, 61, 0.24);
    --canvas-glow: rgba(163, 113, 247, 0.1);
    --canvas-base: linear-gradient(180deg, rgba(1, 4, 9, 0.99), rgba(13, 17, 23, 0.985));
    --login-fact-glow: rgba(121, 192, 255, 0.1);
    --login-fact-dot: linear-gradient(135deg, #79c0ff, #a371f7);
    --login-fact-ring: rgba(121, 192, 255, 0.18);
    --login-fact-text: #a5d6ff;
}

html[data-theme] .sidebar-theme-button {
    color: var(--shell-accent);
}

html[data-theme] .sidebar-logout-button {
    color: var(--danger);
}

html[data-theme] .notification-strip,
html[data-theme] .notice-card,
html[data-theme] .content-card,
html[data-theme] .chart-card,
html[data-theme] .table-shell,
html[data-theme] .metric-card,
html[data-theme] .selection-flash,
html[data-theme] .compact-table-shell,
html[data-theme] .donut-card,
html[data-theme] .donut-card__body,
html[data-theme] .donut-card__footer,
html[data-theme] .detail-item,
html[data-theme] .table-wrap,
html[data-theme] .table-searchband,
html[data-theme] .table-filter__summary,
html[data-theme] .table-filter__panel,
html[data-theme] .table-filter__option,
html[data-theme] .table-filter__mode-chip,
html[data-theme] .chooser-item,
html[data-theme] .filter-option,
html[data-theme] .selection-stat,
html[data-theme] .popup-window__dialog,
html[data-theme] .device-context-menu__card,
html[data-theme] .customer360-overview__summary,
html[data-theme] .customer360-accordion__summary,
html[data-theme] .customer360-dataset-summary,
html[data-theme] .customer360-accordion,
html[data-theme] .customer360-dataset-accordion,
html[data-theme] .customer360-overview__panel,
html[data-theme] .peering-customer-shell__action-group,
html[data-theme] .peering-dc-panel__button,
html[data-theme] .peering-disabled,
html[data-theme] .peering-graph-hover-card,
html[data-theme] .peering-graph-hover-card__summary-item,
html[data-theme] .peering-graph-hover-card__coverage-note,
html[data-theme] .peering-graph-hover-card__coverage-table-wrap,
html[data-theme] .peering-graph-hover-card__coverage-metric {
    background: var(--widget-bg);
    border-color: var(--widget-border);
    color: var(--text);
    box-shadow: var(--widget-shadow);
}
html[data-theme] .ai-assistant__composer,
html[data-theme] .ai-voice-overlay__panel,
html[data-theme] .ai-voice-overlay__popover,
html[data-theme] .ai-voice-overlay__section,
html[data-theme] .infra-circuit-sidebar__textarea,
html[data-theme] .infra-circuit-sidebar__automation,
html[data-theme] .infra-circuit-sidebar__table-actions,
html[data-theme] .infra-circuit-sidebar__metric,
html[data-theme] .device-command-accordion,
html[data-theme] .device-command-accordion__summary-button,
html[data-theme] .device-command-result,
html[data-theme] .device-command-ai-card,
html[data-theme] .device-command-progress,
html[data-theme] .device-command-credentials__toggle,
html[data-theme] .login-panel--professional,
html[data-theme] .showcase-card--professional,
html[data-theme] .login-progress,
html[data-theme] .login-progress__step,
html[data-theme] .login-showcase__card,
html[data-theme] .login-locked-value,
html[data-theme] .wxcce-vm-change__settings-textarea,
html[data-theme] .wxcce-vm-change__list-shell,
html[data-theme] .wxcce-vm-change__customer-card,
html[data-theme] .wxcce-vm-change__completion-card,
html[data-theme] .wxcce-vm-change__completion-stat,
html[data-theme] .wxcce-vm-change__result-button,
html[data-theme] .sdwan-hld-frame,
html[data-theme] .sdwan-hld-toolbar,
html[data-theme] .sdwan-accordion__summary,
html[data-theme] .sdwan-discovery__device-group,
html[data-theme] .sdwan-discovery__command-group,
html[data-theme] .f5-bigip__metric,
html[data-theme] .f5-bigip__config-input,
html[data-theme] .f5-bigip__device-panel,
html[data-theme] .f5-bigip__command-panel,
html[data-theme] .f5-bigip__command-row,
html[data-theme] .f5-bigip__run-scope,
html[data-theme] .f5-bigip__accordion-summary,
html[data-theme] .f5-topology-frame,
html[data-theme] .f5-topology-filters,
html[data-theme] .f5-topology-toolbar,
html[data-theme] .f5-topology-node {
    background: var(--widget-bg);
    border-color: var(--widget-border);
    color: var(--text);
    box-shadow: var(--widget-shadow);
}

html[data-theme] .metric-card:hover,
html[data-theme] .content-card:hover,
html[data-theme] .chart-card:hover,
html[data-theme] .table-shell:hover,
html[data-theme] .customer360-overview__summary:hover,
html[data-theme] .customer360-overview__panel:hover,
html[data-theme] .customer360-accordion:hover,
html[data-theme] .customer360-dataset-accordion:hover,
html[data-theme] .meeting-list-item:hover,
html[data-theme] .meeting-followup-item:hover,
html[data-theme] .peering-dc-panel__button:hover,
html[data-theme] .device-command-ai-card.is-active {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand) 8%, var(--surface-strong)),
        color-mix(in srgb, var(--surface) 98%, transparent)
    );
    box-shadow: var(--widget-shadow-strong);
}

html[data-theme] .notice-card.info,
html[data-theme] .notification-strip.info {
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, var(--surface-strong)), color-mix(in srgb, var(--surface) 98%, transparent));
    border-color: color-mix(in srgb, var(--brand) 30%, var(--widget-border));
    color: var(--text);
}

html[data-theme] .notice-card.warning,
html[data-theme] .notification-strip.warning {
    background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 11%, var(--surface-strong)), color-mix(in srgb, var(--surface) 98%, transparent));
    border-color: color-mix(in srgb, var(--warning) 34%, var(--widget-border));
    color: var(--text);
}

html[data-theme] .notice-card.danger,
html[data-theme] .notification-strip.danger {
    background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 12%, var(--surface-strong)), color-mix(in srgb, var(--surface) 98%, transparent));
    border-color: color-mix(in srgb, var(--danger) 34%, var(--widget-border));
    color: var(--text);
}

html[data-theme] .notice-card.success,
html[data-theme] .notification-strip.success {
    background: linear-gradient(180deg, color-mix(in srgb, var(--success) 12%, var(--surface-strong)), color-mix(in srgb, var(--surface) 98%, transparent));
    border-color: color-mix(in srgb, var(--success) 34%, var(--widget-border));
    color: var(--text);
}

html[data-theme] .metric-card__value,
html[data-theme] .detail-item__value,
html[data-theme] .table-head h3,
html[data-theme] .chart-card h3,
html[data-theme] .content-card h3,
html[data-theme] .meeting-metric-card__value,
html[data-theme] .meeting-score-card__value,
html[data-theme] .customer360-overview__summary strong,
html[data-theme] .customer360-accordion__summary strong,
html[data-theme] .customer360-overview__panel strong,
html[data-theme] .peering-graph-hover-card__head h4,
html[data-theme] .peering-graph-hover-card__summary-item strong,
html[data-theme] .peering-graph-hover-card__coverage-metric strong,
html[data-theme] .ai-assistant__panel h3,
html[data-theme] .ai-voice-overlay__panel h3,
html[data-theme] .login-floating-fact strong,
html[data-theme] .device-command-output-table__button--default,
html[data-theme] .device-command-output-table__button--export {
    color: var(--text-strong);
}

html[data-theme] .metric-card__label,
html[data-theme] .detail-item__label,
html[data-theme] .muted-copy,
html[data-theme] .meeting-metric-card__label,
html[data-theme] .meeting-list-item__meta,
html[data-theme] .meeting-summary-card__body,
html[data-theme] .meeting-transcript-card__body,
html[data-theme] .customer360-overview__summary span,
html[data-theme] .customer360-accordion__summary span,
html[data-theme] .customer360-overview__panel span,
html[data-theme] .peering-graph-hover-card__head .muted-copy,
html[data-theme] .peering-graph-hover-card__summary-item span,
html[data-theme] .peering-graph-hover-card__coverage-metric span,
html[data-theme] .ai-assistant__composer,
html[data-theme] .device-command-output-table__button--default .muted-copy {
    color: var(--text-soft);
}

html[data-theme] .eyebrow,
html[data-theme] .metric-card__badge,
html[data-theme] .selection-badge--active strong,
html[data-theme] .dashboard-case-link,
html[data-theme] .device-command-popup__summary .detail-item__label,
html[data-theme] .login-floating-fact__eyebrow {
    color: var(--brand);
}

:where(html[data-theme]) :where(
    .metric-card__icon,
    .network-fun__node,
    .peering-graph-hover-card__badge,
    .device-command-accordion__summary-icon,
    .device-command-popup__hero-note-icon,
    .device-command-popup__header-status-icon
) {
    background: color-mix(in srgb, var(--brand) 12%, var(--surface-strong));
    color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 20%, var(--widget-border));
}

html[data-theme] .toolbar-search,
html[data-theme] .toolbar-select,
html[data-theme] .search-field .toolbar-search,
html[data-theme] .topbar-utility-button,
html[data-theme] .device-inline-action,
html[data-theme] .launcher-password-toggle,
html[data-theme] .donut-glossary-trigger {
    background: color-mix(in srgb, var(--surface-strong) 97%, transparent);
    border-color: var(--widget-border);
    color: var(--text);
    box-shadow: none;
}

html[data-theme] .table-wrap thead th,
html[data-theme] .table-wrap tbody td,
html[data-theme] .data-table th,
html[data-theme] .data-table td {
    border-color: color-mix(in srgb, var(--widget-border) 92%, transparent);
}

html[data-theme] .table-wrap tbody td,
html[data-theme] .data-table td {
    color: var(--text);
    background: transparent;
}

html[data-theme] .table-wrap tbody tr:nth-child(even),
html[data-theme] .data-table tr:nth-child(even) td {
    background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
}

html[data-theme] .table-wrap tbody tr:hover,
html[data-theme] .data-table tr:hover td,
html[data-theme] .table-filter__option:hover,
html[data-theme] .chooser-item:hover,
html[data-theme] .filter-option:hover {
    background: color-mix(in srgb, var(--brand) 7%, var(--surface-strong));
}

html[data-theme] .table-wrap tbody tr.infra-ios-xe-hld__route-health-row--good,
html[data-theme] .data-table tr.infra-ios-xe-hld__route-health-row--good td {
    background: color-mix(in srgb, var(--success) 10%, var(--surface-strong));
}

html[data-theme] .table-wrap tbody tr.infra-ios-xe-hld__route-health-row--issue,
html[data-theme] .data-table tr.infra-ios-xe-hld__route-health-row--issue td {
    background: color-mix(in srgb, var(--warning) 12%, var(--surface-strong));
}

html[data-theme] .network-fun {
    border-color: color-mix(in srgb, var(--brand) 18%, var(--widget-border));
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--brand) 7%, var(--surface)),
        color-mix(in srgb, var(--accent) 7%, var(--surface-strong))
    );
    box-shadow: var(--widget-shadow);
}

html[data-theme] .network-fun__chip,
html[data-theme] .network-fun__caption,
html[data-theme] .login-floating-fact {
    background: var(--widget-bg-strong);
    border-color: color-mix(in srgb, var(--brand) 18%, var(--widget-border));
    color: var(--text);
    box-shadow: var(--widget-shadow);
}

html[data-theme] .peering-graph-popup__canvas[data-bg],
html[data-theme] .sdwan-hld-canvas,
html[data-theme] .f5-topology-canvas {
    background:
        linear-gradient(var(--canvas-grid) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, var(--canvas-grid) 1px, transparent 1px) 0 0 / 32px 32px,
        radial-gradient(circle at top right, var(--canvas-glow), transparent 34%),
        var(--canvas-base);
}

.workspace-footer {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

@media (min-width: 1500px) {
    .workspace-footer {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Unified chart geometry: keep sparse and dense charts aligned in every grid. */

:is(.dashboard-grid, .chart-grid) > .chart-card {
    align-self: stretch;
    min-width: 0;
    height: 100%;
}

:is(.dashboard-grid, .chart-grid) > .donut-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
}

:is(.dashboard-grid, .chart-grid) > .donut-card .chart-card__head {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(12rem, 18.75rem);
    align-items: start;
    min-block-size: 5.1rem;
}

:is(.dashboard-grid, .chart-grid) > .donut-card .chart-controls {
    width: 100%;
    max-width: 18.75rem;
    margin-left: auto;
}

:is(.dashboard-grid, .chart-grid) > .donut-card .donut-card__body--single {
    height: 100%;
    min-width: 0;
    align-content: start;
    align-items: start !important;
}

:is(.dashboard-grid, .chart-grid) > .donut-card .donut-chart,
:is(.dashboard-grid, .chart-grid) > .donut-card .donut-chart__ring {
    width: min(13rem, 100%);
}

:is(.dashboard-grid, .chart-grid) > .donut-card .donut-legend {
    align-self: start;
    align-content: start;
}

@media (max-width: 760px) {
    :is(.dashboard-grid, .chart-grid) > .donut-card .chart-card__head {
        grid-template-columns: minmax(0, 1fr);
        min-block-size: 0;
    }

    :is(.dashboard-grid--triple, .dashboard-grid--dual) > .donut-card .donut-card__body--single {
        grid-template-columns: minmax(0, 1fr);
    }

    :is(.dashboard-grid, .chart-grid) > .donut-card .chart-controls {
        max-width: none;
        margin-left: 0;
    }
}

/* GitHub dark mode is the final visual authority for shared application UI. */

html[data-theme=dark] {
    --github-canvas-default: #0d1117;
    --github-canvas-overlay: #161b22;
    --github-canvas-inset: #010409;
    --github-border-default: #30363d;
    --github-border-muted: #21262d;
    --github-accent-muted: rgba(56, 139, 253, 0.15);
    --github-success-emphasis: #238636;
}

html[data-theme=dark],
html[data-theme=dark] body,
html[data-theme=dark] .workspace,
html[data-theme=dark] .content-stage {
    background-color: var(--github-canvas-default);
    color: var(--text);
}

html[data-theme=dark] body {
    background:
        radial-gradient(circle at 58% -12rem, rgba(163, 113, 247, 0.13), transparent 30rem),
        var(--github-canvas-default);
}

html[data-theme=dark] :is(
    .content-card,
    .chart-card,
    .table-shell,
    .compact-table-shell,
    .metric-card,
    .donut-card,
    .donut-card__body,
    .donut-card__footer,
    .selection-flash,
    .detail-item,
    .table-searchband,
    .table-filter__summary,
    .table-filter__panel,
    .popup-window__dialog,
    .detail-drawer__panel,
    .device-context-menu__card,
    .meeting-panel,
    .meeting-list-panel,
    .meeting-metric-card,
    .meeting-score-card,
    .meeting-summary-card,
    .meeting-analysis-card,
    .meeting-related-card,
    .meeting-transcript-card,
    .meeting-list-item,
    .meeting-followup-item
) {
    background: var(--github-canvas-overlay);
    border-color: var(--github-border-default);
    color: var(--text);
    box-shadow: 0 8px 24px rgba(1, 4, 9, 0.32);
}

html[data-theme=dark] :is(
    .secondary-button,
    .toolbar-button,
    .icon-button,
    .toolbar-select,
    .toolbar-search,
    .table-filter__option,
    .table-filter__mode-chip,
    .chooser-item,
    .filter-option,
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
    select,
    textarea
) {
    background: var(--github-canvas-inset);
    border-color: var(--github-border-default);
    color: var(--text);
    box-shadow: none;
}

html[data-theme=dark] :is(.primary-button, button[type=submit].primary-button) {
    background: var(--github-success-emphasis);
    border: 1px solid rgba(240, 246, 252, 0.1);
    color: #ffffff;
}

html[data-theme=dark] :is(.primary-button, button[type=submit].primary-button):hover {
    background: #2ea043;
    box-shadow: 0 0 0 3px rgba(46, 160, 67, 0.18);
}

html[data-theme=dark] :is(a, .dashboard-case-link, .jira-issue-link) {
    color: var(--brand);
}

html[data-theme=dark] :is(.table-wrap, .data-table, table) {
    border-color: var(--github-border-default);
}

html[data-theme=dark] :is(.table-wrap, .data-table) thead th,
html[data-theme=dark] table thead th {
    background: var(--github-canvas-inset);
    border-color: var(--github-border-default);
    color: var(--text-strong);
}

html[data-theme=dark] :is(.table-wrap, .data-table) tbody td,
html[data-theme=dark] table tbody td {
    background: var(--github-canvas-default);
    border-color: var(--github-border-muted);
    color: var(--text);
}

html[data-theme=dark] :is(.table-wrap, .data-table) tbody tr:nth-child(even) td,
html[data-theme=dark] table tbody tr:nth-child(even) td {
    background: color-mix(in srgb, var(--github-canvas-overlay) 74%, var(--github-canvas-default));
}

html[data-theme=dark] :is(.table-wrap, .data-table) tbody tr:hover td,
html[data-theme=dark] table tbody tr:hover td {
    background: var(--github-accent-muted);
}

html[data-theme=dark] :is(
    .content-card,
    .chart-card,
    .table-shell,
    .compact-table-shell,
    .metric-card,
    .donut-card,
    .detail-item
):hover {
    border-color: #484f58;
    box-shadow: 0 12px 28px rgba(1, 4, 9, 0.4);
}

/* Compact sidebar cards keep every destination visible without shrinking labels. */

.sidebar-nav__section {
    gap: 0.34rem;
}

.sidebar .nav-link,
.sidebar .nav-group__toggle {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: 0.6rem;
    min-height: 3.2rem;
    padding: 0.46rem 0.62rem;
    border-radius: 0.78rem;
}

.sidebar .nav-link__icon,
.sidebar .nav-group__toggle .nav-link__icon {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.65rem;
}

.sidebar .nav-link__icon svg,
.sidebar .nav-group__toggle .nav-link__icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.sidebar .nav-link__label strong,
.sidebar .nav-group__toggle .nav-link__label strong {
    font-size: 0.88rem;
    line-height: 1.15;
}

.sidebar .nav-link__label .muted-copy,
.sidebar .nav-group__toggle .nav-link__label .muted-copy {
    margin-top: 0.12rem;
    font-size: 0.68rem;
    line-height: 1.2;
}

.sidebar .nav-link--child {
    min-height: 2.85rem;
    padding-block: 0.4rem;
}

.app-shell.sidebar-collapsed .sidebar .nav-link,
.app-shell.sidebar-collapsed .sidebar .nav-group__toggle {
    grid-template-columns: 1fr;
    min-height: 2.85rem;
    padding: 0.38rem;
}

/* GitHub Primer dark-default normalization. Keep component status colors while
   giving every neutral workspace surface one consistent dark hierarchy. */
html[data-theme=dark] {
    --widget-bg: #161b22;
    --widget-bg-strong: #161b22;
    --widget-bg-soft: #0d1117;
    --widget-border: #30363d;
    --widget-shadow: 0 8px 24px rgba(1, 4, 9, 0.32);
    --widget-shadow-strong: 0 12px 32px rgba(1, 4, 9, 0.42);
    --widget-highlight: rgba(56, 139, 253, 0.1);
    --canvas-grid: rgba(48, 54, 61, 0.42);
    --canvas-glow: rgba(163, 113, 247, 0.08);
    --canvas-base: #0d1117;
}

html[data-theme=dark] .app-shell {
    background: #010409;
}

html[data-theme=dark] .workspace,
html[data-theme=dark] .content-stage {
    color: #c9d1d9;
}

html[data-theme=dark] .workspace {
    background:
        radial-gradient(ellipse 52rem 30rem at 52% -8%, rgba(163, 113, 247, 0.18), rgba(56, 139, 253, 0.07) 34%, transparent 72%),
        linear-gradient(180deg, #010409 0%, #0d1117 22%, #0d1117 100%);
}

html[data-theme=dark] .content-stage {
    background: transparent;
}

html[data-theme=dark] .topbar,
html[data-theme=dark] .sidebar,
html[data-theme=dark] .workspace-footer {
    background: #010409;
    border-color: #30363d;
}

html[data-theme=dark] :is(
    .notification-strip,
    .content-card,
    .chart-card,
    .table-shell,
    .compact-table-shell,
    .metric-card,
    .selection-flash,
    .donut-card,
    .donut-card__body,
    .donut-card__footer,
    .table-wrap,
    .popup-window__dialog,
    .detail-drawer,
    .ai-assistant__panel
) {
    background: linear-gradient(180deg, rgba(22, 27, 34, 0.98), rgba(13, 17, 23, 0.98));
    border-color: #30363d;
    color: #c9d1d9;
}

html[data-theme=dark] :is(
    .detail-item,
    .table-searchband,
    .table-filter__summary,
    .table-filter__panel,
    .table-filter__option,
    .chooser-item,
    .filter-option,
    .selection-stat,
    .sidebar-foot,
    .user-pill,
    .mode-switch
) {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

html[data-theme=dark] :is(
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
    select,
    textarea,
    .toolbar-search,
    .toolbar-select
) {
    background: #0d1117;
    border-color: #30363d;
    color: #c9d1d9;
}

html[data-theme=dark] :is(.secondary-button, .toolbar-button, .icon-button) {
    background: #21262d;
    border-color: #30363d;
    color: #c9d1d9;
}

html[data-theme=dark] :is(.secondary-button, .toolbar-button, .icon-button):hover {
    background: #30363d;
    border-color: #8b949e;
    color: #f0f6fc;
}

html[data-theme=dark] .primary-button {
    background: #238636;
    border-color: rgba(240, 246, 252, 0.1);
    color: #ffffff;
}

html[data-theme=dark] .primary-button:hover {
    background: #2ea043;
}

html[data-theme=dark] :is(table, .data-table) thead th {
    background: #010409;
    border-color: #30363d;
    color: #f0f6fc;
}

html[data-theme=dark] :is(.table-wrap, .data-table) tbody tr {
    background: #0d1117;
}

html[data-theme=dark] :is(.table-wrap, .data-table) tbody tr:nth-child(even) {
    background: #161b22;
}

html[data-theme=dark] :is(.table-wrap, .data-table) tbody tr:hover {
    background: #1f242c;
}

html[data-theme=dark] :is(.muted-copy, .metric-card__label, .detail-item__label) {
    color: #8b949e;
}

html[data-theme=dark] :is(.link-button, .dashboard-case-link) {
    color: #58a6ff;
}

/* Compact sidebar cards keep more workspaces visible while preserving two-line labels. */
.sidebar .sidebar-nav__section {
    gap: 0.34rem;
}

.sidebar .nav-group {
    gap: 0.3rem;
}

.sidebar .nav-link,
.sidebar .nav-group__toggle {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: 0.6rem;
    min-height: 3.25rem;
    padding: 0.48rem 0.62rem;
    border-radius: 0.78rem;
}

.sidebar .nav-link__icon,
.sidebar .nav-group__toggle .nav-link__icon {
    width: 2.1rem;
    height: 2.1rem;
}

.sidebar .nav-link__label strong {
    font-size: 0.88rem;
    line-height: 1.18;
}

.sidebar .nav-link__label .muted-copy {
    margin-top: 0.12rem;
    font-size: 0.68rem;
    line-height: 1.2;
}

.sidebar .nav-link--child {
    min-height: 2.9rem;
    padding-block: 0.4rem;
}

.app-shell.sidebar-collapsed .sidebar .nav-link,
.app-shell.sidebar-collapsed .sidebar .nav-group__toggle {
    grid-template-columns: 1fr;
    min-height: 3.1rem;
    padding: 0.48rem;
}

/* Shared foreground task percentage. It advances to 94% while the server is
   working and reaches 100% only after the response completes. */

.progress-overlay__card {
    width: min(22rem, calc(100vw - 2rem));
}

.progress-overlay__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 3.5rem;
}

.progress-overlay__percentage {
    min-width: 3.2rem;
    color: var(--brand);
    font-size: 1.18rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-align: left;
}

.progress-overlay__card p {
    margin-top: 0.65rem;
    color: var(--text);
    font-weight: 700;
}

.progress-overlay__meter {
    height: 0.5rem;
    margin-top: 0.85rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--panel-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 8%, var(--surface-strong));
}

.progress-overlay__bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand-strong), var(--brand), var(--accent));
    box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 34%, transparent);
    transition: width 320ms ease;
}

.progress-overlay.is-complete .progress-overlay__percentage {
    color: var(--success);
}

.progress-overlay.is-complete .progress-overlay__bar {
    background: linear-gradient(90deg, #238636, var(--success));
}

html[data-theme=dark] .progress-overlay {
    background: rgba(1, 4, 9, 0.72);
}

html[data-theme=dark] .progress-overlay__card {
    background: #161b22;
    border-color: #30363d;
    color: #c9d1d9;
}

/* Header task activity stays compact while exposing real request progress. */
.topbar-task-progress {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 10rem;
    max-width: 14rem;
    min-height: 2.4rem;
    padding: 0.3rem 0.48rem;
    border: 1px solid #30363d;
    border-radius: 0.78rem;
    background: rgba(13, 17, 23, 0.96);
    color: #c9d1d9;
    box-shadow: 0 8px 24px rgba(1, 4, 9, 0.3);
    overflow: hidden;
}

.topbar-task-progress__bars {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 0.13rem;
    width: 2.35rem;
    height: 1.45rem;
    padding-inline: 0.08rem;
}

.topbar-task-progress__bars span {
    width: 0.16rem;
    height: var(--task-bar-height, 0.8rem);
    border-radius: 999px 999px 0.1rem 0.1rem;
    background: linear-gradient(180deg, #79c0ff, #8957e5);
    transform-origin: bottom;
    animation: header-task-bar-wave 1.05s ease-in-out infinite;
}

.topbar-task-progress__bars span:nth-child(1) { --task-bar-height: 0.42rem; animation-delay: -0.8s; }
.topbar-task-progress__bars span:nth-child(2) { --task-bar-height: 0.72rem; animation-delay: -0.7s; }
.topbar-task-progress__bars span:nth-child(3) { --task-bar-height: 1rem; animation-delay: -0.6s; }
.topbar-task-progress__bars span:nth-child(4) { --task-bar-height: 1.35rem; animation-delay: -0.5s; }
.topbar-task-progress__bars span:nth-child(5) { --task-bar-height: 1.12rem; animation-delay: -0.4s; }
.topbar-task-progress__bars span:nth-child(6) { --task-bar-height: 0.9rem; animation-delay: -0.3s; }
.topbar-task-progress__bars span:nth-child(7) { --task-bar-height: 0.68rem; animation-delay: -0.2s; }
.topbar-task-progress__bars span:nth-child(8) { --task-bar-height: 0.52rem; animation-delay: -0.1s; }
.topbar-task-progress__bars span:nth-child(9) { --task-bar-height: 0.34rem; animation-delay: 0s; }

.topbar-task-progress__copy {
    display: grid;
    gap: 0.06rem;
    min-width: 0;
}

.topbar-task-progress__copy strong,
.topbar-task-progress__copy small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar-task-progress__copy strong {
    color: #f0f6fc;
    font-size: 0.7rem;
    line-height: 1.1;
}

.topbar-task-progress__copy small {
    color: #8b949e;
    font-size: 0.62rem;
    line-height: 1.1;
}

.topbar-task-progress__count {
    display: grid;
    place-items: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding-inline: 0.28rem;
    border: 1px solid rgba(88, 166, 255, 0.32);
    border-radius: 999px;
    background: rgba(56, 139, 253, 0.14);
    color: #79c0ff;
    font-size: 0.68rem;
    font-weight: 800;
}

@keyframes header-task-bar-wave {
    0%, 100% { transform: scaleY(0.38); opacity: 0.55; }
    48% { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 1380px) {
    .topbar-task-progress {
        min-width: 4.4rem;
        grid-template-columns: auto auto;
    }

    .topbar-task-progress__copy {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar-task-progress__bars span {
        animation: none;
        transform: scaleY(0.72);
    }
}

/* Cisco Intersight resource navigation and synchronized analytics context */
.intersight-workspace {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
}

.intersight-workspace.is-subnav-collapsed {
    grid-template-columns: 3.7rem minmax(0, 1fr);
}

.intersight-workspace__content {
    min-width: 0;
}

.intersight-subnav {
    position: sticky;
    top: 0.65rem;
    min-width: 0;
    max-height: calc(100dvh - 7.5rem);
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    color: var(--text);
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, #00bceb 9%, transparent), transparent 13rem),
        var(--panel-strong);
    box-shadow: var(--shadow-soft);
}

.intersight-subnav__head {
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr) 1.8rem;
    align-items: center;
    gap: 0.5rem;
    min-height: 3.8rem;
    padding: 0.65rem;
    border-bottom: 1px solid var(--panel-border);
    background: color-mix(in srgb, var(--ds-surface-raised) 82%, transparent);
}

.intersight-subnav__brand,
.intersight-subnav__collapse {
    display: grid;
    width: 2.15rem;
    height: 2.15rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, #00bceb 35%, var(--panel-border));
    border-radius: 0.68rem;
    color: #00bceb;
    background: color-mix(in srgb, #00bceb 10%, var(--panel));
}

.intersight-subnav__brand .vendor-mark {
    width: 1.35rem;
    height: 1.35rem;
}

.intersight-subnav__collapse {
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    color: var(--text-soft);
    cursor: pointer;
}

.intersight-subnav__collapse:hover {
    color: var(--text);
    border-color: color-mix(in srgb, #00bceb 55%, var(--panel-border));
    background: var(--ds-surface-hover);
}

.intersight-subnav__collapse svg {
    width: 0.9rem;
    height: 0.9rem;
}

.intersight-subnav__title {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
}

.intersight-subnav__title strong {
    font-size: 0.8rem;
    font-weight: 700;
}

.intersight-subnav__title small {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 0.6rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intersight-subnav__scroll {
    max-height: calc(100dvh - 11.3rem);
    padding: 0.5rem;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-color: color-mix(in srgb, var(--text-soft) 45%, transparent) transparent;
    scrollbar-width: thin;
}

.intersight-subnav__item-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1.65rem;
    align-items: center;
    min-width: 0;
    margin: 0.12rem 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 0.68rem;
}

.intersight-subnav__item-wrap--resource {
    grid-template-columns: minmax(0, 1fr);
}

.intersight-subnav__item-wrap:hover,
.intersight-subnav__item-wrap.is-active {
    border-color: color-mix(in srgb, #00bceb 38%, var(--panel-border));
    background: var(--ds-surface-hover);
}

.intersight-subnav__item-wrap.is-active {
    box-shadow: inset 2px 0 #00bceb;
}

.intersight-subnav__item {
    position: relative;
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.48rem;
    width: 100%;
    min-width: 0;
    min-height: 2.65rem;
    padding: 0.38rem 0.3rem 0.38rem 0.48rem;
    border: 0;
    color: var(--text-soft);
    background: transparent;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.intersight-subnav__item.is-external {
    grid-template-columns: 1.7rem minmax(0, 1fr) 1rem;
    margin: 0.12rem 0;
    border: 1px solid transparent;
    border-radius: 0.68rem;
}

.intersight-subnav__item.is-external:hover {
    border-color: color-mix(in srgb, #00bceb 38%, var(--panel-border));
    color: var(--text);
    background: var(--ds-surface-hover);
}

.intersight-subnav__item:hover,
.intersight-subnav__item-wrap.is-active .intersight-subnav__item {
    color: var(--text);
}

.intersight-subnav__item > span:first-child,
.intersight-subnav__group > summary > span:first-child {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border-radius: 0.5rem;
    color: #72ddf7;
    background: color-mix(in srgb, #00bceb 12%, var(--panel));
}

.intersight-subnav__item svg,
.intersight-subnav__group summary svg {
    width: 0.88rem;
    height: 0.88rem;
}

.intersight-subnav__item-copy {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.intersight-subnav__item-copy strong {
    overflow: hidden;
    font-size: 0.68rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intersight-subnav__item-copy small {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 0.56rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intersight-subnav__item > i {
    position: absolute;
    top: 50%;
    right: 0.15rem;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: var(--text-soft);
    transform: translateY(-50%);
}

.intersight-subnav__item.is-loaded > i { background: var(--success); }
.intersight-subnav__item.is-failed > i { background: var(--danger); }
.intersight-subnav__item.is-empty > i { background: var(--warning); }

.intersight-subnav__launch {
    display: grid;
    width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border-radius: 0.45rem;
    color: var(--text-soft);
}

.intersight-subnav__launch:hover {
    color: #72ddf7;
    background: color-mix(in srgb, #00bceb 12%, var(--panel));
}

.intersight-subnav__launch svg,
.intersight-subnav__external svg {
    width: 0.72rem;
    height: 0.72rem;
}

.intersight-subnav__external {
    display: grid;
    place-items: center;
    color: var(--text-soft);
}

.intersight-subnav__group {
    margin-top: 0.25rem;
    border-top: 1px solid color-mix(in srgb, var(--panel-border) 72%, transparent);
}

.intersight-subnav__group > summary {
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: 0.48rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.48rem;
    color: var(--text-soft);
    list-style: none;
    cursor: pointer;
}

.intersight-subnav__group > summary::-webkit-details-marker {
    display: none;
}

.intersight-subnav__group > summary strong {
    font-size: 0.63rem;
    font-weight: 750;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.intersight-subnav__group-copy {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.intersight-subnav__group-copy strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.63rem;
    font-weight: 750;
    letter-spacing: 0.065em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.intersight-subnav__group-copy small {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 0.54rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intersight-subnav__section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.65rem 0.35rem 0.28rem;
    padding: 0 0.18rem;
    color: var(--text-soft);
    font-size: 0.56rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.intersight-subnav__section-label small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    min-height: 1.1rem;
    padding: 0.08rem 0.28rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: #72ddf7;
    background: var(--panel);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0;
}

.intersight-subnav__section-label svg {
    width: 0.62rem;
    height: 0.62rem;
}

.intersight-subnav__group--resources {
    border-top-color: color-mix(in srgb, #00bceb 22%, var(--panel-border));
}

.intersight-subnav__chevron {
    display: grid;
    place-items: center;
    transition: transform 150ms ease;
}

.intersight-subnav__group[open] .intersight-subnav__chevron {
    transform: rotate(180deg);
}

.intersight-subnav__items {
    padding-left: 0.28rem;
}

.intersight-subnav__empty {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.35rem;
    padding: 0.45rem 0.6rem;
    color: var(--text-soft);
}

.intersight-subnav__empty svg {
    width: 0.9rem;
    height: 0.9rem;
}

.intersight-subnav__empty small {
    font-size: 0.58rem;
}

.intersight-workspace.is-subnav-collapsed .intersight-subnav__head {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding-inline: 0.4rem;
}

.intersight-workspace.is-subnav-collapsed .intersight-subnav__title,
.intersight-workspace.is-subnav-collapsed .intersight-subnav__item-copy,
.intersight-workspace.is-subnav-collapsed .intersight-subnav__launch,
.intersight-workspace.is-subnav-collapsed .intersight-subnav__external,
.intersight-workspace.is-subnav-collapsed .intersight-subnav__group > summary strong,
.intersight-workspace.is-subnav-collapsed .intersight-subnav__group-copy,
.intersight-workspace.is-subnav-collapsed .intersight-subnav__section-label,
.intersight-workspace.is-subnav-collapsed .intersight-subnav__chevron,
.intersight-workspace.is-subnav-collapsed .intersight-subnav__empty small,
.intersight-workspace.is-subnav-collapsed .intersight-subnav__item > i {
    display: none;
}

.intersight-workspace.is-subnav-collapsed .intersight-subnav__item-wrap,
.intersight-workspace.is-subnav-collapsed .intersight-subnav__item {
    grid-template-columns: minmax(0, 1fr);
}

.intersight-workspace.is-subnav-collapsed .intersight-subnav__item,
.intersight-workspace.is-subnav-collapsed .intersight-subnav__group > summary {
    justify-items: center;
    padding-inline: 0.3rem;
}

.intersight-inventory__context {
    display: grid;
    grid-template-columns: 2.25rem minmax(7rem, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-width: min(100%, 18rem);
    padding: 0.5rem 0.58rem;
    border: 1px solid color-mix(in srgb, #00bceb 32%, var(--panel-border));
    border-radius: 0.72rem;
    background: color-mix(in srgb, #00bceb 6%, var(--panel));
}

.intersight-inventory__context-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 0.65rem;
    color: #72ddf7;
    background: color-mix(in srgb, #00bceb 14%, var(--ds-surface-raised));
}

.intersight-inventory__context-icon svg {
    width: 1.05rem;
    height: 1.05rem;
}

.intersight-inventory__context > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.intersight-inventory__context small {
    color: var(--text-soft);
    font-size: 0.58rem;
    font-weight: 550;
    text-transform: capitalize;
}

.intersight-inventory__context strong {
    overflow: hidden;
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intersight-inventory__context .status-pill {
    white-space: nowrap;
}

@media (max-width: 64rem) {
    .intersight-workspace {
        grid-template-columns: 13.5rem minmax(0, 1fr);
    }

    .intersight-workspace.is-subnav-collapsed {
        grid-template-columns: 3.7rem minmax(0, 1fr);
    }
}

@media (max-width: 54rem) {
    .intersight-workspace,
    .intersight-workspace.is-subnav-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .intersight-subnav {
        position: relative;
        top: auto;
        max-height: 22rem;
    }

    .intersight-subnav__scroll {
        max-height: 18rem;
    }

    .intersight-workspace.is-subnav-collapsed .intersight-subnav__scroll {
        display: none;
    }
}

@media (max-width: 36rem) {
    .intersight-inventory__context {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        width: 100%;
    }

    .intersight-inventory__context .status-pill {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Shared data-table controls: compact typography, per-table search, column
   visibility, and deliberate pointer resizing. Horizontal overflow remains
   inside each table wrapper instead of widening the application shell. */
#appContent .table-wrap > table {
    font-size: clamp(0.75rem, 0.72rem + 0.08vw, 0.875rem);
    line-height: 1.35;
}

#appContent .table-wrap > table th {
    position: relative;
    font-size: clamp(0.75rem, 0.72rem + 0.06vw, 0.8125rem);
}

#appContent .table-wrap > table td,
#appContent .table-wrap > table th {
    padding: clamp(0.5rem, 0.42rem + 0.2vw, 0.75rem);
    overflow-wrap: anywhere;
}

.easyclick-table-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    margin: 0.5rem 0;
    max-width: 100%;
}

.easyclick-table-tool-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.easyclick-table-tool-actions > :is(button, a, details) {
    flex: 0 0 auto;
}

/* Shared database editor popup used by prompt, metric-rule, and credential
   administration. Editors stay out of dense inventory layouts until opened. */
.admin-edit-modal {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 2vw, 2rem);
}

.admin-edit-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(3 7 18 / 78%);
    backdrop-filter: blur(0.35rem);
}

.admin-edit-modal__panel {
    position: relative;
    z-index: 1;
    width: min(52rem, 96vw);
    max-height: 92vh;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--panel-border));
    border-radius: 1rem;
    background: var(--panel-strong);
    box-shadow: 0 1.4rem 5rem rgb(0 0 0 / 48%), 0 0 0 0.12rem color-mix(in srgb, var(--brand) 12%, transparent);
}

.admin-edit-modal__panel--wide {
    width: min(72rem, 96vw);
}

.admin-edit-modal__header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--panel-border);
    background: color-mix(in srgb, var(--panel-strong) 96%, var(--brand) 4%);
}

.admin-edit-modal__header :is(h3, p) {
    margin: 0;
}

.admin-edit-modal__header > div > p:last-child {
    margin-top: 0.3rem;
    color: var(--text-soft);
}

.system-settings-modal .admin-edit-modal__header {
    align-items: flex-start;
}

.system-settings-modal__close {
    flex: 0 0 2.8rem;
    width: 2.8rem;
    min-width: 2.8rem;
    height: 2.8rem;
    min-height: 2.8rem;
    color: var(--text) !important;
    border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--panel-border)) !important;
    background: color-mix(in srgb, var(--brand) 9%, var(--panel-strong)) !important;
    box-shadow: 0 .35rem 1rem color-mix(in srgb, var(--brand) 12%, transparent);
}

.system-settings-modal__close:hover,
.system-settings-modal__close:focus-visible {
    color: #fff !important;
    border-color: var(--brand) !important;
    background: var(--brand) !important;
    box-shadow: 0 .45rem 1.2rem color-mix(in srgb, var(--brand) 28%, transparent);
}

.system-settings-modal__close svg {
    width: 1.15rem;
    height: 1.15rem;
}

.admin-edit-modal__body {
    padding: 1rem 1.15rem;
}

.admin-edit-modal__footer {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
    padding-top: 0.75rem;
}

.enterprise-value-settings-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    align-content: start;
}

.enterprise-value-settings-modal .admin-edit-modal__panel {
    width: min(68rem, calc(100vw - 2rem));
    max-height: min(56rem, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.enterprise-value-settings-modal .admin-edit-modal__header {
    padding: 1rem 1.15rem;
}

.enterprise-value-settings-modal .admin-edit-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.enterprise-usage-chart {
    display: grid;
    gap: 0.48rem;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.7rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.7rem;
}

.enterprise-usage-chart__row {
    display: grid;
    grid-template-columns: 1.5rem minmax(6rem, 12rem) minmax(3rem, 1fr) 5.5rem;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.73rem;
}

.enterprise-usage-chart__row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enterprise-usage-chart__rank { color: var(--text-muted); }
.enterprise-usage-chart__row b { text-align: right; font-variant-numeric: tabular-nums; }
.enterprise-usage-chart__track { height: 0.55rem; overflow: hidden; border-radius: 1rem; background: color-mix(in srgb, var(--brand) 10%, var(--panel)); }
.enterprise-usage-chart__track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #5c7cf4, #58baa6); }

.enterprise-value-settings-alert,
.enterprise-value-settings-commercial {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--brand) 5%, var(--panel));
}

.enterprise-value-settings-alert__icon,
.enterprise-value-settings-commercial > span,
.enterprise-value-settings-summary__icon {
    display: grid;
    place-items: center;
    inline-size: 2.35rem;
    block-size: 2.35rem;
    border-radius: 0.7rem;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 13%, var(--panel-strong));
}

.enterprise-value-settings-alert__icon {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, var(--panel-strong));
}

.enterprise-value-settings-alert__icon svg,
.enterprise-value-settings-commercial > span svg,
.enterprise-value-settings-summary__icon svg {
    inline-size: 1.15rem;
    block-size: 1.15rem;
}

.enterprise-value-settings-alert :is(p, strong),
.enterprise-value-settings-commercial :is(p, strong) {
    margin: 0;
}

.enterprise-value-settings-alert p,
.enterprise-value-settings-commercial p {
    margin-top: 0.18rem;
    color: var(--text-soft);
    line-height: 1.45;
}

.enterprise-value-settings-section {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--panel-strong) 78%, transparent);
}

.enterprise-value-settings-section > header {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
}

.enterprise-value-settings-section > header > span {
    display: grid;
    place-items: center;
    inline-size: 2.35rem;
    block-size: 2.35rem;
    border-radius: 0.7rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

.enterprise-value-settings-section > header svg {
    inline-size: 1.1rem;
    block-size: 1.1rem;
}

.enterprise-value-settings-section > header :is(p, h4, small) {
    margin: 0;
}

.enterprise-value-settings-section > header h4 {
    margin-top: 0.1rem;
    color: var(--text);
    font-size: 1rem;
}

.enterprise-value-settings-section > header small {
    display: block;
    margin-top: 0.15rem;
    color: var(--text-soft);
}

.enterprise-value-settings-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    min-width: 0;
}

.enterprise-value-settings-fields--baseline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.enterprise-value-settings-fields > label,
.enterprise-value-settings-form > label {
    display: grid;
    gap: 0.38rem;
    min-width: 0;
}

.enterprise-value-settings-fields > label > span,
.enterprise-value-settings-form > label > span {
    color: var(--text-soft);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.enterprise-value-settings-fields :is(input, select) {
    width: 100%;
    min-width: 0;
    min-height: 2.8rem;
}

.enterprise-value-settings-fields label > small {
    color: var(--text-soft);
    line-height: 1.35;
}

.enterprise-value-settings-effective {
    grid-column: span 2;
}

.enterprise-value-settings-form > .enterprise-value-settings-check {
    align-content: center;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--brand) 4%, var(--panel));
}

.enterprise-value-settings-check input[type="checkbox"] {
    inline-size: 1.1rem;
    block-size: 1.1rem;
    margin: 0;
    accent-color: var(--accent);
}

.enterprise-value-settings-check small {
    grid-column: 2;
    color: var(--text-soft);
}

.enterprise-value-settings-summary {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    padding: 0.85rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--brand) 5%, var(--panel));
}

.enterprise-value-settings-summary > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.35rem 0.65rem;
    min-width: 0;
}

.enterprise-value-settings-summary :is(p, small) { margin: 0; }
.enterprise-value-settings-summary p,
.enterprise-value-settings-summary small { grid-column: 1 / -1; color: var(--text-soft); line-height: 1.45; }

.enterprise-value-settings-modal .admin-edit-modal__footer {
    position: sticky;
    bottom: -1rem;
    z-index: 2;
    margin: 0 -1.15rem -1rem;
    padding: 0.8rem 1.15rem 1rem;
    border-top: 1px solid var(--panel-border);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    backdrop-filter: blur(14px);
}

@media (max-width: 60rem) {
    .enterprise-value-settings-fields--baseline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 46rem) {
    .enterprise-value-settings-fields,
    .enterprise-value-settings-fields--baseline { grid-template-columns: minmax(0, 1fr); }
    .enterprise-value-settings-effective { grid-column: auto; }
    .enterprise-value-settings-summary > div { grid-template-columns: minmax(0, 1fr); }
}

.admin-token-management .admin-token-row {
    cursor: pointer;
}

.admin-token-management .admin-token-row:hover td,
.admin-token-management .admin-token-row:focus-visible td {
    background: color-mix(in srgb, var(--brand) 8%, var(--panel));
}

.table-row-actions .function-edit {
    color: #7dd3fc;
    border-color: rgb(56 189 248 / 45%);
    background: rgb(14 116 144 / 18%);
}

.table-row-actions .function-enable {
    color: #86efac;
    border-color: rgb(34 197 94 / 48%);
    background: rgb(21 128 61 / 20%);
}

.table-row-actions .function-disable {
    color: #fcd34d;
    border-color: rgb(245 158 11 / 48%);
    background: rgb(180 83 9 / 18%);
}

.table-row-actions .function-stop {
    color: #fb923c;
    border-color: rgb(249 115 22 / 50%);
    background: rgb(194 65 12 / 18%);
}

.table-row-actions .function-delete {
    color: #fda4af;
    border-color: rgb(244 63 94 / 48%);
    background: rgb(190 18 60 / 18%);
}

@media (max-width: 46rem) {
    .admin-edit-modal {
        place-items: end center;
        padding: 0;
    }

    .admin-edit-modal__panel,
    .admin-edit-modal__panel--wide {
        width: 100%;
        max-height: 94vh;
        border-radius: 1rem 1rem 0 0;
    }
}

.easyclick-table-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 18rem;
    max-width: 32rem;
    min-width: 10rem;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.75rem;
    background: var(--panel-strong);
}

.easyclick-table-search svg { width: 1rem; height: 1rem; color: var(--brand); flex: 0 0 auto; }
.easyclick-table-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; }

.easyclick-column-menu { position: relative; flex: 0 0 auto; }
.easyclick-column-menu summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.75rem;
    background: var(--panel-strong);
    color: var(--text);
    cursor: pointer;
    list-style: none;
}
.easyclick-column-menu summary::-webkit-details-marker { display: none; }
.easyclick-column-menu summary svg { width: 1rem; height: 1rem; color: var(--brand); }
.easyclick-column-menu__panel {
    position: absolute;
    z-index: 80;
    top: calc(100% + 0.35rem);
    right: 0;
    display: grid;
    gap: 0.35rem;
    width: max-content;
    min-width: 13rem;
    max-width: min(24rem, 85vw);
    max-height: 22rem;
    overflow: auto;
    padding: 0.65rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.75rem;
    background: var(--panel);
    box-shadow: var(--shadow);
}
.easyclick-column-menu__panel label { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; cursor: pointer; }
.easyclick-column-resizer {
    position: absolute;
    z-index: 4;
    top: 0;
    right: -0.2rem;
    width: 0.45rem;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
}
.easyclick-column-resizer:hover,
.easyclick-column-resizer:focus-visible { background: color-mix(in srgb, var(--brand) 55%, transparent); }

.integration-status {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: min(100%, 13rem);
    color: var(--text);
}

.integration-status__icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
    border-radius: 0.55rem;
    background: color-mix(in srgb, currentColor 14%, transparent);
}

.integration-status__icon svg {
    width: 1rem;
    height: 1rem;
}

.integration-status strong,
.integration-status small {
    display: block;
}

.integration-status strong {
    font-size: 0.8125rem;
    line-height: 1.25;
}

.integration-status small {
    max-width: 18rem;
    margin-top: 0.15rem;
    color: var(--text-soft);
    font-size: 0.75rem;
    line-height: 1.35;
    white-space: normal;
}

.integration-status--success { color: var(--success); }
.integration-status--info { color: var(--brand); }
.integration-status--warning { color: var(--warning); }
.integration-status--danger { color: var(--danger); }
.integration-status--soft { color: var(--text-soft); }

@media (max-width: 40rem) {
    .easyclick-table-tools { align-items: stretch; flex-wrap: wrap; }
    .easyclick-table-search { max-width: none; flex-basis: 100%; }
}

/* Universal GitHub-style scrollbars for pages, dialogs, tables, and side panels. */
:root {
    --app-scrollbar-track: #f6f8fa;
    --app-scrollbar-thumb: #afb8c1;
    --app-scrollbar-thumb-hover: #8c959f;
    --app-scrollbar-thumb-active: #0969da;
    --app-scrollbar-border: #ffffff;
}

html[data-theme="dark"] {
    --app-scrollbar-track: #0d1117;
    --app-scrollbar-thumb: #484f58;
    --app-scrollbar-thumb-hover: #6e7681;
    --app-scrollbar-thumb-active: #58a6ff;
    --app-scrollbar-border: #0d1117;
}

* {
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track) !important;
}

*::-webkit-scrollbar-track {
    background: var(--app-scrollbar-track) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app-scrollbar-thumb) 12%, transparent) !important;
}

*::-webkit-scrollbar-thumb {
    border: 2px solid var(--app-scrollbar-border) !important;
    background: var(--app-scrollbar-thumb) !important;
    box-shadow: none !important;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--app-scrollbar-thumb-hover) !important;
}

*::-webkit-scrollbar-thumb:active {
    background: var(--app-scrollbar-thumb-active) !important;
}

*::-webkit-scrollbar-corner {
    background: var(--app-scrollbar-track) !important;
}

/* Keep the MRA workspace controls visible without consuming the first screen. */
.table-shell[data-dataset=mra] {
    gap: 0.4rem;
    padding: 0.58rem 0.72rem 0.72rem;
}

.table-shell[data-dataset=mra] > .table-head:first-child {
    align-items: center;
    margin-bottom: 0;
}

.table-shell[data-dataset=mra] > .table-head:first-child .table-head__copy {
    display: flex;
    align-items: baseline;
    gap: 0.28rem 0.62rem;
    flex-wrap: wrap;
}

.meeting-toolbar--history {
    margin: 0 0 0.76rem;
    padding: 0.7rem;
    border: 1px solid color-mix(in srgb, var(--panel-border) 86%, transparent);
    border-radius: 0.88rem;
    background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
}

.table-shell[data-dataset=mra] > .table-head:first-child :is(.eyebrow, h3, .muted-copy) {
    margin: 0;
}

.table-shell[data-dataset=mra] > .table-head:first-child h3 {
    font-size: 1.22rem;
    line-height: 1.1;
}

.table-shell[data-dataset=mra] > .table-head:first-child .muted-copy {
    font-size: 0.78rem;
}

.table-shell[data-dataset=mra] > .notice-card--inline {
    margin: 0;
    padding: 0.46rem 0.68rem;
    font-size: 0.78rem;
    line-height: 1.25;
}

.table-shell[data-dataset=mra] .mra-workspace-launch {
    margin: 0;
    padding: 0.5rem 0.68rem;
}

.table-shell[data-dataset=mra] .mra-workspace-launch__head {
    align-items: center;
    gap: 0.55rem 0.8rem;
}

.table-shell[data-dataset=mra] .mra-workspace-launch__copy {
    display: grid;
    grid-template-columns: max-content max-content minmax(16rem, 1fr);
    align-items: center;
    gap: 0.3rem 0.72rem;
    min-width: 0;
}

.table-shell[data-dataset=mra] .mra-workspace-launch__copy :is(.eyebrow, h3, .muted-copy) {
    margin: 0;
}

.table-shell[data-dataset=mra] .mra-workspace-launch__copy h3 {
    font-size: 1rem;
    line-height: 1.08;
    white-space: nowrap;
}

.table-shell[data-dataset=mra] .mra-workspace-launch__copy .muted-copy {
    max-width: none;
    font-size: 0.75rem;
    line-height: 1.25;
}

.table-shell[data-dataset=mra] .mra-workspace-launch__actions .toolbar-button {
    min-height: 2.25rem;
    padding: 0.48rem 0.72rem;
    white-space: nowrap;
}

.table-shell[data-dataset=mra] .dataset-top-summary {
    gap: 0.36rem;
    margin: 0 0 0.35rem;
    padding: 0.5rem 0.68rem;
}

.table-shell[data-dataset=mra] .dataset-top-summary > .table-head {
    align-items: center;
    gap: 0.45rem;
}

.table-shell[data-dataset=mra] .dataset-top-summary > .table-head > div:first-child {
    display: grid;
    grid-template-columns: max-content max-content minmax(16rem, 1fr);
    align-items: center;
    gap: 0.3rem 0.68rem;
    min-width: 0;
}

.table-shell[data-dataset=mra] .dataset-top-summary > .table-head :is(.eyebrow, h3, .muted-copy) {
    margin: 0;
}

.table-shell[data-dataset=mra] .dataset-top-summary > .table-head h3 {
    font-size: 1rem;
    line-height: 1.08;
    white-space: nowrap;
}

.table-shell[data-dataset=mra] .dataset-top-summary > .table-head .muted-copy {
    font-size: 0.75rem;
    line-height: 1.25;
}

.table-shell[data-dataset=mra] .dataset-top-summary__cards {
    grid-auto-columns: minmax(9.5rem, 1fr);
    gap: 0.34rem;
    margin-bottom: 0.12rem;
    padding-bottom: 0.04rem;
    overflow-y: hidden;
}

.table-shell[data-dataset=mra] .dataset-top-summary__cards .metric-card--compact {
    min-height: 3.55rem;
    padding: 0.38rem 0.5rem;
    gap: 0.46rem;
    border-radius: 0.72rem;
}

.table-shell[data-dataset=mra] .dataset-top-summary__cards .metric-card__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.58rem;
}

.table-shell[data-dataset=mra] .dataset-top-summary__cards .metric-card__icon :is(svg, img) {
    width: 0.92rem;
    height: 0.92rem;
}

.table-shell[data-dataset=mra] .dataset-top-summary__cards .metric-card__label {
    font-size: 0.76rem;
    line-height: 1.04;
}

.table-shell[data-dataset=mra] .dataset-top-summary__cards .metric-card__value {
    font-size: 1.12rem;
}

.table-shell[data-dataset=mra] .dataset-top-summary__cards .metric-card__info {
    width: 0.98rem;
    height: 0.98rem;
    font-size: 0.62rem;
}

.table-shell[data-dataset=mra] .dataset-footer-summary__tags {
    gap: 0.35rem;
    margin-top: 0.18rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}

.table-shell[data-dataset=mra] .dataset-footer-summary__tags .muted-copy {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.2;
}

@media (max-width: 900px) {
    .table-shell[data-dataset=mra] > .table-head:first-child .table-head__copy {
        display: grid;
        gap: 0.14rem;
    }

    .table-shell[data-dataset=mra] .mra-workspace-launch__copy,
    .table-shell[data-dataset=mra] .dataset-top-summary > .table-head > div:first-child {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.12rem;
    }

    .table-shell[data-dataset=mra] .mra-workspace-launch__copy h3,
    .table-shell[data-dataset=mra] .dataset-top-summary > .table-head h3 {
        white-space: normal;
    }

    .table-shell[data-dataset=mra] .mra-workspace-launch__actions,
    .table-shell[data-dataset=mra] .mra-workspace-launch__actions .toolbar-button {
        width: 100%;
    }
}

/* Dense dashboard flash-card type scale. */
.dashboard-flash-group__head h3 {
    font-size: clamp(0.82rem, 0.79rem + 0.08vw, 0.92rem) !important;
    font-weight: 600 !important;
}

.dashboard-flash-group__head .status-pill {
    font-size: 0.56rem !important;
    font-weight: 650 !important;
}

.dashboard-flash-group .dashboard-mini-card__label {
    font-size: clamp(0.54rem, 0.52rem + 0.06vw, 0.62rem) !important;
    font-weight: 650 !important;
    letter-spacing: 0.065em !important;
}

.dashboard-flash-group .dashboard-mini-card__value {
    font-size: clamp(1rem, 0.94rem + 0.18vw, 1.16rem) !important;
    font-weight: 700 !important;
}

/* Time-series card actions and focused maximized view. */
.dashboard-snapshot-time-series__actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.dashboard-snapshot-time-series__actions .icon-button,
.dashboard-snapshot-time-series__actions .toolbar-button {
    min-width: 1.85rem;
    min-height: 1.85rem;
    border-radius: 0.58rem;
}

.dashboard-snapshot-time-series__actions .icon-button svg,
.dashboard-snapshot-time-series__actions .toolbar-button svg {
    width: 0.88rem;
    height: 0.88rem;
}

.dashboard-snapshot-time-series__csv {
    gap: 0.28rem !important;
    padding-inline: 0.48rem !important;
    font-size: 0.64rem !important;
}

.dashboard-snapshot-popup-window .popup-window__dialog {
    width: min(96vw, 96rem) !important;
    height: min(92vh, 58rem);
    max-height: 92vh;
}

.dashboard-snapshot-popup-window .popup-window__body {
    padding: clamp(0.65rem, 1.2vw, 1rem);
}

.dashboard-snapshot-popup .dashboard-flash-group--timeseries {
    min-height: calc(min(92vh, 58rem) - 6rem);
    margin: 0;
}

.dashboard-snapshot-popup .dashboard-snapshot-time-series__canvas {
    height: clamp(18rem, 58vh, 34rem);
}

.dashboard-snapshot-popup .dashboard-snapshot-time-series__canvas svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 40rem) {
    .dashboard-snapshot-time-series__head-actions {
        display: grid;
        grid-template-columns: minmax(6.4rem, 1fr) auto auto;
        align-items: end;
        gap: 0.25rem;
    }

    .dashboard-snapshot-time-series__range {
        min-width: 0;
    }

    .dashboard-snapshot-time-series__actions {
        margin-inline-start: 0;
    }

    .dashboard-snapshot-time-series__head-actions > .status-pill {
        align-self: center;
        white-space: nowrap;
    }

    .dashboard-snapshot-popup-window .popup-window__dialog {
        width: calc(100vw - 0.6rem) !important;
        height: calc(100dvh - 0.6rem);
        max-height: calc(100dvh - 0.6rem);
    }

    .dashboard-snapshot-popup .dashboard-flash-group--timeseries {
        min-height: calc(100dvh - 7rem);
    }
}

/* Compact, lighter dashboard flash-card headers. */
:is(.dashboard-flash-group__head, .chart-card__head) :is(h2, h3) {
    font-size: clamp(0.88rem, 0.84rem + 0.14vw, 1rem) !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.012em !important;
}

:is(.dashboard-flash-group__head, .chart-card__head) .eyebrow {
    font-size: 0.58rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: 0.12em !important;
}

:is(.dashboard-flash-group__head, .chart-card__head) {
    gap: 0.3rem 0.45rem !important;
    padding-bottom: 0.2rem !important;
}

.dashboard-flash-group--timeseries .empty-state {
    padding: 1rem 0.75rem;
    font-size: 0.86rem;
}

/* Donut geometry guard
   Grid rows may stretch an auto-height ring; lock both axes to the same
   responsive size so every donut remains circular and centered. */
.donut-chart--ring {
    align-self: center !important;
    justify-self: center !important;
    align-content: center !important;
    justify-content: center !important;
}

.donut-chart__ring {
    box-sizing: border-box;
    height: 10.75rem !important;
    min-height: 0 !important;
    max-height: 10.75rem !important;
    aspect-ratio: 1 / 1 !important;
    align-self: center !important;
    justify-self: center !important;
    margin: auto !important;
}

@media (max-width: 64rem) {
    .donut-chart__ring {
        height: 10.25rem !important;
        max-height: 10.25rem !important;
    }
}

@media (max-width: 40rem) {
    .donut-chart__ring {
        height: 9.5rem !important;
        max-height: 9.5rem !important;
    }
}

/* Dashboard snapshot time series
   A compact Jira-style line treatment replaces the oversized snapshot donuts. */
.dashboard-flash-stack {
    align-items: start;
}

.dashboard-flash-group--timeseries {
    align-content: start;
    min-height: 0;
    align-self: start;
}

.dashboard-flash-group__timeseries {
    display: grid;
    gap: 0.38rem;
    min-width: 0;
    padding-top: 0.12rem;
}

.dashboard-snapshot-time-series__legend {
    display: flex;
    align-items: center;
    gap: 0.34rem;
    min-width: 0;
    overflow-x: auto;
    padding: 0.08rem 0 0.18rem;
    scrollbar-width: thin;
}

.dashboard-snapshot-time-series__key,
.dashboard-snapshot-time-series__all {
    flex: 0 0 auto;
    min-height: 1.8rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--surface-strong) 92%, transparent);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
}

.dashboard-snapshot-time-series__key {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.24rem 0.48rem;
    cursor: pointer;
}

.dashboard-snapshot-time-series__key input {
    width: 0.78rem;
    height: 0.78rem;
    margin: 0;
    accent-color: var(--snapshot-series-color);
}

.dashboard-snapshot-time-series__key.is-active {
    border-color: color-mix(in srgb, var(--snapshot-series-color) 48%, var(--panel-border));
    color: var(--text);
    background: color-mix(in srgb, var(--snapshot-series-color) 10%, var(--surface-strong));
}

.dashboard-snapshot-time-series__key strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.dashboard-snapshot-time-series__swatch {
    width: 0.9rem;
    height: 0;
    border-top: 2px dotted var(--snapshot-series-color);
}

.dashboard-snapshot-time-series__all {
    padding: 0.24rem 0.55rem;
    cursor: pointer;
}

.dashboard-snapshot-time-series__all:hover,
.dashboard-snapshot-time-series__all:focus-visible {
    border-color: var(--brand);
    color: var(--text);
}

.dashboard-snapshot-time-series__plot {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 24%, var(--panel-border));
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--surface) 95%, var(--dashboard-group-accent, var(--brand)) 5%);
}

.dashboard-snapshot-time-series__canvas {
    width: 100%;
    min-width: 32rem;
    height: clamp(8.8rem, 10vw, 10.5rem);
}

.dashboard-snapshot-time-series__canvas svg {
    display: block;
    width: 100%;
    height: 100%;
}

.dashboard-snapshot-time-series__line {
    stroke-width: 2.35;
    stroke-dasharray: 3 6;
    filter: drop-shadow(0 2px 3px color-mix(in srgb, currentColor 22%, transparent));
}

.dashboard-snapshot-time-series__line[data-snapshot-overlap-count]:not([data-snapshot-overlap-count="1"]) {
    paint-order: stroke;
    filter: drop-shadow(0 1px 2px color-mix(in srgb, currentColor 34%, transparent));
}

.dashboard-snapshot-time-series__point {
    cursor: pointer;
    stroke: var(--surface);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

.dashboard-snapshot-time-series__point:hover,
.dashboard-snapshot-time-series__point:focus {
    r: 5px;
    outline: none;
    filter: brightness(1.14);
}

.dashboard-snapshot-time-series__method {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.62rem;
    line-height: 1.25;
}

@media (max-width: 40rem) {
    .dashboard-snapshot-time-series__canvas {
        min-width: 28rem;
        height: 8.8rem;
    }

    .dashboard-snapshot-time-series__method {
        font-size: 0.6rem;
    }
}

/* SSH command workspace tabs */
.device-command-tabs {
    display: grid;
    min-width: 0;
    gap: 0;
    margin-top: 0.65rem;
    border: 1px solid #d0d7de;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(31, 35, 40, 0.07);
}

.device-command-tabs__list {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    min-width: 0;
    gap: 0.25rem;
    padding: 0.55rem 0.65rem 0;
    overflow-x: auto;
    scrollbar-width: thin;
    border-bottom: 1px solid #d0d7de;
    background: #f6f8fa;
}

.device-command-tabs__tab {
    appearance: none;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.45rem;
    min-height: 42px;
    margin: 0;
    padding: 0.62rem 0.75rem;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: 9px 9px 0 0;
    background: transparent;
    color: #57606a;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.device-command-tabs__tab:hover {
    color: #1f2328;
    background: rgba(255, 255, 255, 0.72);
}

.device-command-tabs__tab:focus-visible {
    outline: 2px solid #0969da;
    outline-offset: -2px;
}

.device-command-tabs__tab.is-active {
    color: #1f2328;
    border-color: #d0d7de;
    border-bottom-color: #fd8c73;
    background: #ffffff;
}

.device-command-tabs__icon {
    display: inline-grid;
    place-items: center;
    width: 1rem;
    height: 1rem;
    color: #0969da;
}

.device-command-tabs__icon svg {
    width: 100%;
    height: 100%;
}

.device-command-tabs__badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.28rem;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    background: #ddf4ff;
    color: #0550ae;
    font-size: 0.68rem;
    font-weight: 800;
}

.device-command-tabs__panels {
    min-width: 0;
    margin-top: 0.85rem;
    border: 1px solid #d0d7de;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 10px 28px rgba(31, 35, 40, 0.08);
}

.device-command-tab-panel {
    min-width: 0;
    padding: 0.9rem;
    background: #ffffff;
}

.device-command-tab-panel[hidden] {
    display: none !important;
}

.device-command-tab-panel > :first-child {
    margin-top: 0;
}

.device-command-tab-panel > :last-child {
    margin-bottom: 0;
}

html[data-theme="dark"] .device-command-tabs {
    border-color: #30363d;
    background: #0d1117;
    box-shadow: 0 12px 32px rgba(1, 4, 9, 0.34);
}

html[data-theme="dark"] .device-command-tabs__list {
    border-bottom-color: #30363d;
    background: #010409;
}

html[data-theme="dark"] .device-command-tabs__panels {
    border-color: #30363d;
    background: #0d1117;
    box-shadow: 0 12px 32px rgba(1, 4, 9, 0.34);
}

html[data-theme="dark"] .device-command-tabs__tab {
    color: #8c959f;
}

html[data-theme="dark"] .device-command-tabs__tab:hover {
    color: #f0f6fc;
    background: #161b22;
}

html[data-theme="dark"] .device-command-tabs__tab:focus-visible {
    outline-color: #58a6ff;
}

html[data-theme="dark"] .device-command-tabs__tab.is-active {
    color: #f0f6fc;
    border-color: #30363d;
    border-bottom-color: #f78166;
    background: #0d1117;
}

html[data-theme="dark"] .device-command-tabs__icon {
    color: #58a6ff;
}

html[data-theme="dark"] .device-command-tabs__badge {
    background: rgba(56, 139, 253, 0.16);
    color: #79c0ff;
}

html[data-theme="dark"] .device-command-tab-panel {
    background: #0d1117;
}

@media (max-width: 720px) {
    .device-command-tabs {
        border-radius: 12px;
    }

    .device-command-tabs__panels {
        margin-top: 0.65rem;
        border-radius: 12px;
    }

    .device-command-tabs__list {
        padding-inline: 0.4rem;
    }

    .device-command-tabs__tab {
        min-height: 39px;
        padding: 0.52rem 0.6rem;
        font-size: 0.76rem;
    }

    .device-command-tab-panel {
        padding: 0.65rem;
    }
}

/* Theme-invariant semantic palette for every shared flash-card icon. */
.metric-card--ocean .metric-card__icon { background: linear-gradient(135deg, #2f81ff, #12b5ff) !important; }
.metric-card--sky .metric-card__icon { background: linear-gradient(135deg, #38bdf8, #2563eb) !important; }
.metric-card--mint .metric-card__icon { background: linear-gradient(135deg, #15c7a8, #22c55e) !important; }
.metric-card--sun .metric-card__icon,
.metric-card--amber .metric-card__icon { background: linear-gradient(135deg, #f59e0b, #f97316) !important; }
.metric-card--violet .metric-card__icon { background: linear-gradient(135deg, #8f6bff, #6366f1) !important; }
.metric-card--rose .metric-card__icon { background: linear-gradient(135deg, #ff6b8c, #ef476f) !important; }
.metric-card--slate .metric-card__icon { background: linear-gradient(135deg, #64748b, #334155) !important; }

.dashboard-mini-card__icon {
    background: linear-gradient(135deg, var(--dashboard-card-accent), color-mix(in srgb, var(--dashboard-card-accent) 58%, #ffffff 42%)) !important;
}

.jira-summary-flash__icon {
    background: linear-gradient(135deg, var(--jira-flash-accent), color-mix(in srgb, var(--jira-flash-accent) 58%, #ffffff 42%)) !important;
}

.jira-workflow__tab > svg {
    background: linear-gradient(135deg, var(--jira-tab-accent), color-mix(in srgb, var(--jira-tab-accent) 58%, #ffffff 42%)) !important;
}

.metric-card__icon,
.dashboard-mini-card__icon,
.jira-summary-flash__icon,
.selection-flash__emblem-icon,
.selection-stat__icon,
.jira-workflow__tab > svg,
html[data-theme="dark"] .metric-card__icon,
html[data-theme="dark"] .dashboard-mini-card__icon,
html[data-theme="dark"] .jira-summary-flash__icon,
html[data-theme="dark"] .selection-flash__emblem-icon,
html[data-theme="dark"] .selection-stat__icon,
html[data-theme="dark"] .jira-workflow__tab > svg {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.metric-card__icon svg,
.dashboard-mini-card__icon svg,
.jira-summary-flash__icon svg,
.selection-flash__emblem-icon svg,
.selection-stat__icon svg,
.jira-workflow__tab > svg {
    color: #ffffff !important;
    opacity: 1 !important;
    stroke: currentColor;
}

/* Final drawer guard: keep record controls reachable regardless of theme or
   later component overrides. Only the drawer body scrolls. */
html:has(.detail-drawer.open),
body:has(.detail-drawer.open) {
    overflow: hidden !important;
}

.detail-drawer.open {
    display: block !important;
    overflow: hidden !important;
}

.detail-drawer.open .detail-drawer__panel {
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.detail-drawer.open .detail-drawer__head {
    position: relative !important;
    top: auto !important;
    min-height: 5.25rem;
    padding: 0.9rem 8rem 0.9rem 1.25rem !important;
    overflow: visible !important;
}

.detail-drawer.open #detailDrawerCopy {
    position: absolute !important;
    z-index: 20 !important;
    top: 0.85rem !important;
    right: 4.15rem !important;
    display: grid !important;
    place-items: center;
    width: 2.75rem !important;
    height: 2.75rem !important;
    margin: 0 !important;
    border-color: color-mix(in srgb, #60a5fa 38%, var(--panel-border));
    color: #93c5fd;
    background: color-mix(in srgb, #2563eb 10%, var(--panel));
    pointer-events: auto !important;
}

.detail-drawer.open #detailDrawerCopy:hover,
.detail-drawer.open #detailDrawerCopy:focus-visible {
    border-color: #60a5fa;
    color: #dbeafe;
    background: color-mix(in srgb, #2563eb 20%, var(--panel));
}

.detail-drawer.open #detailDrawerClose {
    position: absolute !important;
    z-index: 20 !important;
    top: 0.85rem !important;
    right: 1rem !important;
    display: grid !important;
    place-items: center;
    width: 2.75rem !important;
    height: 2.75rem !important;
    margin: 0 !important;
    pointer-events: auto !important;
}

.detail-drawer.open .detail-drawer__content {
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 1rem 1.25rem 5rem !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.detail-drawer[data-detail-mode="jira-issue"].open .detail-drawer__panel {
    width: min(64rem, 100vw) !important;
}

body:has(.detail-drawer[data-detail-mode="jira-issue"].open) .ai-assistant-toggle,
body:has(.detail-drawer[data-detail-mode="jira-issue"].open) [data-ai-assistant-toggle] {
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 980px) {
    .detail-drawer[data-detail-mode="jira-issue"].open .detail-drawer__panel {
        width: min(42rem, 100vw) !important;
    }

    .detail-drawer[data-detail-mode="jira-issue"] .jira-drawer__layout {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 680px) {
    .detail-drawer.open .detail-drawer__head {
        padding-left: 0.85rem !important;
    }

    .detail-drawer.open .detail-drawer__content {
        padding-right: 0.85rem !important;
        padding-left: 0.85rem !important;
    }
}

/* Final footer cascade lock: the shell status bar is dark in every theme. */
.workspace > .workspace-footer,
html[data-theme="dark"] .workspace > .workspace-footer,
html[data-theme="light"] .workspace > .workspace-footer {
    grid-template-columns: repeat(4, minmax(14rem, 1fr));
    grid-auto-flow: column;
    gap: 0.45rem;
    min-height: 3.75rem;
    height: auto;
    padding: 0.38rem 0.55rem calc(0.38rem + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-top: 1px solid #21262d;
    background: #010409;
    box-shadow: 0 -10px 30px rgba(1, 4, 9, 0.3);
}

.workspace > .workspace-footer > .footer-pill {
    min-height: 2.95rem;
    padding: 0.38rem 0.62rem;
    border-color: #21262d;
    background: linear-gradient(180deg, #0d1117, #0a0e14);
}

/* Theme-aware world maps. Regional pin colors stay constant for recognition. */
:root {
    --map-canvas: #eaf2fb;
    --map-grid: rgba(37, 99, 235, 0.08);
    --map-panel: rgba(255, 255, 255, 0.97);
    --map-panel-soft: #f8fafc;
    --map-border: #d0d7de;
    --map-text: #1f2328;
    --map-muted: #57606a;
    --map-popup: rgba(255, 255, 255, 0.98);
    --map-shadow: rgba(31, 35, 40, 0.16);
}

html[data-theme="dark"] {
    --map-canvas: #0d1117;
    --map-grid: rgba(88, 166, 255, 0.08);
    --map-panel: rgba(13, 17, 23, 0.98);
    --map-panel-soft: #161b22;
    --map-border: #30363d;
    --map-text: #f0f6fc;
    --map-muted: #8b949e;
    --map-popup: rgba(13, 17, 23, 0.98);
    --map-shadow: rgba(1, 4, 9, 0.55);
    --map-control-filter: invert(1) brightness(1.7);
}

.world-map-leaflet__canvas-shell,
.world-map-leaflet__canvas .leaflet-container {
    border-color: var(--map-border);
    background: var(--map-canvas);
    box-shadow: 0 18px 42px var(--map-shadow);
}

.world-map-leaflet__canvas-shell::before {
    background:
        linear-gradient(to right, var(--map-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--map-grid) 1px, transparent 1px);
    mix-blend-mode: normal;
}

.world-map-leaflet__canvas .leaflet-tile-pane {
    filter: none;
    opacity: 1;
}

.world-map-leaflet__sidebar {
    border-color: var(--map-border);
    background: var(--map-panel);
    color: var(--map-text);
    box-shadow: 0 18px 36px var(--map-shadow);
}

.world-map-leaflet__sidebar :is(.eyebrow, .muted-copy) {
    color: var(--map-muted);
}

/* Permanent dark-header slogan: solid white in both workspace themes. */
html[data-theme] .topbar .workspace-tagline {
    color: #ffffff;
    opacity: 1;
    -webkit-text-fill-color: #ffffff;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    text-shadow: none;
}

.country-flag-icon {
    display: inline-block;
    width: 1.35rem;
    min-width: 1.35rem;
    height: 1rem;
    margin-right: 0.38rem;
    vertical-align: -0.12rem;
    object-fit: cover;
    border: 1px solid rgba(139, 148, 158, 0.45);
    border-radius: 0.16rem;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(1, 4, 9, 0.28);
}

.world-map-leaflet__sidebar :is(
    .world-map__glossary-head h4,
    .world-map-card__list-item .detail-item__label,
    .world-map-card__list-item .detail-item__value
) {
    color: var(--map-text);
}

.world-map-leaflet__sidebar .world-map-card__list-item {
    border-color: var(--map-border);
    background: var(--map-panel-soft);
    color: var(--map-text);
}

.world-map-leaflet__sidebar .world-map-card__list-item:hover,
.world-map-leaflet__sidebar .world-map-card__list-item.is-active {
    background: color-mix(in srgb, var(--brand) 12%, var(--map-panel-soft));
}

.world-map-leaflet__sidebar .status-pill.soft,
.world-map-card__legend-chip {
    border-color: var(--map-border);
    background: var(--map-panel-soft);
}

.world-map-leaflet__canvas :is(.leaflet-popup-content-wrapper, .leaflet-popup-tip) {
    border-color: var(--map-border);
    background: var(--map-popup);
    color: var(--map-text);
}

.world-map-leaflet__info-window,
.world-map-leaflet__info-window strong {
    color: var(--map-text);
}

.world-map-leaflet__info-window :is(p, span, div),
.world-map-leaflet__info-window-meta {
    color: var(--map-muted);
}

.world-map-leaflet__info-window-cell {
    border-color: var(--map-border);
    background: var(--map-panel-soft);
}

.world-map-leaflet__info-window-cell strong {
    color: var(--map-text);
}

.world-map-leaflet__canvas .leaflet-tooltip.world-map-leaflet__tooltip,
.world-map-leaflet__canvas .leaflet-control-attribution,
.world-map-leaflet__canvas .leaflet-bar a {
    border-color: var(--map-border);
    background: var(--map-panel);
    color: var(--map-text);
}

.world-map-leaflet__canvas .leaflet-bar a:hover {
    background: color-mix(in srgb, var(--brand) 12%, var(--map-panel));
}

.world-map-leaflet__canvas .leaflet-control-attribution a {
    color: var(--brand);
}

/* The AI launcher can be repositioned without turning a drag into an open action. */
.ai-fab-stack.is-dragging {
    user-select: none;
    cursor: grabbing;
    transition: none;
}

.ai-fab-stack.is-dragging .ai-fab--launcher {
    cursor: grabbing;
    touch-action: none;
}

.ai-fab--launcher {
    cursor: grab;
    touch-action: none;
}

/* Final visual pass: compact status cards, clear pagination progress, and a
   branded assistant launcher. */
.modern-pagination {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.28rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.modern-pagination__button {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--panel-border);
    border-radius: 0.55rem;
    color: var(--text-muted);
    background: var(--panel-strong);
    font: 700 0.72rem/1 var(--font-sans, Inter, system-ui, sans-serif);
}

.modern-pagination__button:hover:not(:disabled),
.modern-pagination__button.is-active {
    border-color: color-mix(in srgb, var(--brand) 58%, var(--panel-border));
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--panel-strong));
}

.modern-pagination__button:disabled {
    cursor: not-allowed;
    opacity: 0.42;
}

.modern-pagination__button svg,
.modern-pagination__icon {
    width: 0.92rem;
    height: 0.92rem;
}

.modern-pagination__pages {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    min-width: 0;
}

.modern-pagination__progress {
    display: inline-flex;
    align-items: baseline;
    gap: 0.28rem;
    min-width: 4.35rem;
    padding: 0.3rem 0.48rem;
    border: 1px solid color-mix(in srgb, var(--success) 36%, var(--panel-border));
    border-radius: 999px;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 9%, var(--panel-strong));
    white-space: nowrap;
}

.modern-pagination__progress strong {
    font-size: 0.72rem;
    line-height: 1;
}

.modern-pagination__progress small {
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ai-fab--launcher {
    border: 2px solid #58d6b0;
    background: linear-gradient(145deg, #2563eb 0%, #1477c9 48%, #0f9f9a 100%);
    color: #ffffff;
    box-shadow: 0 0 0 0.28rem rgba(88, 214, 176, 0.14), 0 1rem 2rem rgba(4, 27, 58, 0.35);
}

.ai-fab--launcher:hover,
.ai-fab--launcher.is-active {
    background: linear-gradient(145deg, #3475f0 0%, #1992d2 48%, #15b59d 100%);
    box-shadow: 0 0 0 0.36rem rgba(88, 214, 176, 0.2), 0 1.25rem 2.4rem rgba(4, 27, 58, 0.42);
}

.ai-fab--launcher .ai-fab__icon,
.ai-fab--launcher .ai-fab__label {
    color: #ffffff;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-chat-panel__head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    padding: 0.48rem 0.72rem !important;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-header-tools {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.55rem !important;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    grid-template-columns: minmax(7.2rem, 1.25fr) repeat(5, minmax(5.6rem, 1fr)) !important;
    gap: 0.28rem !important;
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics > span {
    --agentic-metric-tone: #60a5fa;
    position: relative;
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.38rem;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--agentic-metric-tone) 30%, var(--panel-border));
    background: linear-gradient(100deg, color-mix(in srgb, var(--agentic-metric-tone) 9%, var(--panel-strong)), var(--panel-strong));
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--agentic-metric-tone) 78%, transparent);
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric__icon {
    width: 1.62rem;
    height: 1.62rem;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--agentic-metric-tone) 48%, transparent);
    border-radius: 0.5rem;
    color: color-mix(in srgb, var(--agentic-metric-tone) 88%, white);
    background: color-mix(in srgb, var(--agentic-metric-tone) 15%, transparent);
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric__icon svg {
    width: 0.86rem !important;
    height: 0.86rem !important;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric__copy {
    display: grid;
    min-width: 0;
    gap: 0.04rem;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics em {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.52rem;
    font-style: normal;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--model { --agentic-metric-tone: #8b5cf6; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--elapsed { --agentic-metric-tone: #38bdf8; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--chat { --agentic-metric-tone: #60a5fa; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--voice { --agentic-metric-tone: #c084fc; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--session { --agentic-metric-tone: #fbbf24; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--mode { --agentic-metric-tone: #34d399; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--mode.is-voice { --agentic-metric-tone: #a78bfa; }

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics > span {
    min-width: 0;
    min-height: 2.2rem;
    padding: 0.28rem 0.42rem;
    border-radius: 0.58rem;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric__copy {
    min-width: 0;
    line-height: 1.05;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics small {
    font-size: 0.58rem;
    line-height: 1.05;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics strong {
    max-width: 100%;
    font-size: 0.73rem;
    line-height: 1.12;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-header-controls,
html .app-shell[data-view-kind="agentic_network"] .agentic-operation-toolbar,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.42rem;
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
}

html .app-shell[data-view-kind="agentic_network"] .agentic-header-controls {
    flex: 0 0 auto;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-operation-toolbar,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar > label,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar__wake,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar__status {
    min-height: 2.2rem;
    padding: 0.3rem 0.48rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.58rem;
    color: var(--text-muted);
    background: var(--panel-strong);
    font-size: 0.68rem;
    font-weight: 750;
    white-space: nowrap;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-operation-toolbar select,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar select {
    max-width: 9rem;
    min-width: 0;
    border: 0;
    color: var(--text);
    background: transparent;
    font: 750 0.74rem/1.1 var(--font-sans, Inter, system-ui, sans-serif);
}

html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar > button {
    width: 2.2rem;
    min-width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--panel-border);
    border-radius: 0.58rem;
    color: var(--brand);
    background: var(--panel-strong);
}

/* Keep the automation summary compact, distinct, and anchored to the frame's
   upper-right on wide frames. */
html .automation-center__summary-frame .automation-center__summary-chip {
    min-height: 2.2rem;
    padding: 0.22rem 0.36rem 0.22rem 0.48rem;
    border-radius: 0.62rem;
}

html .automation-center__summary-frame .automation-center__summary-chip > span {
    width: 1.42rem;
    height: 1.42rem;
}

html .automation-center__summary-frame .automation-center__summary-chip small {
    font-size: 0.64rem;
}

html .automation-center__summary-frame .automation-center__summary-chip strong {
    min-width: 2rem;
    padding: 0.2rem 0.38rem;
    font-size: 0.68rem;
}

@media (min-width: 72rem) {
    html .automation-center__summary-frame {
        position: relative;
        min-height: 3.35rem;
    }

    html .automation-center__summary-frame .automation-center__summary-rail {
        position: absolute;
        top: 0.55rem;
        right: 0.55rem;
        width: auto;
        max-width: calc(100% - 0.9rem);
        grid-template-columns: repeat(5, minmax(7rem, max-content));
        justify-content: end;
        overflow-x: auto;
    }
}

/* Search, row count, and command actions remain one horizontal toolbar. If a
   frame is too narrow, the row scrolls instead of wrapping into two levels. */
html .automation-center__selection-card--resizable .automation-center__table-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: max-content;
    overflow-x: auto;
}

html .automation-center__selection-card--resizable .automation-center__table-toolbar > .toolbar-search,
html .automation-center__selection-card--resizable .automation-center__table-toolbar > .search-field {
    flex: 1 1 18rem;
    min-width: 14rem;
    grid-column: auto !important;
}

html .automation-center__selection-card--resizable .automation-center__table-toolbar > label,
html .automation-center__selection-card--resizable .automation-center__table-toolbar-actions,
html .automation-center__selection-card--resizable .automation-center__table-toolbar > button {
    flex: 0 0 auto;
}

html .automation-center__selection-card--resizable .automation-center__table-toolbar--commands .automation-center__table-toolbar-actions {
    flex-wrap: nowrap !important;
    min-width: max-content;
}

/* The command catalog is a second-stage workspace. Keep it out of the layout
   until a target is selected, and let the device inventory consume the freed
   width and available viewport height automatically. */
.automation-center__selection-card--commands[hidden] {
    display: none !important;
}

.automation-center__execution-grid.is-device-only {
    grid-template-columns: minmax(0, 1fr);
}

.automation-center__execution-grid.is-device-only > [data-automation-resizable-frame="devices"] {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-height: clamp(28rem, calc(100dvh - 22rem), 52rem);
    resize: vertical;
}

.automation-center__execution-grid.is-device-only > [data-automation-resizable-frame="devices"] .automation-center__table-wrap {
    min-height: clamp(16rem, calc(100dvh - 38rem), 36rem);
    max-height: clamp(20rem, calc(100dvh - 32rem), 44rem);
}

html .ai-fab--launcher {
    border: 2px solid #58d6b0;
    background: linear-gradient(145deg, #2563eb 0%, #1477c9 48%, #0f9f9a 100%);
    color: #ffffff;
    box-shadow: 0 0 0 0.28rem rgba(88, 214, 176, 0.14), 0 1rem 2rem rgba(4, 27, 58, 0.35);
}

html .ai-fab--launcher:hover,
html .ai-fab--launcher.is-active {
    background: linear-gradient(145deg, #3475f0 0%, #1992d2 48%, #15b59d 100%);
    box-shadow: 0 0 0 0.36rem rgba(88, 214, 176, 0.2), 0 1.25rem 2.4rem rgba(4, 27, 58, 0.42);
}

html .ai-fab--launcher .ai-fab__icon,
html .ai-fab--launcher .ai-fab__label {
    color: #ffffff;
}

@media (max-width: 68rem) {
    html .app-shell[data-view-kind="agentic_network"] .agentic-header-tools {
        flex-wrap: wrap;
    }

    html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics {
        flex: 1 1 100%;
    }
}

@media (max-width: 82rem) {
    html .app-shell[data-view-kind="agentic_network"] .agentic-header-tools {
        flex-wrap: wrap;
    }

    html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics {
        flex: 1 1 100%;
    }
}

@media (max-width: 48rem) {
    html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics {
        grid-template-columns: repeat(6, minmax(7.2rem, 1fr)) !important;
        overflow-x: auto;
        padding-bottom: 0.18rem;
    }
}


/* Keep dashboard methodology and accounting details in the frame header. */
html[data-theme] body #appContent[data-view-kind="dashboard"] :is(.dashboard-flash-group--value, .dashboard-flash-group--timeseries) {
    overflow: visible;
}

.dashboard-frame-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.dashboard-frame-info {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0.1rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--text-soft);
    cursor: help;
}

.dashboard-frame-info svg {
    width: 0.95rem;
    height: 0.95rem;
}

.dashboard-frame-info::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 50;
    width: min(34rem, calc(100vw - 3rem));
    padding: 0.65rem 0.78rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.65rem;
    background: var(--panel-strong);
    color: var(--text);
    box-shadow: 0 14px 30px rgba(10, 18, 40, 0.2);
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease, visibility 150ms ease;
}

.dashboard-frame-info:is(:hover, :focus-visible)::after {
    opacity: 1;
    visibility: visible;
}

html[data-theme] body #appContent[data-view-kind="dashboard"] .dashboard-value-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    min-width: 0;
}

html[data-theme] body #appContent[data-view-kind="dashboard"] .dashboard-value-range {
    min-width: 0;
}

@media (max-width: 56rem) {
    html[data-theme] body #appContent[data-view-kind="dashboard"] .dashboard-value-head-actions {
        width: 100%;
        justify-content: space-between;
    }
}

/* Brief application feedback stays visible above the workspace, not in its flow. */
html[data-theme] body .notification-strip--flash {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 4.8rem);
    right: max(1rem, env(safe-area-inset-right, 0px));
    z-index: 10020;
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: min(27rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    margin: 0;
    padding: 0.75rem 0.8rem;
    border-radius: 0.85rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.26);
    line-height: 1.35;
}

html[data-theme] body .notification-strip--flash .notification-strip__icon {
    display: inline-grid;
    flex: 0 0 1.4rem;
    place-items: center;
    width: 1.4rem;
    height: 1.4rem;
    color: var(--brand);
}

html[data-theme] body .notification-strip--flash:is(.warning, .danger) .notification-strip__icon {
    color: var(--warning);
}

html[data-theme] body .notification-strip--flash.danger .notification-strip__icon {
    color: var(--danger);
}

html[data-theme] body .notification-strip--flash.success .notification-strip__icon {
    color: var(--success);
}

html[data-theme] body .notification-strip--flash .notification-strip__icon svg,
html[data-theme] body .notification-strip--flash .notification-strip__dismiss svg {
    width: 1.05rem;
    height: 1.05rem;
}

html[data-theme] body .notification-strip--flash .notification-strip__copy {
    display: grid;
    flex: 1 1 auto;
    gap: 0.08rem;
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.78rem;
}

html[data-theme] body .notification-strip--flash .notification-strip__copy strong {
    font-size: 0.8rem;
}

html[data-theme] body .notification-strip--flash .notification-strip__action {
    flex: 0 0 auto;
    align-self: center;
    padding: 0.35rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--panel-border));
    border-radius: 0.5rem;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 9%, var(--panel));
    font: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

html[data-theme] body .notification-strip--flash .notification-strip__action:hover,
html[data-theme] body .notification-strip--flash .notification-strip__action:focus-visible {
    background: color-mix(in srgb, var(--brand) 18%, var(--panel));
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

html[data-theme] body .notification-strip--flash .notification-strip__dismiss {
    display: inline-grid;
    flex: 0 0 1.6rem;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    border: 0;
    border-radius: 0.38rem;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
}

html[data-theme] body .notification-strip--flash .notification-strip__dismiss:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 8%, transparent);
}

@media (max-width: 48rem) {
    html[data-theme] body .notification-strip--flash {
        top: calc(env(safe-area-inset-top, 0px) + 3.7rem);
        right: 0.5rem;
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }
}

/* Profile and alert drawers: compact information density without losing labels. */
html[data-theme] body .user-profile-popup-window .popup-window__dialog {
    width: min(39rem, calc(100vw - 0.5rem));
}

html[data-theme] body .user-profile-popup-window .popup-window__head {
    padding: 0.7rem 0.9rem;
}

html[data-theme] body .user-profile-popup-window .popup-window__head h3 {
    font-size: 1.04rem;
    line-height: 1.2;
}

html[data-theme] body .user-profile-popup-window .popup-window__body {
    padding: 0.75rem 0.9rem 1rem;
}

html[data-theme] body .topbar-profile-popup {
    gap: 0.6rem;
}

html[data-theme] body .topbar-profile-popup__stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
    --flash-card-square: 0;
}

html[data-theme] body .topbar-profile-popup__stats .metric-card {
    min-height: 4.2rem;
    padding: 0.52rem 0.55rem;
    border-radius: 0.7rem;
    gap: 0.2rem;
}

html[data-theme] body .topbar-profile-popup__stats .metric-card__icon {
    width: 1.3rem;
    height: 1.3rem;
}

html[data-theme] body .topbar-profile-popup__stats .metric-card__icon svg {
    width: 0.8rem;
    height: 0.8rem;
}

html[data-theme] body .topbar-profile-popup__stats .metric-card__value {
    font-size: 0.88rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

html[data-theme] body .topbar-profile-popup__stats .metric-card__label {
    font-size: 0.64rem;
    line-height: 1.1;
    white-space: normal;
}

html[data-theme] body .topbar-profile-popup .topbar-popup-card {
    padding: 0.78rem 0.85rem;
    border-radius: 0.9rem;
    gap: 0.55rem;
}

html[data-theme] body .topbar-profile-popup .detail-grid {
    gap: 0.15rem 0.8rem;
}

html[data-theme] body .topbar-profile-popup .detail-grid > .detail-item {
    min-height: 3rem;
    padding: 0.42rem 0.1rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html[data-theme] body .topbar-profile-popup .detail-item__label,
html[data-theme] body .topbar-profile-popup .topbar-profile-usage-grid span {
    font-size: 0.68rem;
}

html[data-theme] body .topbar-profile-popup .detail-item__value {
    font-size: 0.83rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

html[data-theme] body .topbar-profile-popup .table-head h3 {
    font-size: 1rem;
    line-height: 1.2;
}

html[data-theme] body .topbar-profile-popup .muted-copy {
    font-size: 0.73rem;
    line-height: 1.35;
}

html[data-theme] body .topbar-profile-popup :is(.primary-button, .toolbar-button, .toolbar-select) {
    min-height: 2rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.76rem;
    line-height: 1.15;
}

html[data-theme] body .topbar-profile-popup .topbar-profile-usage-grid > div {
    padding: 0.5rem;
    border-radius: 0.58rem;
}

html[data-theme] body .topbar-profile-popup .topbar-profile-usage-grid strong {
    font-size: 0.8rem;
}

html[data-theme] body .topbar-alerts-popup-window .popup-window__dialog {
    width: min(47rem, calc(100vw - 0.5rem));
}

html[data-theme] body .topbar-case-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 0.7rem;
}

html[data-theme] body .topbar-case-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
    text-align: left;
}

html[data-theme] body .topbar-case-table th,
html[data-theme] body .topbar-case-table td {
    padding: 0.57rem 0.55rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

html[data-theme] body .topbar-case-table th {
    color: var(--text-muted);
    background: var(--panel-soft);
    font-size: 0.67rem;
    font-weight: 700;
    white-space: nowrap;
}

html[data-theme] body .topbar-case-table__row {
    cursor: pointer;
}

html[data-theme] body .topbar-case-table__row:hover,
html[data-theme] body .topbar-case-table__row:focus-visible {
    background: color-mix(in srgb, var(--brand) 11%, transparent);
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

html[data-theme] body .topbar-case-table__row--danger td:first-child {
    border-left: 3px solid var(--danger);
}

html[data-theme] body .topbar-case-table td small {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-muted);
    font-size: 0.65rem;
}

html[data-theme] body .topbar-case-table .status-pill {
    font-size: 0.64rem;
    white-space: nowrap;
}

html[data-theme] body .topbar-case-table__open svg {
    width: 0.95rem;
    height: 0.95rem;
}

@media (max-width: 40rem) {
    html[data-theme] body .topbar-profile-popup__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    html[data-theme] body .topbar-profile-popup .topbar-profile-usage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Agentic target picker: compact title, readable filter combos, visible scope counts. */
html[data-theme] body .agentic-device-picker-window .popup-window__head {
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.7rem;
    min-height: 3.45rem;
    padding: 0.48rem 0.85rem;
}

html[data-theme] body .agentic-device-picker-window .popup-window__head-main {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 0.7rem;
    row-gap: 0.15rem;
}

html[data-theme] body .agentic-device-picker-window .popup-window__head-main :is(.eyebrow, h3) {
    margin: 0;
    line-height: 1.2;
}

html[data-theme] body .agentic-device-picker-window .popup-window__head-main .eyebrow {
    font-size: 0.67rem;
    letter-spacing: 0.08em;
}

html[data-theme] body .agentic-device-picker-window .popup-window__head-main h3 {
    font-size: clamp(0.92rem, 1.2vw, 1.06rem);
    font-weight: 700;
}

html[data-theme] body .agentic-device-picker-window .popup-window__body {
    padding: 0.65rem 0.85rem 0.9rem;
}

.agentic-device-picker .agentic-target-tabs {
    padding: 0.2rem;
}

.agentic-device-picker .agentic-target-tabs button {
    min-height: 2.35rem;
    gap: 0.42rem;
    font-size: 0.78rem;
}

.agentic-target-tab__count {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.12rem 0.38rem;
    border: 1px solid color-mix(in srgb, #4ade80 48%, var(--panel-border));
    border-radius: 999px;
    color: #4ade80;
    background: color-mix(in srgb, #4ade80 13%, var(--surface));
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.agentic-target-tab__count svg {
    width: 0.78rem !important;
    height: 0.78rem !important;
}

.agentic-target-cascade {
    gap: 0.5rem;
    padding: 0.52rem;
}

.agentic-filter-menu > summary {
    gap: 0.45rem;
    min-height: 2.55rem;
    padding: 0.35rem 0.6rem;
}

.agentic-filter-menu__summary-icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--brand);
}

.agentic-filter-menu__summary-copy {
    display: grid;
    gap: 0.06rem;
    min-width: 0;
    flex: 1 1 auto;
    line-height: 1.1;
}

.agentic-filter-menu__summary-copy small,
.agentic-filter-menu__summary-copy strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentic-filter-menu__summary-copy small {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
}

.agentic-filter-menu__summary-copy strong {
    font-size: 0.875rem;
    font-weight: 700;
}

.agentic-filter-menu__panel {
    width: max(100%, 18rem);
    max-width: calc(100vw - 2rem);
    max-height: min(23rem, 62vh);
    gap: 0.4rem;
    padding: 0.55rem;
}

.agentic-filter-menu__head,
.agentic-filter-menu__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.agentic-filter-menu__head > span {
    display: grid;
    min-width: 0;
    gap: 0.05rem;
}

.agentic-filter-menu__head > span strong { font-size: 0.9rem; }
.agentic-filter-menu__head > span small { color: var(--text-muted); font-size: 0.75rem; }

.agentic-filter-menu__actions button {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    min-height: 2rem;
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.42rem;
    background: var(--panel);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
}

.agentic-filter-menu__actions button svg {
    width: 0.75rem !important;
    height: 0.75rem !important;
}

.agentic-filter-menu__actions button:disabled { opacity: 0.45; cursor: not-allowed; }

.agentic-filter-menu__search {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    min-height: 2.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.45rem;
    background: var(--surface);
}

.agentic-filter-menu__search svg { width: 1rem !important; height: 1rem !important; color: var(--text-muted); }
.agentic-filter-menu__search input { min-width: 0; width: 100%; min-height: 1.5rem; padding: 0; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; font-size: 0.875rem; text-transform: none; letter-spacing: normal; }
.agentic-filter-menu__search input::placeholder { color: var(--text-muted); opacity: 1; }

.agentic-filter-menu__options { display: grid; gap: 0.1rem; }
.agentic-filter-menu__option { grid-template-columns: 1rem 1.25rem minmax(0, 1fr); gap: 0.4rem; }
.agentic-filter-menu__option[hidden], .agentic-filter-menu__no-match[hidden] { display: none; }
.agentic-filter-menu__option > span:last-child { display: grid; min-width: 0; gap: 0.03rem; }
.agentic-filter-menu__option > span:last-child :is(strong, small) { overflow-wrap: anywhere; white-space: normal; }
.agentic-filter-menu__option > span:last-child strong { font-size: 0.875rem; }
.agentic-filter-menu__option > span:last-child small { color: var(--text-muted); font-size: 0.75rem; }

html[data-theme] body :is(#popupWindowClose, #detailDrawerClose, #aiAssistantClose) {
    color: #fff;
    border-color: #dc3545;
    background: #b42332;
    box-shadow: 0 0.25rem 0.9rem rgba(180, 35, 50, 0.28);
}

html[data-theme] body :is(#popupWindowClose, #detailDrawerClose, #aiAssistantClose):is(:hover, :focus-visible) {
    color: #fff;
    border-color: #f87171;
    background: #8f1726;
}

@media (max-width: 48rem) {
    html[data-theme] body .agentic-device-picker-window .popup-window__head-main {
        display: grid;
        gap: 0.1rem;
    }
    .agentic-filter-menu__panel { width: min(20rem, calc(100vw - 2rem)); }
}

/* GUI HEADER FINAL */
@media (min-width: 64.01rem) {
 .app-shell,.app-shell.sidebar-collapsed{display:grid!important;grid-template-columns:var(--sidebar-width) minmax(0,1fr)!important;grid-template-rows:var(--agentic-full-header-height) minmax(0,1fr)!important;grid-template-areas:"header header" "sidebar workspace"!important;height:100dvh;min-height:100dvh}
 .app-shell.sidebar-collapsed{grid-template-columns:5.3rem minmax(0,1fr)!important}
 .topbar{display:grid!important;grid-area:header!important;grid-template-columns:clamp(15rem,18vw,18rem) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr);position:relative!important;inset:auto!important;width:100%!important;height:var(--agentic-full-header-height)!important;min-height:var(--agentic-full-header-height)!important;margin:0!important;padding:.42rem .75rem!important;border-radius:0!important;overflow:hidden}
 .sidebar{grid-area:sidebar!important;top:auto!important;height:auto!important;min-height:0!important;margin:0!important;border-radius:0!important;overflow-y:auto}
 .workspace{grid-area:workspace!important;height:auto!important;min-height:0!important;padding:.75rem!important;overflow:auto}
 .topbar__right{display:flex!important;flex-flow:row nowrap!important;align-items:center;justify-content:flex-end;min-width:0;width:100%;height:100%;gap:.4rem;overflow-x:auto;overflow-y:hidden}
 .topbar-control-group,.topbar__utility-group{display:flex!important;flex-flow:row nowrap!important;align-items:center;width:auto!important;max-width:none!important;gap:.4rem}
 .topbar-control-group{flex:0 0 auto}.topbar-control-group--navigation{flex:1 1 22rem;min-width:17rem}.topbar-search{flex:1 1 18rem;min-width:12rem;max-width:26rem}
}

/* GUI HEADER FINAL */
@media (min-width: 64.01rem) {
 .app-shell,.app-shell.sidebar-collapsed{display:grid!important;grid-template-columns:var(--sidebar-width) minmax(0,1fr)!important;grid-template-rows:var(--agentic-full-header-height) minmax(0,1fr)!important;grid-template-areas:"header header" "sidebar workspace"!important;height:100dvh;min-height:100dvh}
 .app-shell.sidebar-collapsed{grid-template-columns:5.3rem minmax(0,1fr)!important}
 .topbar{display:grid!important;grid-area:header!important;grid-template-columns:clamp(15rem,18vw,18rem) minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr);position:relative!important;inset:auto!important;width:100%!important;height:var(--agentic-full-header-height)!important;min-height:var(--agentic-full-header-height)!important;margin:0!important;padding:.42rem .75rem!important;border-radius:0!important;overflow:hidden}
 .sidebar{grid-area:sidebar!important;top:auto!important;height:auto!important;min-height:0!important;margin:0!important;border-radius:0!important;overflow-y:auto}
 .workspace{grid-area:workspace!important;height:auto!important;min-height:0!important;padding:.75rem!important;overflow:auto}
 .topbar__right{display:flex!important;flex-flow:row nowrap!important;align-items:center;justify-content:flex-end;min-width:0;width:100%;height:100%;gap:.4rem;overflow-x:auto;overflow-y:hidden}
 .topbar-control-group,.topbar__utility-group{display:flex!important;flex-flow:row nowrap!important;align-items:center;width:auto!important;max-width:none!important;gap:.4rem}
 .topbar-control-group{flex:0 0 auto}.topbar-control-group--navigation{flex:1 1 22rem;min-width:17rem}.topbar-search{flex:1 1 18rem;min-width:12rem;max-width:26rem}
}

/* Authoritative desktop frame. This sits after all legacy header styles. */
@media (min-width: 64.01rem) {
    .app-shell,
    .app-shell.sidebar-collapsed {
        display: grid !important;
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
        grid-template-rows: var(--agentic-full-header-height) minmax(0, 1fr) !important;
        grid-template-areas: "header header" "sidebar workspace" !important;
        height: 100dvh;
        min-height: 100dvh;
    }

    .app-shell.sidebar-collapsed { grid-template-columns: 5.3rem minmax(0, 1fr) !important; }

    .topbar {
        display: grid !important;
        grid-area: header !important;
        grid-template-columns: clamp(15rem, 18vw, 18rem) minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr);
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: var(--agentic-full-header-height) !important;
        min-height: var(--agentic-full-header-height) !important;
        margin: 0 !important;
        padding: 0.42rem 0.75rem !important;
        border-radius: 0 !important;
        overflow: hidden;
    }

    .sidebar {
        grid-area: sidebar !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto;
    }

    .workspace {
        grid-area: workspace !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0.75rem !important;
        overflow: auto;
    }

    .topbar__right {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        width: 100%;
        height: 100%;
        gap: 0.4rem;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .topbar-control-group,
    .topbar__utility-group {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center;
        width: auto !important;
        max-width: none !important;
        gap: 0.4rem;
    }

    .topbar-control-group { flex: 0 0 auto; }
    .topbar-control-group--navigation { flex: 1 1 22rem; min-width: 17rem; }
    .topbar-search { flex: 1 1 18rem; min-width: 12rem; max-width: 26rem; }
}

/* Final desktop shell override.  Keep this after the legacy header rules:
   the header markup is now a direct child of .app-shell. */
@media (min-width: 64.01rem) {
    .app-shell,
    .app-shell.sidebar-collapsed {
        display: grid !important;
        grid-template-columns: var(--sidebar-width) minmax(0, 1fr) !important;
        grid-template-rows: var(--agentic-full-header-height) minmax(0, 1fr) !important;
        grid-template-areas: "header header" "sidebar workspace" !important;
        height: 100dvh;
        min-height: 100dvh;
    }

    .app-shell.sidebar-collapsed {
        grid-template-columns: 5.3rem minmax(0, 1fr) !important;
    }

    .topbar {
        display: grid !important;
        grid-area: header !important;
        grid-template-columns: clamp(15rem, 18vw, 18rem) minmax(0, 1fr) !important;
        grid-template-rows: minmax(0, 1fr);
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: var(--agentic-full-header-height) !important;
        min-height: var(--agentic-full-header-height) !important;
        margin: 0 !important;
        padding: 0.42rem 0.75rem !important;
        border-radius: 0 !important;
        overflow: hidden;
    }

    .sidebar {
        grid-area: sidebar !important;
        top: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow-y: auto;
    }

    .workspace {
        grid-area: workspace !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0.75rem !important;
        overflow: auto;
    }

    .topbar__right {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
        width: 100%;
        height: 100%;
        gap: 0.4rem;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .topbar-control-group,
    .topbar__utility-group {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center;
        width: auto !important;
        max-width: none !important;
        gap: 0.4rem;
    }

    .topbar-control-group { flex: 0 0 auto; }
    .topbar-control-group--navigation { flex: 1 1 22rem; min-width: 17rem; }
    .topbar-search { flex: 1 1 18rem; min-width: 12rem; max-width: 26rem; }
}

/* Unified Customer 360 workspace: one sidebar destination, two focused views. */
.customer360-workspace {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.customer360-workspace__hero {
    position: relative;
    display: grid;
    grid-template-columns: 3rem minmax(14rem, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--panel-border));
    border-radius: 1rem;
    background:
        radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 34%),
        color-mix(in srgb, var(--panel-strong) 96%, var(--brand) 4%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.customer360-workspace__hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.28rem;
    background: linear-gradient(180deg, var(--brand), var(--accent));
}

.customer360-workspace__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--panel-border));
    border-radius: 0.85rem;
    color: color-mix(in srgb, var(--brand) 72%, #fff 28%);
    background: color-mix(in srgb, var(--brand) 16%, var(--panel));
}

.customer360-workspace__icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.customer360-workspace__copy {
    min-width: 0;
}

.customer360-workspace__copy :is(p, h2) {
    margin: 0;
}

.customer360-workspace__copy h2 {
    margin-top: 0.08rem;
    font-size: clamp(1.2rem, 1.05rem + 0.35vw, 1.55rem);
}

.customer360-workspace__copy .muted-copy {
    margin-top: 0.2rem;
}

.customer360-workspace__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(10.5rem, 1fr));
    gap: 0.42rem;
    min-width: 22rem;
    padding: 0.3rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.customer360-workspace__tab {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    align-items: center;
    gap: 0.48rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid transparent;
    border-radius: 0.65rem;
    color: var(--text-soft);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.customer360-workspace__tab > span:first-child {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.52rem;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--panel-border) 58%, transparent);
}

.customer360-workspace__tab svg {
    width: 0.95rem;
    height: 0.95rem;
}

.customer360-workspace__tab strong,
.customer360-workspace__tab small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer360-workspace__tab strong {
    color: inherit;
    font-size: 0.8rem;
}

.customer360-workspace__tab small {
    margin-top: 0.06rem;
    color: var(--text-muted);
    font-size: 0.66rem;
}

.customer360-workspace__tab:is(:hover, :focus-visible) {
    outline: none;
    border-color: color-mix(in srgb, var(--brand) 30%, var(--panel-border));
    color: var(--text);
    background: color-mix(in srgb, var(--brand) 8%, var(--panel-strong));
}

.customer360-workspace__tab.is-active {
    border-color: color-mix(in srgb, var(--brand) 52%, var(--panel-border));
    color: var(--text);
    background: color-mix(in srgb, var(--brand) 14%, var(--panel-strong));
    box-shadow: 0 0.35rem 0.9rem color-mix(in srgb, var(--brand) 12%, transparent);
}

.customer360-workspace__tab.is-active > span:first-child {
    color: #fff;
    background: var(--brand);
}

.customer360-workspace__content {
    min-width: 0;
    margin: 0;
}

@media (max-width: 68rem) {
    .customer360-workspace__hero {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .customer360-workspace__tabs {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 36rem) {
    .customer360-workspace__hero {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        padding: 0.72rem;
    }

    .customer360-workspace__icon {
        width: 2.5rem;
        height: 2.5rem;
    }

    .customer360-workspace__tabs {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Change Record flow spacing and sticky-action clearance. Keep the final
   controls fully inside the scrolling viewport and above the workspace footer. */
html .change-record-shell {
    gap: 0.82rem;
    padding-bottom: 1rem;
}

html .change-record-step-guide {
    gap: 0.62rem;
    padding: 0.82rem 0.92rem;
}

html .change-record-step-guide__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1rem;
    align-items: start;
}

html .change-record-step-guide__head > div:first-child {
    display: grid;
    align-content: start;
    gap: 0.12rem;
}

html .change-record-step-guide__head .muted-copy {
    max-width: 72ch;
    margin-top: 0.12rem;
    line-height: 1.42;
}

html .change-record-step-guide__chips {
    gap: 0.48rem;
}

html .change-record-step-guide__chip {
    min-height: 3.55rem;
    padding: 0.62rem 0.72rem;
}

html #changeRecordForm {
    gap: 0.82rem;
    padding-bottom: calc(1.75rem + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
}

html #changeRecordForm > .tshoot-savebar.change-record-savebar {
    bottom: max(0.72rem, env(safe-area-inset-bottom, 0px));
    min-height: 5.35rem;
    margin: 0.25rem 0 0.55rem;
    padding: 0.82rem 1rem calc(0.82rem + env(safe-area-inset-bottom, 0px));
    overflow: visible;
}

html #changeRecordForm > .change-record-savebar .toolbar-actions {
    gap: 0.72rem;
    padding-block: 0.08rem;
}

html #changeRecordForm > .change-record-savebar :is(
    .primary-button,
    .secondary-button,
    .toolbar-button,
    .change-record-button--create,
    .change-record-button--success
) {
    min-height: 2.8rem;
    padding-block: 0.72rem;
}

@media (max-width: 64rem) {
    html .change-record-step-guide__head {
        grid-template-columns: minmax(0, 1fr);
    }

    html .change-record-progress {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 48rem) {
    html #changeRecordForm > .tshoot-savebar.change-record-savebar {
        bottom: max(0.45rem, env(safe-area-inset-bottom, 0px));
        margin-bottom: 0.4rem;
        padding-inline: 0.72rem;
    }
}

/* Token Management: compact, readable credential rows and semantic actions. */
.admin-token-management .admin-token-table-wrap {
    max-height: min(68vh, 52rem);
    overflow: auto;
}

.admin-token-management .admin-token-table {
    width: 100%;
    min-width: 118rem;
    table-layout: fixed;
}

.admin-token-management .admin-token-col--scope { width: 9rem; }
.admin-token-management .admin-token-col--provider { width: 8rem; }
.admin-token-management .admin-token-col--label { width: 15rem; }
.admin-token-management .admin-token-col--endpoint { width: 23rem; }
.admin-token-management .admin-token-col--workspace { width: 7rem; }
.admin-token-management .admin-token-col--type { width: 9rem; }
.admin-token-management .admin-token-col--user { width: 9rem; }
.admin-token-management .admin-token-col--secret { width: 9rem; }
.admin-token-management .admin-token-col--expires { width: 7rem; }
.admin-token-management .admin-token-col--status { width: 7rem; }
.admin-token-management .admin-token-col--updated { width: 10rem; }
.admin-token-management .admin-token-col--actions { width: 12rem; }

.admin-token-management .admin-token-row,
.admin-token-management .admin-token-row > td {
    height: 4.1rem;
}

.admin-token-management .admin-token-row > td {
    vertical-align: middle;
}

.admin-token-management .admin-token-cell {
    min-width: 0;
    overflow: hidden;
}

.admin-token-management :is(.admin-token-scope-cell, .admin-token-label-cell) > :is(strong, small) {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-token-management :is(.admin-token-scope-cell, .admin-token-label-cell) > strong {
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.25;
}

.admin-token-management :is(.admin-token-scope-cell, .admin-token-label-cell) > small {
    margin-top: 0.22rem;
    color: var(--text-soft);
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Consolas, monospace);
    font-size: 0.67rem;
    line-height: 1.25;
}

.admin-token-management .admin-token-provider {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr);
    gap: 0.5rem;
    min-width: 0;
}

.admin-token-management .admin-token-provider > :is(.vendor-mark, svg) {
    width: 1.4rem !important;
    min-width: 1.4rem !important;
    max-width: 1.4rem !important;
    height: 1.4rem !important;
    min-height: 1.4rem !important;
    max-height: 1.4rem !important;
    overflow: hidden;
}

.admin-token-management .admin-token-provider .vendor-mark > svg {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

.admin-token-management .admin-token-provider strong,
.admin-token-management .admin-token-updated-cell,
.admin-token-management .admin-token-user-cell {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-token-management .admin-token-endpoint-cell code,
.admin-token-management .admin-token-secret-cell code {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: color-mix(in srgb, var(--brand) 78%, var(--text));
    font-size: 0.72rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-token-management .admin-token-type {
    display: inline-flex;
    max-width: 100%;
    padding: 0.28rem 0.5rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 24%, var(--panel-border));
    border-radius: 0.5rem;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--admin-accent) 7%, var(--panel));
    font-size: 0.67rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-token-management .admin-token-actions-cell {
    overflow: visible;
}

.admin-token-management .admin-token-actions-cell .table-row-actions {
    display: grid;
    grid-template-columns: repeat(4, 2.25rem);
    gap: 0.38rem;
    justify-content: start;
}

html[data-theme] .admin-token-management .admin-token-actions-cell .icon-button {
    --token-action: #94a3b8;
    width: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0.52rem;
    border-color: color-mix(in srgb, var(--token-action) 52%, var(--panel-border));
    color: var(--token-action);
    background: color-mix(in srgb, var(--token-action) 15%, var(--panel));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--token-action) 6%, transparent);
}

html[data-theme] .admin-token-management .admin-token-actions-cell .function-edit { --token-action: #38bdf8; }
html[data-theme] .admin-token-management .admin-token-actions-cell .function-enable { --token-action: #34d399; }
html[data-theme] .admin-token-management .admin-token-actions-cell .function-disable { --token-action: #fbbf24; }
html[data-theme] .admin-token-management .admin-token-actions-cell .function-stop { --token-action: #fb923c; }
html[data-theme] .admin-token-management .admin-token-actions-cell .function-delete { --token-action: #fb7185; }

html[data-theme] .admin-token-management .admin-token-actions-cell .icon-button:hover,
html[data-theme] .admin-token-management .admin-token-actions-cell .icon-button:focus-visible {
    border-color: var(--token-action);
    color: color-mix(in srgb, var(--token-action) 82%, white);
    background: color-mix(in srgb, var(--token-action) 27%, var(--panel));
    box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--token-action) 18%, transparent);
    transform: translateY(-1px);
}

.vendor-mark--confluence { --vendor-color: #7c83fd; }
.vendor-mark--mcp,
.vendor-mark--generic { --vendor-color: #38bdf8; }

@media (max-width: 70rem) {
    .admin-token-management .admin-token-table {
        min-width: 112rem;
    }
}

@media (max-width: 1100px) {
    .workspace > .workspace-footer,
    html[data-theme="dark"] .workspace > .workspace-footer,
    html[data-theme="light"] .workspace > .workspace-footer {
        grid-template-columns: repeat(4, minmax(15rem, 1fr));
    }
}

/* Authoritative Agentic chat geometry. Keep this after legacy workspace styles. */
.agentic-conversation {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    align-items: stretch !important;
    flex-direction: column !important;
}

.agentic-conversation > .agentic-message {
    display: grid !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    gap: 0.75rem !important;
    max-width: none !important;
    writing-mode: horizontal-tb !important;
}

.agentic-conversation > .agentic-message--assistant {
    width: min(88%, 72rem) !important;
    min-width: min(22rem, calc(100% - 0.5rem)) !important;
    grid-template-columns: 2.35rem minmax(0, 1fr) !important;
    grid-template-areas: "avatar body" !important;
    align-self: flex-start !important;
    margin: 0 0 1rem !important;
}

.agentic-conversation > .agentic-message--user {
    width: min(76%, 58rem) !important;
    min-width: min(18rem, calc(100% - 0.5rem)) !important;
    grid-template-columns: minmax(0, 1fr) 2.35rem !important;
    grid-template-areas: "body avatar" !important;
    align-self: flex-end !important;
    margin: 0 0 1rem auto !important;
}

.agentic-conversation .agentic-message__avatar {
    grid-area: avatar !important;
}

.agentic-conversation .agentic-message__body {
    width: 100% !important;
    min-width: 0 !important;
    grid-area: body !important;
}

.agentic-conversation :is(.agentic-message__meta, .agentic-message__content, .agentic-message__meta strong, .agentic-message__content p) {
    min-width: 0 !important;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    word-break: normal !important;
}

.agentic-conversation > .agentic-message--working { margin-top: -0.25rem !important; }
.agentic-working__avatar { animation: agentic-working-float 1.35s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(45, 164, 78, 0.34); }
.agentic-working__body { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-color: color-mix(in srgb, #2da44e 48%, var(--border)); background: linear-gradient(110deg, color-mix(in srgb, #2da44e 11%, var(--surface)), var(--surface)); }
.agentic-working__copy { min-width: 0; display: grid; gap: 0.22rem; }
.agentic-working__copy strong { color: var(--text); font-size: 0.86rem; }
.agentic-working__copy span { color: var(--muted); font-size: 0.76rem; }
.agentic-working__notice { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.18rem; color: var(--warning); font-size: 0.68rem; font-weight: 750; line-height: 1.35; }
.agentic-working__notice svg { width: 0.78rem !important; height: 0.78rem !important; flex: 0 0 0.78rem; }

/* The authoritative execution progress stays attached to the end of chat. */
.agentic-working__body {
    --agentic-inline-progress-color: #67e8f9;
    display: grid;
    grid-template-columns: 4.4rem minmax(0, 1fr) auto;
    align-items: center;
}

.agentic-inline-progress__ring {
    position: relative;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.05rem;
    border-radius: 50%;
    isolation: isolate;
    color: var(--text-strong);
    background: conic-gradient(
        from -90deg,
        var(--agentic-inline-progress-color) 0 var(--agentic-inline-progress),
        color-mix(in srgb, var(--panel-border) 80%, transparent) var(--agentic-inline-progress) 100%
    );
    box-shadow: 0 0 1rem color-mix(in srgb, var(--agentic-inline-progress-color) 18%, transparent);
    font-variant-numeric: tabular-nums;
}

.agentic-inline-progress__ring::before {
    content: "";
    position: absolute;
    inset: 0.28rem;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(145deg, color-mix(in srgb, var(--surface) 82%, #172554), color-mix(in srgb, var(--surface) 82%, #312e81));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 9%, transparent);
}

.agentic-inline-progress__ring > span,
.agentic-inline-progress__ring > span svg {
    width: 0.95rem !important;
    height: 0.95rem !important;
}

.agentic-inline-progress__ring > strong {
    color: var(--text-strong);
    font-size: 0.78rem;
    line-height: 1;
}

.agentic-inline-progress__ring.is-indeterminate {
    background: conic-gradient(from -90deg, transparent 0 12%, var(--agentic-inline-progress-color) 12% 32%, transparent 32% 100%);
    animation: agentic-inline-progress-spin 1.25s linear infinite;
}

.agentic-inline-progress__ring.is-indeterminate > span,
.agentic-inline-progress__ring.is-indeterminate > strong {
    animation: agentic-inline-progress-counter-spin 1.25s linear infinite;
}

.agentic-working__heading {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.agentic-working__heading > strong { font-size: 0.9rem; }

.agentic-working__title, .agentic-working__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.agentic-working__title > strong { font-size: 0.9rem; }
.agentic-working__actions { margin-inline-start: auto; justify-content: flex-end; }
.agentic-working__heading { align-items: flex-start; width: 100%; }
.agentic-working__actions .agentic-execution-stop { white-space: nowrap; }

.agentic-connection-options { border: 1px solid var(--border); border-radius: 0.8rem; padding: 1rem; margin-top: 1rem; background: var(--surface); }
.agentic-connection-options > header { display: flex; gap: 0.5rem; align-items: center; color: var(--accent, #4d60db); margin-bottom: 0.9rem; font-size: 0.88rem; }
.agentic-connection-options__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; }
.agentic-connection-options__grid > div { padding: 0.9rem; border: 1px solid var(--border); border-radius: 0.65rem; }
.agentic-connection-options__grid strong { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
.agentic-connection-options__grid p, .agentic-connection-options__note { color: var(--text-muted); font-size: 0.75rem; line-height: 1.6; }
.agentic-connection-options svg { width: 1rem; height: 1rem; flex-shrink: 0; vertical-align: middle; }
.agentic-connection-options__note { margin-bottom: 0; }
@media (max-width: 800px) { .agentic-connection-options__grid { grid-template-columns: 1fr; } }

.agentic-inline-progress__live,
.agentic-working__heading .agentic-working__progress {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
    padding: 0.12rem 0.42rem;
    border: 1px solid color-mix(in srgb, var(--agentic-inline-progress-color) 42%, var(--border));
    border-radius: 999px;
    color: color-mix(in srgb, var(--agentic-inline-progress-color) 82%, var(--text));
    background: color-mix(in srgb, var(--agentic-inline-progress-color) 9%, var(--surface));
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.03em;
}

.agentic-inline-progress__live { gap: 0.3rem; text-transform: uppercase; }
.agentic-inline-progress__live > i { width: 0.38rem; height: 0.38rem; border-radius: 50%; background: var(--agentic-inline-progress-color); box-shadow: 0 0 0.55rem var(--agentic-inline-progress-color); animation: agentic-inline-progress-pulse 1.2s ease-in-out infinite; }
.agentic-working__heading .agentic-working__progress { margin-inline-start: 0; font-variant-numeric: tabular-nums; }
.agentic-working__stage { color: color-mix(in srgb, var(--agentic-inline-progress-color) 72%, var(--text)) !important; font-weight: 800; text-transform: capitalize; }
.agentic-working__detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.agentic-inline-progress__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.8rem;
    margin-top: 0.08rem;
}

.agentic-working__copy .agentic-inline-progress__facts > span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
}

.agentic-inline-progress__facts svg { width: 0.72rem !important; height: 0.72rem !important; color: var(--agentic-inline-progress-color); }
.agentic-inline-progress__facts b { color: inherit; font: inherit; font-weight: 750; }

.agentic-inline-progress__bar {
    position: relative;
    width: 100%;
    height: 0.3rem;
    overflow: hidden;
    margin-top: 0.12rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-border) 68%, transparent);
}

.agentic-inline-progress__bar > i {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--agentic-inline-progress);
    min-width: 0.18rem;
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--agentic-inline-progress-color) 68%, #2563eb), var(--agentic-inline-progress-color));
    box-shadow: 0 0 0.7rem color-mix(in srgb, var(--agentic-inline-progress-color) 42%, transparent);
    transition: width 320ms ease;
}

.agentic-inline-progress__bar.is-indeterminate > i {
    width: 32%;
    min-width: 4rem;
    animation: agentic-inline-progress-slide 1.45s ease-in-out infinite;
}

@keyframes agentic-inline-progress-spin { to { transform: rotate(360deg); } }
@keyframes agentic-inline-progress-counter-spin { to { transform: rotate(-360deg); } }
@keyframes agentic-inline-progress-pulse { 50% { opacity: 0.45; transform: scale(0.72); } }
@keyframes agentic-inline-progress-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(330%); } }

@media (max-width: 720px) {
    .agentic-working__body { grid-template-columns: 3.6rem minmax(0, 1fr); }
    .agentic-inline-progress__ring { width: 3.25rem; height: 3.25rem; }
    .agentic-working__dots { display: none; }
    .agentic-working__detail { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
    .agentic-inline-progress__ring.is-indeterminate,
    .agentic-inline-progress__ring.is-indeterminate > span,
    .agentic-inline-progress__ring.is-indeterminate > strong,
    .agentic-inline-progress__live > i,
    .agentic-inline-progress__bar.is-indeterminate > i { animation: none !important; }
}

/* Portable live progress control for Fully Agentic and Human-in-the-Loop runs. */
.agentic-progress-fab-shell {
    --agentic-progress-color: #38bdf8;
    --agentic-progress: 0%;
    position: fixed;
    right: calc(7rem + env(safe-area-inset-right, 0px));
    bottom: calc(1.7rem + env(safe-area-inset-bottom, 0px));
    z-index: 68;
    width: min(24rem, calc(100vw - 2rem));
    pointer-events: none;
    filter: drop-shadow(0 0.85rem 1.6rem color-mix(in srgb, #000 34%, transparent));
}

.agentic-progress-fab-shell.is-agentic { --agentic-progress-color: #a78bfa; }
.agentic-progress-fab-shell.is-hitl { --agentic-progress-color: #67e8f9; }
.agentic-progress-fab-shell.is-approval { --agentic-progress-color: #fbbf24; }

.agentic-progress-fab {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 4.65rem minmax(0, 1fr) 1.2rem;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0.72rem 0.55rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--agentic-progress-color) 70%, var(--panel-border));
    border-radius: 1.35rem;
    color: var(--text);
    background: color-mix(in srgb, var(--panel-strong) 94%, var(--agentic-progress-color) 6%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent),
        0 0 1.25rem color-mix(in srgb, var(--agentic-progress-color) 22%, transparent);
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    text-align: left;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.agentic-progress-fab:hover,
.agentic-progress-fab:focus-visible {
    transform: translateY(-2px);
    border-color: var(--agentic-progress-color);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        0 1rem 2rem color-mix(in srgb, var(--agentic-progress-color) 32%, transparent);
}

.agentic-progress-fab:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--agentic-progress-color) 52%, #fff);
    outline-offset: 3px;
}

.agentic-progress-fab-shell.is-dragging {
    user-select: none;
    transition: none;
}

.agentic-progress-fab-shell.is-dragging .agentic-progress-fab {
    cursor: grabbing;
    transform: none;
    transition: none;
}

.agentic-progress-fab__ring {
    position: relative;
    width: 4.25rem;
    height: 4.25rem;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.08rem;
    border-radius: 50%;
    isolation: isolate;
    color: #fff;
    background: conic-gradient(
        from -90deg,
        var(--agentic-progress-color) 0 var(--agentic-progress),
        color-mix(in srgb, var(--panel-border) 82%, transparent) var(--agentic-progress) 100%
    );
    font-variant-numeric: tabular-nums;
}

.agentic-progress-fab__ring::before {
    content: "";
    position: absolute;
    inset: 0.3rem;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(145deg, #172554, #312e81);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
}

.agentic-progress-fab-shell.is-approval .agentic-progress-fab__ring::before {
    background: linear-gradient(145deg, #713f12, #92400e);
}

.agentic-progress-fab__ring > span,
.agentic-progress-fab__ring > span svg {
    width: 1rem !important;
    height: 1rem !important;
}

.agentic-progress-fab__ring > strong {
    font-size: 0.78rem;
    line-height: 1;
}

.agentic-progress-fab__copy {
    min-width: 0;
    display: grid;
    gap: 0.1rem;
}

.agentic-progress-fab__copy small {
    overflow: hidden;
    color: var(--agentic-progress-color);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.agentic-progress-fab__copy > strong {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 0.9rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentic-progress-fab__copy em,
.agentic-progress-fab__copy > span {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-style: normal;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentic-progress-fab__copy > span {
    color: color-mix(in srgb, var(--agentic-progress-color) 65%, var(--text-muted));
    font-weight: 700;
}

.agentic-progress-fab__open,
.agentic-progress-fab__open svg {
    width: 1rem !important;
    height: 1rem !important;
    color: var(--agentic-progress-color);
}

.agentic-progress-fab-shell:not(.is-approval) .agentic-progress-fab {
    animation: agentic-progress-fab-pulse 1.8s ease-in-out infinite;
}

@keyframes agentic-progress-fab-pulse {
    0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent), 0 0 0.9rem color-mix(in srgb, var(--agentic-progress-color) 16%, transparent); }
    50% { box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent), 0 0 1.6rem color-mix(in srgb, var(--agentic-progress-color) 36%, transparent); }
}

@media (max-width: 720px) {
    .agentic-progress-fab-shell {
        right: calc(5.8rem + env(safe-area-inset-right, 0px));
        bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        width: 4.9rem;
    }

    .agentic-progress-fab {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 0.36rem;
        border-radius: 50%;
    }

    .agentic-progress-fab__copy,
    .agentic-progress-fab__open {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .agentic-progress-fab-shell:not(.is-approval) .agentic-progress-fab { animation: none; }
}
.agentic-working__dots { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.45rem 0.55rem; }
.agentic-working__dots i { width: 0.48rem; height: 0.48rem; border-radius: 50%; background: #2da44e; animation: agentic-working-dot 1.05s ease-in-out infinite; }
.agentic-working__dots i:nth-child(2) { animation-delay: 0.14s; }
.agentic-working__dots i:nth-child(3) { animation-delay: 0.28s; }
@keyframes agentic-working-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.42; } 30% { transform: translateY(-0.38rem); opacity: 1; } }
@keyframes agentic-working-float { 0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(45, 164, 78, 0.32); } 50% { transform: translateY(-0.16rem); box-shadow: 0 0 0 0.42rem rgba(45, 164, 78, 0); } }
@media (prefers-reduced-motion: reduce) { .agentic-working__avatar, .agentic-working__dots i { animation: none; } }

@media (max-width: 900px) {
    .agentic-conversation > .agentic-message--assistant,
    .agentic-conversation > .agentic-message--user {
        width: calc(100% - 0.25rem) !important;
        min-width: 0 !important;
    }
}

/* Final Agentic history, response formatting, and global shell refinements. */
.agentic-history-panel__toggle {
    width: 2rem;
    height: 2rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    background: var(--surface);
    cursor: pointer;
}

.agentic-history-panel__toggle svg { width: 1rem; height: 1rem; }
.agentic-history-panel__rail { display: none; }
.agentic-history-tree { min-height: 0; display: grid; align-content: start; gap: 0.45rem; overflow-y: auto; }
.agentic-history-tree__empty { margin: 0; padding: 0.7rem; color: var(--muted); font-size: 0.75rem; text-align: center; }
.agentic-history-group { min-width: 0; }
.agentic-history-date { width: 100%; display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; align-items: center; gap: 0.4rem; padding: 0.35rem 0.28rem; border: 0; color: var(--muted); background: transparent; font: inherit; font-size: 0.72rem; text-align: left; cursor: pointer; }
.agentic-history-date svg { width: 0.85rem; height: 0.85rem; transform: rotate(-90deg); transition: transform 160ms ease; }
.agentic-history-date span { min-width: 1.25rem; padding: 0.1rem 0.3rem; border-radius: 999px; background: var(--surface); text-align: center; }
.agentic-history-group.is-collapsed .agentic-history-date svg { transform: rotate(180deg); }
.agentic-history-group.is-collapsed .agentic-history-group__items { display: none; }
.agentic-history-group__items { position: relative; display: grid; gap: 0.28rem; margin-left: 0.48rem; padding-left: 0.7rem; border-left: 1px solid var(--border); }
.agentic-history-item { position: relative; min-width: 0; width: 100%; display: block; padding: 0.48rem 0.5rem; border: 1px solid transparent; border-radius: 0.6rem; color: var(--text); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.agentic-history-item__branch { position: absolute; top: 1rem; left: -0.72rem; width: 0.62rem; border-top: 1px solid var(--border); }
.agentic-history-item strong, .agentic-history-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agentic-history-item strong { font-size: 0.76rem; }
.agentic-history-item small { margin-top: 0.16rem; color: var(--muted); font-size: 0.62rem; }
.agentic-history-item:hover { border-color: var(--border); background: var(--surface); }
.agentic-history-item.is-active { border-color: color-mix(in srgb, #2da44e 44%, var(--border)); background: color-mix(in srgb, #2da44e 10%, var(--surface)); }

.agentic-workspace.is-history-collapsed { grid-template-columns: 4rem minmax(0, 1fr); }
.agentic-workspace.is-history-collapsed .agentic-history-panel {
    min-width: 0;
    align-items: stretch;
    gap: 0.72rem;
    padding: 0.65rem 0.45rem;
    overflow: hidden;
}
.agentic-workspace.is-history-collapsed .agentic-history-panel__head { width: 100%; justify-content: center; }
.agentic-workspace.is-history-collapsed .agentic-history-panel__toggle svg { transform: rotate(180deg); }
.agentic-workspace.is-history-collapsed :is(
    .agentic-history-panel__title,
    .agentic-history-panel__new,
    .agentic-history-tree,
    .agentic-profile-card,
    .agentic-inventory-card,
    .agentic-voice-card,
    .agentic-safety-card
) { display: none !important; }
.agentic-workspace.is-history-collapsed .agentic-history-panel__rail {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 0.48rem;
    padding-top: 0.18rem;
}
.agentic-history-panel__rail-action {
    position: relative;
    width: 2.35rem;
    min-width: 2.35rem;
    height: 2.35rem;
    min-height: 2.35rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0.72rem;
    color: var(--muted);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}
.agentic-history-panel__rail-action:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--brand) 58%, var(--border));
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--surface));
    transform: translateY(-1px);
    outline: none;
}
.agentic-history-panel__rail-action.is-primary {
    border-color: color-mix(in srgb, var(--brand) 68%, var(--border));
    color: white;
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 88%, #2563eb), color-mix(in srgb, var(--brand) 68%, #4338ca));
}
.agentic-history-panel__rail-action.is-active {
    border-color: color-mix(in srgb, var(--success) 68%, var(--border));
    color: var(--success);
    background: color-mix(in srgb, var(--success) 12%, var(--surface));
}
.agentic-history-panel__rail-action.is-passive {
    margin-top: auto;
    color: var(--success);
    cursor: help;
}
.agentic-history-panel__rail-action svg {
    width: 1rem !important;
    height: 1rem !important;
}
.agentic-history-panel__rail-badge {
    position: absolute;
    top: -0.28rem;
    right: -0.28rem;
    min-width: 1.05rem;
    height: 1.05rem;
    display: inline-grid;
    place-items: center;
    padding: 0 0.18rem;
    border: 2px solid var(--surface-muted);
    border-radius: 999px;
    color: white;
    background: var(--brand);
    font-size: 0.52rem;
    font-weight: 800;
    line-height: 1;
}
.agentic-history-panel__rail-status {
    position: absolute;
    right: 0.28rem;
    bottom: 0.28rem;
    width: 0.38rem;
    height: 0.38rem;
    border: 1px solid var(--surface);
    border-radius: 50%;
    background: var(--muted);
}
.agentic-history-panel__rail-action.is-active .agentic-history-panel__rail-status {
    background: var(--success);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--success) 18%, transparent);
}

.agentic-message__content > :first-child { margin-top: 0; }
.agentic-message__content > :last-child { margin-bottom: 0; }
.agentic-message__content :is(h1, h2, h3, h4) { margin: 1rem 0 0.42rem; color: var(--text); line-height: 1.25; }
.agentic-message__content :is(h1, h2) { font-size: 1rem; }
.agentic-message__content :is(h3, h4) { font-size: 0.9rem; }
.agentic-message__content :is(p, ul, ol) { margin: 0.42rem 0; line-height: 1.58; }
.agentic-message__content :is(ul, ol) { padding-left: 1.35rem; }
.agentic-message__content li + li { margin-top: 0.28rem; }
.agentic-message__content table { width: 100%; margin: 0.75rem 0; border-collapse: collapse; font-size: 0.76rem; }
.agentic-message__content :is(th, td) { padding: 0.5rem 0.58rem; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.agentic-message__content th { background: var(--surface-muted); }
.agentic-message__content .section-box { margin: 0.7rem 0; padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: 0.75rem; background: color-mix(in srgb, var(--surface-muted) 72%, transparent); }

.topbar-utility-button--circle .topbar-utility-button__badge { width: 1.48rem; min-width: 1.48rem; height: 1.48rem; min-height: 1.48rem; padding: 0; border-radius: 50%; aspect-ratio: 1; }
html[data-theme="dark"] .sidebar :is(.nav-link__label, .nav-group__toggle .nav-link__label) strong { color: #ffffff !important; }

/* Semantic navigation icons use the destination accent and remain legible in every sidebar state. */
.sidebar .nav-link__icon,
.sidebar .nav-group__toggle .nav-link__icon {
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--nav-accent, var(--shell-accent)) 38%, var(--shell-border));
    background:
        linear-gradient(145deg,
            color-mix(in srgb, var(--nav-accent, var(--shell-accent)) 19%, var(--shell-surface-strong)),
            color-mix(in srgb, var(--nav-accent, var(--shell-accent)) 7%, var(--shell-surface)));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 12%, transparent),
        0 0.35rem 0.9rem color-mix(in srgb, var(--nav-accent, var(--shell-accent)) 12%, transparent);
}

.sidebar .nav-link__icon::before,
.sidebar .nav-group__toggle .nav-link__icon::before {
    content: "";
    position: absolute;
    inset: 0.22rem;
    z-index: -1;
    border-radius: 0.42rem;
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--nav-accent, var(--shell-accent)) 22%, transparent), transparent 72%);
}

.sidebar .nav-link:hover .nav-link__icon,
.sidebar .nav-group__toggle:hover .nav-link__icon,
.sidebar .nav-link.active .nav-link__icon,
.sidebar .nav-group__toggle.active .nav-link__icon {
    border-color: color-mix(in srgb, var(--nav-accent, var(--shell-accent)) 68%, var(--shell-border));
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 16%, transparent),
        0 0.45rem 1.05rem color-mix(in srgb, var(--nav-accent, var(--shell-accent)) 22%, transparent);
}

.sidebar .nav-link__icon svg,
.sidebar .nav-group__toggle .nav-link__icon svg {
    width: 1.15rem;
    height: 1.15rem;
    stroke-width: 1.9;
}

.jira-time-series__controls { display: flex; align-items: end; gap: 0.55rem; }
.jira-time-series__status-filter { min-width: 0; display: grid; gap: 0.26rem; }
.jira-time-series__status-filter > span { color: var(--muted); font-size: 0.66rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.06em; }
.jira-time-series__status-options { max-width: min(66vw, 70rem); display: flex; gap: 0.38rem; overflow-x: auto; padding-bottom: 0.15rem; }
.jira-time-series__status-options button { flex: 0 0 auto; min-height: 2.2rem; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.62rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface-muted); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.jira-time-series__status-options button strong { min-width: 1.35rem; padding: 0.08rem 0.32rem; border-radius: 999px; color: var(--text); background: color-mix(in srgb, var(--border) 58%, transparent); font-size: 0.66rem; text-align: center; }
.jira-time-series__status-options button:hover { border-color: #2f81f7; color: var(--text); }
.jira-time-series__status-options button.is-active { border-color: #2f81f7; color: #ffffff; background: #0969da; box-shadow: 0 0 0 0.18rem color-mix(in srgb, #2f81f7 18%, transparent); }
.jira-time-series__status-options button.is-active strong { color: #ffffff; background: rgba(255, 255, 255, 0.18); }

@media (max-width: 760px) {
    .jira-time-series__controls { width: 100%; }
    .jira-time-series__status-filter { flex: 1; }
    .jira-time-series__status-options { max-width: calc(100vw - 7rem); }
}

/* Jira activity: simultaneous, removable status lines and status flash cards. */
.jira-time-series__status-options .jira-status-toggle {
    border-color: color-mix(in srgb, var(--jira-status-color) 46%, var(--border));
}

.jira-time-series__status-options .jira-status-toggle__line {
    width: 1.15rem;
    height: 0;
    border-top: 3px dotted var(--jira-status-color);
}

.jira-time-series__status-options .jira-status-toggle.is-active {
    border-color: var(--jira-status-color);
    color: #ffffff;
    background: color-mix(in srgb, var(--jira-status-color) 82%, #111827);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--jira-status-color) 18%, transparent);
}

.jira-time-series__legend {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.4rem;
}

button.jira-time-series__key--status {
    flex: 0 0 auto;
    font: inherit;
    cursor: pointer;
}

button.jira-time-series__key--status:hover,
button.jira-time-series__key--status:focus-visible {
    border-color: var(--jira-series-color);
    color: var(--text);
    outline: none;
}

.jira-activity-flash-cards {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0.7rem;
    scroll-snap-type: x proximity;
}

.jira-activity-flash-cards .metric-card {
    flex: 0 0 12.5rem;
    min-width: 12.5rem;
    scroll-snap-align: start;
}

.jira-status-flash-card {
    --jira-status-color: #0f9f74;
    cursor: pointer;
    border-left-color: var(--jira-status-color) !important;
    opacity: 0.56;
    transition: opacity 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.jira-status-flash-card--created {
    --jira-status-color: #10b981;
}

.jira-status-flash-card--updated {
    --jira-status-color: #2563eb;
}

.jira-workflow-history-notice {
    margin: 0 0 0.75rem;
}

.jira-engineer-glossary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin: 0.3rem 0 0.7rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--surface-muted) 88%, transparent);
}

.jira-engineer-glossary__heading {
    display: grid;
    gap: 0.08rem;
    white-space: nowrap;
}

.jira-engineer-glossary__heading > span {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--text);
    font-size: 0.76rem;
}

.jira-engineer-glossary__heading .icon-inline {
    width: 1rem;
    height: 1rem;
    color: #4dabf7;
    stroke-width: 2.35;
}

.jira-engineer-glossary__heading small,
.jira-engineer-glossary__item small {
    color: var(--muted);
    font-size: 0.65rem;
}

.jira-engineer-glossary__items {
    display: flex;
    min-width: 0;
    gap: 0.45rem;
    overflow-x: auto;
    padding-bottom: 0.12rem;
}

.jira-engineer-glossary__item {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1.7rem minmax(7rem, auto) auto;
    align-items: center;
    gap: 0.42rem;
    min-height: 2.45rem;
    padding: 0.32rem 0.48rem;
    border: 1px solid color-mix(in srgb, var(--jira-engineer-color) 38%, var(--border));
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--jira-engineer-color) 7%, var(--surface));
    cursor: help;
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.jira-engineer-glossary__item:hover,
.jira-engineer-glossary__item:focus-visible {
    border-color: color-mix(in srgb, var(--jira-engineer-color) 72%, var(--border));
    box-shadow: 0 0.5rem 1.4rem color-mix(in srgb, var(--jira-engineer-color) 18%, transparent);
    outline: none;
    transform: translateY(-1px);
}

.jira-engineer-glossary__item > span:nth-child(2) {
    display: grid;
    gap: 0.05rem;
}

.jira-engineer-glossary__item strong {
    color: var(--text);
    font-size: 0.72rem;
}

.jira-engineer-glossary__item b {
    min-width: 1.45rem;
    padding: 0.12rem 0.34rem;
    border-radius: 999px;
    color: #ffffff;
    background: var(--jira-engineer-color);
    font-size: 0.66rem;
    text-align: center;
}

.jira-engineer-glossary__icon {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.52rem;
    color: #ffffff;
    background: color-mix(in srgb, var(--jira-engineer-color) 76%, #111827);
}

.jira-engineer-glossary__icon .icon-inline {
    width: 0.95rem;
    height: 0.95rem;
    stroke-width: 2.4;
}

@media (max-width: 760px) {
    .jira-engineer-glossary {
        grid-template-columns: 1fr;
    }
}

.jira-status-flash-card .metric-card__icon {
    color: #ffffff;
    background: color-mix(in srgb, var(--jira-status-color) 78%, #111827);
}

.jira-status-flash-card.metric-card--active {
    opacity: 1;
    border-color: color-mix(in srgb, var(--jira-status-color) 58%, var(--border)) !important;
    border-left-color: var(--jira-status-color) !important;
    box-shadow: 0 0 0 0.16rem color-mix(in srgb, var(--jira-status-color) 18%, transparent);
}

.jira-status-flash-card:hover,
.jira-status-flash-card:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
    outline: none;
}

.jira-activity-status-line {
    stroke-width: 3.25;
}

.jira-activity-status-point {
    r: 4.25px;
    cursor: pointer;
    stroke: color-mix(in srgb, var(--surface) 86%, #ffffff);
    stroke-width: 1.25px;
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 140ms ease, filter 140ms ease, stroke-width 140ms ease;
}

.jira-activity-status-point:hover,
.jira-activity-status-point:focus-visible {
    filter: brightness(1.3) drop-shadow(0 0 0.22rem currentColor);
    outline: none;
    stroke-width: 2px;
    transform: scale(1.55);
}

.jira-engineer-hover-summary {
    position: fixed;
    z-index: 1600;
    width: min(24rem, calc(100vw - 1.5rem));
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, #4dabf7 42%, var(--border));
    border-radius: 0.9rem;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 96%, #111827);
    box-shadow: 0 1rem 2.8rem rgba(0, 0, 0, 0.38);
    pointer-events: none;
}

.jira-engineer-hover-summary__head {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
}

.jira-engineer-hover-summary__head > span,
.jira-engineer-hover-summary__flash > i {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.68rem;
    color: #ffffff;
    background: var(--jira-engineer-color);
    font-style: normal;
}

.jira-engineer-hover-summary__head > div,
.jira-engineer-hover-summary__flash > span { display: grid; gap: 0.08rem; }
.jira-engineer-hover-summary__head small,
.jira-engineer-hover-summary__flash small { color: var(--muted); font-size: 0.68rem; }
.jira-engineer-hover-summary__head > b {
    min-width: 2rem;
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
    color: #ffffff;
    background: var(--jira-engineer-color);
    text-align: center;
}

.jira-engineer-hover-summary__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.65rem 0 0.55rem;
}

.jira-engineer-hover-summary__flash {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    padding: 0.42rem;
    border: 1px solid color-mix(in srgb, var(--jira-status-color) 38%, var(--border));
    border-radius: 0.65rem;
    background: color-mix(in srgb, var(--jira-status-color) 8%, var(--surface-muted));
}

.jira-engineer-hover-summary__flash > i {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.52rem;
    background: color-mix(in srgb, var(--jira-status-color) 78%, #111827);
}

.jira-engineer-hover-summary__flash .icon-inline,
.jira-engineer-hover-summary__head .icon-inline { width: 1rem; height: 1rem; stroke-width: 2.4; }
.jira-engineer-hover-summary > p {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.4;
}
.jira-engineer-hover-summary > p .icon-inline { flex: 0 0 auto; width: 0.9rem; height: 0.9rem; color: #4dabf7; }
.jira-metric-hover-summary__head { --jira-engineer-color: #2f81f7; }
.jira-metric-hover-summary__flash {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    margin: 0.65rem 0 0.55rem;
    padding: 0.58rem;
    border: 1px solid color-mix(in srgb, #4dabf7 34%, var(--border));
    border-radius: 0.68rem;
    background: color-mix(in srgb, #2f81f7 8%, var(--surface-muted));
}
.jira-metric-hover-summary__flash > span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.58rem;
    color: #ffffff;
    background: #2563eb;
}
.jira-metric-hover-summary__flash > div { display: grid; gap: 0.08rem; min-width: 0; }
.jira-metric-hover-summary__flash small { color: var(--muted); font-size: 0.68rem; }
.jira-metric-hover-summary__flash strong { font-size: 0.76rem; line-height: 1.35; }

.jira-activity-point-popup { display: grid; gap: 1rem; }
.jira-activity-point-popup__summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
.jira-activity-point-popup__summary > article {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--jira-status-color) 34%, var(--border));
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--jira-status-color) 7%, var(--surface-muted));
}

.jira-activity-point-popup__summary > article > span,
.jira-activity-engineer-group > header > span {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.7rem;
    color: #ffffff;
    background: color-mix(in srgb, var(--jira-status-color) 78%, #111827);
}
.jira-activity-point-popup__summary > article > div,
.jira-activity-engineer-group > header > div { display: grid; gap: 0.1rem; min-width: 0; }
.jira-activity-point-popup__summary small,
.jira-activity-engineer-group small { color: var(--muted); font-size: 0.72rem; }
.jira-activity-point-popup__summary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jira-activity-point-popup__summary b { color: var(--jira-status-color); font-size: 1.18rem; }

.jira-activity-point-popup__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border);
}
.jira-activity-point-popup__heading h3, .jira-activity-point-popup__heading p { margin: 0; }
.jira-activity-point-popup__heading > span {
    padding: 0.25rem 0.52rem;
    border-radius: 999px;
    color: #ffffff;
    background: var(--jira-status-color);
    font-size: 0.72rem;
    font-weight: 750;
}
.jira-activity-point-popup__groups { display: grid; gap: 0.75rem; }
.jira-activity-engineer-group {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--jira-engineer-color) 38%, var(--border));
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--jira-engineer-color) 5%, var(--surface));
}
.jira-activity-engineer-group > header {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem;
    border-bottom: 1px solid var(--border);
}
.jira-activity-engineer-group > header > span { background: color-mix(in srgb, var(--jira-engineer-color) 78%, #111827); }
.jira-activity-engineer-group > header > b {
    min-width: 2rem;
    padding: 0.18rem 0.42rem;
    border-radius: 999px;
    color: #ffffff;
    background: var(--jira-engineer-color);
    text-align: center;
}
.jira-activity-engineer-group__events { display: grid; }
.jira-activity-engineer-group__events > div {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.58rem 0.7rem;
}
.jira-activity-engineer-group__events > div + div { border-top: 1px solid var(--border); }
.jira-activity-engineer-group__events > div > span {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.55rem;
    color: var(--jira-engineer-color);
    background: color-mix(in srgb, var(--jira-engineer-color) 15%, var(--surface-muted));
}
.jira-activity-engineer-group__events > div > div { display: grid; gap: 0.08rem; min-width: 0; }
.jira-activity-engineer-group__events button {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2rem;
    padding: 0.32rem 0.5rem;
    border: 1px solid color-mix(in srgb, #4dabf7 52%, var(--border));
    border-radius: 0.55rem;
    color: #8ec5ff;
    background: color-mix(in srgb, #2f81f7 10%, var(--surface-muted));
    font: inherit;
    font-size: 0.72rem;
    font-weight: 750;
    cursor: pointer;
}
.jira-activity-engineer-group__events button:hover,
.jira-activity-engineer-group__events button:focus-visible { border-color: #4dabf7; color: #ffffff; outline: none; }
.jira-activity-engineer-group__events button .icon-inline { width: 0.82rem; height: 0.82rem; }
.jira-activity-engineer-group__events em { color: var(--muted); font-size: 0.7rem; font-style: normal; }

@media (max-width: 680px) {
    .jira-activity-point-popup__summary { grid-template-columns: 1fr; }
    .jira-activity-engineer-group__events > div { grid-template-columns: 1.8rem minmax(0, 1fr); }
    .jira-activity-engineer-group__events button,
    .jira-activity-engineer-group__events em { grid-column: 2; justify-self: start; }
}

/* Final Agentic shell, header metrics, and target-picker controls. */
.app-shell[data-view-kind="agentic_network"] .content-stage {
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0.35rem;
}

.app-shell[data-view-kind="agentic_network"] .agentic-workspace {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    margin: 0;
    font-family: var(--easyclick-font-sans-ui);
    font-size: 0.9rem;
    line-height: 1.42;
}

.app-shell[data-view-kind="agentic_network"] .agentic-history-panel {
    min-height: 0;
    overflow: hidden;
}

.app-shell[data-view-kind="agentic_network"] .agentic-history-tree {
    flex: 1 1 8rem;
    min-height: 4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-shell[data-view-kind="agentic_network"] .agentic-chat-panel {
    min-height: 0;
    overflow: hidden;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

.app-shell[data-view-kind="agentic_network"] .agentic-conversation {
    min-height: 0;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-shell[data-view-kind="agentic_network"] .agentic-composer {
    position: relative;
    z-index: 3;
    min-width: 0;
    min-height: 0;
    padding-bottom: max(0.8rem, env(safe-area-inset-bottom, 0px));
    overflow: visible;
}

.app-shell[data-view-kind="agentic_network"] .agentic-history-panel__head h2,
.app-shell[data-view-kind="agentic_network"] .agentic-chat-panel__head h2 {
    color: var(--text);
    font-size: 1.12rem;
    font-weight: 750;
    line-height: 1.22;
}

.app-shell[data-view-kind="agentic_network"] .agentic-chat-panel__head > div > p:not(.eyebrow) {
    font-size: 0.84rem;
    line-height: 1.4;
}

.app-shell[data-view-kind="agentic_network"] .agentic-run-metrics small {
    font-size: 0.67rem;
    line-height: 1.2;
}

.app-shell[data-view-kind="agentic_network"] .agentic-run-metrics strong {
    font-size: 0.78rem;
    line-height: 1.25;
}

.app-shell[data-view-kind="agentic_network"] .agentic-workflow-tab strong,
.app-shell[data-view-kind="agentic_network"] .agentic-history-item strong {
    font-size: 0.8rem;
    font-weight: 700;
}

.app-shell[data-view-kind="agentic_network"] .agentic-history-item small,
.app-shell[data-view-kind="agentic_network"] .agentic-history-date {
    font-size: 0.68rem;
    line-height: 1.32;
}

.app-shell[data-view-kind="agentic_network"] .agentic-profile-card p,
.app-shell[data-view-kind="agentic_network"] .agentic-inventory-card p,
.app-shell[data-view-kind="agentic_network"] .agentic-safety-card p {
    font-size: 0.78rem;
    line-height: 1.42;
}

.app-shell[data-view-kind="agentic_network"] .agentic-empty-state h3 {
    font-size: 1.12rem;
    font-weight: 750;
    line-height: 1.24;
}

.app-shell[data-view-kind="agentic_network"] .agentic-empty-state > p {
    font-size: 0.86rem;
    line-height: 1.45;
}

.app-shell[data-view-kind="agentic_network"] .agentic-prompt-card strong {
    font-size: 0.84rem;
    font-weight: 700;
}

.app-shell[data-view-kind="agentic_network"] .agentic-prompt-card small {
    font-size: 0.75rem;
    line-height: 1.34;
}

.app-shell[data-view-kind="agentic_network"] .agentic-composer textarea {
    font-family: inherit;
    font-size: 0.92rem;
    line-height: 1.4;
    box-sizing: border-box;
    height: calc(4.2em + 0.7rem);
    min-height: calc(4.2em + 0.7rem);
    max-height: calc(4.2em + 0.7rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    resize: none;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.app-shell[data-view-kind="agentic_network"] .agentic-composer textarea::-webkit-scrollbar {
    width: 0.4rem;
}

.app-shell[data-view-kind="agentic_network"] .agentic-composer textarea::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--border-strong);
}

.agentic-upload-button {
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, var(--surface-muted));
}

.agentic-upload-button:hover:not(:disabled),
.agentic-upload-button:focus-visible {
    border-color: color-mix(in srgb, var(--brand) 58%, var(--border));
    color: var(--text);
    background: color-mix(in srgb, var(--brand) 18%, var(--surface-muted));
}

.agentic-composer__attachment-panel {
    width: min(100%, 58rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin: 0.4rem auto -0.15rem;
}

.agentic-composer__attachments,
.agentic-message__attachments {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.agentic-message__attachments {
    margin-top: 0.55rem;
}

.agentic-attachment-chip {
    min-width: 0;
    max-width: 15rem;
    display: inline-grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.36rem;
    padding: 0.28rem 0.38rem;
    border: 1px solid var(--border);
    border-radius: 0.58rem;
    color: var(--text);
    background: color-mix(in srgb, var(--surface-muted) 88%, transparent);
}

.agentic-attachment-chip > svg {
    width: 1rem;
    height: 1rem;
    color: var(--brand);
}

.agentic-attachment-chip > span {
    min-width: 0;
    display: grid;
    line-height: 1.15;
}

.agentic-attachment-chip strong {
    overflow: hidden;
    font-size: 0.7rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentic-attachment-chip small,
.agentic-attachment-privacy {
    color: var(--muted);
    font-size: 0.61rem;
    font-weight: 450;
}

.agentic-attachment-chip button {
    width: 1.25rem;
    height: 1.25rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}

.agentic-attachment-chip button:hover,
.agentic-attachment-chip button:focus-visible {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.agentic-attachment-privacy {
    flex: 0 0 auto;
    margin: 0;
    font-style: italic;
}

@media (max-width: 680px) {
    .agentic-composer__attachment-panel {
        align-items: stretch;
        flex-direction: column;
        gap: 0.3rem;
    }

    .agentic-attachment-privacy {
        align-self: flex-start;
    }
}

.agentic-chat-panel__head {
    display: grid !important;
    grid-template-columns: minmax(16rem, 1fr) minmax(28rem, auto) !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.agentic-header-tools {
    display: flex !important;
    min-width: 0 !important;
    align-items: flex-end !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
}

.agentic-run-metrics {
    display: grid !important;
    width: min(100%, 38rem) !important;
    grid-template-columns: minmax(7rem, 1.5fr) repeat(4, minmax(4.3rem, 1fr)) !important;
    gap: 0.3rem !important;
}

.agentic-run-metrics > span {
    min-height: 2.2rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--surface-muted);
}

.agentic-device-picker__footer .toolbar-actions {
    display: flex !important;
    width: auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.agentic-device-picker__footer [data-agentic-picker-clear],
.agentic-device-picker__footer [data-agentic-picker-apply] {
    width: auto !important;
    min-width: 0 !important;
    min-height: 2.35rem !important;
    max-height: 2.35rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    padding: 0.45rem 0.8rem !important;
    border-radius: 0.65rem !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.agentic-device-picker__footer [data-agentic-picker-clear] svg,
.agentic-device-picker__footer [data-agentic-picker-apply] svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    max-width: 1rem !important;
    flex: 0 0 1rem !important;
}

@media (max-width: 1100px) {
    .agentic-chat-panel__head {
        grid-template-columns: 1fr !important;
        align-items: start !important;
    }
    .agentic-header-tools {
        width: 100% !important;
        align-items: stretch !important;
    }
    .agentic-run-metrics {
        width: 100% !important;
    }
}

@media (max-width: 900px) {
    .app-shell[data-view-kind="agentic_network"] .content-stage {
        overflow-y: auto;
    }
    .app-shell[data-view-kind="agentic_network"] .agentic-workspace {
        height: auto;
        min-height: 100%;
    }
    .app-shell[data-view-kind="agentic_network"] .agentic-history-panel {
        overflow: visible;
    }
    .app-shell[data-view-kind="agentic_network"] .agentic-chat-panel {
        min-height: 42rem;
    }
    .agentic-run-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Keep dashboard flash-card surfaces aligned with the selected app theme. */
:root {
    --dashboard-flash-tone-fill: 8%;
    --dashboard-flash-tone-edge: 3%;
    --dashboard-flash-tone-glow: 12%;
}

html[data-theme=dark] {
    --dashboard-flash-tone-fill: 17%;
    --dashboard-flash-tone-edge: 7%;
    --dashboard-flash-tone-glow: 20%;
}

html[data-theme] .dashboard-flash-group {
    background:
        radial-gradient(
            circle at top right,
            color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 14%, transparent),
            transparent 10rem
        ),
        var(--widget-bg) !important;
    border-color: color-mix(
        in srgb,
        var(--dashboard-group-accent, var(--brand)) 26%,
        var(--widget-border)
    ) !important;
}

html[data-theme] .dashboard-flash-group .metric-card.metric-card--compact {
    background:
        radial-gradient(
            circle at 92% 8%,
            color-mix(in srgb, currentColor var(--dashboard-flash-tone-glow), transparent),
            transparent 7rem
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, currentColor var(--dashboard-flash-tone-fill), var(--surface-strong)),
            color-mix(in srgb, currentColor var(--dashboard-flash-tone-edge), var(--surface))
        ) !important;
    border-color: color-mix(in srgb, currentColor 32%, var(--widget-border)) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--text-strong) 7%, transparent),
        var(--widget-shadow) !important;
}

html[data-theme] .dashboard-flash-group .metric-card.metric-card--compact:hover {
    background:
        radial-gradient(
            circle at 92% 8%,
            color-mix(in srgb, currentColor var(--dashboard-flash-tone-glow), transparent),
            transparent 7rem
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, currentColor 20%, var(--surface-strong)),
            color-mix(in srgb, currentColor 8%, var(--surface))
        ) !important;
    box-shadow: var(--widget-shadow-strong) !important;
}

/* Dashboard snapshot cards use GitHub-dark surfaces and fully opaque copy. */
html[data-theme=dark] .dashboard-flash-group .metric-card.metric-card--compact {
    background:
        radial-gradient(
            circle at 92% 8%,
            color-mix(in srgb, currentColor 16%, transparent),
            transparent 7rem
        ),
        linear-gradient(135deg, #161b22, #0d1117) !important;
}

html[data-theme=dark] .dashboard-flash-group .metric-card.metric-card--compact:hover {
    background:
        radial-gradient(
            circle at 92% 8%,
            color-mix(in srgb, currentColor 22%, transparent),
            transparent 7rem
        ),
        linear-gradient(135deg, #1c2128, #0d1117) !important;
}

html[data-theme=dark] .dashboard-flash-group .metric-card.metric-card--compact .metric-card__label,
html[data-theme=dark] .dashboard-flash-group .metric-card.metric-card--compact .metric-card__value,
html[data-theme=dark] .dashboard-flash-group .metric-card.metric-card--compact .metric-card__footer {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* VM automation report: keep AI findings compact and prevent inline SVG
   artwork from expanding into a full-width dashboard panel. */
.automation-ai-dashboard {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.automation-ai-dashboard__head,
.automation-ai-dashboard__cards,
.automation-ai-dashboard__charts,
.automation-ai-dashboard__reports {
    min-width: 0;
}

.automation-ai-insights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 0.7rem;
}

.automation-ai-insight.notice-card {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0.8rem;
    overflow: hidden;
}

.automation-ai-insight__icon {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 0.75rem;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.automation-ai-insight__icon > svg {
    display: block;
    width: 1.25rem !important;
    height: 1.25rem !important;
    min-width: 1.25rem;
    max-width: 1.25rem;
    max-height: 1.25rem;
    flex: none;
    stroke-width: 2.1;
}

.automation-ai-insight > div {
    min-width: 0;
}

.automation-ai-insight strong {
    display: block;
    line-height: 1.35;
}

.automation-ai-insight p {
    margin: 0.25rem 0 0;
    color: var(--text-soft);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .automation-ai-insights {
        grid-template-columns: 1fr;
    }
}

/* Restored VM Explorer and its complete record sidebar. */
.table-shell[data-dataset="vms"] > .table-toolbar {
    display: grid;
    gap: 0.7rem;
    margin-block: 0.8rem 0.6rem;
    padding: 0.8rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
}

.table-shell[data-dataset="vms"] > .table-toolbar > .toolbar-row {
    display: grid;
    grid-template-columns: minmax(20rem, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
}

.table-shell[data-dataset="vms"] > .table-toolbar > .toolbar-row > .toolbar-search {
    width: 100%;
}

.table-shell[data-dataset="vms"] > .table-toolbar .toolbar-actions,
.table-shell[data-dataset="vms"] > .table-toolbar .saved-view,
.table-shell[data-dataset="vms"] > .table-toolbar .easyclick-table-tool-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.table-shell[data-dataset="vms"] > .table-toolbar .toolbar-actions {
    justify-content: flex-end;
}

.table-shell[data-dataset="vms"] > .table-toolbar > .toolbar-row--stack {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.table-shell[data-dataset="vms"] > .table-toolbar .advanced-search__controls {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) auto 7rem auto;
    align-items: center;
    gap: 0.55rem;
}

.table-shell[data-dataset="vms"] > .table-toolbar .advanced-search__controls .toolbar-search {
    min-width: 0;
    width: 100%;
}

.table-shell[data-dataset="vms"] > .table-toolbar > .filter-grid {
    width: 100%;
    padding-top: 0.7rem;
    border-top: 1px solid var(--panel-border);
}

.table-shell[data-dataset="vms"] > .table-toolbar--filters {
    margin-block: 0.8rem 0.55rem;
}

.table-shell[data-dataset="vms"] > .table-searchband--simple {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--panel-strong) 68%, transparent);
}

.table-shell[data-dataset="vms"] > .table-searchband--simple .table-searchband__main,
.table-shell[data-dataset="vms"] > .table-searchband--simple .table-searchband__side {
    width: 100%;
}

.table-shell[data-dataset="vms"] > .table-searchband--simple .table-searchband__search {
    width: 100%;
    max-width: none;
}

.table-shell[data-dataset="vms"] > #datasetStatus {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0 0 0.65rem;
}

.table-shell[data-dataset="vms"] > #datasetStatus:empty {
    display: none;
}

.table-shell[data-dataset="vms"] > #datasetStatus > .notice-card {
    min-height: 3rem;
    margin: 0;
    padding: 0.7rem 0.85rem;
    align-content: center;
}

@media (max-width: 72rem) {
    .table-shell[data-dataset="vms"] > .table-toolbar > .toolbar-row,
    .table-shell[data-dataset="vms"] > .table-toolbar > .toolbar-row--stack,
    .table-shell[data-dataset="vms"] > .table-searchband--simple,
    .table-shell[data-dataset="vms"] > #datasetStatus {
        grid-template-columns: minmax(0, 1fr);
    }

    .table-shell[data-dataset="vms"] > .table-toolbar .toolbar-actions,
    .table-shell[data-dataset="vms"] > .table-searchband--simple .toolbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 42rem) {
    .table-shell[data-dataset="vms"] > .table-toolbar .advanced-search__controls {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.vm-explorer-overview {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
}

.vm-explorer-overview__charts {
    display: grid;
    grid-template-columns: repeat(4, minmax(29rem, 1fr));
    align-items: start;
    gap: 0.75rem;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    padding: 0.45rem 0.15rem 0.75rem;
}

.vm-explorer-overview__rail {
    position: relative;
    min-width: 0;
}

.vm-explorer-overview__charts > .donut-card {
    container-name: vm-overview-card;
    container-type: inline-size;
    inline-size: 100%;
    min-width: 0;
    /* Fit each frame to its chart/legend instead of reserving viewport height.
       Sparse cards must not stretch to the height of a neighboring long legend. */
    block-size: auto;
    min-block-size: 0;
    align-self: start;
    grid-template-rows: auto auto;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.vm-explorer-overview__charts > .donut-card:is(:hover, :focus-within) {
    z-index: 1;
    transform: translateY(-0.2rem);
    border-color: color-mix(in srgb, var(--brand) 52%, var(--panel-border));
    box-shadow: 0 0.8rem 1.7rem rgb(2 6 23 / 24%);
}

/* VM donut glossary width can be adjusted without changing the chart rail. */
.donut-glossary-resizer {
    display: none;
}

.vm-explorer-overview__charts .donut-card__body--single {
    grid-template-columns: minmax(9rem, 1fr) 0.65rem minmax(10.5rem, var(--vm-donut-glossary-width, 40%));
    gap: 0.4rem;
    min-height: 0;
    overflow: hidden;
}

.vm-explorer-overview__charts .donut-card__body--single .donut-legend {
    max-height: min(15rem, 32dvh);
}

.vm-explorer-overview__charts .donut-card__body--single .legend-row {
    grid-template-columns: auto auto minmax(4.5rem, 1fr) auto auto auto;
    height: auto;
}

.vm-explorer-overview__charts .donut-card__body--single .legend-row__label {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.vm-explorer-overview__charts .donut-card__body--single .donut-chart,
.vm-explorer-overview__charts .donut-card__body--single .donut-chart__ring {
    width: min(13rem, 100%);
}

.vm-explorer-overview__charts .chart-controls .donut-glossary-trigger {
    width: auto;
    max-width: 12rem;
    gap: 0.24rem;
    padding: 0.2rem 0.28rem;
    overflow: hidden;
}

.vm-explorer-overview__charts .donut-glossary-trigger__button {
    min-width: 0;
    min-height: 1.7rem;
    padding: 0.28rem 0.46rem;
    font-size: 0.7rem;
}

.vm-explorer-overview__charts .donut-glossary-trigger .muted-copy {
    padding: 0.12rem 0.38rem;
    font-size: 0.62rem;
}

.vm-explorer-overview__charts .donut-glossary-resizer {
    position: relative;
    display: block;
    align-self: stretch;
    min-width: 0.65rem;
    min-height: 8rem;
    border-radius: 999px;
    cursor: ew-resize;
    touch-action: none;
    outline: none;
}

.vm-explorer-overview__charts .donut-glossary-resizer::before {
    content: "";
    position: absolute;
    inset: 12% 0;
    width: 0.18rem;
    margin-inline: auto;
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 32%, var(--panel-border));
    transition: width 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.vm-explorer-overview__charts .donut-glossary-resizer:is(:hover, :focus-visible)::before,
.vm-explorer-overview__charts .donut-card__body--single.is-resizing-glossary .donut-glossary-resizer::before {
    width: 0.32rem;
    background: var(--brand);
    box-shadow: 0 0 0.7rem color-mix(in srgb, var(--brand) 48%, transparent);
}

.vm-explorer-overview__charts .donut-card__body--single.is-resizing-glossary {
    cursor: ew-resize;
    user-select: none;
}

.vm-explorer-overview__nav {
    position: absolute;
    top: 50%;
    z-index: 8;
    display: inline-grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--brand) 62%, var(--panel-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-strong, var(--panel)) 88%, var(--brand) 12%);
    color: var(--text);
    box-shadow: 0 0.8rem 2rem rgb(2 6 23 / 38%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%) scale(0.88);
    transition: opacity 150ms ease, transform 150ms ease, background 150ms ease, border-color 150ms ease;
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.vm-explorer-overview__nav--previous { left: 0.65rem; }
.vm-explorer-overview__nav--next { right: 0.65rem; }

.vm-explorer-overview__rail.has-overflow .vm-explorer-overview__nav:not(:disabled) {
    opacity: 0.76;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

.vm-explorer-overview__nav:is(:hover, :focus-visible) {
    opacity: 1 !important;
    background: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 86%, white 14%);
    color: white;
}

.vm-explorer-overview__nav:disabled {
    opacity: 0 !important;
    pointer-events: none;
}

.vm-explorer-overview__nav svg {
    inline-size: 1.2rem;
    block-size: 1.2rem;
}

.vm-explorer-overview__rail.is-auto-scrolling .vm-explorer-overview__charts {
    scroll-behavior: auto;
    scroll-snap-type: none;
}

@container vm-overview-card (max-width: 23rem) {
    .vm-explorer-overview__charts .chart-card__head {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.35rem;
        min-block-size: 6.6rem;
    }

    .vm-explorer-overview__charts .chart-controls {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        width: 100%;
        max-width: none;
        margin-inline: 0;
    }

    .vm-explorer-overview__charts .donut-card__body--single {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(7.75rem, 0.85fr) minmax(7rem, 1fr);
        gap: 0.35rem;
        align-content: stretch;
    }

    .vm-explorer-overview__charts .donut-glossary-resizer {
        display: none;
    }

    .vm-explorer-overview__charts .donut-card__body--single .donut-chart,
    .vm-explorer-overview__charts .donut-card__body--single .donut-chart__ring {
        width: min(9.5rem, 55cqw);
    }

    .vm-explorer-overview__charts .donut-card__body--single .donut-legend {
        width: 100%;
        max-height: 8.25rem;
    }
}

.vm-explorer-dashboard-tables {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
    margin-block-start: 1rem;
    padding-block-start: 1rem;
    border-block-start: 1px solid var(--border);
}

.vm-explorer-dashboard-tables__grid {
    min-width: 0;
    margin: 0;
}

.vm-explorer-dashboard-tables__grid > .chart-card,
.vm-explorer-dashboard-tables__grid .table-widget,
.vm-explorer-dashboard-tables__grid .table-wrap {
    min-width: 0;
}

.detail-drawer[data-detail-mode="vm-record"].open .detail-drawer__panel {
    width: min(72rem, 100vw) !important;
}

body:has(.detail-drawer[data-detail-mode="vm-record"].open) .ai-assistant-toggle,
body:has(.detail-drawer[data-detail-mode="vm-record"].open) [data-ai-assistant-toggle] {
    visibility: hidden !important;
    pointer-events: none !important;
}

.vm-device-report {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
}

.vm-device-report__hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.vm-device-report__hero > div,
.vm-device-report__cards,
.vm-device-report__analysis,
.vm-device-report__inventory {
    min-width: 0;
}

.vm-device-report__hero h3 {
    margin: 0.2rem 0;
    overflow-wrap: anywhere;
}

.vm-device-report__cards.summary-cards--row {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    padding: 0.5rem;
    overflow: visible;
}

.vm-device-report__cards .metric-card {
    min-width: 0;
    width: 100%;
}

.vm-device-report__cards :is(.metric-card__label, .metric-card__value, .metric-card__meta, .metric-card__footer) {
    max-width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

.vm-device-report__cards .metric-card__label {
    display: block;
    -webkit-line-clamp: unset;
}

.vm-device-report__analysis {
    align-items: stretch;
}

.vm-device-report__analysis > .chart-card {
    min-width: 0;
}

.vm-device-report__analysis .detail-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vm-device-report :is(.detail-item, .detail-item__label, .detail-item__value) {
    min-width: 0;
    max-width: 100%;
}

.vm-device-report :is(.detail-item__label, .detail-item__value) {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vm-device-report__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.vm-device-report__findings {
    display: grid;
    gap: 0.5rem;
}

.vm-device-report__findings .notice-card {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem;
    margin: 0;
}

.vm-device-report__findings .notice-card > svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    max-width: 1.25rem;
    max-height: 1.25rem;
    stroke-width: 2.1;
}

.vm-device-report__inventory .detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.vm-device-report__inventory .detail-item__value {
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .vm-device-report__hero {
        display: grid;
    }

    .detail-drawer[data-detail-mode="vm-record"].open .detail-drawer__panel {
        width: 100vw !important;
    }

    .vm-device-report__cards.summary-cards--row,
    .vm-device-report__analysis,
    .vm-device-report__analysis .detail-grid--compact,
    .vm-device-report__inventory .detail-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 761px) and (max-width: 1100px) {
    .vm-device-report__cards.summary-cards--row,
    .vm-device-report__inventory .detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vm-device-report__analysis {
        grid-template-columns: 1fr;
    }
}

/* Meeting workspace width containment. The history table keeps its rich desktop
   columns, but it scrolls inside its own panel instead of widening the page. */
.content-stage:has(.meeting-workspace),
.meeting-workspace,
.meeting-hero,
.meeting-hero__copy,
.meeting-metrics,
.meeting-metric-card,
.meeting-metric-card__body,
.meeting-toolbar,
.meeting-toolbar__filters,
.meeting-workspace__grid,
.meeting-detail-panel,
.meeting-list-panel,
.meeting-list-panel__body,
.meeting-history-table-shell,
.meeting-summary-grid,
.meeting-analysis-grid,
.meeting-score-card,
.meeting-summary-card,
.meeting-analysis-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.meeting-workspace {
    width: 100%;
    overflow-x: clip;
}

.meeting-hero__copy,
.meeting-metric-card__body,
.meeting-summary-card__body,
.meeting-score-card p,
.meeting-analysis-card,
.meeting-analysis-card li {
    overflow-wrap: anywhere;
}

.meeting-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.meeting-toolbar__filters {
    flex: 1 1 min(52rem, 100%);
}

.meeting-history-table-shell {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

.meeting-history-table {
    width: max(100%, 105rem);
    min-width: 105rem;
}

.meeting-summary-grid,
.meeting-analysis-grid {
    align-items: start;
}

.meeting-score-card,
.meeting-summary-card,
.meeting-analysis-card {
    align-self: start;
}

.meeting-analysis-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Jira workflow matrix disclosure. The table keeps five activity rows visible,
   scrolls additional statuses internally, and can be collapsed independently. */
.jira-activity-matrix {
    display: grid;
    min-width: 0;
    border: 1px solid var(--panel-border);
    border-radius: 0.85rem;
    overflow: hidden;
    background: color-mix(in srgb, var(--panel) 96%, var(--panel-soft));
}

.jira-activity-matrix__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.62rem 0.72rem;
}

.jira-activity-matrix__head > div {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.jira-activity-matrix__head strong {
    color: var(--text-strong);
    font-size: 0.8rem;
}

.jira-activity-matrix__head small {
    color: var(--text-muted);
    font-size: 0.7rem;
}

.jira-activity-matrix__toggle {
    flex: none;
    min-height: 2.15rem;
    gap: 0.38rem;
}

.jira-activity-matrix__toggle svg {
    width: 1rem;
    height: 1rem;
    transition: transform 160ms ease;
}

.jira-activity-matrix.is-expanded .jira-activity-matrix__toggle svg {
    transform: rotate(90deg);
}

.jira-activity-matrix.is-collapsed .jira-activity-matrix__toggle svg {
    transform: rotate(-90deg);
}

.jira-activity-matrix__body {
    --jira-activity-head-height: 3.15rem;
    --jira-activity-row-height: 3.05rem;
    --jira-activity-five-rows-height: 15.25rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    max-height: calc(var(--jira-activity-head-height) + var(--jira-activity-five-rows-height));
    overflow: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    overscroll-behavior-inline: contain;
}

.jira-activity-matrix__body .jira-activity-data-table {
    margin: 0;
    border-top: 1px solid var(--panel-border);
}

.jira-activity-matrix__body .jira-activity-data-table thead tr {
    height: var(--jira-activity-head-height);
}

.jira-activity-matrix__body .jira-activity-data-table tbody tr {
    height: var(--jira-activity-row-height);
}

.jira-activity-matrix__body .jira-activity-data-table thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--panel-strong);
    box-shadow: 0 1px 0 var(--panel-border);
}

.jira-activity-matrix__body .jira-activity-data-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--panel);
    box-shadow: 1px 0 0 var(--panel-border);
}

.jira-activity-matrix__body .jira-activity-data-table thead th:first-child {
    left: 0;
    z-index: 4;
}

@media (max-width: 1280px) {
    .meeting-metrics,
    .meeting-analysis-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .meeting-toolbar__filters {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .meeting-hero {
        flex-direction: column;
    }

    .meeting-hero__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .meeting-metrics,
    .meeting-analysis-grid,
    .meeting-toolbar__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meeting-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .meeting-metrics,
    .meeting-analysis-grid,
    .meeting-toolbar__filters {
        grid-template-columns: 1fr;
    }

    .jira-activity-matrix__head {
        align-items: stretch;
        flex-direction: column;
    }

    .jira-activity-matrix__toggle {
        justify-content: center;
    }
}

/* Keep Jira chart refresh controls to one centered refresh glyph. The shared
   icon-button chevron is intended for navigation and must not overlap SVG icons. */
.jira-chart-refresh {
    position: relative;
    display: inline-grid !important;
    place-items: center;
    width: 2.35rem !important;
    min-width: 2.35rem;
    max-width: 2.35rem;
    height: 2.35rem !important;
    min-height: 2.35rem;
    max-height: 2.35rem;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 0.72rem;
    line-height: 1;
}

.jira-chart-refresh::before,
.jira-chart-refresh::after {
    content: none !important;
    display: none !important;
}

.jira-chart-refresh > svg.icon-inline {
    display: block !important;
    width: 1.12rem !important;
    min-width: 1.12rem !important;
    max-width: 1.12rem !important;
    height: 1.12rem !important;
    min-height: 1.12rem !important;
    max-height: 1.12rem !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible;
    transform: none !important;
    flex: none !important;
    stroke: currentColor;
    stroke-width: 2.4;
}

.jira-chart-refresh:disabled {
    cursor: progress;
    opacity: 0.68;
}

.jira-chart-refresh:disabled > svg.icon-inline {
    animation: jira-chart-refresh-spin 0.8s linear infinite;
}

@keyframes jira-chart-refresh-spin {
    to {
        transform: rotate(360deg) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jira-chart-refresh:disabled > svg.icon-inline {
        animation: none;
    }
}

/* Jira dashboard section headers: compact, aligned, and consistently actionable. */
.jira-workspace > .jira-workspace__head,
.jira-distribution > .jira-distribution__heading {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 0.75rem 1rem;
    width: 100%;
    min-height: 0;
    margin: 0;
}

.jira-workspace > .jira-workspace__head {
    padding: 0.15rem 0 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 82%, transparent);
}

.jira-workspace__heading-copy,
.jira-distribution__heading-copy,
.jira-organization-groups__heading-copy {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.jira-workspace__heading-copy > *,
.jira-distribution__heading-copy > *,
.jira-organization-groups__heading-copy > * {
    margin: 0 !important;
}

.jira-workspace__heading-copy h3,
.jira-distribution__heading-copy h3,
.jira-organization-groups__heading-copy h3 {
    color: var(--text-strong);
    font-size: clamp(1rem, 1.15vw, 1.18rem);
    line-height: 1.15;
}

.jira-workspace__heading-copy .muted-copy,
.jira-distribution__heading-copy .muted-copy,
.jira-organization-groups__heading-copy .muted-copy {
    max-width: 72rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.jira-workspace__head-actions {
    display: grid !important;
    grid-template-columns: repeat(2, max-content);
    align-items: center;
    justify-content: end;
    gap: 0.45rem !important;
    min-width: max-content;
}

.jira-workspace__head-actions .toolbar-button--action,
.jira-refresh-all-button {
    min-height: 2.35rem;
    padding: 0.52rem 0.78rem;
    border-radius: 0.72rem;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

.jira-workspace__head-actions .toolbar-button__icon,
.jira-refresh-all-button > svg.icon-inline {
    width: 1rem !important;
    height: 1rem !important;
    flex: 0 0 1rem !important;
}

.jira-workspace__refresh-action,
.jira-refresh-all-button {
    border-color: color-mix(in srgb, #22c55e 54%, var(--panel-border)) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #16833a, #219653) !important;
    box-shadow: 0 8px 18px color-mix(in srgb, #16a34a 20%, transparent);
}

.jira-workspace__refresh-action:hover:not(:disabled),
.jira-refresh-all-button:hover:not(:disabled) {
    background: linear-gradient(135deg, #147534, #1f894b) !important;
    box-shadow: 0 10px 22px color-mix(in srgb, #16a34a 28%, transparent);
}

.jira-distribution > .jira-distribution__heading {
    padding: 0.68rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 18%, var(--panel-border));
    border-radius: 0.85rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 7%, var(--panel)), var(--panel));
}

.jira-organization-groups {
    gap: 0.55rem;
    margin-top: 0.15rem;
}

.jira-organization-groups__heading {
    align-items: center;
    min-height: 0;
    padding: 0.45rem 0.15rem 0.25rem;
}

@media (max-width: 760px) {
    .jira-workspace > .jira-workspace__head,
    .jira-distribution > .jira-distribution__heading {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .jira-workspace__head-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        min-width: 0;
    }

    .jira-workspace__head-actions .toolbar-button--action {
        justify-content: center;
        min-width: 0;
    }

    .jira-refresh-all-button {
        justify-self: start;
    }
}

@media (max-width: 480px) {
    .jira-workspace__head-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Keep the Jira report selectors compact. The search glyph returned by the
   shared icon renderer does not always carry .icon-inline, so size any direct
   SVG child instead of allowing its intrinsic dimensions to expand the grid. */
.jira-ai-report__controls {
    grid-template-columns: repeat(3, minmax(14rem, 1fr));
    align-items: end;
    min-height: 0;
}

.jira-ai-report__controls > label,
.jira-ai-report__controls > .jira-ai-report__engineer-picker {
    align-self: end;
    min-width: 0;
    min-height: 0;
    height: auto;
}

.jira-ai-report__controls > [hidden] {
    display: none !important;
}

.jira-ai-report__controls :is(.toolbar-select, .toolbar-search) {
    width: 100%;
    min-width: 0;
    min-height: 2.65rem;
    height: 2.65rem;
}

.jira-ai-report__engineer-search > svg,
.jira-ai-report__engineer-search > svg.icon-inline {
    position: absolute;
    left: 0.72rem;
    z-index: 1;
    width: 1rem !important;
    height: 1rem !important;
    max-width: 1rem;
    max-height: 1rem;
    color: var(--brand-600);
    pointer-events: none;
    stroke-width: 2.3;
}

.jira-ai-report__head {
    align-items: flex-start;
    gap: 1rem;
}

.jira-ai-report__head > .toolbar-actions {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    align-items: center;
}

@media (max-width: 980px) {
    .jira-ai-report__controls {
        grid-template-columns: minmax(0, 1fr);
    }

    .jira-ai-report__head > .toolbar-actions {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
    }
}

/* Recognizable provider marks used consistently in MCP navigation and pages. */
.vendor-mark {
    --vendor-color: #58a6ff;
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 1.35rem;
    display: inline-grid;
    place-items: center;
    color: var(--vendor-color);
}

.vendor-mark > svg {
    width: 100% !important;
    height: 100% !important;
    overflow: visible;
}

.vendor-mark--jira { --vendor-color: #2684ff; }
.vendor-mark--outlook { --vendor-color: #1473e6; }
.vendor-mark--webex { --vendor-color: #00bceb; }
.vendor-mark--zoom { --vendor-color: #2d8cff; }
.vendor-mark--teams { --vendor-color: #6264a7; }
.vendor-mark--slack { --vendor-color: #36c5f0; }
.vendor-mark--telegram { --vendor-color: #2aabee; }
.vendor-mark--whatsapp { --vendor-color: #25d366; }
.vendor-mark--servicenow { --vendor-color: #81b441; }

.sidebar .nav-link__icon > .vendor-mark {
    width: 1.3rem;
    height: 1.3rem;
    filter: drop-shadow(0 0 0.35rem color-mix(in srgb, var(--vendor-color) 35%, transparent));
}

.workspace-brand-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    min-width: 0;
}

.workspace-brand-heading > .vendor-mark {
    width: 2.65rem;
    height: 2.65rem;
    flex-basis: 2.65rem;
    padding: 0.55rem;
    border: 1px solid color-mix(in srgb, var(--vendor-color) 48%, var(--panel-border));
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--vendor-color) 14%, var(--panel));
    box-shadow: 0 0.75rem 1.4rem color-mix(in srgb, var(--vendor-color) 17%, transparent);
}

.workspace-brand-heading > div {
    min-width: 0;
}

/* Searchable individual-engineer picker for Jira evidence analytics. */
.jira-ai-report__controls .jira-ai-report__engineer-picker {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.32rem;
    min-width: 0;
}

.jira-ai-report__engineer-title {
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 700;
}

.jira-ai-report__engineer-multiselect {
    position: relative;
    min-width: 0;
}

.jira-ai-report__engineer-multiselect > summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.65rem;
    padding: 0.5rem 2rem 0.5rem 0.72rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 28%, var(--panel-border));
    border-radius: 0.78rem;
    color: var(--text-main);
    background: color-mix(in srgb, var(--panel) 94%, var(--brand-500) 6%);
    cursor: pointer;
    list-style: none;
}

.jira-ai-report__engineer-multiselect > summary::-webkit-details-marker {
    display: none;
}

.jira-ai-report__engineer-multiselect > summary::after {
    position: absolute;
    right: 0.72rem;
    content: "";
    width: 0.48rem;
    height: 0.48rem;
    border-right: 2px solid var(--text-soft);
    border-bottom: 2px solid var(--text-soft);
    transform: rotate(45deg) translateY(-0.12rem);
    transition: transform 150ms ease;
}

.jira-ai-report__engineer-multiselect[open] > summary::after {
    transform: rotate(225deg) translate(-0.12rem, -0.12rem);
}

.jira-ai-report__engineer-summary-main {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
}

.jira-ai-report__engineer-summary-main > svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--brand-600);
    stroke-width: 2.35;
}

.jira-ai-report__engineer-summary-main > strong {
    overflow: hidden;
    font-size: 0.82rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jira-ai-report__engineer-panel {
    position: absolute;
    z-index: 80;
    top: calc(100% + 0.38rem);
    right: 0;
    left: 0;
    display: grid;
    gap: 0.55rem;
    min-width: min(34rem, calc(100vw - 3rem));
    padding: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 35%, var(--panel-border));
    border-radius: 0.85rem;
    background: var(--panel);
    box-shadow: 0 1.1rem 2.8rem rgba(0, 0, 0, 0.28);
}

.jira-ai-report__engineer-search {
    position: relative;
    display: grid;
    align-items: center;
    min-width: 0;
}

.jira-ai-report__engineer-search > svg.icon-inline {
    position: absolute;
    left: 0.72rem;
    z-index: 1;
    width: 1rem;
    height: 1rem;
    color: var(--brand-600);
    pointer-events: none;
    stroke-width: 2.3;
}

.jira-ai-report__engineer-search > .toolbar-search {
    width: 100%;
    min-width: 0;
    min-height: 2.65rem;
    padding-inline: 2.25rem 0.72rem;
    border-color: color-mix(in srgb, var(--brand-500) 28%, var(--panel-border));
    border-radius: 0.78rem;
    background: color-mix(in srgb, var(--panel) 94%, var(--brand-500) 6%);
}

.jira-ai-report__engineer-search > .toolbar-search:focus {
    border-color: color-mix(in srgb, var(--brand-500) 70%, var(--panel-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 14%, transparent);
}

.jira-ai-report__engineer-count {
    position: static;
    z-index: auto;
    padding: 0.22rem 0.42rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 24%, var(--panel-border));
    border-radius: 999px;
    color: var(--brand-700);
    background: color-mix(in srgb, var(--brand-500) 10%, var(--panel));
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
    white-space: nowrap;
}

.jira-ai-report__engineer-picker > small {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 550;
    line-height: 1.3;
}

.jira-ai-report__engineer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.jira-ai-report__engineer-actions .toolbar-button {
    min-height: 2.15rem;
    padding: 0.4rem 0.62rem;
    font-size: 0.75rem;
}

.jira-ai-report__engineer-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
    max-height: 16rem;
    overflow: auto;
    padding: 0.12rem;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.jira-ai-report__engineer-options > label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.48rem;
    min-width: 0;
    padding: 0.52rem 0.58rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.68rem;
    color: var(--text-main);
    background: color-mix(in srgb, var(--panel-soft) 70%, var(--panel));
    cursor: pointer;
}

.jira-ai-report__engineer-options > label[hidden] {
    display: none !important;
}

.jira-ai-report__engineer-options > label:hover,
.jira-ai-report__engineer-options > label:has(input:checked) {
    border-color: color-mix(in srgb, var(--brand-500) 58%, var(--panel-border));
    background: color-mix(in srgb, var(--brand-500) 10%, var(--panel));
}

.jira-ai-report__engineer-options input {
    width: 1rem;
    height: 1rem;
    margin: 0.12rem 0 0;
    accent-color: var(--brand-600);
}

.jira-ai-report__engineer-options span {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.jira-ai-report__engineer-options strong,
.jira-ai-report__engineer-options small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jira-ai-report__engineer-options strong {
    font-size: 0.78rem;
}

.jira-ai-report__engineer-options small,
.jira-ai-report__engineer-panel > small {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 550;
}

@media (max-width: 480px) {
    .jira-ai-report__engineer-search > .toolbar-search {
        padding-right: 2.2rem;
    }

    .jira-ai-report__engineer-count {
        display: none;
    }

    .jira-ai-report__engineer-panel {
        min-width: min(22rem, calc(100vw - 2rem));
    }

    .jira-ai-report__engineer-options {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Collaboration integration dashboards */
.integration-analytics-dashboard { min-width: 0; display: grid; gap: 1rem; }
.integration-analytics-dashboard__toolbar { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.integration-analytics-dashboard__toolbar label { display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.integration-kpi-grid { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; overflow-y: visible !important; }
.integration-kpi-card { --integration-tone: #2f8cff; min-width: 0; min-height: 7.2rem; display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: 0.85rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--integration-tone) 32%, var(--panel-border)); border-left: 4px solid var(--integration-tone); border-radius: 1rem; background: linear-gradient(145deg, color-mix(in srgb, var(--integration-tone) 8%, var(--panel)), var(--panel)); overflow: visible; }
.integration-kpi-card.tone-purple { --integration-tone: #8c64ff; }
.integration-kpi-card.tone-mint { --integration-tone: #18c887; }
.integration-kpi-card.tone-sun { --integration-tone: #ffb020; }
.integration-kpi-card > span { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 0.85rem; color: #fff; background: var(--integration-tone); box-shadow: 0 0.8rem 1.5rem color-mix(in srgb, var(--integration-tone) 25%, transparent); }
.integration-kpi-card > span svg { width: 1.45rem; height: 1.45rem; stroke-width: 2.25; }
.integration-kpi-card > div { min-width: 0; display: grid; gap: 0.18rem; }
.integration-kpi-card small { color: var(--integration-tone); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.integration-kpi-card strong { color: var(--text); font-size: 1.55rem; line-height: 1; }
.integration-kpi-card em { color: var(--muted); font-size: 0.78rem; font-style: normal; }
.integration-analytics-grid { min-width: 0; display: grid; grid-template-columns: minmax(18rem, 0.85fr) minmax(22rem, 1.15fr); gap: 1rem; }
.integration-donut-layout { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); align-items: center; gap: 1.2rem; }
.integration-donut { width: min(13rem, 100%); aspect-ratio: 1; position: relative; display: grid; place-items: center; align-content: center; gap: 0.1rem; margin: auto; border-radius: 50%; background: var(--integration-donut); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent); }
.integration-donut::after { content: ""; position: absolute; inset: 24%; border-radius: 50%; background: var(--panel); box-shadow: 0 0 0 1px var(--panel-border); }
.integration-donut strong, .integration-donut span { position: relative; z-index: 1; }
.integration-donut strong { font-size: 1.8rem; }
.integration-donut span { color: var(--muted); font-size: 0.72rem; font-weight: 750; text-transform: uppercase; }
.integration-donut-legend { min-width: 0; display: grid; gap: 0.45rem; overflow: visible; }
.integration-donut-legend > div { display: grid; grid-template-columns: 0.65rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.48rem 0.58rem; border: 1px solid var(--panel-border); border-radius: 0.65rem; background: var(--surface); }
.integration-donut-legend i { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--legend-color); }
.integration-summary-card ul { margin: 0.4rem 0 0.9rem; padding-left: 1.25rem; color: var(--text-soft); line-height: 1.55; }
.integration-summary-card h4 { margin: 0.5rem 0 0; }
.integration-record-table { min-width: 0; }
.integration-record-table .table-wrap { max-height: none; overflow-y: visible; }
.integration-record-table table { min-width: 70rem; }
.integration-record-table .toolbar-button {
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.integration-record-table .toolbar-button svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem;
    max-width: 1rem;
    flex: 0 0 1rem;
    stroke-width: 2.25;
}

.servicenow-sla-board,
.servicenow-performance-table,
.servicenow-group-table { min-width: 0; }
.servicenow-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.7rem; }
.servicenow-metric-grid > article { min-width: 0; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; gap: 0.7rem; padding: 0.8rem; border: 1px solid color-mix(in srgb, var(--brand-500) 24%, var(--panel-border)); border-radius: 0.85rem; background: color-mix(in srgb, var(--brand-500) 5%, var(--surface)); }
.servicenow-metric-grid > article.is-danger { border-color: color-mix(in srgb, var(--danger) 36%, var(--panel-border)); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.servicenow-metric-grid > article.is-warning { border-color: color-mix(in srgb, var(--warning) 36%, var(--panel-border)); background: color-mix(in srgb, var(--warning) 6%, var(--surface)); }
.servicenow-metric-grid > article > span { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 0.75rem; color: var(--brand-500); background: color-mix(in srgb, var(--brand-500) 14%, var(--panel)); }
.servicenow-metric-grid > article > span svg { width: 1.25rem; height: 1.25rem; }
.servicenow-metric-grid > article > div { min-width: 0; display: grid; gap: 0.12rem; }
.servicenow-metric-grid small { color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.servicenow-metric-grid strong { color: var(--text); font-size: 1.35rem; line-height: 1; }
.servicenow-metric-grid em { overflow: hidden; color: var(--text-soft); font-size: 0.7rem; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.servicenow-role-grid,
.servicenow-manager-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.servicenow-role-card { --role-tone: var(--brand-500); border-top: 3px solid var(--role-tone); background: linear-gradient(145deg, color-mix(in srgb, var(--role-tone) 7%, var(--panel)), var(--panel)); }
.servicenow-role-card.tone-purple { --role-tone: #8c64ff; }
.servicenow-role-card .table-head > svg { width: 1.65rem; height: 1.65rem; color: var(--role-tone); }
.servicenow-role-card ul { margin: 0.7rem 0; padding-left: 1.2rem; color: var(--text-soft); line-height: 1.5; }
.servicenow-role-card__metrics { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.servicenow-role-card__metrics span { padding: 0.45rem 0.65rem; border: 1px solid var(--panel-border); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 0.74rem; }
.servicenow-role-card__metrics strong { margin-right: 0.2rem; color: var(--text); }
.servicenow-performance-table .table-wrap,
.servicenow-group-table .table-wrap { max-height: 28rem; overflow: auto; }
.servicenow-performance-table table { min-width: 72rem; }
.servicenow-group-table table { min-width: 42rem; }
.servicenow-manager-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; margin-bottom: 0.85rem; }
.servicenow-manager-metrics > span { min-width: 0; display: grid; gap: 0.18rem; padding: 0.65rem; border: 1px solid var(--panel-border); border-radius: 0.7rem; background: var(--surface); }
.servicenow-manager-metrics small { color: var(--muted); font-size: 0.65rem; font-weight: 800; text-transform: uppercase; }
.servicenow-manager-metrics strong { color: var(--text); font-size: 1.2rem; }
.servicenow-priority-list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.servicenow-priority-list > span { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.38rem 0.58rem; border: 1px solid var(--panel-border); border-radius: 999px; color: var(--text-soft); background: var(--surface); font-size: 0.72rem; }
.servicenow-priority-list strong { color: var(--text); }

.webex-chat-workspace {
    min-width: 0;
    display: grid;
    gap: 1rem;
}

.webex-chat-filters {
    display: grid;
    grid-template-columns: minmax(10rem, 0.7fr) minmax(10rem, 0.7fr) minmax(18rem, 1.6fr) auto;
    align-items: end;
    gap: 0.7rem;
}

.webex-chat-filters label,
.webex-compose-grid label {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.webex-chat-filters input,
.webex-compose-grid input,
.webex-compose-grid select,
.webex-compose-grid textarea {
    width: 100%;
    min-width: 0;
}

.webex-chat-summary-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.webex-chat-observations {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
    color: var(--text-soft);
    line-height: 1.55;
}

.webex-space-list {
    display: grid;
    gap: 0.5rem;
}

.webex-space-list button {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 0.75rem;
    color: var(--text);
    text-align: left;
    border: 1px solid var(--panel-border);
    border-radius: 0.7rem;
    background: var(--surface);
}

.webex-space-list button:hover {
    border-color: color-mix(in srgb, var(--brand-500) 55%, var(--panel-border));
    background: color-mix(in srgb, var(--brand-500) 7%, var(--surface));
}

.webex-space-list button span {
    min-width: 0;
    display: grid;
    gap: 0.18rem;
}

.webex-space-list button small,
.webex-space-list button em {
    color: var(--muted);
    font-size: 0.72rem;
    font-style: normal;
}

.webex-message-card .table-head {
    gap: 1rem;
    align-items: end;
}

.webex-message-card .toolbar-select {
    max-width: 22rem;
}

.webex-message-table {
    max-height: 34rem;
}

.webex-message-table table {
    min-width: 68rem;
    table-layout: fixed;
}

.webex-message-table th:nth-child(1) { width: 16%; }
.webex-message-table th:nth-child(2) { width: 16%; }
.webex-message-table th:nth-child(3) { width: 40%; }
.webex-message-table th:nth-child(4) { width: 17%; }
.webex-message-table th:nth-child(5) { width: 11%; }
.webex-message-text {
    overflow-wrap: anywhere;
    white-space: normal;
    line-height: 1.45;
}

.webex-compose-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.webex-compose-grid small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 550;
    letter-spacing: normal;
    text-transform: none;
}

.webex-compose-grid__message {
    grid-column: 1 / -1;
}

.webex-compose-space-picker__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
    min-width: 0;
}

.webex-compose-space-picker [data-webex-compose-space-search] {
    min-height: 2.5rem;
}

.webex-ai-reporting {
    display: grid;
    gap: 1rem;
}

.webex-ai-reporting__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.55rem;
}

.webex-ai-space-picker {
    position: relative;
    min-width: min(24rem, 100%);
}

.webex-ai-space-picker > summary {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    min-height: 2.6rem;
    padding: 0.68rem 0.8rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.65rem;
    background: var(--panel-soft);
    cursor: pointer;
}

.webex-ai-space-picker__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.35rem);
    left: 0;
    width: min(34rem, calc(100vw - 3rem));
    padding: 0.7rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.75rem;
    background: var(--panel);
    box-shadow: var(--shadow-soft);
}

.webex-ai-space-picker__panel > input { width: 100%; }
.webex-ai-space-picker__actions { display: flex; gap: 0.4rem; margin: 0.5rem 0; }
.webex-ai-space-picker__list { display: grid; gap: 0.3rem; max-height: 18rem; overflow-y: auto; }
.webex-ai-space-picker__list label { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem; border-radius: 0.5rem; background: var(--panel-soft); }
.webex-ai-space-picker__list label span { display: grid; min-width: 0; }
.webex-ai-space-picker__list small { color: var(--muted); }

.webex-ai-boundary {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    gap: 0.4rem 0.7rem;
    padding: 0.75rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.7rem;
    background: var(--panel-soft);
}

.webex-ai-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
    gap: 0.75rem;
}

.webex-ai-sections > article { padding: 0.85rem; border: 1px solid var(--panel-border); border-radius: 0.8rem; background: var(--panel-soft); }
.webex-ai-section__head { display: flex; align-items: center; gap: 0.55rem; }
.webex-ai-section__head > span { width: 2rem; height: 2rem; display: grid; place-items: center; color: var(--brand-600); }
.webex-ai-section__head svg { width: 1.1rem; height: 1.1rem; }
.webex-ai-section__head small { color: var(--brand-600); text-transform: uppercase; font-size: 0.68rem; font-weight: 750; }
.webex-ai-section__head h4 { margin: 0.1rem 0 0; }
.webex-ai-sections ul { margin: 0.7rem 0 0; padding-left: 1.2rem; }
.webex-ai-sections li { margin-bottom: 0.65rem; }
.webex-ai-sections li p { margin: 0; line-height: 1.45; }
.webex-ai-sections li div { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.webex-ai-sections li button { padding: 0.24rem 0.45rem; border: 1px solid var(--panel-border); border-radius: 999px; background: var(--panel); color: var(--brand-600); cursor: pointer; font-size: 0.72rem; }

@media (max-width: 760px) {
    .webex-ai-reporting__controls > button,
    .webex-ai-space-picker { width: 100%; }
    .webex-ai-boundary { grid-template-columns: minmax(0, 1fr); }
    .webex-ai-space-picker__panel { position: static; width: 100%; margin-top: 0.35rem; }
}

/* Keep action glyphs compact even when a shared/global SVG rule is fluid. */
.webex-compose-card [data-webex-chat-review],
.webex-compose-card [data-webex-chat-confirm] {
    display: inline-flex;
    width: auto;
    min-height: 2.5rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 0.9rem;
}

.webex-compose-card [data-webex-chat-review] > svg,
.webex-compose-card [data-webex-chat-confirm] > svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem;
    max-width: 1rem;
    flex: 0 0 1rem;
    stroke-width: 2.25;
}

.jira-ai-report__scope-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.jira-ai-report__scope-banner > svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
    min-width: 1.1rem;
    max-width: 1.1rem;
    flex: 0 0 1.1rem;
}

.webex-send-preview {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--warning) 48%, var(--panel-border));
    border-left: 4px solid var(--warning);
    border-radius: 0.85rem;
    background: color-mix(in srgb, var(--warning) 8%, var(--surface));
}

.webex-send-preview h4,
.webex-send-preview p {
    margin: 0.25rem 0;
}

.webex-send-preview__message {
    margin-top: 0.75rem;
    padding: 0.75rem;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid var(--panel-border);
    border-radius: 0.65rem;
    background: var(--panel);
}

@media (max-width: 1280px) {
    .integration-workspace__tabs--webex {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .webex-chat-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .webex-chat-filters__search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .integration-workspace__tabs--webex,
    .webex-chat-filters,
    .webex-chat-summary-grid,
    .webex-compose-grid,
    .webex-send-preview {
        grid-template-columns: minmax(0, 1fr);
    }
    .webex-compose-grid__message,
    .webex-chat-filters__search {
        grid-column: auto;
    }
    .webex-send-preview .toolbar-actions {
        justify-content: stretch;
    }
    .webex-send-preview .toolbar-actions > * {
        flex: 1;
    }
}

/* Flash cards wrap with their layout and never become nested scroll regions. */
.summary-cards,
.dashboard-mini-grid,
.dashboard-card-strip,
.jira-dashboard-cards,
.integration-kpi-grid,
.jira-activity-flash-cards,
.jira-summary-flash-grid,
.dashboard-flash-group__grid,
.sdwan-flash-card-grid,
.f5-bigip__flash-grid {
    overflow: visible !important;
    scrollbar-width: none !important;
}
.summary-cards > *,
.dashboard-mini-grid > *,
.dashboard-card-strip > *,
.jira-dashboard-cards > *,
.integration-kpi-grid > *,
.jira-activity-flash-cards > *,
.jira-summary-flash-grid > *,
.dashboard-flash-group__grid > *,
.sdwan-flash-card-grid > *,
.f5-bigip__flash-grid > *,
.metric-card,
.jira-summary-flash,
.jira-status-flash-card,
.dashboard-flash-bar {
    overflow: hidden !important;
    scrollbar-width: none !important;
}

/* Jira leader groups and team-based evaluation */
.jira-team-manager {
    border: 1px solid color-mix(in srgb, var(--brand-500) 25%, var(--panel-border));
    border-radius: 1rem;
    background: color-mix(in srgb, var(--brand-500) 3%, var(--panel));
    overflow: hidden;
}

.jira-team-manager > summary {
    min-height: 4rem;
    display: grid;
    grid-template-columns: 2.45rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    list-style: none;
}

.jira-team-manager > summary::-webkit-details-marker { display: none; }
.jira-team-manager > summary > span:first-child { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; border-radius: 0.72rem; color: #fff; background: linear-gradient(135deg, #2563eb, #7c3aed); box-shadow: 0 0.55rem 1.2rem rgba(37, 99, 235, 0.24); }
.jira-team-manager > summary > span:first-child svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.35; }
.jira-team-manager > summary > span:nth-child(2) { min-width: 0; display: grid; gap: 0.15rem; }
.jira-team-manager > summary small { color: var(--muted); font-size: 0.74rem; font-weight: 550; }
.jira-team-manager > summary em { color: var(--brand-600); font-size: 0.76rem; font-style: normal; font-weight: 800; }
.jira-team-manager[open] > summary { border-bottom: 1px solid var(--panel-border); }
.jira-team-manager__body { display: grid; gap: 1rem; padding: 1rem; }
.jira-team-manager__report-scope { display: grid; grid-template-columns: minmax(18rem, 1fr) auto; align-items: end; gap: 0.75rem; }
.jira-team-manager__report-scope label,
.jira-team-manager__fields label,
.jira-team-manager__member-search { display: grid; gap: 0.32rem; color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; }
.jira-team-manager__grid { min-width: 0; display: grid; grid-template-columns: minmax(22rem, 1.08fr) minmax(20rem, 0.92fr); gap: 1rem; }
.jira-team-manager__editor,
.jira-team-manager__list { min-width: 0; display: grid; align-content: start; gap: 0.8rem; padding: 0.9rem; border: 1px solid var(--panel-border); border-radius: 0.85rem; background: var(--surface); }
.jira-team-manager__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.jira-team-manager__members { max-height: 18rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; overflow-y: auto; padding-right: 0.25rem; }
.jira-team-manager__members > label { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.55rem; padding: 0.55rem; border: 1px solid var(--panel-border); border-radius: 0.65rem; background: var(--panel); cursor: pointer; }
.jira-team-manager__members > label:has(input:checked) { border-color: color-mix(in srgb, var(--brand-500) 58%, var(--panel-border)); background: color-mix(in srgb, var(--brand-500) 9%, var(--panel)); }
.jira-team-manager__members input { width: 1rem; height: 1rem; accent-color: var(--brand-500); }
.jira-team-manager__members span { min-width: 0; display: grid; gap: 0.1rem; }
.jira-team-manager__members strong,
.jira-team-manager__members small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jira-team-manager__members small { color: var(--muted); font-size: 0.68rem; }
.jira-team-manager__list > article { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; padding: 0.7rem; border: 1px solid var(--panel-border); border-left: 3px solid var(--brand-500); border-radius: 0.7rem; background: var(--panel); }
.jira-team-manager__list > article > div:first-child { min-width: 0; display: grid; gap: 0.25rem; }
.jira-team-manager__list > article span { display: flex; align-items: center; gap: 0.3rem; color: var(--brand-600); font-size: 0.76rem; font-weight: 750; }
.jira-team-manager__list > article span svg { width: 0.95rem; height: 0.95rem; }
.jira-team-manager__list > article small { overflow: hidden; color: var(--muted); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.jira-team-manager__list > article > div:last-child { display: flex; gap: 0.35rem; }

@media (max-width: 1100px) {
    .integration-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .integration-analytics-grid { grid-template-columns: minmax(0, 1fr); }
    .jira-team-manager__grid { grid-template-columns: minmax(0, 1fr); }
    .servicenow-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .servicenow-role-grid,
    .servicenow-manager-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .integration-kpi-grid { grid-template-columns: minmax(0, 1fr); }
    .integration-donut-layout { grid-template-columns: minmax(0, 1fr); }
    .jira-team-manager__report-scope,
    .jira-team-manager__fields,
    .jira-team-manager__members { grid-template-columns: minmax(0, 1fr); }
    .servicenow-metric-grid,
    .servicenow-manager-metrics { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .integration-workspace__tabs,
    .integration-analytics-dashboard__toolbar,
    .integration-workspace > .table-head .toolbar-actions,
    .workspace-header,
    .app-sidebar,
    .workspace-footer,
    .ai-agent-fab { display: none !important; }
    .integration-analytics-dashboard { color: #172033; background: #fff; }
    .integration-record-table table { min-width: 0; font-size: 9pt; }
}
.admin-workspace-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.8rem 0 1rem;
    overflow-y: visible !important;
}

.admin-workspace-summary > article {
    display: grid;
    grid-template-columns: 2.7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    min-height: 5.6rem;
    padding: 0.8rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: var(--panel-strong);
}

.admin-workspace-summary > article > span {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 0.75rem;
    color: #fff;
    background: linear-gradient(145deg, #2684ff, #7655e8);
}

.admin-workspace-summary svg {
    width: 1.3rem;
    height: 1.3rem;
}

.admin-workspace-summary article div {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.admin-workspace-summary small,
.admin-workspace-summary em {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-style: normal;
}

.admin-workspace-summary strong {
    color: var(--text);
    font-size: 1rem;
}

.admin-scope-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 0.8fr) minmax(13rem, 1fr) minmax(16rem, 1.3fr) max-content;
    align-items: end;
    gap: 0.7rem;
    margin: 0.9rem 0;
    padding: 0.8rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--panel-strong) 86%, transparent);
}

.admin-scope-grid label,
.admin-data-editor > label,
.admin-token-form > label {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    color: var(--text-soft);
    font-size: 0.74rem;
    font-weight: 750;
}

.admin-scope-grid :is(input, select, button) {
    min-height: 2.65rem;
}

.admin-data-grid,
.admin-token-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 0.9rem 0 1rem;
}

.admin-data-settings .admin-data-grid {
    grid-template-columns: minmax(0, 1fr);
}

.admin-data-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.admin-data-actions .toolbar-button.active {
    border-color: var(--brand);
    color: var(--brand);
}

.admin-data-editor,
.admin-token-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 0.7rem;
}

.admin-data-editor > .primary-button,
.admin-token-form > .toolbar-actions,
.admin-token-secret {
    grid-column: 1 / -1;
}

.admin-data-field--check {
    display: flex !important;
    align-items: center;
    gap: 0.55rem !important;
    min-height: 2.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: var(--panel);
}

.admin-data-field--check input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--brand);
}

.admin-data-field input[aria-invalid="true"] {
    border-color: var(--danger);
}

.admin-data-field__error {
    display: block;
    margin-top: 0.3rem;
    color: var(--danger);
    font-size: 0.76rem;
    line-height: 1.35;
}

.admin-data-field__error[hidden] {
    display: none;
}

.admin-bulk-archive {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin: 0.8rem 0;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: var(--panel);
}

.admin-bulk-archive > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.admin-bulk-archive > span svg {
    width: 1rem;
    height: 1rem;
    color: var(--brand);
}

.admin-import-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(10rem, 0.65fr) max-content;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.admin-import-controls input[type=file] {
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
}

.admin-import-text {
    width: 100%;
    min-height: 10rem;
    resize: vertical;
    padding: 0.75rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--panel);
    font: 0.75rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.admin-validation-errors {
    max-height: 12rem;
    margin: 0.55rem 0 0;
    padding: 0.65rem 0.8rem 0.65rem 1.8rem;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--panel-border));
    border-radius: var(--radius-sm);
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 7%, var(--panel));
    font-size: 0.75rem;
}

.admin-schema-contract,
.admin-import-preview,
.admin-import-history-card {
    margin: 0.8rem 0;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--panel-strong) 88%, transparent);
    overflow: hidden;
}

.admin-schema-contract > summary {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.72rem 0.8rem;
    cursor: pointer;
    list-style: none;
}

.admin-schema-contract > summary::-webkit-details-marker {
    display: none;
}

.admin-schema-contract > summary > span:first-child {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 0.62rem;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--panel));
}

.admin-schema-contract > summary > span:nth-child(2) {
    display: grid;
    gap: 0.12rem;
}

.admin-schema-contract > summary small,
.admin-import-batch small {
    color: var(--text-soft);
    font-size: 0.7rem;
    font-weight: 500;
}

.admin-schema-contract .table-wrap {
    max-height: 17rem;
    border-top: 1px solid var(--panel-border);
}

.admin-schema-contract code,
.admin-import-preview code,
.admin-import-history code {
    color: var(--text);
    font-size: 0.7rem;
}

.admin-crud-capabilities {
    display: flex;
    gap: 0.42rem;
    margin: 0 0 0.75rem;
    overflow-x: auto;
}

.admin-crud-capabilities > span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.32rem;
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-soft);
    background: var(--panel);
    font-size: 0.68rem;
    font-weight: 750;
}

.admin-crud-capabilities svg {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--brand);
}

.admin-import-stepper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.42rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.admin-import-stepper li {
    display: grid;
    grid-template-columns: 1.65rem minmax(0, 1fr);
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
    padding: 0.48rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.65rem;
    background: var(--panel);
}

.admin-import-stepper b {
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    place-items: center;
    border-radius: 50%;
    color: var(--text-soft);
    background: var(--panel-strong);
    font-size: 0.68rem;
}

.admin-import-stepper span {
    display: grid;
    min-width: 0;
    color: var(--text);
    font-size: 0.68rem;
    font-weight: 800;
}

.admin-import-stepper small {
    overflow: hidden;
    color: var(--text-soft);
    font-size: 0.58rem;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-import-stepper li.is-active {
    border-color: color-mix(in srgb, var(--brand) 58%, var(--panel-border));
    box-shadow: 0 0 0 0.14rem color-mix(in srgb, var(--brand) 12%, transparent);
}

.admin-import-stepper li.is-complete b {
    color: #fff;
    background: var(--success);
}

.admin-import-stepper li.is-blocked b {
    color: #fff;
    background: var(--danger);
}

.admin-file-control {
    position: relative;
    display: inline-flex;
    min-width: 0;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.7rem;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--text);
    background: var(--panel);
    cursor: pointer;
}

.admin-file-control > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 800;
}

.admin-file-control input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.admin-file-meta,
.admin-import-batch {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.52rem;
    margin: 0 0 0.6rem;
    padding: 0.48rem 0.58rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.62rem;
    color: var(--text-soft);
    background: var(--panel);
    font-size: 0.68rem;
}

.admin-file-meta strong,
.admin-import-batch code {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-import-empty {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.8rem 0;
    padding: 0.8rem;
    border: 1px dashed var(--panel-border);
    border-radius: var(--radius-sm);
    color: var(--text-soft);
}

.admin-import-empty > span {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 0.7rem;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, var(--panel));
}

.admin-import-empty p {
    margin: 0.15rem 0 0;
    font-size: 0.7rem;
}

.admin-import-preview {
    padding: 0.72rem;
}

.admin-import-summary {
    display: flex;
    gap: 0.52rem;
    padding-bottom: 0.55rem;
    overflow-x: auto;
}

.admin-import-summary article {
    display: grid;
    grid-template-columns: 1.85rem minmax(4.5rem, 1fr);
    min-width: 7.8rem;
    align-items: center;
    gap: 0.45rem;
    padding: 0.48rem 0.58rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.65rem;
    background: var(--panel);
}

.admin-import-summary article > span {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border-radius: 0.55rem;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 11%, var(--panel));
}

.admin-import-summary article.is-success > span { color: var(--success); }
.admin-import-summary article.is-warning > span { color: var(--warning); }
.admin-import-summary article.is-danger > span { color: var(--danger); }

.admin-import-summary small,
.admin-import-summary strong {
    display: block;
}

.admin-import-summary small {
    color: var(--text-soft);
    font-size: 0.62rem;
}

.admin-import-summary strong {
    color: var(--text);
    font-size: 0.98rem;
}

.admin-import-preview-table {
    max-height: 18rem;
}

.admin-validation-errors {
    display: grid;
    gap: 0.42rem;
    padding: 0.55rem;
    list-style: none;
}

.admin-validation-errors article {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--panel-border));
    border-radius: 0.55rem;
    color: var(--text);
    background: var(--panel);
}

.admin-validation-errors article.is-warning {
    border-color: color-mix(in srgb, var(--warning) 34%, var(--panel-border));
}

.admin-validation-errors article > span svg {
    width: 1rem;
    height: 1rem;
    color: var(--danger);
}

.admin-validation-errors article.is-warning > span svg { color: var(--warning); }

.admin-validation-errors article code {
    display: inline-block;
    margin: 0 0 0 0.35rem;
    color: var(--text-soft);
}

.admin-validation-errors article p,
.admin-validation-errors article small {
    display: block;
    margin: 0.16rem 0 0;
}

.admin-validation-errors article small { color: var(--text-soft); }

.admin-import-history-card {
    padding: 0.72rem;
}

.admin-import-history-card > .table-head {
    margin-bottom: 0.55rem;
}

@media (max-width: 920px) {
    .admin-import-stepper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .admin-import-stepper {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-file-meta,
    .admin-import-batch {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-schema-contract > summary {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .admin-schema-contract > summary > .status-pill {
        grid-column: 2;
        justify-self: start;
    }
}

.table-row-actions,
.admin-token-provider {
    display: flex;
    align-items: center;
    gap: 0.42rem;
}

.table-row-actions {
    flex-wrap: nowrap;
}

.table-row-actions .icon-button {
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
}

.table-row-actions .icon-button.danger {
    color: #ff6b73;
    border-color: color-mix(in srgb, #ff6b73 38%, var(--panel-border));
}

.admin-token-provider .vendor-mark {
    width: 1.25rem;
    height: 1.25rem;
}

.admin-token-guidance ul {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding-left: 1.2rem;
    color: var(--text-soft);
}

.admin-token-management code {
    color: var(--brand);
    white-space: nowrap;
}

.alt-diagnostic-report {
    display: grid;
    gap: 1rem;
    min-width: 0;
    color: var(--text);
}

.alt-diagnostic-report__header,
.alt-diagnostic-report__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.alt-diagnostic-report__eyebrow {
    color: #8fb7ff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.alt-diagnostic-report__header h3 {
    margin-top: 0.22rem;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
    color: #ffffff;
}

.alt-diagnostic-report__pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.65rem;
    padding: 0.65rem 1rem;
    color: #ffffff;
    background: linear-gradient(135deg, #0c66e4, #6554c0);
    border: 1px solid #85b8ff;
    box-shadow: 0 10px 24px rgba(12, 102, 228, 0.24);
    text-decoration: none;
}

.alt-diagnostic-report__safety {
    border-color: color-mix(in srgb, #22c99a 44%, var(--line));
    background: color-mix(in srgb, #0b6b57 18%, var(--panel));
    color: var(--text);
}

.alt-diagnostic-report__issue {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, #579dff 42%, var(--line));
    border-radius: 0.85rem;
    background: color-mix(in srgb, #0c66e4 10%, var(--panel));
}

.alt-diagnostic-report__issue > span {
    font-size: 1.45rem;
}

.alt-diagnostic-report__issue div {
    display: grid;
    gap: 0.15rem;
}

.alt-diagnostic-report__issue div > span,
.alt-diagnostic-report__card div > span {
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.alt-diagnostic-report__cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.alt-diagnostic-report__card {
    --alt-card-color: #579dff;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--alt-card-color) 48%, var(--line));
    border-left: 4px solid var(--alt-card-color);
    border-radius: 0.85rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--alt-card-color) 14%, var(--panel)), var(--panel));
}

.alt-diagnostic-report__card--success { --alt-card-color: #22c99a; }
.alt-diagnostic-report__card--warning { --alt-card-color: #f5a524; }
.alt-diagnostic-report__card--danger { --alt-card-color: #f15b67; }
.alt-diagnostic-report__card--info { --alt-card-color: #579dff; }

.alt-diagnostic-report__card-icon {
    display: grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 2.65rem;
    border-radius: 0.75rem;
    font-size: 1.35rem;
    background: color-mix(in srgb, var(--alt-card-color) 20%, var(--panel-soft));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--alt-card-color) 18%, transparent);
}

.alt-diagnostic-report__card div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.alt-diagnostic-report__card strong {
    color: #ffffff;
    font-size: 1.25rem;
}

.alt-diagnostic-report__analysis-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.alt-diagnostic-report__analysis {
    --alt-analysis-color: #8957e5;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--alt-analysis-color) 45%, var(--line));
    border-radius: 0.85rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--alt-analysis-color) 14%, var(--panel)), var(--panel));
}

.alt-diagnostic-report__analysis--warning { --alt-analysis-color: #f5a524; }
.alt-diagnostic-report__analysis--violet { --alt-analysis-color: #8957e5; }

.alt-diagnostic-report__analysis h4 {
    margin-bottom: 0.45rem;
    color: color-mix(in srgb, var(--alt-analysis-color) 75%, #ffffff);
}

.alt-diagnostic-report__analysis p {
    color: var(--text-soft);
    line-height: 1.55;
}

.alt-diagnostic-report h3,
.alt-diagnostic-report h4,
.alt-diagnostic-report p {
    margin: 0;
}

.alt-diagnostic-report .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 0.75rem;
}

.alt-diagnostic-report table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.alt-diagnostic-report th,
.alt-diagnostic-report td {
    padding: 0.62rem 0.7rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.alt-diagnostic-report th {
    color: #ffffff;
    background: #0c66e4;
}

.alt-diagnostic-report__context th {
    width: 10rem;
    background: color-mix(in srgb, #0c66e4 34%, var(--panel-soft));
}

.alt-diagnostic-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: max-content;
    max-width: 100%;
    padding: 0.28rem 0.52rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.alt-diagnostic-badge--success { color: #7ee2bd; background: rgba(34, 201, 154, 0.13); border-color: rgba(34, 201, 154, 0.35); }
.alt-diagnostic-badge--warning { color: #ffd275; background: rgba(245, 165, 36, 0.13); border-color: rgba(245, 165, 36, 0.36); }
.alt-diagnostic-badge--danger { color: #ff9aa2; background: rgba(241, 91, 103, 0.13); border-color: rgba(241, 91, 103, 0.36); }
.alt-diagnostic-badge--info { color: #9ec5ff; background: rgba(87, 157, 255, 0.13); border-color: rgba(87, 157, 255, 0.36); }
.alt-diagnostic-badge--neutral { color: var(--text-soft); background: rgba(139, 152, 170, 0.12); border-color: rgba(139, 152, 170, 0.32); }
.alt-diagnostic-badge--violet { color: #c7a8ff; background: rgba(137, 87, 229, 0.15); border-color: rgba(137, 87, 229, 0.38); }

.alt-diagnostic-row--success td:first-child { box-shadow: inset 3px 0 #22c99a; }
.alt-diagnostic-row--warning td:first-child { box-shadow: inset 3px 0 #f5a524; }
.alt-diagnostic-row--danger td:first-child { box-shadow: inset 3px 0 #f15b67; }
.alt-diagnostic-row--info td:first-child { box-shadow: inset 3px 0 #579dff; }
.alt-diagnostic-row--neutral td:first-child { box-shadow: inset 3px 0 #8b98aa; }

.alt-diagnostic-confidence {
    color: #9ec5ff;
    font-weight: 800;
}

.alt-diagnostic-empty {
    padding: 1rem !important;
    color: var(--text-soft);
    text-align: center !important;
}

.alt-diagnostic-report__footer {
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 0.8rem;
    color: var(--text-soft);
    background: var(--panel-soft);
}

.alt-diagnostic-report details {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    background: var(--panel-soft);
}

.alt-diagnostic-report details + details {
    margin-top: 0.45rem;
}

.alt-diagnostic-evidence__raw {
    margin-top: 0.65rem;
}

.alt-diagnostic-evidence__raw pre {
    max-height: 28rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.alt-diagnostic-evidence__truncated {
    color: #b65c02;
    font-weight: 700;
}

.alt-diagnostic-evidence {
    overflow: hidden;
    padding: 0 !important;
}

.alt-diagnostic-evidence > summary {
    min-height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    cursor: pointer;
    background: color-mix(in srgb, #579dff 9%, var(--panel-soft));
}

.alt-diagnostic-evidence > summary > span:first-child {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.alt-diagnostic-evidence > summary strong { color: var(--text-strong); font-size: 0.82rem; }
.alt-diagnostic-evidence > summary small { overflow: hidden; color: var(--text-muted); font-size: 0.68rem; text-overflow: ellipsis; white-space: nowrap; }
.alt-diagnostic-evidence__type { flex: 0 0 auto; padding: 0.16rem 0.45rem; border: 1px solid color-mix(in srgb, #579dff 38%, var(--line)); border-radius: 999px; color: #8fb7ff; font-size: 0.62rem; font-weight: 800; text-transform: uppercase; }

.alt-diagnostic-evidence__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    padding: 0.55rem 0.7rem;
    border-top: 1px solid var(--line);
    color: var(--text-muted);
    font-size: 0.68rem;
}

.alt-diagnostic-evidence__toolbar nav { display: flex; align-items: center; flex-wrap: wrap; gap: 0.32rem; }
.alt-diagnostic-evidence__download { display: inline-flex; align-items: center; gap: 0.28rem; min-height: 1.85rem; padding: 0.28rem 0.52rem; border: 1px solid color-mix(in srgb, #579dff 34%, var(--line)); border-radius: 0.46rem; color: #b6d1ff; background: color-mix(in srgb, #0c66e4 10%, var(--panel)); font-size: 0.66rem; font-weight: 800; text-decoration: none; }
.alt-diagnostic-evidence__download:hover,
.alt-diagnostic-evidence__download:focus-visible { border-color: #579dff; color: #fff; background: color-mix(in srgb, #0c66e4 22%, var(--panel)); }
.alt-diagnostic-evidence__table { margin: 0 0.7rem 0.7rem; border-radius: 0.55rem !important; }
.alt-diagnostic-evidence__table th { position: sticky; top: 0; z-index: 1; white-space: nowrap; }
.alt-diagnostic-evidence__table td { max-width: 34rem; color: var(--text-soft); overflow-wrap: anywhere; }
.alt-diagnostic-evidence__table--properties tbody th { width: min(18rem, 34%); color: #b6d1ff; background: color-mix(in srgb, #0c66e4 14%, var(--panel-soft)); }
.alt-diagnostic-evidence__table pre { max-height: 18rem; margin: 0; border: 0; background: transparent; }

.alt-diagnostic-report pre {
    max-height: 16rem;
    overflow: auto;
    margin: 0.65rem 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-soft);
}

@media (max-width: 900px) {
    .alt-diagnostic-report__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .alt-diagnostic-report__analysis-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    .alt-diagnostic-report__cards {
        grid-template-columns: minmax(0, 1fr);
    }

    .alt-diagnostic-report__pdf {
        width: 100%;
    }
}

.admin-data-settings .dataset-tab svg {
    width: 1rem;
    height: 1rem;
}

.admin-resource-tabs {
    display: grid;
    grid-auto-columns: minmax(13.5rem, 1fr);
    grid-auto-flow: column;
    gap: 0.62rem;
    margin: 0;
    padding: 0.28rem 0.12rem 0.52rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-color: color-mix(in srgb, var(--admin-accent) 55%, var(--panel-border)) transparent;
    scrollbar-width: thin;
}

.admin-resource-tab {
    position: relative;
    display: grid;
    grid-template-columns: 2.55rem minmax(0, 1fr) auto;
    grid-template-areas: "icon copy count" "icon scope count";
    align-items: center;
    column-gap: 0.68rem;
    row-gap: 0.26rem;
    min-height: 5.25rem;
    padding: 0.72rem 0.75rem;
    overflow: hidden;
    scroll-snap-align: start;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 16%, var(--panel-border));
    border-radius: 0.82rem;
    color: var(--text-soft);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--admin-accent) 4%, var(--panel-strong)), var(--panel));
    text-align: left;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.admin-resource-tab::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.2rem;
    border-radius: 0.82rem 0 0 0.82rem;
    background: transparent;
    content: "";
}

.admin-resource-tab:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--admin-accent) 36%, var(--panel-border));
    color: var(--text);
    background: color-mix(in srgb, var(--admin-accent) 8%, var(--panel));
}

.admin-resource-tab.active {
    border-color: color-mix(in srgb, var(--admin-accent) 62%, var(--panel-border));
    color: var(--text);
    background: color-mix(in srgb, var(--admin-accent) 12%, var(--panel));
    box-shadow: 0 0.45rem 1.15rem color-mix(in srgb, var(--admin-accent) 13%, transparent);
}

.admin-resource-tab.active::before {
    background: linear-gradient(180deg, var(--admin-accent), var(--admin-accent-strong));
}

.admin-resource-tab__icon {
    grid-area: icon;
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 30%, var(--panel-border));
    border-radius: 0.72rem;
    color: var(--admin-accent);
    background: color-mix(in srgb, var(--admin-accent) 10%, var(--panel));
}

.admin-resource-tab__icon svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke-width: 2.15;
}

.admin-resource-tab__copy {
    grid-area: copy;
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.admin-resource-tab__copy strong {
    color: inherit;
    font-size: 0.78rem;
    font-weight: 820;
    line-height: 1.2;
}

.admin-resource-tab__copy small {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 540;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.admin-resource-tab__scope {
    grid-area: scope;
    width: max-content;
    padding: 0.16rem 0.38rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 24%, var(--panel-border));
    border-radius: 999px;
    color: var(--admin-accent);
    background: color-mix(in srgb, var(--admin-accent) 7%, transparent);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    line-height: 1.2;
    text-transform: uppercase;
}

.admin-resource-tab__count {
    grid-area: count;
    align-self: start;
    min-width: 2.25rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--admin-accent) 35%, var(--panel-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--admin-accent) 12%, transparent);
    color: var(--admin-accent);
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1;
    text-align: center;
}

/* Compact resource cards with fixed edge controls; hovering a control pans the rail. */
.admin-resource-rail { position: relative; min-width: 0; }
.admin-data-settings .admin-resource-tabs {
    grid-auto-columns: 10.75rem;
    gap: 0.45rem;
    padding: 0.2rem 2.2rem 0.4rem;
    scroll-padding-inline: 2.2rem;
}
.admin-data-settings .admin-resource-tab {
    grid-template-columns: 1.9rem minmax(0, 1fr) auto;
    column-gap: 0.42rem;
    row-gap: 0.1rem;
    min-height: 4.2rem;
    padding: 0.46rem 0.52rem;
    border-radius: 0.7rem;
}
.admin-data-settings .admin-resource-tab__icon {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.55rem;
}
.admin-data-settings .admin-resource-tab__icon svg { width: 0.96rem; height: 0.96rem; }
.admin-data-settings .admin-resource-tab__copy strong { font-size: 0.7rem; }
.admin-data-settings .admin-resource-tab__copy small { font-size: 0.56rem; -webkit-line-clamp: 1; }
.admin-data-settings .admin-resource-tab__scope { padding: 0.1rem 0.3rem; font-size: 0.48rem; }
.admin-data-settings .admin-resource-tab__count { min-width: 1.65rem; padding: 0.16rem 0.25rem; font-size: 0.58rem; }
.admin-resource-rail__arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: grid;
    width: 2rem;
    height: 2rem;
    padding: 0;
    place-items: center;
    border: 1px solid var(--panel-border);
    border-radius: 50%;
    background: var(--panel-strong);
    color: var(--text);
    box-shadow: 0 0.2rem 0.75rem rgb(0 0 0 / 18%);
    transform: translateY(-50%);
    cursor: pointer;
}
.admin-resource-rail__arrow--left { left: 0.18rem; }
.admin-resource-rail__arrow--right { right: 0.18rem; }
.admin-resource-rail__arrow svg { width: 1rem; height: 1rem; }
.admin-resource-rail__arrow:is(:hover, :focus-visible) { border-color: var(--admin-accent); color: var(--admin-accent); }
.admin-resource-rail__arrow:disabled { opacity: 0.4; cursor: default; }

.tenant-ai-audit { margin: 1rem 0 1.4rem; }
.tenant-ai-audit__summary { display: grid; grid-template-columns: auto minmax(12rem, 1fr) minmax(18rem, 1.6fr); align-items: center; gap: 1.2rem; padding: 0.9rem 0; }
.tenant-ai-audit__donut { width: 8.5rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#d8a72b var(--token-used-percent), #91abdf var(--token-used-percent) 100%); }
.tenant-ai-audit__donut > span { width: 6.4rem; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--panel, #111827); color: var(--text, #f8fafc); }
.tenant-ai-audit__donut strong { font-size: 1.35rem; line-height: 1.1; }
.tenant-ai-audit__donut small, .tenant-ai-audit__figures small, .tenant-ai-audit__channels small { color: var(--text-muted, #9daac0); }
.tenant-ai-audit__figures { display: grid; gap: 0.55rem; }
.tenant-ai-audit__figures > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.7rem; }
.tenant-ai-audit__figures strong { font-size: 1.1rem; }
.tenant-ai-audit__figures span, .tenant-ai-audit__channels span { color: var(--text-muted, #9daac0); font-size: 0.78rem; }
.tenant-ai-audit__channels { display: grid; grid-template-columns: repeat(4, minmax(5rem, 1fr)); gap: 0.5rem; }
.tenant-ai-audit__channels article { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; padding: 0.7rem; border: 1px solid var(--panel-border, #36445c); border-radius: 0.7rem; }
.tenant-ai-audit__channels strong { font-size: 1rem; overflow-wrap: anywhere; }
.tenant-audit__load-more { display: flex; justify-content: center; padding: 0.8rem; }
@media (max-width: 1050px) { .tenant-ai-audit__summary { grid-template-columns: auto 1fr; } .tenant-ai-audit__channels { grid-column: 1 / -1; } }
@media (max-width: 600px) { .tenant-ai-audit__summary { grid-template-columns: 1fr; } .tenant-ai-audit__channels { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column: auto; } }

@media (max-width: 40rem) {
    .admin-data-settings .admin-resource-tabs { grid-auto-columns: 9.7rem; }
}

@media (max-width: 1100px) {
    .admin-scope-grid,
    .admin-data-editor,
    .admin-token-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-data-grid,
    .admin-token-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 680px) {
    .admin-workspace-summary,
    .admin-scope-grid,
    .admin-data-editor,
    .admin-token-form,
    .admin-import-controls {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Dashboard overview cards use the same contextual palette as integration KPIs. */
.dashboard-flash-group--overview .dashboard-flash-group__grid {
    gap: 0.65rem;
    padding: 0.18rem 0.04rem 0.12rem;
    overflow-x: auto;
    overflow-y: hidden !important;
}

.dashboard-flash-group--overview .dashboard-mini-card {
    display: grid !important;
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas: "top body" "top footer";
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.8rem;
    row-gap: 0.16rem;
    min-height: 5.4rem;
    aspect-ratio: auto;
    padding: 0.62rem 0.92rem 0.6rem 1rem;
    overflow: hidden !important;
    border: 1px solid color-mix(in srgb, var(--dashboard-card-accent) 42%, var(--panel-border));
    border-radius: 0.95rem;
    background:
        radial-gradient(circle at 14% 50%, color-mix(in srgb, var(--dashboard-card-accent) 14%, transparent), transparent 6.4rem),
        linear-gradient(135deg, color-mix(in srgb, var(--dashboard-card-accent) 7%, #161b22), #0d1117 76%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.2);
    scrollbar-width: none;
}

.dashboard-flash-group--overview .dashboard-mini-card::-webkit-scrollbar { display: none; }
.dashboard-flash-group--overview .dashboard-mini-card::before {
    width: 0.26rem;
    background: var(--dashboard-card-accent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--dashboard-card-accent) 55%, transparent);
}
.dashboard-flash-group--overview .dashboard-mini-card::after {
    top: 50%;
    right: auto;
    left: 0.65rem;
    width: 4.6rem;
    height: 4.6rem;
    transform: translateY(-50%);
    background: color-mix(in srgb, var(--dashboard-card-accent) 16%, transparent);
    filter: blur(16px);
}
.dashboard-flash-group--overview .dashboard-mini-card:hover,
.dashboard-flash-group--overview .dashboard-mini-card:focus-within {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--dashboard-card-accent) 68%, #ffffff 8%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px color-mix(in srgb, var(--dashboard-card-accent) 18%, rgba(0, 0, 0, 0.38));
}
.dashboard-flash-group--overview .dashboard-mini-card__top {
    grid-area: top;
    justify-content: flex-start;
    align-self: center;
}
.dashboard-flash-group--overview .dashboard-mini-card__icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.8rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--dashboard-card-accent), color-mix(in srgb, var(--dashboard-card-accent) 68%, #ffffff 32%));
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 22px color-mix(in srgb, var(--dashboard-card-accent) 38%, transparent);
}
.dashboard-flash-group--overview .dashboard-mini-card__icon svg {
    width: 1.28rem;
    height: 1.28rem;
    stroke-width: 2.25;
}
.dashboard-flash-group--overview .dashboard-mini-card__body {
    grid-area: body;
    align-content: end;
    gap: 0.12rem;
}
.dashboard-flash-group--overview .dashboard-mini-card__label {
    color: color-mix(in srgb, var(--dashboard-card-accent) 82%, #ffffff 18%);
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.05;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1;
}
.dashboard-flash-group--overview .dashboard-mini-card__value {
    color: #f0f6fc;
    font-size: 1.52rem;
    font-weight: 900;
    line-height: 1;
    opacity: 1;
}
.dashboard-flash-group--overview .dashboard-mini-card__footer {
    grid-area: footer;
    display: flex;
    color: #8b949e;
    font-size: 0.7rem;
    font-weight: 650;
    opacity: 1;
}
.dashboard-flash-group--overview .dashboard-mini-card__status-dot { width: 0.36rem; height: 0.36rem; }
.dashboard-flash-group--overview .dashboard-mini-card--ocean,
.dashboard-flash-group--overview .dashboard-mini-card--sky { --dashboard-card-accent: #5b8def; }
.dashboard-flash-group--overview .dashboard-mini-card--mint { --dashboard-card-accent: #6dca92; }
.dashboard-flash-group--overview .dashboard-mini-card--sun,
.dashboard-flash-group--overview .dashboard-mini-card--amber { --dashboard-card-accent: #f0ad35; }
.dashboard-flash-group--overview .dashboard-mini-card--rose { --dashboard-card-accent: #ef6177; }
.dashboard-flash-group--overview .dashboard-mini-card--violet { --dashboard-card-accent: #8b5cf6; }
.dashboard-flash-group--overview .dashboard-mini-card--slate { --dashboard-card-accent: #8b95a5; }

/* Keep session status visible at the bottom of the scrolling workspace. */
.workspace > .workspace-footer,
html[data-theme="dark"] .workspace > .workspace-footer,
html[data-theme="light"] .workspace > .workspace-footer {
    position: sticky !important;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 80;
    flex: 0 0 auto;
    isolation: isolate;
}

/* Webex live search: compact control row and bounded result tables. */
.integration-live-search {
    display: grid;
    gap: 0.9rem;
    min-width: 0;
}

.jira-workflow__panel .integration-live-search__controls {
    display: grid !important;
    grid-template-columns: minmax(18rem, 1.4fr) minmax(13rem, 0.8fr) auto !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

.integration-live-search__submit {
    width: auto !important;
    min-width: 8.75rem;
    min-height: 2.8rem;
    align-self: stretch;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 0.75rem !important;
    padding: 0.65rem 1rem !important;
}

.integration-live-search__submit > svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
    min-width: 1.05rem !important;
    max-width: 1.05rem !important;
    min-height: 1.05rem !important;
    max-height: 1.05rem !important;
    flex: 0 0 1.05rem !important;
    stroke-width: 2.4;
}

.integration-live-search__results,
.integration-live-search__group {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.integration-live-search__summary {
    margin-top: 0.15rem;
}

.integration-live-search__group .table-wrap {
    max-height: 24rem;
    overflow: auto;
}

.integration-live-search__group table {
    min-width: 44rem;
}

.integration-live-search__group td {
    max-width: 28rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .jira-workflow__panel .integration-live-search__controls {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .integration-live-search__submit {
        width: 100% !important;
    }
}

/* -------------------------------------------------------------------------
   Responsive integrity layer

   This is the final cross-workspace layout contract.  Feature styles above
   may choose their visual treatment; these rules guarantee that the shell,
   controls, data surfaces and overlays remain reachable from 20rem mobile
   viewports through ultrawide displays and at enlarged browser zoom.
   ------------------------------------------------------------------------- */
:root {
    --easyclick-font-size-body: clamp(1rem, 0.96rem + 0.12vw, 1.125rem);
    --easyclick-font-size-small: clamp(0.75rem, 0.72rem + 0.1vw, 0.875rem);
    --easyclick-font-size-label: clamp(0.8125rem, 0.78rem + 0.12vw, 0.9375rem);
    --easyclick-font-size-card-title: clamp(1rem, 0.94rem + 0.24vw, 1.25rem);
    --easyclick-font-size-page-title: clamp(1.375rem, 1.12rem + 0.8vw, 2rem);
    --easyclick-space-fluid: clamp(0.75rem, 0.48rem + 0.72vw, 1.5rem);
    --easyclick-control-height: 2.75rem;
    --easyclick-content-max: 160rem;
}

html {
    min-width: 20rem;
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    min-width: 20rem;
    max-width: 100%;
    font-size: var(--easyclick-font-size-body);
    line-height: 1.5;
    overflow-x: hidden;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-sans);
}

button,
input,
select,
textarea {
    max-width: 100%;
    font-size: 1rem;
}

button,
[role="button"],
input:not([type="checkbox"]):not([type="radio"]),
select {
    min-height: var(--easyclick-control-height);
}

button,
.primary-button,
.secondary-button,
.toolbar-button {
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
}

:is(.eyebrow, small, .muted-copy, .metric-card__label, .detail-item__label,
    .footer-pill__label, .table-widget__footer, .sidebar-section__title) {
    font-size: max(0.75rem, var(--easyclick-font-size-small));
    line-height: 1.4;
}

:is(h1, h2, h3, h4, h5, h6, p, li, label, legend, th, td, button, a, span) {
    overflow-wrap: break-word;
}

:is(.app-shell, .workspace, .content-stage, .topbar, .topbar__left,
    .topbar__right, .toolbar-row, .toolbar-actions, .filter-grid,
    .dashboard-grid, .chart-grid, .summary-cards, .metric-grid,
    .detail-grid, .content-card, .chart-card, .table-shell,
    .popup-window__dialog, .popup-window__body, .detail-drawer__panel,
    .detail-drawer__content, .ai-assistant, .ai-assistant__panel) {
    min-width: 0;
    max-width: 100%;
}

.app-shell {
    width: 100%;
    max-width: var(--easyclick-content-max);
    margin-inline: auto;
    grid-template-columns: minmax(15rem, var(--sidebar-width)) minmax(0, 1fr);
}

.workspace {
    width: 100%;
    padding: var(--easyclick-space-fluid) var(--easyclick-space-fluid)
        var(--easyclick-space-fluid) 0;
}

.content-stage {
    width: 100%;
    max-width: 100%;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.topbar {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(0, auto);
    align-items: center;
    gap: var(--easyclick-space-fluid);
    padding: clamp(0.75rem, 0.55rem + 0.5vw, 1.25rem);
}

.topbar__left,
.topbar__right {
    min-width: 0;
}

.topbar__left > div,
.topbar-search,
.topbar-search .toolbar-search {
    min-width: 0;
    width: 100%;
}

#viewTitle {
    font-size: var(--easyclick-font-size-page-title);
    line-height: 1.15;
}

.content-card h3,
.chart-card h3,
.table-head h3,
.metric-card__label {
    font-size: var(--easyclick-font-size-card-title);
    line-height: 1.25;
}

.toolbar-row,
.toolbar-actions,
.chart-card__head,
.table-head,
.filter-grid,
.meeting-toolbar,
.meeting-hero__actions {
    flex-wrap: wrap;
    min-width: 0;
}

.toolbar-row > *,
.filter-grid > *,
.meeting-toolbar__filters > * {
    min-width: 0;
}

.dashboard-grid,
.chart-grid,
.summary-cards,
.metric-grid,
.detail-grid {
    width: 100%;
    align-items: stretch;
}

:is(.metric-card, .dashboard-mini-card, .meeting-metric-card,
    .integration-metric-card, .selection-stat) {
    min-width: 0;
    height: auto;
    overflow: hidden;
}

:is(.metric-card__value, .dashboard-mini-card__value, .meeting-metric-card__value) {
    font-size: clamp(1.5rem, 1.1rem + 1vw, 2.4rem);
    line-height: 1.05;
}

/* Keep compact metric help controls legible without inheriting the standard
   form-control height. The explicit rem target also prevents their tooltip
   trigger from being measured as clipped inside dense card grids. */
.metric-card__info {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    min-height: 1.5rem;
    padding: 0;
    font-size: 0.75rem;
}

img,
video {
    max-width: 100%;
    height: auto;
}

svg {
    flex-shrink: 0;
}

.table-wrap,
.compact-table-shell,
.meeting-history-table-shell,
.jira-changelog-table-wrap,
.jira-action-ticket-table-wrap,
.jira-activity-matrix__body {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

:is(.table-wrap, .compact-table-shell, .meeting-history-table-shell,
    .jira-changelog-table-wrap, .jira-action-ticket-table-wrap) table {
    width: max(100%, max-content);
    max-width: none;
}

:is(.table-wrap, .compact-table-shell, .meeting-history-table-shell) thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    font-size: max(0.75rem, var(--easyclick-font-size-small));
    line-height: 1.35;
}

.table-filter__panel {
    max-width: calc(100vw - 2 * var(--easyclick-space-fluid));
}

pre,
.code-block,
.command-output {
    max-width: 100%;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.detail-drawer,
.popup-window,
[role="dialog"] {
    max-width: 100vw;
    max-height: 100dvh;
}

.detail-drawer__panel {
    width: min(48rem, 100vw);
    height: 100dvh;
    max-height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}

.detail-drawer__content {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
}

.popup-window {
    padding: clamp(0.5rem, 1.5vw, 1.25rem);
}

.popup-window__dialog,
.popup-window--wide .popup-window__dialog,
.device-command-popup-window .popup-window__dialog {
    width: min(100%, 92rem);
    min-width: 0;
    min-height: 0;
    max-height: calc(100dvh - 2 * clamp(0.5rem, 1.5vw, 1.25rem));
}

.popup-window__head {
    align-items: flex-start;
    flex-wrap: wrap;
}

.popup-window__head-main {
    flex: 1 1 16rem;
}

.popup-window__head-actions {
    flex: 0 1 auto;
    flex-wrap: wrap;
}

.workspace > .workspace-footer {
    max-width: 100%;
    overscroll-behavior-inline: contain;
    scrollbar-gutter: stable;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 0.2rem solid color-mix(in srgb, var(--brand) 72%, #ffffff 28%);
    outline-offset: 0.15rem;
    box-shadow: 0 0 0 0.28rem color-mix(in srgb, var(--brand) 20%, transparent);
}

@media (max-width: 80rem) {
    .topbar {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
    }

    .topbar__right {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
        justify-content: stretch;
    }

    .topbar-search,
    .topbar__utility-group {
        grid-column: 1 / -1;
        width: 100%;
    }

    .topbar__utility-group {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 64rem) {
    .dashboard-grid,
    .chart-grid,
    .detail-grid,
    .meeting-analysis-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    }

    .popup-window--right .popup-window__dialog {
        width: min(42rem, 100vw);
        border-radius: 1.25rem 0 0 1.25rem;
    }
}

/* Final matching rounded shell geometry after all legacy frame overrides. */
.topbar {
    width: calc(100% - 0.5rem);
    margin: 0.25rem 0.25rem 0;
    border: 1px solid var(--shell-border);
    border-radius: 0.95rem;
}

.sidebar {
    height: calc(100vh - 0.5rem);
    min-height: calc(100vh - 0.5rem);
    margin: 0.25rem 0 0.25rem 0.25rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.95rem;
}

@media (max-width: 53.75rem) {
    .sidebar {
        height: calc(100dvh - 0.5rem);
        min-height: calc(100dvh - 0.5rem);
        margin: 0.25rem;
        border-radius: 0.95rem;
    }
}

/* Replace third-line header descriptions with accessible hover/focus information. */
.header-description__info {
    margin: 0;
    flex: 0 0 auto;
}

.heading-with-info {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 0;
}

.header-description__info::after {
    left: 0;
    top: calc(100% + 0.4rem);
    width: max-content;
    min-width: 12rem;
    max-width: min(24rem, calc(100vw - 3rem));
    transform: translateY(-0.15rem);
}

.header-description__info:hover::after,
.header-description__info:focus-visible::after {
    transform: translateY(0);
}

/* Give the header and sidebar matching rounded shell frames and a small inset. */
.topbar {
    width: calc(100% - 0.5rem);
    margin: 0.25rem 0.25rem 0;
    border: 1px solid var(--shell-border);
    border-radius: 0.95rem;
}

.sidebar {
    height: calc(100vh - 0.5rem);
    min-height: calc(100vh - 0.5rem);
    margin: 0.25rem 0 0.25rem 0.25rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.95rem;
}

@media (max-width: 53.75rem) {
    .sidebar {
        height: calc(100dvh - 0.5rem);
        min-height: calc(100dvh - 0.5rem);
        margin: 0.25rem;
        border-radius: 0.95rem;
    }
}

@media (max-width: 53.75rem) {
    .app-shell,
    .app-shell.sidebar-collapsed {
        grid-template-columns: minmax(0, 1fr);
        max-width: 100%;
    }

    .sidebar {
        inset: 0 auto 0 0;
        width: min(20rem, calc(100vw - 2.75rem));
        max-width: calc(100vw - 2.75rem);
        height: 100dvh;
        margin: 0;
        border-radius: 0 1.25rem 1.25rem 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 100;
    }

    .workspace {
        width: 100%;
        padding: clamp(0.5rem, 2vw, 1rem);
    }

    .content-stage {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (max-width: 42.5rem) {
    :root {
        --easyclick-space-fluid: clamp(0.5rem, 3vw, 0.875rem);
    }

    .topbar,
    .content-card,
    .chart-card,
    .table-shell,
    .meeting-hero,
    .meeting-detail-panel,
    .meeting-list-panel {
        padding: var(--easyclick-space-fluid);
        border-radius: clamp(0.75rem, 3vw, 1.25rem);
    }

    .topbar__right,
    .dashboard-grid,
    .chart-grid,
    .summary-cards,
    .metric-grid,
    .detail-grid,
    .meeting-metrics,
    .meeting-analysis-grid,
    .meeting-toolbar__filters,
    .admin-scope-grid,
    .admin-data-editor,
    .admin-token-form,
    .admin-import-controls {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .toolbar-actions > *,
    .meeting-hero__actions > *,
    .popup-window__head-actions > * {
        flex: 1 1 min(100%, 12rem);
    }

    .popup-window {
        padding: 0;
    }

    .popup-window__dialog,
    .popup-window--wide .popup-window__dialog,
    .device-command-popup-window .popup-window__dialog,
    .popup-window--right .popup-window__dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        resize: none;
    }

    .detail-drawer__panel {
        width: 100vw;
        border-radius: 0;
    }

    .table-filter__panel {
        position: fixed;
        inset: auto var(--easyclick-space-fluid) var(--easyclick-space-fluid);
        width: auto;
        max-width: none;
        max-height: min(80dvh, 36rem);
        overflow: auto;
        overscroll-behavior: contain;
    }

    .table-filter__panel-searchrow {
        grid-template-columns: minmax(0, 1fr);
    }

    .table-filter__mode-chip {
        min-width: 0;
        justify-self: start;
    }

    .change-record-savebar__primary {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        gap: 0.75rem;
    }

    .change-record-savebar__primary > *,
    .change-record-savebar__primary .change-record-button--create,
    .change-record-savebar__primary .change-record-button--success,
    .change-record-savebar__primary .tshoot-completion-float {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .workspace > .workspace-footer {
        grid-template-columns: repeat(4, minmax(13rem, 1fr));
    }
}

@media (max-width: 30rem) {
    .workspace-tagline {
        max-width: 100%;
        font-size: 0.75rem !important;
        white-space: normal !important;
    }

    .topbar__utility-group > *,
    .mode-switch,
    .mode-switch button {
        min-width: 0;
    }

    .mode-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-radius: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* Meeting recorder enterprise flow: structured, responsive, and never clipped. */
.meeting-recorder {
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: clamp(1rem, 1.5vw, 1.5rem);
    gap: clamp(0.875rem, 1.25vw, 1.25rem);
}

.meeting-recorder__head {
    align-items: flex-start;
    gap: 1rem;
}

.meeting-recorder__head > div:first-child {
    flex: 1 1 34rem;
    min-width: min(100%, 18rem);
}

.meeting-recorder__actions {
    flex: 0 1 auto;
    justify-content: flex-end;
}

.meeting-recorder__workflow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.meeting-recorder__workflow-step {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    min-height: 4rem;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.meeting-recorder__workflow-step strong,
.meeting-recorder__workflow-step small {
    display: block;
    overflow-wrap: anywhere;
}

.meeting-recorder__workflow-step small {
    margin-top: 0.125rem;
    color: var(--muted);
    font-size: max(0.75rem, 12px);
    line-height: 1.35;
}

.meeting-recorder__workflow-number,
.meeting-recorder__configuration-icon {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--muted);
    background: var(--surface-muted);
    font-weight: 800;
}

.meeting-recorder__workflow-step.is-current {
    border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.meeting-recorder__workflow-step.is-current .meeting-recorder__workflow-number {
    color: white;
    border-color: var(--accent);
    background: var(--accent);
}

.meeting-recorder__workflow-step.is-complete {
    border-color: color-mix(in srgb, var(--success) 55%, var(--border));
}

.meeting-recorder__workflow-step.is-complete .meeting-recorder__workflow-number {
    color: white;
    border-color: var(--success);
    background: var(--success);
}

.meeting-recorder__configuration,
.meeting-recorder__evidence {
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.meeting-recorder__configuration > summary {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    cursor: pointer;
    list-style: none;
}

.meeting-recorder__configuration > summary::-webkit-details-marker {
    display: none;
}

.meeting-recorder__configuration > summary strong,
.meeting-recorder__configuration > summary small {
    display: block;
}

.meeting-recorder__configuration > summary small,
.meeting-recorder__configuration-state {
    color: var(--muted);
    font-size: max(0.75rem, 12px);
}

.meeting-recorder__configuration[open] > summary {
    border-bottom: 1px solid var(--border);
}

.meeting-recorder__configuration .meeting-recorder__settings {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
    margin: 0;
    padding: 1rem;
}

.meeting-recorder__configuration .meeting-recorder__destinations {
    margin: 0 1rem 1rem;
}

.meeting-recorder__evidence {
    display: grid;
    gap: 0.875rem;
    padding: 1rem;
}

.meeting-recorder__evidence-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.meeting-recorder__evidence-head .meeting-recorder__meta {
    flex: 1 1 36rem;
    justify-content: flex-end;
}

.meeting-recorder__source-summary {
    margin: 0;
    color: var(--muted);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.meeting-recorder__transcript-shell,
.meeting-recorder__evidence [data-meeting-recorder-translations] {
    min-width: 0;
}

.meeting-recorder__transcript {
    min-height: 6rem;
    max-height: 18rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.meeting-recorder__evidence .table-shell {
    max-width: 100%;
    overflow: auto;
}

@media (max-width: 64rem) {
    .meeting-recorder__workflow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .meeting-recorder__actions {
        flex: 1 1 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 42.5rem) {
    .meeting-recorder {
        padding: 0.875rem;
    }

    .meeting-recorder__workflow {
        grid-template-columns: minmax(0, 1fr);
    }

    .meeting-recorder__actions > button {
        flex: 1 1 100%;
        width: 100%;
    }

    .meeting-recorder__configuration > summary {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .meeting-recorder__configuration-state {
        grid-column: 2;
    }

    .meeting-recorder__configuration .meeting-recorder__settings {
        grid-template-columns: minmax(0, 1fr);
        padding: 0.875rem;
    }

    .meeting-recorder__configuration .meeting-recorder__destinations {
        margin: 0 0.875rem 0.875rem;
    }

    .meeting-recorder__evidence-head .meeting-recorder__meta {
        justify-content: flex-start;
    }
}
.webex-report-table {
    min-width: 0;
}

.webex-report-table .table-wrap {
    max-height: min(32rem, 65vh);
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
}

.webex-report-table table {
    min-width: 54rem;
}

.webex-report-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Compact shared header and dashboard overview cards. */
.topbar {
    gap: clamp(0.35rem, 0.5vw, 0.55rem);
    padding: clamp(0.45rem, 0.35rem + 0.25vw, 0.7rem);
}

.workspace {
    gap: clamp(0.4rem, 0.6vw, 0.65rem);
}

.dashboard-flash-group--overview .dashboard-mini-card {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    grid-template-areas: "top body";
    grid-template-rows: auto;
    min-height: 4.25rem;
    column-gap: 0.6rem;
    padding: 0.48rem 0.58rem;
}

.dashboard-flash-group--overview .dashboard-mini-card__icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.65rem;
}

.dashboard-flash-group--overview .dashboard-mini-card__icon svg {
    width: 1rem;
    height: 1rem;
}

.dashboard-flash-group--overview .dashboard-mini-card__label {
    font-size: clamp(0.62rem, 0.58rem + 0.12vw, 0.7rem);
}

.dashboard-flash-group--overview .dashboard-mini-card__value {
    font-size: clamp(1.15rem, 1rem + 0.45vw, 1.45rem);
}

@media (min-width: 64.01rem) and (max-width: 80rem) {
    .topbar {
        grid-template-columns: minmax(11rem, 0.65fr) minmax(0, 1.35fr);
        align-items: center;
    }

    .topbar__right {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .topbar-search,
    .topbar__utility-group {
        grid-column: auto;
        width: auto;
    }
}

/* Single-frame compact workspace status footer. */
:root {
    --easyclick-footer-reserve: 3.25rem;
}

.workspace > .workspace-footer,
html[data-theme="dark"] .workspace > .workspace-footer,
html[data-theme="light"] .workspace > .workspace-footer {
    grid-template-columns: repeat(4, minmax(11rem, 1fr));
    grid-auto-flow: column;
    gap: 0;
    min-height: 2.75rem;
    height: 2.75rem;
    padding: 0.2rem 0.35rem calc(0.2rem + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid #21262d;
    border-radius: 0.7rem;
    background: #010409;
    box-shadow: 0 -4px 14px rgba(1, 4, 9, 0.22);
}

.workspace > .workspace-footer > .footer-pill {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.42rem;
    min-height: 2.25rem;
    padding: 0.22rem 0.5rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.workspace > .workspace-footer > .footer-pill + .footer-pill {
    border-left: 1px solid #21262d;
}

.workspace-footer .footer-pill__icon {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0.4rem;
}

.workspace-footer .footer-pill__icon svg {
    width: 0.72rem;
    height: 0.72rem;
}

.workspace-footer .footer-pill__copy {
    gap: 0.06rem;
}

.workspace-footer .footer-pill__label {
    margin: 0;
    font-size: 0.6rem !important;
    line-height: 1.05;
}

.workspace-footer :is(.footer-pill strong, .footer-pill time) {
    font-size: 0.75rem;
    line-height: 1.1;
    white-space: nowrap;
}

.workspace-footer .footer-pill__meta {
    font-size: 0.62rem;
    white-space: nowrap;
}

/* Compact header uses the same edge-to-edge shell frame as the sidebar. */
.workspace {
    padding: 0;
    gap: 0.25rem;
}

.topbar {
    min-height: 3.5rem;
    gap: 0.4rem;
    padding: 0.32rem 0.65rem;
    border: 1px solid var(--shell-border);
    border-left: 0;
    border-radius: 0;
    background: var(--shell-bg);
    color: var(--shell-text);
    box-shadow: none;
}

.topbar__left > div {
    display: grid;
    gap: 0.08rem;
}

.topbar .workspace-tagline {
    margin: 0;
    font-size: clamp(0.62rem, 0.58rem + 0.12vw, 0.72rem);
    line-height: 1.05;
}

.topbar #viewTitle {
    margin: 0;
    font-size: clamp(1.15rem, 1rem + 0.45vw, 1.5rem);
    line-height: 1.05;
}

@media (max-width: 64rem) {
    .topbar {
        padding: 0.42rem 0.55rem;
    }
}

/* Header slogan follows the AgenticClick™ wordmark without a pill frame. */
html[data-theme] .topbar .workspace-tagline {
    display: inline-block;
    width: fit-content;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--brand);
    font-weight: 900;
    letter-spacing: 0.01em;
    -webkit-text-fill-color: currentColor;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--brand) 16%, transparent));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    html[data-theme] .topbar .workspace-tagline {
        background: var(--brand-spectrum-gradient);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }
}

/* Normalize header actions to the compact control size used across the GUI. */
.topbar :is(.icon-button, .icon-button--inline, .topbar-utility-button--circle) {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
}

.topbar .topbar-utility-button--circle .topbar-utility-button__icon {
    width: 1.45rem;
    height: 1.45rem;
}

.topbar .topbar-utility-button--circle .topbar-utility-button__icon svg,
.topbar :is(.icon-button, .icon-button--inline) svg {
    width: 0.9rem;
    height: 0.9rem;
}

.topbar .topbar-utility-button--circle .topbar-utility-button__badge {
    top: -0.2rem;
    right: 48%;
    width: 1.05rem;
    min-width: 1.05rem;
    height: 1.05rem;
    min-height: 1.05rem;
    padding: 0;
    font-size: 0.58rem;
}

.topbar :is(.toolbar-select, .compact-select, .mode-switch) {
    min-height: 2.5rem;
    height: 2.5rem;
}

.topbar .mode-switch {
    padding: 0.16rem;
}

.topbar .mode-switch button {
    min-height: 2.1rem;
    height: 2.1rem;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
}

/* Complete the compact header frame and strengthen the slogan typography. */
.topbar {
    width: calc(100% - 0.4rem);
    margin: 0.2rem 0.2rem 0;
    border: 1px solid var(--shell-border);
    border-radius: 0.55rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

html[data-theme] .topbar .workspace-tagline {
    font-size: clamp(0.8rem, 0.72rem + 0.24vw, 1rem);
    line-height: 1.1;
}

/* Align the header frame exactly with the square sidebar shell edge. */
.topbar {
    width: 100%;
    margin: 0;
    border-radius: 0;
}

/* Keep dense table actions inside their card at tablet and compact-desktop
   widths. This must follow the compact toolbar defaults above so it wins the
   cascade at the 1280px boundary as well. */
@media (max-width: 80rem) {
    .table-widget__toolbar,
    .compact-table__toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .table-widget__meta,
    .table-widget__actions,
    .compact-table__toolbar > .toolbar-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* Keep the shared search clear action fully inside every search textbox. */
.search-field {
    position: relative;
    min-width: 0;
}

.search-field .toolbar-search {
    width: 100%;
    padding-right: 2.15rem;
}

.search-field > .search-field__clear,
.search-field .search-field__clear {
    position: absolute;
    top: 50%;
    right: 0.3rem;
    z-index: 2;
    width: 1.65rem;
    min-width: 1.65rem;
    height: 1.65rem;
    min-height: 1.65rem;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border-radius: 0.42rem;
}

.search-field .search-field__clear svg {
    width: 0.78rem;
    height: 0.78rem;
}

.search-field .search-field__clear[hidden] {
    display: none;
}

/* Final responsive table-toolbar authority. Compact desktop cards can be
   narrower than the viewport when the sidebar is open, so stack the search
   and action rows before their controls can escape the card. */
@media (max-width: 80rem) {
    .table-widget__toolbar,
    .compact-table__toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .table-widget__meta,
    .table-widget__actions,
    .compact-table__toolbar > .toolbar-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* Compact Infrastructure workspace. */
.table-shell[data-dataset="infra"] {
    gap: 0.5rem;
}

.table-shell[data-dataset="infra"] > .table-head {
    padding-block: 0.2rem;
}

.infra-workflow {
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
}

.infra-workflow__head,
.infra-workflow__grid,
.infra-workflow__context {
    gap: 0.45rem;
}

.infra-workflow__action {
    min-height: 4.8rem;
    padding: 0.55rem 0.65rem;
    gap: 0.55rem;
}

.infra-workflow__icon {
    width: 2.15rem;
    height: 2.15rem;
}

/* Compact, display-only Customer Peering cards with a horizontal flow. */
.peering-overview {
    gap: 0.5rem;
    padding: 0.7rem;
}

.peering-overview .diagram-grid {
    grid-auto-columns: minmax(28rem, 30rem);
    gap: 0.65rem;
    margin-top: 0.3rem;
}

.peering-overview .diagram-card {
    padding: 0.7rem;
    border-radius: 0.85rem;
}

.peering-overview .diagram-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.peering-overview .diagram-card__dc-badge {
    margin-bottom: 0.3rem;
    padding: 0.27rem 0.55rem;
    font-size: 0.68rem;
}

.peering-overview .diagram-card__actions .toolbar-button {
    min-height: 2rem;
    padding: 0.35rem 0.55rem;
    white-space: nowrap;
}

.peering-overview .diagram-flow {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    margin: 0.55rem 0;
}

.peering-overview .diagram-node {
    min-width: 6.25rem;
    padding: 0.4rem 0.48rem;
    border-radius: 0.7rem;
}

.peering-overview .diagram-node__icon {
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: 0.18rem;
}

.peering-overview .diagram-node span,
.peering-overview .diagram-node small {
    font-size: 0.62rem;
}

.peering-overview .diagram-node strong {
    font-size: 0.78rem;
}

.peering-overview .diagram-arrow {
    flex: 0 0 1.2rem;
    width: 1.2rem;
}

/* Keep dashboard flash cards aligned with the selected light theme. */
html[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card {
    background:
        radial-gradient(circle at 14% 50%, color-mix(in srgb, var(--dashboard-card-accent) 11%, transparent), transparent 6.4rem),
        linear-gradient(135deg, color-mix(in srgb, var(--dashboard-card-accent) 6%, #ffffff), #ffffff 76%) !important;
    border-color: color-mix(in srgb, var(--dashboard-card-accent) 30%, var(--panel-border));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px rgba(7, 36, 62, 0.09);
}

html[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card__label {
    color: color-mix(in srgb, var(--dashboard-card-accent) 72%, var(--text) 28%);
}

html[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card__value {
    color: var(--text);
}

html[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card:hover,
html[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card:focus-within {
    border-color: color-mix(in srgb, var(--dashboard-card-accent) 52%, var(--panel-border));
    box-shadow: inset 0 1px 0 #ffffff, 0 12px 26px color-mix(in srgb, var(--dashboard-card-accent) 12%, rgba(7, 36, 62, 0.14));
}

/* Maintain the 12px accessibility floor for dense shared actions. */
.device-inline-action,
.launcher-password-toggle,
.metric-card__info {
    font-size: max(0.75rem, var(--easyclick-font-size-small)) !important;
}

.f5-topology-filters label,
.integration-analytics-dashboard__toolbar label {
    font-size: max(0.75rem, var(--easyclick-font-size-small));
}

@media (max-width: 80rem) {
    .table-widget__toolbar,
    .compact-table__toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .table-widget__meta,
    .table-widget__actions,
    .compact-table__toolbar > .toolbar-actions {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* Authoritative rounded header/sidebar frame at the end of the cascade. */
.topbar {
    width: calc(100% - 0.5rem);
    margin: 0.25rem 0.25rem 0;
    border: 1px solid var(--shell-border);
    border-radius: 0.95rem;
}

.sidebar {
    height: calc(100vh - 0.5rem);
    min-height: calc(100vh - 0.5rem);
    margin: 0.25rem 0 0.25rem 0.25rem;
    border: 1px solid var(--shell-border);
    border-radius: 0.95rem;
}

@media (max-width: 53.75rem) {
    .sidebar {
        height: calc(100dvh - 0.5rem);
        min-height: calc(100dvh - 0.5rem);
        margin: 0.25rem;
        border-radius: 0.95rem;
    }
}

/* Keep every chart legend row compact and on one line across the GUI. */
.legend-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
    grid-template-rows: minmax(1.9rem, auto);
    align-items: center;
    gap: clamp(0.28rem, 0.4vw, 0.5rem);
    min-width: 0;
    min-height: 2.5rem;
    height: auto;
    padding: 0.3rem 0.45rem;
    white-space: nowrap;
}

.legend-row > * {
    min-width: 0;
}

.legend-row__check {
    grid-column: 1;
}

.legend-row__dot {
    grid-column: 2;
}

.legend-row__label {
    grid-column: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    line-height: 1.2;
}

.legend-row__selected-mark {
    grid-column: 4;
}

.legend-row__share {
    grid-column: 5;
}

.legend-row > strong {
    grid-column: 6;
}

.legend-row :is(.legend-row__share, .legend-row__selected-mark),
.legend-row > strong {
    white-space: nowrap;
    overflow-wrap: normal;
}

.legend-row .legend-row__check input {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
}

/* Glossary rows do not expose a redundant external-link control. */
.legend-row__action-button {
    display: none !important;
}

/* Give the shared header a small responsive inset without enlarging it. */
.topbar {
    min-height: 3.65rem;
    padding: clamp(0.42rem, 0.36rem + 0.18vw, 0.56rem)
        clamp(0.72rem, 0.62rem + 0.3vw, 0.95rem);
}

/* Keep each data-center glossary frame proportional to its text content. */
.world-map-leaflet__sidebar .world-map-card__list {
    width: fit-content;
    min-width: 100%;
    align-content: start;
    gap: 0.4em;
}

.world-map-card__list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label";
    align-items: center;
    column-gap: clamp(0.45rem, 0.8vw, 0.75rem);
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 0.45em 0.65em;
    line-height: 1.25;
    white-space: nowrap;
}

.world-map-card__list-item .detail-item__label {
    grid-area: label;
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
}

.world-map-card__list-item > .muted-copy {
    display: none;
}

/* Organize shared table controls into compact toolbar rows across the GUI. */
.table-widget,
.compact-table-shell {
    gap: 0.35rem;
}

.table-widget__toolbar,
.compact-table__toolbar {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0;
}

.table-widget__toolbar > .toolbar-search,
.compact-table__toolbar > .toolbar-search {
    min-height: 2.25rem;
    height: 2.25rem;
    padding-block: 0.42rem;
}

.table-widget__meta,
.table-widget__actions {
    width: auto;
    margin-left: 0;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.table-filter-strip {
    align-items: center;
    gap: 0.35rem;
    margin: 0;
}

.table-filter__summary {
    min-width: 0;
    min-height: 2.15rem;
    padding: 0.32rem 0.58rem;
    border-radius: 0.7rem;
}

.easyclick-table-tools,
.easyclick-table-tools--inline {
    min-height: 0;
    margin: 0 0 0 auto;
    gap: 0.35rem;
}

.easyclick-column-menu summary {
    min-height: 2.15rem;
    padding: 0.32rem 0.58rem;
    border-radius: 0.7rem;
}

.chart-card--table {
    gap: 0.4rem;
    padding: clamp(0.58rem, 0.5rem + 0.2vw, 0.75rem);
}

.dashboard-grid--ops-tables .chart-card__head,
.chart-card--table .chart-card__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.45rem;
}

.dashboard-grid--ops-tables .chart-card__head .toolbar-actions,
.chart-card--table .chart-card__head .toolbar-actions {
    flex-wrap: nowrap;
    gap: 0.35rem;
}

.dashboard-grid--ops-tables .chart-card__head :is(.toolbar-button, .primary-button),
.chart-card--table .chart-card__head :is(.toolbar-button, .primary-button) {
    min-height: 2.15rem;
    padding: 0.4rem 0.65rem;
}

@media (max-width: 64rem) {
    .table-widget__toolbar,
    .compact-table__toolbar,
    .dashboard-grid--ops-tables .chart-card__head,
    .chart-card--table .chart-card__head {
        grid-template-columns: minmax(0, 1fr);
    }

    .table-widget__meta,
    .table-widget__actions,
    .dashboard-grid--ops-tables .chart-card__head .toolbar-actions,
    .chart-card--table .chart-card__head .toolbar-actions {
        flex-wrap: wrap;
    }
}

/* Keep the shared search clear action fully inside every search textbox. */
.search-field {
    position: relative;
    min-width: 0;
}

.search-field .toolbar-search {
    width: 100%;
    padding-right: 2.15rem;
}

.search-field > .search-field__clear,
.search-field .search-field__clear {
    position: absolute;
    top: 50%;
    right: 0.3rem;
    z-index: 2;
    width: 1.65rem;
    min-width: 1.65rem;
    height: 1.65rem;
    min-height: 1.65rem;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border-radius: 0.42rem;
}

.search-field .search-field__clear svg {
    width: 0.78rem;
    height: 0.78rem;
}

.search-field .search-field__clear[hidden] {
    display: none;
}

/* Final responsive table-toolbar authority. Compact desktop cards can be
   narrower than the viewport when the sidebar is open, so stack the search
   and action rows before their controls can escape the card. */
@media (max-width: 80rem) {
    .table-widget__toolbar,
    .compact-table__toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .table-widget__meta,
    .table-widget__actions,
    .compact-table__toolbar > .toolbar-actions {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* Authoritative light-theme treatment for the Infrastructure Snapshot flash
   cards. Keep these rules after the shared dark card skin in the cascade. */
:root[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card {
    color: #172033;
    background:
        radial-gradient(circle at 14% 50%, color-mix(in srgb, var(--dashboard-card-accent) 12%, transparent), transparent 6rem),
        linear-gradient(145deg, #ffffff 0%, #f5f8fc 100%) !important;
    border-color: color-mix(in srgb, var(--dashboard-card-accent) 32%, #d7dee8);
    box-shadow: inset 0 1px 0 #ffffff, 0 7px 18px rgba(33, 52, 76, 0.1);
}

:root[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card::after {
    opacity: 0.38;
}

:root[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card__label {
    color: color-mix(in srgb, var(--dashboard-card-accent) 72%, #26364d 28%);
}

:root[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card__value {
    color: #172033;
}

:root[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card__footer {
    color: #667085;
}

:root[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card:hover,
:root[data-theme="light"] .dashboard-flash-group--overview .dashboard-mini-card:focus-within {
    border-color: color-mix(in srgb, var(--dashboard-card-accent) 56%, #cbd5e1);
    box-shadow: inset 0 1px 0 #ffffff, 0 10px 24px color-mix(in srgb, var(--dashboard-card-accent) 13%, rgba(33, 52, 76, 0.13));
}

/* Compact Jira organization cards and keep every row on one predictable line. */
.jira-organization-groups {
    gap: 0.4rem;
    margin-top: 0;
}

.jira-organization-groups__heading {
    padding: 0.25rem 0.15rem 0.2rem;
}

.jira-organization-groups__grid {
    align-items: start;
    gap: 0.6rem;
}

.jira-organization-group-card {
    align-self: start;
    padding: 0.65rem;
}

.jira-organization-group-card .chart-card__head {
    min-height: 0;
    margin-bottom: 0.38rem;
    padding: 0;
}

.jira-organization-group-card__list {
    gap: 0.34rem;
    max-height: 20rem;
    padding: 0.05rem;
}

.jira-organization-group-row {
    grid-template-columns: 0.7rem minmax(0, 1fr) 2.6rem 2.5rem;
    grid-template-areas: "dot copy share count";
    gap: 0.45rem;
    min-height: 3rem;
    padding: 0.44rem 0.55rem;
}

.jira-organization-group-row > .legend-row__dot { grid-area: dot; }
.jira-organization-group-row__copy { grid-area: copy; }
.jira-organization-group-row__share { grid-area: share; justify-self: end; }
.jira-organization-group-row__count { grid-area: count; justify-self: end; min-width: 0; }

@media (max-width: 76rem) {
    .jira-organization-groups__grid {
        grid-template-columns: repeat(2, minmax(16rem, 1fr));
    }
}

@media (max-width: 48rem) {
    .jira-organization-groups__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Automation Center: compact, theme-safe, responsive workspace. */
.automation-center {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.automation-center__hero {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 94%, var(--brand) 6%), var(--panel-strong));
}

.automation-center__heading,
.automation-center__scope,
.automation-center__heading h3 {
    display: flex;
    align-items: center;
}

.automation-center__heading {
    justify-content: space-between;
    gap: 12px;
}

.automation-center__heading h3 {
    gap: 9px;
    margin: 2px 0 0;
}

.automation-center__heading .info-button {
    flex: 0 0 auto;
}

.automation-center__scope {
    flex-wrap: wrap;
    gap: 10px;
}

.automation-center__scope label {
    display: grid;
    gap: 4px;
    min-width: min(260px, 100%);
}

.automation-center__scope label > span {
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.automation-center__scope .toolbar-select {
    width: 100%;
    min-height: 42px;
}

.automation-center__scope .toolbar-button {
    align-self: end;
    min-height: 42px;
}

.automation-center__metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.automation-center__metrics article {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 13px 14px;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    background: var(--panel-strong);
    box-shadow: var(--shadow-soft);
}

.automation-center__metrics article > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 11px;
    color: var(--brand);
    background: var(--accent-soft);
}

.automation-center__metrics svg {
    width: 18px;
    height: 18px;
}

.automation-center__metrics small,
.automation-center__metrics strong {
    display: block;
}

.automation-center__metrics small {
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.automation-center__metrics strong {
    margin-top: 1px;
    color: var(--text);
    font-size: 1.35rem;
    line-height: 1;
}

.automation-center__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
    gap: 14px;
    min-width: 0;
}

.automation-center__grid > .content-card {
    min-width: 0;
    padding: 16px;
    overflow: hidden;
}

html[data-theme="light"] .automation-center__hero,
html[data-theme="light"] .automation-center__metrics article,
html[data-theme="light"] .automation-center__grid > .content-card {
    color: #142033;
    background-color: #fff;
}

@media (max-width: 1180px) {
    .automation-center__metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .automation-center__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .automation-center {
        gap: 10px;
    }
    .automation-center__hero,
    .automation-center__grid > .content-card {
        padding: 12px;
    }
    .automation-center__heading {
        align-items: flex-start;
    }
    .automation-center__scope,
    .automation-center__scope label,
    .automation-center__scope .toolbar-button {
        width: 100%;
    }
    .automation-center__metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .automation-center__metrics {
        grid-template-columns: 1fr;
    }
}
.automation-center__heading .status-pill svg,
.automation-center__runbar .toolbar-button svg {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px;
}

.automation-center__execution-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
}

.automation-center__selection-card {
    min-width: 0;
    padding: 16px;
    overflow: hidden;
}

.automation-center__selection-card .chart-card__head {
    gap: 12px;
    margin-bottom: 10px;
}

.automation-center__selection-card .toolbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.automation-center__table-wrap {
    max-height: 420px;
    overflow: auto;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
}

.automation-center__table-wrap table {
    min-width: 720px;
    margin: 0;
}

.automation-center__table-wrap thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--panel-strong);
}

.automation-center__table-wrap tr.is-selected td {
    background: color-mix(in srgb, var(--success) 10%, var(--panel-strong));
}

.automation-center__table-wrap input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand);
    cursor: pointer;
}

.automation-center__table-wrap .select-column {
    width: 42px;
    text-align: center;
}

.automation-center__table-wrap code {
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
}

.automation-center__runbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
}

.automation-center__runbar h3,
.automation-center__runbar p {
    margin-bottom: 0;
}

.automation-center__runbar .toolbar-button {
    flex: 0 0 auto;
    max-width: min(100%, 520px);
}

.automation-center__result {
    min-width: 0;
    overflow: visible;
}

/* Keep result summary badges compact. Bare SVGs have a large browser default
   size and can otherwise stretch this header until its labels are clipped. */
.automation-center__result > .chart-card__head {
    align-items: center;
    flex-wrap: wrap;
    min-width: 0;
}

.automation-center__result > .chart-card__head > div:first-child {
    flex: 1 1 16rem;
    min-width: 0;
}

.automation-center__result > .chart-card__head h3 {
    max-width: 100%;
    line-height: 1.3;
    overflow-wrap: anywhere;
    white-space: normal;
}

.automation-center__result > .chart-card__head > .toolbar-actions {
    flex: 1 1 30rem;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-end;
    gap: 0.4rem;
}

.automation-center__result > .chart-card__head .status-pill {
    min-height: 2rem;
    padding: 0.32rem 0.55rem;
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.automation-center__result > .chart-card__head .status-pill > svg {
    width: 0.95rem !important;
    min-width: 0.95rem !important;
    max-width: 0.95rem !important;
    height: 0.95rem !important;
    min-height: 0.95rem !important;
    max-height: 0.95rem !important;
    flex: 0 0 0.95rem;
}

.automation-center__execute-fab-shell {
    position: fixed;
    right: calc(6.8rem + env(safe-area-inset-right, 0px));
    bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px));
    z-index: 64;
    display: grid;
    justify-items: center;
    gap: 0.42rem;
    pointer-events: auto;
    touch-action: none;
    cursor: move;
    filter: drop-shadow(0 0.8rem 1.5rem color-mix(in srgb, #000 28%, transparent));
    padding: 0.46rem;
    border: 1px solid color-mix(in srgb, var(--brand) 58%, var(--panel-border));
    border-radius: 1.1rem;
    background: color-mix(in srgb, var(--panel-strong) 96%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.automation-center__execute-fab-shell.is-ready {
    border-color: color-mix(in srgb, var(--brand) 58%, var(--panel-border));
}

.automation-center__execute-fab-shell.is-success {
    border-color: color-mix(in srgb, var(--success) 68%, var(--panel-border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 13%, transparent), 0 0 1.1rem color-mix(in srgb, var(--success) 16%, transparent);
}

.automation-center__execute-fab-shell.has-failures {
    border-color: color-mix(in srgb, var(--danger) 72%, var(--panel-border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 14%, transparent), 0 0 1.1rem color-mix(in srgb, var(--danger) 18%, transparent);
}

.automation-center__execute-fab-shell.is-running {
    border-color: #60a5fa;
    animation: automation-center-execute-running-border 1.65s ease-in-out infinite;
}

.automation-center__execute-fab-close {
    position: absolute;
    top: -0.48rem;
    right: -0.48rem;
    z-index: 5;
    width: 1.35rem;
    min-width: 1.35rem;
    height: 1.35rem;
    min-height: 1.35rem;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--text-muted) 42%, var(--panel-border));
    border-radius: 50%;
    color: var(--text-muted);
    background: var(--panel-strong);
    box-shadow: 0 0.25rem 0.65rem color-mix(in srgb, #000 24%, transparent);
    cursor: pointer;
    touch-action: manipulation;
    pointer-events: auto;
}

.automation-center__execute-fab-close > svg {
    width: 0.68rem !important;
    height: 0.68rem !important;
}

.automation-center__execute-fab-close:hover,
.automation-center__execute-fab-close:focus-visible {
    color: var(--text);
    border-color: color-mix(in srgb, var(--brand) 58%, var(--panel-border));
}

.automation-center__execute-fab-shell > .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.automation-center__execute-fab-counts {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
}

.automation-center__execute-fab-counts > span {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    min-height: 1.55rem;
    padding: 0.26rem 0.48rem;
    border: 1px solid color-mix(in srgb, var(--success) 46%, var(--panel-border));
    border-radius: 999px;
    color: var(--text);
    background: color-mix(in srgb, var(--panel-strong) 94%, var(--success) 6%);
    box-shadow: 0 0.35rem 0.8rem color-mix(in srgb, #000 16%, transparent);
    white-space: nowrap;
}

.automation-center__execute-fab-counts i {
    display: inline-flex;
    color: var(--brand);
}

.automation-center__execute-fab-counts i > svg {
    width: 0.72rem !important;
    height: 0.72rem !important;
}

.automation-center__execute-fab-counts > span.is-pass {
    border-color: color-mix(in srgb, var(--success) 62%, var(--panel-border));
    background: color-mix(in srgb, var(--panel-strong) 88%, var(--success) 12%);
}

.automation-center__execute-fab-counts > span.is-pass i,
.automation-center__execute-fab-counts > span.is-pass strong {
    color: var(--success);
}

.automation-center__execute-fab-counts > span.is-fail {
    border-color: color-mix(in srgb, var(--danger) 62%, var(--panel-border));
    background: color-mix(in srgb, var(--panel-strong) 88%, var(--danger) 12%);
}

.automation-center__execute-fab-counts > span.is-fail i,
.automation-center__execute-fab-counts > span.is-fail strong {
    color: var(--danger);
}

.automation-center__execute-fab-counts strong {
    color: var(--success);
    font-size: 0.72rem;
    line-height: 1;
}

.automation-center__execute-fab-counts small {
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.automation-center__execute-fab {
    width: 4.8rem;
    min-width: 4.8rem;
    height: 4.8rem;
    min-height: 4.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.28rem;
    padding: 0.5rem;
    border: 1px solid color-mix(in srgb, #fff 36%, #22c55e);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #15803d 0%, #047857 100%);
    box-shadow: inset 0 0 0 0.2rem color-mix(in srgb, #fff 9%, transparent), 0 0.75rem 1.6rem color-mix(in srgb, #16a34a 38%, transparent);
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
    isolation: isolate;
    position: relative;
}

.automation-center__execute-fab-shell.is-dragging {
    user-select: none;
    cursor: grabbing;
    transition: none;
}

.automation-center__execute-fab-shell.is-dragging .automation-center__execute-fab {
    cursor: pointer;
    transform: none;
    transition: none;
}

.automation-center__execute-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
}

.automation-center__execute-icon > svg {
    width: 1.35rem !important;
    min-width: 1.35rem !important;
    max-width: 1.35rem !important;
    height: 1.35rem !important;
    min-height: 1.35rem !important;
    max-height: 1.35rem !important;
}

.automation-center__execute-fab > strong {
    position: relative;
    z-index: 2;
    font-size: 0.65rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.automation-center__execute-ring {
    position: absolute;
    z-index: 1;
    inset: -0.34rem;
    border-radius: 50%;
    pointer-events: none;
    background:
        conic-gradient(
            #bbf7d0 0 var(--automation-execute-progress, 0%),
            color-mix(in srgb, var(--panel-border) 72%, transparent) var(--automation-execute-progress, 0%) 100%
        );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.34rem), #000 calc(100% - 0.32rem));
    mask: radial-gradient(farthest-side, transparent calc(100% - 0.34rem), #000 calc(100% - 0.32rem));
    transition: background 220ms ease;
}

.automation-center__execute-fab:hover:not(:disabled),
.automation-center__execute-fab:focus-visible {
    transform: translateY(-2px) scale(1.035);
    box-shadow: inset 0 0 0 0.2rem color-mix(in srgb, #fff 13%, transparent), 0 1rem 2rem color-mix(in srgb, #16a34a 46%, transparent);
}

.automation-center__execute-fab:focus-visible {
    outline: 3px solid color-mix(in srgb, #22c55e 54%, #fff);
    outline-offset: 3px;
}

.automation-center__execute-fab:disabled {
    cursor: wait;
    opacity: 0.82;
}

.automation-center__execute-fab-shell.is-running .automation-center__execute-fab {
    animation: automation-center-execute-running-border 1.65s ease-in-out infinite;
    transform: none !important;
}

.automation-center__execute-fab-shell.is-running .automation-center__execute-fab-counts {
    padding: 0.28rem;
    border: 1px solid #60a5fa;
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
    animation: automation-center-execute-running-border 1.65s ease-in-out infinite;
}

.automation-center__custom-command {
    display: grid;
    gap: 0.65rem;
    margin: 0.2rem 0 0.75rem;
    padding: 0.8rem;
    border: 1px solid color-mix(in srgb, var(--success) 24%, var(--panel-border));
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--panel-strong) 94%, var(--success) 6%);
}

.automation-center__custom-command-launch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.6rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
    margin: 0.2rem 0 0.75rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--success) 24%, var(--panel-border));
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--panel-strong) 94%, var(--success) 6%);
}

.automation-center__custom-command-launch .automation-center__custom-command-head {
    flex: 1 1 auto;
    min-width: max-content;
    flex-wrap: nowrap;
    white-space: nowrap;
}

/* Only the launcher is a single line; the protected editor keeps its layout. */
.automation-center__custom-command-launch .automation-center__custom-command-head > div > span:last-child {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.automation-center__custom-command-launch .automation-center__custom-command-icon {
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
}

.automation-center__custom-command-launch .automation-ios-badge {
    flex: 0 0 auto;
    white-space: nowrap;
}

.automation-center__custom-command-open {
    flex: 0 0 auto;
    white-space: nowrap;
}

.automation-center__custom-command-open > strong {
    display: inline-grid;
    min-width: 1.45rem;
    height: 1.45rem;
    place-items: center;
    border-radius: 999px;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 15%, var(--panel));
}

.popup-window--automation-custom .popup-window__dialog {
    width: min(64rem, calc(100vw - 2rem));
}

.popup-window--automation-custom .popup-window__body {
    padding: 0.9rem;
}

.automation-center__custom-command--popup {
    margin: 0;
    padding: 0.95rem;
}

.automation-center__custom-command-policy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--success) 24%, var(--panel-border));
    border-radius: 0.75rem;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 8%, var(--panel));
}

.automation-center__custom-command-policy > svg {
    width: 1.1rem !important;
    height: 1.1rem !important;
}

.automation-center__custom-command-policy > span {
    display: grid;
    gap: 0.18rem;
}

.automation-center__custom-command-policy small {
    color: var(--text-muted);
    line-height: 1.5;
}

.automation-center__custom-command-head,
.automation-center__custom-command-head > div,
.automation-center__custom-command-head > div > span:last-child {
    display: flex;
    align-items: center;
}

.automation-center__custom-command-head {
    justify-content: space-between;
    gap: 0.75rem;
}

.automation-center__custom-command-head > div {
    gap: 0.55rem;
    min-width: 0;
}

.automation-center__custom-command-head > div > span:last-child {
    align-items: flex-start;
    flex-direction: column;
}

.automation-center__custom-command-head small {
    color: var(--text-muted);
}

.automation-center__custom-command-icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 0.65rem;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, transparent);
}

.automation-center__custom-command-icon > svg,
.automation-command-source--custom > svg {
    width: 1rem !important;
    height: 1rem !important;
}

.automation-center__custom-command-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: stretch;
}

.automation-center__custom-command-compose textarea {
    min-height: 3.6rem;
    resize: vertical;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.7rem;
    color: var(--text);
    background: var(--panel);
    font: 600 0.78rem/1.45 var(--font-mono, monospace);
}

.automation-command-source--custom {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 38%, var(--panel-border));
    background: color-mix(in srgb, var(--success) 12%, transparent);
}

.automation-center__sortable {
    position: relative;
}

.automation-center__sortable > button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    width: 100%;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.automation-center__sortable:is(:hover, :focus-visible),
.automation-center__sortable > button:is(:hover, :focus-visible) {
    color: var(--accent);
    outline: none;
}

.automation-center__result-table :is(.automation-result-status, .muted-copy, .toolbar-button) > svg,
.automation-center__result-table .status-pill > svg {
    width: 0.95rem !important;
    min-width: 0.95rem !important;
    max-width: 0.95rem !important;
    height: 0.95rem !important;
    min-height: 0.95rem !important;
    max-height: 0.95rem !important;
}

.automation-center__result-table .toolbar-button.compact {
    min-height: 1.9rem;
    padding: 0.28rem 0.5rem;
    font-size: 0.7rem;
}

.automation-center__current-output .automation-result-detail__output-icon {
    display: inline-grid;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    place-items: center;
}

.automation-center__current-output .automation-result-detail__output-icon > svg {
    width: 1rem !important;
    height: 1rem !important;
}

@media (max-width: 720px) {
    .automation-center__custom-command-compose {
        grid-template-columns: 1fr;
    }
}

.admin-ownership-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.9rem 0;
}

.admin-ownership-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    padding: 0.9rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.9rem;
    background: var(--panel);
}

.admin-ownership-card > span {
    display: inline-grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 0.7rem;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.admin-ownership-card > span > svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
}

.admin-ownership-card small,
.admin-ownership-card strong,
.admin-ownership-card p {
    display: block;
}

.admin-ownership-card small {
    color: var(--accent);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-ownership-card strong {
    margin-top: 0.18rem;
    color: var(--text);
}

.admin-ownership-card p {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.admin-ownership-card--tenant {
    border-color: color-mix(in srgb, var(--success) 28%, var(--panel-border));
}

.admin-ownership-card--inherited {
    border-color: color-mix(in srgb, var(--warning) 30%, var(--panel-border));
}

.admin-control-boundary {
    margin-top: 1rem;
    overflow: hidden;
}

.admin-control-boundary__table table {
    min-width: 920px;
}

.admin-control-boundary__table th:last-child,
.admin-control-boundary__table td:last-child {
    width: 9.5rem;
    white-space: nowrap;
}

.admin-control-boundary__name {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 13rem;
}

.admin-control-boundary__name i {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    color: var(--ds-primary);
    background: color-mix(in srgb, var(--ds-primary) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ds-primary) 30%, transparent);
    border-radius: 0.65rem;
}

.admin-control-boundary__name svg,
.admin-control-boundary .status-pill svg {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 960px) {
    .admin-ownership-grid {
        grid-template-columns: 1fr;
    }
}

@keyframes automation-center-execute-pulse {
    50% {
        filter: brightness(1.16);
        box-shadow:
            inset 0 0 0 0.2rem color-mix(in srgb, #fff 12%, transparent),
            0 0.85rem 1.8rem color-mix(in srgb, #16a34a 44%, transparent);
    }
}

@keyframes automation-center-execute-running-border {
    0%,
    100% {
        border-color: #60a5fa;
        filter: brightness(1);
        box-shadow: 0 0 0.7rem color-mix(in srgb, #60a5fa 34%, transparent);
    }
    34% {
        border-color: #fbbf24;
        filter: brightness(1.08);
        box-shadow: 0 0 1rem color-mix(in srgb, #fbbf24 38%, transparent);
    }
    68% {
        border-color: #4ade80;
        filter: brightness(1.12);
        box-shadow: 0 0 1rem color-mix(in srgb, #4ade80 40%, transparent);
    }
}

@media (max-width: 1180px) {
    .automation-center__execution-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .automation-center__runbar {
        align-items: stretch;
        flex-direction: column;
        padding: 12px;
    }
    .automation-center__runbar .toolbar-button {
        width: 100%;
        max-width: none;
    }
    .automation-center__selection-card .chart-card__head {
        align-items: flex-start;
        flex-direction: column;
    }
    .automation-center__selection-card .toolbar-actions {
        justify-content: flex-start;
        width: 100%;
    }
    .automation-center__result > .chart-card__head {
        align-items: flex-start;
        flex-direction: column;
    }
    .automation-center__result > .chart-card__head > .toolbar-actions {
        justify-content: flex-start;
        width: 100%;
    }
    .automation-center__execute-fab-shell {
        right: calc(5.75rem + env(safe-area-inset-right, 0px));
        bottom: calc(5.4rem + env(safe-area-inset-bottom, 0px));
    }
    .automation-center__execute-fab {
        width: 4.3rem;
        min-width: 4.3rem;
        height: 4.3rem;
        min-height: 4.3rem;
    }
    .automation-center__execute-fab-counts > span {
        padding-inline: 0.4rem;
    }
}
/* ServiceNow operational intelligence */
.servicenow-control-deck,
.servicenow-donut-card,
.servicenow-ranking-card,
.servicenow-ai-report,
.servicenow-rules-card {
    min-width: 0;
}

.servicenow-control-deck__filters,
.servicenow-table-controls,
.servicenow-pagination,
.servicenow-series__legend,
.servicenow-series__range {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.servicenow-control-deck__filters {
    justify-content: space-between;
}

.servicenow-control-deck__filters > label,
.servicenow-pagination label,
.servicenow-ranking-card .table-head > label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 700;
}

.servicenow-donut-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.servicenow-donut-card .integration-donut-layout {
    grid-template-columns: minmax(120px, .75fr) minmax(150px, 1.25fr);
}

.servicenow-donut-option {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 5px 7px;
    border-radius: 9px;
    color: var(--text-primary);
    cursor: pointer;
}

.servicenow-donut-option:hover {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.servicenow-donut-option input {
    inline-size: 16px;
    block-size: 16px;
    accent-color: var(--accent-primary);
}

.servicenow-donut-option i,
.servicenow-series__legend i {
    inline-size: 10px;
    block-size: 10px;
    border-radius: 999px;
    background: var(--legend-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--legend-color) 20%, transparent);
}

.servicenow-glossary-inline {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: .74rem;
}

.servicenow-glossary-inline summary,
.servicenow-glossary summary {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-weight: 800;
    color: var(--accent-primary);
}

.servicenow-glossary-inline summary svg,
.servicenow-glossary summary svg,
.servicenow-icon-label svg {
    inline-size: 16px;
    block-size: 16px;
    flex: 0 0 auto;
}

.servicenow-series svg {
    display: block;
    width: 100%;
    height: clamp(170px, 23vw, 250px);
    overflow: visible;
}

.servicenow-series__axis {
    stroke: var(--border-strong);
    stroke-width: 1.5;
}

.servicenow-series__legend {
    justify-content: center;
}

.servicenow-series__legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-muted);
    font-size: .78rem;
}

.servicenow-series__range {
    justify-content: space-between;
    color: var(--text-muted);
    font-size: .72rem;
}

.servicenow-icon-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.servicenow-table-controls {
    margin: 10px 0;
}

.servicenow-table-controls .toolbar-search {
    flex: 1 1 270px;
    min-width: 180px;
}

.servicenow-table-controls .toolbar-select {
    flex: 0 1 180px;
    min-width: 130px;
}

.servicenow-detail-row {
    cursor: pointer;
}

.servicenow-detail-row:hover {
    background: color-mix(in srgb, var(--accent-primary) 8%, var(--surface-raised));
}

.servicenow-pagination {
    justify-content: flex-end;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: .78rem;
}

.servicenow-ai-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.servicenow-ai-grid > div {
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface-raised);
}

.servicenow-ai-grid h4 {
    margin: 0 0 8px;
}

.servicenow-ai-grid ul {
    margin: 0;
    padding-left: 19px;
}

.servicenow-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.servicenow-rule {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: end;
    gap: 9px;
    padding: 11px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--surface-raised);
}

.servicenow-rule > label:first-of-type {
    display: grid;
    gap: 5px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 800;
}

.servicenow-rule__toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 38px;
    color: var(--text-muted);
    font-size: .76rem;
}

.servicenow-rule > small {
    grid-column: 1 / -1;
    color: var(--text-muted);
}

.servicenow-glossary > div,
.servicenow-drawer-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.servicenow-glossary article,
.servicenow-drawer-facts article {
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    background: var(--surface-raised);
}

.servicenow-glossary p {
    margin: 5px 0 0;
    color: var(--text-muted);
}

.servicenow-drawer-hero {
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 35%, var(--border-soft));
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 13%, var(--surface-raised)), var(--surface-raised));
}

.servicenow-drawer-hero h3 {
    margin: 5px 0 12px;
}

.servicenow-drawer-hero > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.servicenow-drawer-facts article {
    display: grid;
    gap: 4px;
}

.servicenow-drawer-facts small,
.servicenow-drawer-facts span {
    color: var(--text-muted);
}

body[data-theme="light"] .integration-analytics-dashboard--servicenow .integration-kpi-card,
body[data-theme="light"] .integration-analytics-dashboard--servicenow .servicenow-metric-grid > article {
    color: #172033;
    background: linear-gradient(145deg, #ffffff, #f3f6fb);
    border-color: #cfd8e6;
    box-shadow: 0 8px 22px rgba(37, 55, 82, .08);
}

body[data-theme="light"] .integration-analytics-dashboard--servicenow .integration-kpi-card strong,
body[data-theme="light"] .integration-analytics-dashboard--servicenow .integration-kpi-card em,
body[data-theme="light"] .integration-analytics-dashboard--servicenow .servicenow-metric-grid strong,
body[data-theme="light"] .integration-analytics-dashboard--servicenow .servicenow-metric-grid em {
    color: #172033;
}

@media (max-width: 1180px) {
    .servicenow-donut-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .servicenow-ai-grid,
    .servicenow-glossary > div,
    .servicenow-drawer-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .servicenow-donut-grid,
    .servicenow-ai-grid,
    .servicenow-rule-grid,
    .servicenow-glossary > div,
    .servicenow-drawer-facts {
        grid-template-columns: 1fr;
    }
    .servicenow-donut-card .integration-donut-layout {
        grid-template-columns: 1fr;
    }
    .servicenow-control-deck__filters,
    .servicenow-table-controls {
        align-items: stretch;
        flex-direction: column;
    }
    .servicenow-control-deck__filters > *,
    .servicenow-table-controls > *,
    .servicenow-table-controls .toolbar-search,
    .servicenow-table-controls .toolbar-select {
        width: 100%;
        min-width: 0;
    }
    .servicenow-pagination {
        justify-content: center;
    }
    .servicenow-rule {
        grid-template-columns: 1fr auto;
    }
    .servicenow-rule > label:first-of-type {
        grid-column: 1 / -1;
    }
}

/* Compact ServiceNow selection, navigation, pagination, and detail controls. */
.jira-workflow__tab {
    position: relative;
}

.jira-workflow__tab-check {
    position: absolute;
    top: 0.38rem;
    left: 0.38rem;
    z-index: 2;
    display: grid !important;
    width: 1.18rem;
    height: 1.18rem;
    min-width: 1.18rem !important;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--jira-tab-accent) 70%, #ffffff);
    border-radius: 999px;
    color: #ffffff;
    background: var(--jira-tab-accent);
    box-shadow: 0 3px 9px color-mix(in srgb, var(--jira-tab-accent) 34%, transparent);
}

.jira-workflow__tab-check svg {
    width: 0.78rem !important;
    height: 0.78rem !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.metric-card {
    position: relative;
}

.metric-card__selected {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    z-index: 2;
    display: grid;
    width: 1.28rem;
    height: 1.28rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--jira-status-color, var(--brand-500)) 70%, #ffffff);
    border-radius: 999px;
    color: #ffffff;
    background: var(--jira-status-color, var(--brand-500));
    box-shadow: 0 3px 9px color-mix(in srgb, var(--jira-status-color, var(--brand-500)) 30%, transparent);
}

.metric-card__selected svg {
    width: 0.82rem !important;
    height: 0.82rem !important;
}

.servicenow-header-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    padding: 0.18rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel-soft);
}

.servicenow-tiny-action,
.servicenow-page-button {
    width: 1.9rem !important;
    height: 1.9rem !important;
    min-width: 1.9rem !important;
    min-height: 1.9rem !important;
    padding: 0.42rem !important;
    border-radius: 999px !important;
}

.servicenow-tiny-action svg,
.servicenow-page-button svg {
    width: 0.88rem !important;
    height: 0.88rem !important;
    min-width: 0.88rem !important;
}

.servicenow-page-button.is-double {
    width: 2.1rem !important;
    min-width: 2.1rem !important;
    padding-inline: 0.28rem !important;
}

.servicenow-page-button.is-double svg + svg {
    margin-left: -0.48rem;
}

.servicenow-pagination {
    justify-content: space-between;
    margin-top: 0.55rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--panel-border);
}

.servicenow-pagination__buttons {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
}

.servicenow-pagination .toolbar-select {
    width: auto;
    min-width: 4rem;
    min-height: 1.9rem;
    height: 1.9rem;
    padding: 0.2rem 1.35rem 0.2rem 0.45rem;
    font-size: 0.75rem;
}

.servicenow-engineer-report-launcher {
    align-items: center;
    flex-wrap: wrap;
    gap: 0.38rem;
}

.servicenow-engineer-report-launcher .toolbar-select {
    width: min(15rem, 42vw);
    min-height: 2rem;
}

#detailDrawer[data-detail-mode^="servicenow"] .servicenow-drawer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin: 0.7rem 0;
}

#detailDrawer[data-detail-mode^="servicenow"] .servicenow-drawer-actions .toolbar-button {
    display: inline-flex;
    width: auto;
    min-width: 0;
    min-height: 2.2rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    padding: 0.42rem 0.62rem;
    border-radius: 0.65rem;
    font-size: 0.75rem;
}

#detailDrawer[data-detail-mode^="servicenow"] .servicenow-drawer-actions .toolbar-button svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    max-width: 1rem !important;
    flex: 0 0 1rem;
}

.servicenow-engineer-report__hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.servicenow-engineer-report__hero .eyebrow svg,
.servicenow-engineer-report__finding h4 svg {
    width: 1rem !important;
    height: 1rem !important;
}

.servicenow-engineer-report__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.servicenow-engineer-report__metrics > article {
    min-height: 5rem;
}

.servicenow-engineer-report__mix {
    margin-top: 0.75rem;
    padding: 0.8rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.85rem;
    background: var(--panel-soft);
}

.servicenow-engineer-report__mix-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.servicenow-engineer-report__mix-grid span {
    display: grid;
    gap: 0.15rem;
    padding: 0.55rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.7rem;
    color: var(--text-muted);
    background: var(--panel);
    font-size: 0.72rem;
}

.servicenow-engineer-report__mix-grid strong {
    color: var(--text-strong);
    font-size: 1rem;
}

.servicenow-engineer-report__findings {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.servicenow-engineer-report__finding {
    padding: 0.75rem;
    border: 1px solid var(--panel-border);
    border-left: 3px solid var(--brand-500);
    border-radius: 0.8rem;
    background: var(--panel-soft);
}

.servicenow-engineer-report__finding.is-success { border-left-color: var(--success); }
.servicenow-engineer-report__finding.is-danger { border-left-color: var(--danger); }
.servicenow-engineer-report__finding h4 { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.45rem; }
.servicenow-engineer-report__finding ul { margin: 0; padding-left: 1.15rem; }

@media (max-width: 760px) {
    .servicenow-pagination {
        justify-content: center;
        gap: 0.45rem;
    }
    .servicenow-pagination > span:first-child {
        width: 100%;
        text-align: center;
    }
    .servicenow-engineer-report-launcher,
    .servicenow-engineer-report-launcher .toolbar-select {
        width: 100%;
    }
    .servicenow-engineer-report__metrics,
    .servicenow-engineer-report__mix-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ServiceNow multi-change implementation readiness review. */
.servicenow-change-review-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin: 0.55rem 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 28%, var(--panel-border));
    border-radius: 0.8rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 8%, var(--panel)), var(--panel-soft));
}

.servicenow-change-review-bar > div,
.servicenow-change-review-bar > div > span:last-child {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
}

.servicenow-change-review-bar > div > span:last-child {
    display: grid;
    gap: 0.05rem;
}

.servicenow-change-review-bar small {
    color: var(--text-muted);
    font-size: 0.69rem;
}

.servicenow-change-review-bar__icon {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 1.8rem;
    place-items: center;
    border-radius: 0.55rem;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-500), #7c3aed);
}

.servicenow-change-review-bar__icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.servicenow-select-column {
    width: 2.2rem;
    min-width: 2.2rem;
    text-align: center;
}

.servicenow-select-column input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--brand-500);
    cursor: pointer;
}

.servicenow-detail-row.is-selected {
    background: color-mix(in srgb, var(--brand-500) 16%, var(--panel)) !important;
    box-shadow: inset 0.2rem 0 0 var(--brand-500);
}

.servicenow-change-review-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.servicenow-change-review-hero .eyebrow svg,
.servicenow-change-review-item .status-pill svg {
    width: 0.95rem !important;
    height: 0.95rem !important;
}

.detail-drawer[data-detail-mode="servicenow-change-evaluation"] .detail-drawer__panel {
    width: min(72rem, calc(100% - 0.5rem));
}

.detail-drawer[data-detail-mode="servicenow-change-evaluation"] .detail-drawer__content {
    scroll-behavior: smooth;
}

.servicenow-change-cover,
.servicenow-change-review-item {
    scroll-margin-top: 1rem;
}

.servicenow-change-cover {
    position: relative;
    overflow: hidden;
    padding: clamp(1.1rem, 2.2vw, 1.8rem);
    background:
        radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent-primary) 24%, transparent), transparent 35%),
        linear-gradient(145deg, color-mix(in srgb, var(--accent-primary) 14%, var(--surface-raised)), var(--surface-raised));
}

.servicenow-change-cover::after {
    content: "";
    position: absolute;
    right: -3rem;
    bottom: -4.5rem;
    width: 13rem;
    height: 13rem;
    border: 1.5rem solid color-mix(in srgb, var(--accent-primary) 8%, transparent);
    border-radius: 50%;
    pointer-events: none;
}

.servicenow-change-cover__top {
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: space-between;
}

.servicenow-change-cover__top > span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--accent-primary) 28%, var(--panel-border));
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.servicenow-change-cover__top > span svg {
    width: 0.78rem;
    height: 0.78rem;
}

.servicenow-change-cover__decision {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1rem;
}

.servicenow-change-cover__decision > span {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 2.8rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 42%, var(--panel-border));
    border-radius: 0.85rem;
    color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 13%, var(--panel));
}

.servicenow-change-cover__decision > span svg {
    width: 1.35rem;
    height: 1.35rem;
}

.servicenow-change-cover__decision.is-success > span { color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--panel)); }
.servicenow-change-cover__decision.is-warning > span { color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--panel)); }
.servicenow-change-cover__decision.is-danger > span { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--panel)); }

.servicenow-change-cover__decision small {
    display: block;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.servicenow-change-cover__decision h3 {
    position: relative;
    z-index: 1;
    margin: 0.15rem 0 0;
    font-size: clamp(1.45rem, 2.7vw, 2rem);
    line-height: 1.1;
}

.servicenow-change-cover__direction {
    position: relative;
    z-index: 1;
    max-width: 58rem;
    margin: 0.8rem 0 0 !important;
    color: var(--text-strong) !important;
    font-size: 0.9rem !important;
    line-height: 1.55;
}

.servicenow-change-cover__meta,
.servicenow-change-cover__counts {
    position: relative;
    z-index: 1;
    display: grid !important;
    gap: 0.5rem !important;
    margin-top: 1rem;
}

.servicenow-change-cover__meta {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.servicenow-change-cover__meta > span,
.servicenow-change-cover__counts > span {
    display: grid;
    gap: 0.12rem 0.6rem;
    min-width: 0;
    padding: 0.7rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.75rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand-500) 5%, var(--panel)), var(--panel));
    color: var(--text-muted);
    font-size: 0.74rem;
}

.servicenow-change-cover__meta > span {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.servicenow-change-cover__meta small,
.servicenow-change-cover__meta strong {
    grid-column: 2;
}

.servicenow-change-cover__meta strong {
    overflow: hidden;
    color: var(--text-strong);
    font-size: 0.86rem;
    line-height: 1.3;
    text-overflow: ellipsis;
}

.servicenow-change-cover__counts {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.servicenow-change-cover__counts > span {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.servicenow-change-cover__counts > span > i,
.servicenow-flash-card__icon {
    display: grid;
    grid-row: 1 / span 2;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.62rem;
    color: var(--brand-500);
    background: color-mix(in srgb, currentColor 12%, var(--panel));
    font-style: normal;
}

.servicenow-change-cover__counts > span > i svg,
.servicenow-flash-card__icon svg {
    width: 1rem;
    height: 1rem;
}

.servicenow-change-cover__counts > span > span {
    display: grid;
}

.servicenow-change-cover__counts strong {
    font-size: 1.15rem;
    line-height: 1;
}

.servicenow-change-cover__counts small {
    margin-top: 0.18rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 750;
}

.servicenow-change-cover__counts .success strong { color: var(--success); }
.servicenow-change-cover__counts .warning strong { color: var(--warning); }
.servicenow-change-cover__counts .info strong { color: var(--brand-500); }
.servicenow-change-cover__counts .danger strong { color: var(--danger); }

.servicenow-change-cover__guardrail {
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.9rem !important;
    padding-top: 0.75rem;
    border-top: 1px solid var(--panel-border);
}

.servicenow-change-cover__guardrail svg {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    color: var(--brand-500);
}

.servicenow-change-history-status {
    position: relative;
    z-index: 1;
    display: inline-flex !important;
    align-items: center;
    gap: 0.35rem;
    margin: 0.65rem 0 0 !important;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-muted) !important;
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    font-size: 0.67rem !important;
}

.servicenow-change-history-status.is-saved {
    border-color: color-mix(in srgb, var(--success) 38%, var(--panel-border));
    color: var(--success) !important;
}

.servicenow-change-history-status.is-warning {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--panel-border));
    color: var(--warning) !important;
}

.servicenow-change-history-status svg,
.servicenow-change-stepper svg {
    width: 0.85rem;
    height: 0.85rem;
}

.servicenow-change-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-right: auto;
    padding: 0.18rem 0.28rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: var(--panel-soft);
}

.servicenow-change-stepper > span {
    min-width: 3rem;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-align: center;
}

.servicenow-performance-policy {
    display: grid;
    gap: 0.75rem;
    margin: 0.8rem 0;
    padding: 0.85rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 34%, var(--panel-border));
    border-radius: 0.9rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 7%, var(--panel)), var(--panel-soft));
}

.servicenow-performance-policy > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.servicenow-performance-policy > header > div {
    display: grid;
    gap: 0.1rem;
}

.servicenow-performance-policy h4,
.servicenow-performance-policy p {
    margin: 0;
}

.servicenow-performance-policy small {
    color: var(--text-muted);
}

.servicenow-performance-policy > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(8rem, 1fr));
    gap: 0.55rem;
}

.servicenow-performance-policy label {
    display: grid;
    gap: 0.3rem;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.servicenow-weight-input {
    position: relative;
}

.servicenow-weight-input input {
    width: 100%;
    padding-right: 1.8rem;
}

.servicenow-weight-input em {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-style: normal;
}

.servicenow-performance-policy > button {
    justify-self: start;
}

.servicenow-change-toc {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.85rem;
    padding: 0.8rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.95rem;
    background: var(--panel-soft);
}

.servicenow-change-toc > header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0 0.2rem 0.4rem;
}

.servicenow-change-toc h3,
.servicenow-change-toc p {
    margin: 0;
}

.servicenow-change-toc > header > span {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.servicenow-change-toc > a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.7rem;
    color: var(--text-strong);
    background: var(--panel);
    text-decoration: none;
}

.servicenow-change-toc > a:hover,
.servicenow-change-toc > a:focus-visible {
    border-color: color-mix(in srgb, var(--brand-500) 55%, var(--panel-border));
    background: color-mix(in srgb, var(--brand-500) 8%, var(--panel));
}

.servicenow-change-toc > a > span,
.servicenow-change-section-index {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 0.5rem;
    color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 12%, var(--panel));
    font-size: 0.66rem;
    font-weight: 850;
}

.servicenow-change-toc > a > strong {
    overflow: hidden;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.servicenow-change-toc > a > em {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-style: normal;
}

.servicenow-change-direction {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    margin-top: 0.65rem;
    padding: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 42%, var(--panel-border));
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--brand-500) 7%, var(--panel));
}

.servicenow-change-direction > span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.62rem;
    color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 14%, var(--panel));
}

.servicenow-change-direction > span svg,
.servicenow-change-attachment__icon svg,
.servicenow-change-attachment__matches svg,
.servicenow-change-attachment a svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
}

.servicenow-change-direction small,
.servicenow-change-direction strong {
    display: block;
}

.servicenow-change-direction small {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 750;
    text-transform: uppercase;
}

.servicenow-change-direction strong {
    margin-top: 0.15rem;
    font-size: 0.88rem;
}

.servicenow-change-direction p {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.48;
}

.servicenow-change-direction.is-success { border-color: color-mix(in srgb, var(--success) 48%, var(--panel-border)); }
.servicenow-change-direction.is-warning { border-color: color-mix(in srgb, var(--warning) 48%, var(--panel-border)); }
.servicenow-change-direction.is-danger { border-color: color-mix(in srgb, var(--danger) 48%, var(--panel-border)); }

.servicenow-change-attachment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.55rem;
}

.servicenow-change-attachment {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.55rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.75rem;
    background: var(--panel);
}

.servicenow-change-attachment.is-checked {
    border-color: color-mix(in srgb, var(--success) 42%, var(--panel-border));
}

.servicenow-change-attachment__icon {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.58rem;
    color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 12%, var(--panel-soft));
}

.servicenow-change-attachment header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.servicenow-change-attachment header strong {
    overflow-wrap: anywhere;
    font-size: 0.78rem;
}

.servicenow-change-attachment header span,
.servicenow-change-attachment small {
    color: var(--text-muted);
    font-size: 0.66rem;
}

.servicenow-change-attachment p {
    margin: 0.28rem 0 0;
    color: var(--text-muted);
    font-size: 0.71rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.servicenow-change-attachment__matches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    margin-top: 0.4rem;
}

.servicenow-change-attachment__matches > span {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.22rem 0.38rem;
    border-radius: 999px;
    color: var(--success);
    background: color-mix(in srgb, var(--success) 11%, var(--panel-soft));
    font-size: 0.62rem;
    font-weight: 750;
}

.servicenow-change-attachment a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.45rem;
    color: var(--brand-500);
    font-size: 0.68rem;
    font-weight: 750;
    text-decoration: none;
}

.servicenow-formatted-evidence {
    margin-top: 0.5rem;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.servicenow-formatted-evidence > strong,
.servicenow-formatted-evidence h5 {
    display: block;
    margin: 0.65rem 0 0.25rem;
    color: var(--text-strong);
    font-size: 0.77rem;
}

.servicenow-formatted-evidence p {
    margin: 0.22rem 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.servicenow-formatted-evidence code,
.servicenow-command-review code {
    padding: 0.12rem 0.3rem;
    border: 1px solid color-mix(in srgb, var(--brand-500) 22%, var(--panel-border));
    border-radius: 0.32rem;
    color: var(--text-strong);
    background: color-mix(in srgb, var(--brand-500) 7%, var(--panel-soft));
    font-family: "Cascadia Code", Consolas, monospace;
    font-size: 0.7rem;
    overflow-wrap: anywhere;
}

.servicenow-evidence-spacer {
    display: block;
    height: 0.32rem;
}

.servicenow-evidence-step,
.servicenow-evidence-bullet {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.42rem;
    margin: 0.32rem 0;
}

.servicenow-evidence-step > span {
    display: inline-grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 0.38rem;
    color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 12%, var(--panel-soft));
    font-size: 0.62rem;
    font-weight: 850;
}

.servicenow-evidence-bullet > span {
    width: 0.36rem;
    height: 0.36rem;
    margin: 0.48rem 0.45rem;
    border-radius: 50%;
    background: var(--brand-500);
}

.servicenow-quality-grid,
.servicenow-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.48rem;
    margin-top: 0.55rem;
}

.servicenow-quality-check,
.servicenow-reference-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    min-width: 0;
    padding: 0.62rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.7rem;
    background: var(--panel);
}

.servicenow-quality-check > span,
.servicenow-reference-card > span {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 0.5rem;
    color: var(--brand-500);
    background: color-mix(in srgb, var(--brand-500) 11%, var(--panel-soft));
}

.servicenow-quality-check > span svg,
.servicenow-reference-card > span svg {
    width: 0.82rem !important;
    height: 0.82rem !important;
}

.servicenow-quality-check.is-pass,
.servicenow-reference-card.is-verified {
    border-color: color-mix(in srgb, var(--success) 38%, var(--panel-border));
}

.servicenow-quality-check.is-fail {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--panel-border));
}

.servicenow-quality-check.is-warning,
.servicenow-reference-card.is-review {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--panel-border));
}

.servicenow-quality-check header,
.servicenow-reference-card header,
.servicenow-command-review > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.servicenow-quality-check header strong,
.servicenow-reference-card header strong {
    font-size: 0.75rem;
}

.servicenow-quality-check header em,
.servicenow-reference-card header em {
    color: var(--text-muted);
    font-size: 0.62rem;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}

.servicenow-quality-check p,
.servicenow-quality-check small,
.servicenow-reference-card p,
.servicenow-reference-card small {
    display: block;
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.69rem;
    line-height: 1.43;
}

.servicenow-reference-card h5 {
    margin: 0.32rem 0 0;
    font-size: 0.75rem;
}

.servicenow-reference-card a {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-top: 0.4rem;
    color: var(--brand-500);
    font-size: 0.66rem;
    font-weight: 750;
    text-decoration: none;
}

.servicenow-reference-card a svg {
    width: 0.78rem !important;
    height: 0.78rem !important;
}

.servicenow-command-review {
    margin-top: 0.65rem;
    padding: 0.65rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.75rem;
    background: var(--panel-soft);
}

.servicenow-command-review > header h4,
.servicenow-command-review > header p {
    margin: 0;
}

.servicenow-command-review > header > span {
    color: var(--text-muted);
    font-size: 0.68rem;
}

.servicenow-command-review > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
    margin-top: 0.5rem;
}

.servicenow-command-review > div > article {
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.6rem;
    background: var(--panel);
}

.servicenow-command-review > div > article > span,
.servicenow-command-review > div > article > p {
    display: block;
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-size: 0.66rem;
    line-height: 1.4;
}

.servicenow-command-review > .notice-card {
    margin: 0.55rem 0 0;
    font-size: 0.68rem;
}

.servicenow-change-review-hero > p:last-child {
    margin: 0.7rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.servicenow-change-review-item {
    margin-top: 0.8rem;
    padding: 0.8rem;
    border: 1px solid var(--panel-border);
    border-left: 0.25rem solid var(--brand-500);
    border-radius: 0.9rem;
    background: var(--panel-soft);
}

.servicenow-change-review-item.is-success { border-left-color: var(--success); }
.servicenow-change-review-item.is-warning { border-left-color: var(--warning); }
.servicenow-change-review-item.is-danger { border-left-color: var(--danger); }

.servicenow-change-review-item > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.65rem;
}

.servicenow-change-review-item > header h3 {
    margin: 0.22rem 0 0;
    font-size: 0.98rem;
    line-height: 1.35;
}

.servicenow-change-review-item > header > div:last-child {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.servicenow-change-review-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.65rem;
}

.servicenow-change-review-facts > span {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    align-items: center;
    gap: 0.12rem 0.55rem;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.65rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--brand-500) 4%, var(--panel)), var(--panel));
}

.servicenow-change-review-facts > span > small,
.servicenow-change-review-facts > span > strong,
.servicenow-change-review-facts > span > em,
.servicenow-change-review-facts > span > .servicenow-semantic-label {
    grid-column: 2;
}

.servicenow-change-review-facts .servicenow-flash-card__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.servicenow-change-review-facts small,
.servicenow-change-review-facts em {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-style: normal;
    text-overflow: ellipsis;
}

.servicenow-change-review-facts strong,
.servicenow-change-review-facts .servicenow-semantic-label {
    font-size: 0.84rem;
}

.servicenow-change-review-item[data-record-type="incident"] .servicenow-change-quality + details,
.servicenow-change-review-item[data-record-type="problem"] .servicenow-change-quality + details,
.servicenow-change-review-item[data-record-type="incident"] .servicenow-change-documents,
.servicenow-change-review-item[data-record-type="problem"] .servicenow-change-documents,
.servicenow-change-review-item[data-record-type="incident"] .servicenow-change-references,
.servicenow-change-review-item[data-record-type="problem"] .servicenow-change-references {
    display: none;
}

.detail-drawer[data-detail-mode="servicenow-change-evaluation"] .detail-drawer__head .eyebrow {
    font-size: 0;
}

.detail-drawer[data-detail-mode="servicenow-change-evaluation"] .detail-drawer__head .eyebrow::after {
    content: "AI EVIDENCE REVIEW";
    font-size: 0.7rem;
}

.servicenow-change-review-columns,
.servicenow-change-evidence {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.servicenow-change-review-columns > section,
.servicenow-change-evidence > section {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.7rem;
    background: var(--panel);
}

.servicenow-change-review-columns h4,
.servicenow-change-evidence h4 {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
}

.servicenow-change-review-columns ul {
    margin: 0;
    padding-left: 1.05rem;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.servicenow-change-review-item details {
    margin-top: 0.65rem;
}

.servicenow-change-review-item summary {
    color: var(--brand-500);
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.servicenow-change-audit .notice-card {
    margin: 0.5rem 0;
}

.servicenow-change-audit .table-wrap {
    margin-top: 0.5rem;
    max-height: 18rem;
}

.servicenow-change-audit th,
.servicenow-change-audit td {
    padding: 0.48rem 0.55rem;
    font-size: 0.72rem;
}

.servicenow-change-evidence p {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.76rem;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.servicenow-change-evidence p strong {
    display: block;
    margin-bottom: 0.12rem;
    color: var(--text-strong);
}

@media (max-width: 760px) {
    .servicenow-change-review-bar,
    .servicenow-change-review-item > header {
        align-items: stretch;
        flex-direction: column;
    }
    .servicenow-change-review-bar .toolbar-actions,
    .servicenow-change-review-item > header > div:last-child {
        justify-content: flex-start;
    }
    .servicenow-change-review-facts,
    .servicenow-change-review-columns,
    .servicenow-change-evidence,
    .servicenow-change-toc,
    .servicenow-change-attachment-grid,
    .servicenow-quality-grid,
    .servicenow-reference-grid,
    .servicenow-command-review > div,
    .servicenow-change-cover__meta,
    .servicenow-change-cover__counts {
        grid-template-columns: 1fr;
    }
    .detail-drawer[data-detail-mode="servicenow-change-evaluation"] .detail-drawer__panel {
        width: 100%;
        border-radius: 0;
    }
    .servicenow-change-toc > a {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .servicenow-change-toc > a > em {
        grid-column: 2;
    }
    .servicenow-change-cover__top {
        align-items: flex-start;
        flex-direction: column;
    }
    .servicenow-performance-policy > div {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .servicenow-drawer-actions {
        justify-content: flex-start;
    }
    .servicenow-change-stepper {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .servicenow-performance-policy > div {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1080px) {
    .integration-workspace__readiness {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    .integration-workspace__readiness {
        grid-template-columns: 1fr !important;
    }
    .servicenow-change-cover {
        padding: 0.9rem;
    }
    .servicenow-change-cover__decision > span {
        width: 2.35rem;
        height: 2.35rem;
        flex-basis: 2.35rem;
    }
}

/* -------------------------------------------------------------------------
   Production UI density and control integrity

   Shared component guardrails keep dynamically rendered workspaces compact,
   readable and predictable. Direct SVG children are explicitly sized because
   an SVG without width/height otherwise uses its large browser intrinsic size.
   ------------------------------------------------------------------------- */
:root {
    --easyclick-density-gap: clamp(0.5rem, 0.42rem + 0.2vw, 0.72rem);
    --easyclick-density-padding: clamp(0.62rem, 0.52rem + 0.28vw, 0.9rem);
    --easyclick-compact-control: 2.25rem;
    --easyclick-action-icon: 1rem;
}

.content-stage {
    gap: var(--easyclick-density-gap);
    padding: var(--easyclick-density-gap);
}

.content-stage :is(.content-card, .chart-card, .table-shell) {
    min-width: 0;
}

.content-stage > :is(.content-card, .chart-card, .table-shell),
.content-stage .integration-workspace > :is(.content-card, .chart-card) {
    padding: var(--easyclick-density-padding);
}

:is(.table-head, .chart-card__head) {
    gap: var(--easyclick-density-gap);
    margin-bottom: var(--easyclick-density-gap);
}

:is(.toolbar-row, .toolbar-actions, .filter-grid) {
    gap: 0.5rem;
}

:is(.primary-button, .secondary-button, .toolbar-button, .icon-button) {
    min-height: var(--easyclick-compact-control);
}

:is(.primary-button, .secondary-button, .toolbar-button) {
    gap: 0.42rem;
    padding: 0.42rem 0.68rem;
    font-size: 0.8125rem;
    line-height: 1.2;
}

.icon-button,
.icon-button--inline {
    width: var(--easyclick-compact-control);
    min-width: var(--easyclick-compact-control);
    height: var(--easyclick-compact-control);
    min-height: var(--easyclick-compact-control);
    padding: 0.56rem;
}

:is(.primary-button, .secondary-button, .toolbar-button, .icon-button) > svg,
:is(.primary-button, .secondary-button, .toolbar-button, .icon-button) > .toolbar-button__icon > svg {
    width: var(--easyclick-action-icon) !important;
    min-width: var(--easyclick-action-icon) !important;
    max-width: var(--easyclick-action-icon) !important;
    height: var(--easyclick-action-icon) !important;
    min-height: var(--easyclick-action-icon) !important;
    max-height: var(--easyclick-action-icon) !important;
    flex: 0 0 var(--easyclick-action-icon);
}

.topbar :is(.icon-button, .icon-button--inline, .topbar-utility-button--circle) {
    width: var(--easyclick-compact-control);
    min-width: var(--easyclick-compact-control);
    height: var(--easyclick-compact-control);
    min-height: var(--easyclick-compact-control);
}

.topbar .topbar-utility-button--circle .topbar-utility-button__icon svg,
.topbar :is(.icon-button, .icon-button--inline) svg {
    width: var(--easyclick-action-icon);
    height: var(--easyclick-action-icon);
}

.content-stage .muted-copy,
.content-stage small,
.content-stage :is(th, td) {
    font-size: 12px;
    line-height: 1.4;
}

.content-stage :is(.muted-copy, small, label) {
    font-size: max(12px, 0.75rem) !important;
}

.content-stage :is(input, select, textarea) {
    font-size: max(12px, 0.8125rem) !important;
}

.topbar-task-progress__copy small {
    font-size: 12px;
}

.sidebar .muted-copy,
.sidebar .nav-link__label .muted-copy,
.sidebar .nav-group__toggle .nav-link__label .muted-copy {
    font-size: 12px;
    line-height: 1.35;
}

.integration-readiness-card {
    min-height: 3.75rem;
}

.integration-readiness-card .integration-module-card__label,
.integration-readiness-card .integration-module-card__body small {
    font-size: 12px;
}

.integration-readiness-card .integration-module-card__value {
    font-size: 0.875rem;
}

.integration-analytics-grid,
.jira-team-manager__grid {
    align-items: start;
}

.integration-analytics-grid > *,
.jira-team-manager__grid > * {
    align-self: start;
}

@media (pointer: coarse) {
    :root {
        --easyclick-compact-control: 2.75rem;
        --easyclick-action-icon: 1.125rem;
    }

    :is(.primary-button, .secondary-button, .toolbar-button) {
        padding-inline: 0.78rem;
    }
}

@media (max-width: 40rem) {
    .content-stage :is(input, select, textarea) {
        font-size: 16px !important;
    }

    .content-stage {
        padding: 0.45rem;
    }

    .content-stage > :is(.content-card, .chart-card, .table-shell),
    .content-stage .integration-workspace > :is(.content-card, .chart-card) {
        padding: 0.65rem;
    }
}

/* ServiceNow workspace density
   Keep the operational dashboard information-rich without making its controls,
   status cards, or navigation feel oversized on wide displays. The view-level
   selector deliberately leaves shared integration components unchanged. */
#appContent[data-view-id="servicenow_integration"] {
    --servicenow-compact-gap: clamp(0.42rem, 0.36rem + 0.16vw, 0.62rem);
    gap: var(--servicenow-compact-gap);
}

#appContent[data-view-id="servicenow_integration"] > .integration-workspace {
    padding: clamp(0.58rem, 0.5rem + 0.2vw, 0.78rem);
}

#appContent[data-view-id="servicenow_integration"] .integration-workspace > .table-head {
    align-items: center;
    margin-bottom: 0.22rem;
}

#appContent[data-view-id="servicenow_integration"] .workspace-brand-heading {
    align-items: center;
    gap: 0.62rem;
}

#appContent[data-view-id="servicenow_integration"] .workspace-brand-heading > .vendor-mark {
    width: 2.2rem;
    height: 2.2rem;
    flex-basis: 2.2rem;
    padding: 0.45rem;
    border-radius: 0.68rem;
}

#appContent[data-view-id="servicenow_integration"] .workspace-brand-heading :is(.eyebrow, h3),
#appContent[data-view-id="servicenow_integration"] .integration-workspace > .jira-workspace__helper {
    margin-top: 0;
    margin-bottom: 0;
}

#appContent[data-view-id="servicenow_integration"] .integration-workspace > .jira-workspace__helper {
    margin-left: 2.82rem;
    line-height: 1.3;
}

#appContent[data-view-id="servicenow_integration"] .integration-workspace__header-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

#appContent[data-view-id="servicenow_integration"] > .integration-workspace__workflow {
    gap: var(--servicenow-compact-gap);
    padding: clamp(0.58rem, 0.5rem + 0.2vw, 0.78rem);
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__header {
    align-items: center;
    gap: 0.65rem;
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__header :is(.eyebrow, h3, .muted-copy) {
    margin-top: 0;
    margin-bottom: 0.12rem;
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__header .muted-copy {
    line-height: 1.3;
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__steps {
    flex-wrap: nowrap;
    gap: 0.35rem;
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__steps span {
    gap: 0.3rem;
    min-height: 1.9rem;
    padding: 0.25rem 0.48rem;
    font-size: 0.7rem;
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__steps strong {
    width: 1.08rem;
    height: 1.08rem;
    font-size: 0.65rem;
}

#appContent[data-view-id="servicenow_integration"] .integration-workspace__tabs {
    gap: 0.48rem;
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__tab {
    grid-template-columns: 1.95rem minmax(0, 1fr) auto;
    gap: 0.55rem;
    min-height: 4.25rem;
    padding: 0.56rem 0.68rem;
    border-left-width: 3px;
    border-radius: 0.78rem;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--jira-tab-accent) 9%, transparent);
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__tab > svg {
    width: 1rem;
    height: 1rem;
    padding: 0.45rem;
    border-radius: 0.58rem;
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__tab em {
    padding: 0.22rem 0.42rem;
    font-size: 0.62rem;
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__tab:is(:hover, .is-active) {
    transform: none;
    box-shadow: inset 0 -0.16rem 0 var(--jira-tab-accent), 0 8px 18px color-mix(in srgb, var(--jira-tab-accent) 15%, transparent);
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__tab-check {
    top: 0.26rem;
    left: 0.26rem;
    width: 1rem;
    height: 1rem;
    min-width: 1rem !important;
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__tab-check svg {
    width: 0.68rem !important;
    height: 0.68rem !important;
}

#appContent[data-view-id="servicenow_integration"] .jira-workflow__panel {
    padding: 0.58rem;
    border-radius: 0.78rem;
}

#appContent[data-view-id="servicenow_integration"] .integration-workspace__readiness {
    gap: 0.42rem !important;
}

#appContent[data-view-id="servicenow_integration"] .integration-readiness-card {
    min-height: 3.2rem;
    grid-template-columns: 1.55rem minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.4rem 0.52rem;
}

#appContent[data-view-id="servicenow_integration"] .integration-readiness-card .integration-module-card__icon {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.46rem;
}

#appContent[data-view-id="servicenow_integration"] .integration-readiness-card .integration-module-card__icon svg {
    width: 0.82rem;
    height: 0.82rem;
}

#appContent[data-view-id="servicenow_integration"] .integration-analytics-dashboard--servicenow {
    gap: var(--servicenow-compact-gap);
}

#appContent[data-view-id="servicenow_integration"] .integration-analytics-dashboard--servicenow > .content-card {
    padding: 0.65rem 0.72rem;
}

#appContent[data-view-id="servicenow_integration"] .servicenow-control-deck__filters {
    gap: 0.45rem;
}

#appContent[data-view-id="servicenow_integration"] .servicenow-control-deck__filters > label {
    gap: 0.42rem;
}

#appContent[data-view-id="servicenow_integration"] .servicenow-control-deck > .muted-copy {
    display: block;
    margin-top: 0.3rem;
    line-height: 1.25;
}

#appContent[data-view-id="servicenow_integration"] .integration-kpi-grid {
    gap: 0.5rem;
}

#appContent[data-view-id="servicenow_integration"] .integration-kpi-card {
    min-height: 5.1rem;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: 0.62rem;
    padding: 0.62rem 0.7rem;
    border-left-width: 3px;
    border-radius: 0.78rem;
}

#appContent[data-view-id="servicenow_integration"] .integration-kpi-card > span {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.68rem;
}

#appContent[data-view-id="servicenow_integration"] .integration-kpi-card > span svg {
    width: 1.15rem;
    height: 1.15rem;
}

#appContent[data-view-id="servicenow_integration"] .integration-kpi-card strong {
    font-size: 1.35rem;
}

#appContent[data-view-id="servicenow_integration"] .servicenow-sla-board > .table-head {
    align-items: center;
    margin-bottom: 0.48rem;
}

#appContent[data-view-id="servicenow_integration"] .servicenow-metric-grid {
    gap: 0.48rem;
}

#appContent[data-view-id="servicenow_integration"] .servicenow-metric-grid > article {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    gap: 0.52rem;
    min-height: 3.85rem;
    padding: 0.5rem 0.58rem;
    border-radius: 0.68rem;
}

#appContent[data-view-id="servicenow_integration"] .servicenow-metric-grid > article > span {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.6rem;
}

#appContent[data-view-id="servicenow_integration"] .servicenow-metric-grid > article > span svg {
    width: 1.02rem;
    height: 1.02rem;
}

#appContent[data-view-id="servicenow_integration"] .servicenow-metric-grid strong {
    font-size: 1.18rem;
}

@media (max-width: 800px) {
    #appContent[data-view-id="servicenow_integration"] .jira-workflow__header {
        align-items: flex-start;
        flex-direction: column;
    }

    #appContent[data-view-id="servicenow_integration"] .jira-workflow__steps {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.12rem;
    }

    #appContent[data-view-id="servicenow_integration"] .integration-workspace__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #appContent[data-view-id="servicenow_integration"] .servicenow-time-series :is(
        .jira-time-series__controls,
        .jira-time-series__status-filter,
        .jira-time-series__status-options
    ) {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #appContent[data-view-id="servicenow_integration"] .servicenow-time-series .jira-time-series__status-options,
    #appContent[data-view-id="servicenow_integration"] .servicenow-time-series .jira-time-series__legend {
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow-x: visible;
    }
}

@media (max-width: 560px) {
    #appContent[data-view-id="servicenow_integration"] .integration-workspace > .table-head {
        align-items: flex-start;
    }

    #appContent[data-view-id="servicenow_integration"] .integration-workspace > .jira-workspace__helper {
        display: none;
    }

    #appContent[data-view-id="servicenow_integration"] .workspace-brand-heading .muted-copy {
        display: none;
    }

    #appContent[data-view-id="servicenow_integration"] .integration-workspace__header-actions {
        width: 100%;
        justify-content: flex-start;
    }

    #appContent[data-view-id="servicenow_integration"] .integration-workspace__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #appContent[data-view-id="servicenow_integration"] .jira-workflow__header .muted-copy {
        display: none;
    }

    #appContent[data-view-id="servicenow_integration"] .jira-workflow__tab {
        grid-template-columns: 1.75rem minmax(0, 1fr);
        min-height: 3.25rem;
        gap: 0.42rem;
        padding: 0.45rem 0.52rem;
    }

    #appContent[data-view-id="servicenow_integration"] .jira-workflow__tab :is(small, em) {
        display: none;
    }

    #appContent[data-view-id="servicenow_integration"] :is(
        .integration-workspace__readiness,
        .integration-kpi-grid,
        .servicenow-metric-grid
    ) {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    #appContent[data-view-id="servicenow_integration"] .integration-readiness-card .integration-module-card__body small,
    #appContent[data-view-id="servicenow_integration"] .integration-kpi-card em,
    #appContent[data-view-id="servicenow_integration"] .servicenow-metric-grid em {
        display: none;
    }

    #appContent[data-view-id="servicenow_integration"] .integration-kpi-card {
        min-height: 4.15rem;
    }

    #appContent[data-view-id="servicenow_integration"] .servicenow-control-deck__filters {
        align-items: center;
        flex-direction: row;
    }

    #appContent[data-view-id="servicenow_integration"] .servicenow-control-deck__filters > label:first-child {
        flex: 1 1 9rem;
        width: auto;
        min-width: 0;
    }

    #appContent[data-view-id="servicenow_integration"] .servicenow-control-deck__filters > label:first-child .toolbar-select {
        width: min(7.5rem, 100%);
    }

    #appContent[data-view-id="servicenow_integration"] .servicenow-control-deck__filters > .toolbar-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        width: auto;
        margin-left: auto;
    }

    #appContent[data-view-id="servicenow_integration"] .servicenow-control-deck__filters > .toolbar-actions .toolbar-button > span {
        display: none;
    }

    #appContent[data-view-id="servicenow_integration"] .jira-workflow__panel {
        padding: 0.45rem;
    }
}

@media (max-width: 380px) {
    #appContent[data-view-id="servicenow_integration"] .integration-workspace__readiness {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* Header search and voice action
   Give the primary workspace search enough visual priority for long queries,
   while using the application's theme spectrum for the voice state icon. */
.topbar-search {
    flex: 1 1 24rem;
    width: clamp(24rem, 32vw, 34rem);
    min-width: min(20rem, 100%);
    max-width: 34rem;
}

#globalHeaderSearch {
    min-height: 2.75rem;
    height: 2.75rem;
    padding: 0.58rem 0.95rem;
    font-size: 1rem !important;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

#globalHeaderSearch::placeholder {
    color: color-mix(in srgb, var(--shell-text) 68%, transparent);
    font-size: 0.96rem;
    font-weight: 500;
    opacity: 1;
}

.topbar .ai-voice-launch-button--topbar {
    position: relative;
    color: #ffffff;
    border-color: color-mix(in srgb, var(--brand) 58%, var(--shell-border));
    background: var(--brand-spectrum-gradient);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        0 0.38rem 0.9rem color-mix(in srgb, var(--brand) 24%, transparent);
}

.topbar .ai-voice-launch-button--topbar::after {
    position: absolute;
    inset: 0.22rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.topbar .ai-voice-launch-button--topbar svg {
    position: relative;
    z-index: 1;
    width: 1.08rem !important;
    height: 1.08rem !important;
    min-width: 1.08rem !important;
    max-width: 1.08rem !important;
    min-height: 1.08rem !important;
    max-height: 1.08rem !important;
    stroke-width: 2.15;
}

html[data-theme="light"] .topbar .ai-voice-launch-button--topbar {
    border-color: rgba(37, 99, 235, 0.42);
    background: linear-gradient(135deg, #2563eb, #7c3aed);
}

html[data-theme="dark"] .topbar .ai-voice-launch-button--topbar {
    border-color: rgba(96, 165, 250, 0.52);
    background: linear-gradient(135deg, #2563eb, #8b5cf6);
}

.topbar .ai-voice-launch-button--topbar.is-listening {
    border-color: rgba(52, 211, 153, 0.58);
    background: linear-gradient(135deg, #047857, #14b8a6);
}

.topbar .ai-voice-launch-button--topbar.is-speaking {
    border-color: rgba(251, 191, 36, 0.6);
    background: linear-gradient(135deg, #d97706, #7c3aed);
}

@media (max-width: 64rem) {
    .topbar-search {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 40rem) {
    #globalHeaderSearch {
        min-height: 2.75rem;
        height: 2.75rem;
        font-size: 1rem !important;
    }
}

/* Recording stop action
   Red communicates that this ends the active recording; the label and handler
   continue to make it explicit that the captured meeting is saved. */
.meeting-recorder__save-button {
    border-color: color-mix(in srgb, #ef4444 74%, var(--panel-border)) !important;
    background: linear-gradient(135deg, #b91c1c, #ef4444) !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0.48rem 1.05rem rgba(220, 38, 38, 0.28) !important;
}

.meeting-recorder__save-button:hover:not(:disabled) {
    border-color: #f87171 !important;
    background: linear-gradient(135deg, #991b1b, #dc2626) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0.58rem 1.2rem rgba(220, 38, 38, 0.34) !important;
}

.meeting-recorder__save-button:focus-visible {
    outline: 3px solid color-mix(in srgb, #f87171 54%, transparent);
    outline-offset: 2px;
}

.meeting-recorder__save-button svg {
    width: 1rem !important;
    height: 1rem !important;
    stroke-width: 2.35;
}

/* Project-wide compact donut scale
   max-width constrains large dashboard/ServiceNow charts without enlarging
   compact donuts that already define a smaller width. */
.donut-chart__ring {
    width: min(10.75rem, 100%) !important;
    max-width: min(10.75rem, 100%) !important;
}

.donut-chart__svg {
    max-width: min(10.75rem, 100%) !important;
}

.donut-chart__total {
    font-size: clamp(1.15rem, 1.35vw, 1.55rem) !important;
    line-height: 1 !important;
}

.donut-chart__label {
    font-size: 0.7rem !important;
    letter-spacing: 0.15em;
}

/* Consistent framed-section typography across dashboard and workspaces. */
:root {
    --frame-heading-font: var(--gui-font-sans);
}

:is(
    .dashboard-flash-group__head,
    .chart-card__head,
    .table-head,
    .meeting-panel__head,
    .section-heading
) :is(h2, h3) {
    margin-block: 0 !important;
    font-family: var(--frame-heading-font) !important;
    font-size: clamp(1rem, 0.92rem + 0.3vw, 1.22rem) !important;
    font-weight: 700 !important;
    line-height: 1.16 !important;
    letter-spacing: -0.018em !important;
    text-wrap: balance;
}

.dashboard-flash-group__head h3 {
    font-size: clamp(1rem, 0.94rem + 0.22vw, 1.16rem) !important;
}

:is(
    .dashboard-flash-group__head,
    .chart-card__head,
    .table-head,
    .meeting-panel__head,
    .section-heading
) .eyebrow {
    font-family: var(--frame-heading-font);
    font-size: 0.64rem !important;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.13em !important;
}

@media (max-width: 64rem) {
    .donut-chart__ring {
        width: min(10.25rem, 100%) !important;
        max-width: min(10.25rem, 100%) !important;
    }

    .donut-chart__svg {
        max-width: min(10.25rem, 100%) !important;
    }
}

@media (max-width: 40rem) {
    .donut-chart__ring {
        width: min(9.5rem, 100%) !important;
        max-width: min(9.5rem, 100%) !important;
    }

    .donut-chart__svg {
        max-width: min(9.5rem, 100%) !important;
    }

    .donut-chart__total {
        font-size: clamp(1.08rem, 5.2vw, 1.4rem) !important;
    }

    :is(
        .dashboard-flash-group__head,
        .chart-card__head,
        .table-head,
        .meeting-panel__head,
        .section-heading
    ) :is(h2, h3) {
        font-size: 1rem !important;
    }
}

/* Authoritative compact flash-card headers.
   Keep this final so older shared frame typography cannot enlarge dashboard cards. */
:is(.dashboard-flash-group__head, .chart-card__head) :is(h2, h3) {
    font-size: clamp(0.86rem, 0.82rem + 0.12vw, 0.98rem) !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
}

:is(.dashboard-flash-group__head, .chart-card__head) .eyebrow {
    font-size: 0.56rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.11em !important;
}

:is(.dashboard-flash-group__head, .chart-card__head) {
    gap: 0.26rem 0.42rem !important;
    padding-bottom: 0.18rem !important;
}

.dashboard-snapshot-time-series__head-actions {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.38rem;
    flex-wrap: wrap;
}

.dashboard-snapshot-time-series__range {
    display: grid;
    gap: 0.12rem;
    min-width: 6.8rem;
}

.dashboard-snapshot-time-series__range > span {
    color: var(--text-soft);
    font-size: 0.52rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-snapshot-time-series__range select {
    width: 100%;
    min-height: 1.85rem;
    padding: 0.2rem 1.45rem 0.2rem 0.5rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text);
    background-color: var(--surface-strong);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
}

.dashboard-snapshot-time-series__range select:hover,
.dashboard-snapshot-time-series__range select:focus-visible {
    border-color: color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 62%, var(--panel-border));
    outline: none;
}

@media (max-width: 40rem) {
    .dashboard-snapshot-time-series__head-actions {
        width: 100%;
        justify-content: space-between;
    }

    .dashboard-snapshot-time-series__range {
        min-width: 7rem;
    }
}

/* Final dense dashboard flash-card type scale. */
.dashboard-flash-group__head h3 {
    font-size: clamp(0.82rem, 0.79rem + 0.08vw, 0.92rem) !important;
    font-weight: 600 !important;
}

.dashboard-flash-group__head .status-pill {
    font-size: 0.56rem !important;
    font-weight: 650 !important;
}

.dashboard-flash-group .dashboard-mini-card__label {
    font-size: clamp(0.54rem, 0.52rem + 0.06vw, 0.62rem) !important;
    font-weight: 650 !important;
    letter-spacing: 0.065em !important;
}

.dashboard-flash-group .dashboard-mini-card__value {
    font-size: clamp(1rem, 0.94rem + 0.18vw, 1.16rem) !important;
    font-weight: 700 !important;
}

/* Final compact card geometry, aggregated chart pins, and centered donuts. */
.dashboard-flash-group {
    padding: clamp(0.5rem, 0.45rem + 0.18vw, 0.68rem) !important;
    border-radius: 0.82rem !important;
}

.dashboard-flash-group__head h3 {
    font-size: clamp(0.78rem, 0.75rem + 0.07vw, 0.88rem) !important;
}

.dashboard-flash-group--overview .dashboard-flash-group__grid {
    gap: 0.42rem !important;
    padding-block: 0.1rem !important;
}

.dashboard-flash-group--overview .dashboard-mini-card {
    grid-template-columns: 1.8rem minmax(0, 1fr) !important;
    min-height: 3.55rem !important;
    column-gap: 0.42rem !important;
    padding: 0.34rem 0.42rem !important;
    border-radius: 0.72rem !important;
}

.dashboard-flash-group--overview .dashboard-mini-card__icon {
    width: 1.75rem !important;
    height: 1.75rem !important;
    border-radius: 0.52rem !important;
}

.dashboard-flash-group--overview .dashboard-mini-card__icon svg {
    width: 0.8rem !important;
    height: 0.8rem !important;
}

.dashboard-flash-group .dashboard-mini-card__label {
    font-size: clamp(0.5rem, 0.48rem + 0.05vw, 0.56rem) !important;
}

.dashboard-flash-group .dashboard-mini-card__value {
    font-size: clamp(0.92rem, 0.88rem + 0.13vw, 1.04rem) !important;
}

.dashboard-snapshot-time-series__legend {
    min-height: 0;
    padding-block: 0.04rem 0.1rem;
}

.dashboard-snapshot-time-series__key,
.dashboard-snapshot-time-series__all {
    min-height: 1.58rem;
    font-size: 0.61rem;
}

.dashboard-snapshot-time-series__point {
    pointer-events: none;
}

.dashboard-snapshot-time-series__point-target {
    fill: transparent;
    stroke: transparent;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    cursor: crosshair;
}

.dashboard-snapshot-time-series__point-target:hover,
.dashboard-snapshot-time-series__point-target:focus-visible {
    stroke: color-mix(in srgb, var(--text) 58%, transparent);
    outline: none;
}

.donut-chart__ring {
    box-sizing: border-box;
    padding: 0 !important;
    place-items: center !important;
}

.donut-chart__ring > .donut-chart__svg {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1;
    margin: auto;
    transform-origin: 50% 50%;
}

.donut-chart__ring > .donut-chart__center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 49% !important;
    margin: 0;
    padding: 0.36rem;
    transform: translate(-50%, -50%);
}

/* Dashboard operations actions: equal left/right buttons with domain color. */
.dashboard-grid--ops-tables .chart-card__head .toolbar-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    width: clamp(17rem, 24vw, 22rem);
    max-width: 100%;
    gap: 0.42rem !important;
}

.dashboard-grid--ops-tables .chart-card__head .toolbar-actions > :is(.toolbar-button, .primary-button) {
    flex: none !important;
    width: 100%;
    min-width: 0;
    min-height: 2.2rem;
    justify-content: center;
    padding: 0.42rem 0.62rem;
    border-radius: 0.72rem;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-grid--ops-tables [data-dashboard-open-change-queue] {
    border-color: color-mix(in srgb, #60a5fa 64%, var(--panel-border)) !important;
    color: #eff6ff !important;
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
    box-shadow: 0 0.42rem 1rem rgba(37, 99, 235, 0.2);
}

.dashboard-grid--ops-tables [data-dashboard-create-change] {
    border-color: color-mix(in srgb, #fbbf24 70%, var(--panel-border)) !important;
    color: #fffbeb !important;
    background: linear-gradient(135deg, #b45309, #d97706) !important;
    box-shadow: 0 0.42rem 1rem rgba(217, 119, 6, 0.2);
}

.dashboard-grid--ops-tables [data-dashboard-open-tshoot-queue] {
    border-color: color-mix(in srgb, #a78bfa 66%, var(--panel-border)) !important;
    color: #f5f3ff !important;
    background: linear-gradient(135deg, #6d28d9, #7c3aed) !important;
    box-shadow: 0 0.42rem 1rem rgba(124, 58, 237, 0.2);
}

.dashboard-grid--ops-tables [data-dashboard-create-tshoot] {
    border-color: color-mix(in srgb, #5eead4 64%, var(--panel-border)) !important;
    color: #f0fdfa !important;
    background: linear-gradient(135deg, #0f766e, #0d9488) !important;
    box-shadow: 0 0.42rem 1rem rgba(13, 148, 136, 0.2);
}

.dashboard-grid--ops-tables .chart-card__head .toolbar-actions > :is(.toolbar-button, .primary-button):hover:not(:disabled) {
    filter: brightness(1.09) saturate(1.05);
    transform: translateY(-1px);
}

@media (max-width: 64rem) {
    .dashboard-grid--ops-tables .chart-card__head .toolbar-actions {
        width: 100%;
    }
}

@media (max-width: 24rem) {
    .dashboard-grid--ops-tables .chart-card__head .toolbar-actions > :is(.toolbar-button, .primary-button) {
        padding-inline: 0.42rem;
        font-size: 0.64rem;
    }
}

/* Automation Center: compact, searchable, paginated, and progress-aware. */
.automation-center__selection-card {
    padding: 0.75rem;
}

.automation-center__selection-card .automation-center__table-head {
    min-height: 0;
    margin: 0 0 0.5rem;
    gap: 0.65rem;
    align-items: center;
}

.automation-center__table-head h3 {
    margin: 0.08rem 0 0;
    font-size: clamp(0.94rem, 1vw, 1.08rem);
    line-height: 1.2;
}

.automation-center__table-head .eyebrow {
    margin: 0;
    font-size: 0.64rem;
}

.automation-center__table-counts {
    display: flex;
    align-items: center;
    gap: 0.42rem;
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.7rem;
    white-space: nowrap;
}

.automation-center__table-counts strong {
    padding: 0.24rem 0.48rem;
    border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--panel-border));
    border-radius: 999px;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 10%, transparent);
    font-size: 0.68rem;
}

.automation-center__device-loading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.42rem 0.7rem;
    margin: 0 0 0.55rem;
    padding: 0.62rem 0.72rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--brand) 48%, var(--panel-border));
    border-radius: 0.72rem;
    background: linear-gradient(110deg, color-mix(in srgb, var(--brand) 11%, var(--panel-strong)), color-mix(in srgb, var(--accent) 7%, var(--panel-strong)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent);
}

.automation-center__loading-spinner {
    width: 1.55rem;
    height: 1.55rem;
    border: 0.18rem solid color-mix(in srgb, var(--brand) 20%, transparent);
    border-top-color: var(--brand);
    border-right-color: var(--accent);
    border-radius: 50%;
    animation: automationCenterLoadingSpin 0.78s linear infinite;
}

.automation-center__device-loading-copy {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.automation-center__device-loading-copy strong {
    color: var(--text);
    font-size: 0.76rem;
}

.automation-center__device-loading-copy small,
.automation-center__device-loading-percent {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.automation-center__device-loading-percent {
    color: var(--brand);
    text-transform: uppercase;
}

.automation-center__device-loading-track {
    position: relative;
    grid-column: 2 / -1;
    height: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-border) 72%, transparent);
}

.automation-center__device-loading-track > i {
    position: absolute;
    inset: 0 auto 0 0;
    display: block;
    max-width: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    transition: width 180ms ease;
}

.automation-center__device-loading.is-indeterminate .automation-center__device-loading-track > i {
    animation: automationCenterLoadingSweep 1.05s ease-in-out infinite;
}

@keyframes automationCenterLoadingSpin {
    to { transform: rotate(360deg); }
}

@keyframes automationCenterLoadingSweep {
    from { transform: translateX(-120%); }
    to { transform: translateX(360%); }
}

@media (prefers-reduced-motion: reduce) {
    .automation-center__loading-spinner,
    .automation-center__device-loading.is-indeterminate .automation-center__device-loading-track > i {
        animation-duration: 2.4s;
    }
}

.automation-center__table-toolbar {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto auto auto;
    align-items: center;
    gap: 0.42rem;
    margin-bottom: 0.5rem;
}

.automation-center__table-toolbar > .search-field,
.automation-center__table-toolbar > .toolbar-search {
    width: 100%;
    min-width: 0;
}

.automation-center__table-toolbar .toolbar-search {
    width: 100%;
    min-height: 2.25rem;
    font-size: 0.76rem;
}

.automation-center__table-toolbar > label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.automation-center__table-toolbar .compact-select {
    min-width: 4.25rem;
    min-height: 2.25rem;
    padding-block: 0.35rem;
}

.automation-center__table-toolbar .toolbar-button {
    min-height: 2.25rem;
    flex: 0 0 auto !important;
    padding: 0.42rem 0.62rem;
    font-size: 0.7rem;
    white-space: nowrap;
}

.automation-center__table-wrap {
    max-height: 22rem;
}

.automation-center__table-wrap :is(th, td) {
    padding: 0.52rem 0.58rem;
    font-size: 0.72rem;
    line-height: 1.3;
}

.automation-center__table-wrap input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}

.automation-center__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    min-height: 2.5rem;
    padding: 0.45rem 0.1rem 0;
    color: var(--text-muted);
    font-size: 0.68rem;
}

.automation-center__pagination > div {
    display: flex;
    align-items: center;
    gap: 0.42rem;
}

.automation-center__pagination strong {
    color: var(--text);
    font-size: 0.68rem;
    white-space: nowrap;
}

.automation-center__pagination .toolbar-button {
    min-height: 1.95rem;
    padding: 0.3rem 0.48rem;
    font-size: 0.66rem;
}

.automation-center__pagination .toolbar-button svg {
    width: 0.82rem !important;
    height: 0.82rem !important;
}

.automation-center__runbar {
    position: sticky;
    top: 0.45rem;
    z-index: 24;
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(15rem, 0.9fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.82rem;
    border-color: color-mix(in srgb, var(--brand) 30%, var(--panel-border));
    box-shadow: 0 0.65rem 1.6rem color-mix(in srgb, #000 24%, transparent);
    backdrop-filter: blur(16px);
}

.automation-center__runbar-copy h3 {
    margin: 0.05rem 0 0.14rem;
    font-size: 0.95rem;
}

.automation-center__runbar-copy .muted-copy {
    font-size: 0.68rem;
    line-height: 1.35;
}

.automation-center__execute {
    min-height: 2.4rem;
    max-width: 24rem !important;
    font-size: 0.74rem;
    white-space: nowrap;
}

.automation-center__progress {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.automation-center__progress > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(6.75rem, auto);
    align-items: center;
    gap: 0.5rem;
    min-height: 1.45rem;
    font-size: 0.69rem;
}

.automation-center__progress > div:first-child > :last-child {
    min-width: 6.75rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.automation-center__progress-phase,
.automation-center__progress-ios {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
    flex-wrap: wrap;
}

.automation-center__progress-phase > strong {
    min-width: 5.75rem;
}

.automation-center__progress-ios .automation-ios-badge {
    padding: 0.12rem 0.38rem 0.12rem 0.18rem;
    border: 1px solid color-mix(in srgb, var(--ios-color) 36%, var(--panel-border));
    border-radius: 999px;
    background: color-mix(in srgb, var(--ios-color) 8%, var(--surface));
}

.automation-center__progress-ios .automation-ios-badge > span {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
}

.automation-center__progress-ios .automation-ios-badge svg {
    width: 0.72rem;
    height: 0.72rem;
}

.automation-center__progress-ios .automation-ios-badge strong {
    font-size: 0.61rem;
}

.automation-center__progress p {
    overflow: hidden;
    margin: 0;
    min-height: 1em;
    color: var(--text-muted);
    font-size: 0.64rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.automation-center__progress-metrics {
    display: grid;
    grid-template-columns: repeat(6, minmax(4.25rem, 1fr));
    gap: 0.3rem;
}

.automation-center__progress-metrics > span {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.28rem 0.4rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}

.automation-center__progress-metrics small {
    color: var(--text-muted);
    font-size: 0.58rem;
}

.automation-center__progress-metrics strong {
    min-width: 4.5ch;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.automation-center__progress-metrics .is-success strong { color: var(--success); }
.automation-center__progress-metrics .is-failed strong { color: var(--danger); }
.automation-center__progress-metrics .is-error strong { color: var(--warning); }

.automation-center__progress-track {
    height: 0.38rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 20%, transparent);
}

.automation-center__progress-track > span {
    display: block;
    height: 100%;
    min-width: 0.25rem;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--success));
    transition: width 240ms ease;
}

.automation-center__runbar.is-running .automation-center__progress-track > span {
    background-size: 200% 100%;
    animation: automation-center-progress 1.2s linear infinite;
}

@keyframes automation-center-progress {
    to { background-position: -200% 0; }
}

.popup-window--automation-confirm .popup-window__dialog {
    width: min(92rem, calc(100vw - 2rem));
}

.automation-center__confirmation {
    display: grid;
    gap: 0.78rem;
    padding: 0.9rem;
}

.automation-center__confirmation .selection-flash__hero {
    align-items: center;
}

.automation-center__confirmation .selection-flash__hero h3 {
    margin: 0.08rem 0 0.15rem;
    font-size: 1.05rem;
}

.automation-center__confirmation .selection-flash__hero p:last-child {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.automation-center__confirmation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.automation-center__confirmation-grid article {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.1rem 0.48rem;
    align-items: center;
    padding: 0.62rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--brand) 6%, var(--panel));
}

.automation-center__confirmation-grid article > span {
    grid-row: 1 / 3;
    color: var(--brand);
}

.automation-center__confirmation-grid svg {
    width: 1.05rem;
    height: 1.05rem;
}

.automation-center__confirmation-grid small {
    color: var(--text-muted);
    font-size: 0.63rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.automation-center__confirmation-grid strong {
    font-size: 0.82rem;
}

.automation-center__confirmation-preview {
    display: grid;
    gap: 0.38rem;
    padding: 0.7rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    background: var(--panel-strong);
}

.automation-center__confirmation-preview p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.automation-center__confirmation-actions {
    justify-content: flex-end;
    /* Keep the run controls clear of the popup's floating up/down buttons. */
    padding-inline-end: 3.75rem;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.automation-center__credentials {
    display: grid;
    gap: 0.65rem;
    padding: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--brand) 42%, var(--panel-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--panel-strong) 96%, var(--brand) 4%);
}

.automation-center__credentials > header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(10rem, 15rem);
    align-items: center;
    gap: 0.62rem;
}

.automation-center__credentials > header h4,
.automation-center__credentials > header p,
.automation-center__credentials > header small,
.automation-center__credential-privacy {
    margin: 0;
}

.automation-center__credentials > header h4 {
    font-size: 0.85rem;
}

.automation-center__credentials > header small,
.automation-center__credential-privacy,
.automation-center__credential-rule-actions > small {
    color: var(--text-muted);
    font-size: 0.67rem;
    line-height: 1.35;
}

.automation-center__credentials-icon {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--panel-border));
    border-radius: 0.65rem;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--panel));
}

.automation-center__credentials-icon > svg,
.automation-center__credential-session > svg,
.automation-center__credential-readiness > svg,
.automation-center__credential-privacy > svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
    flex: 0 0 0.9rem;
}

.automation-center__credential-profiles {
    max-height: 19rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.62rem;
    overflow: auto;
    scrollbar-gutter: stable;
}

.automation-center__credential-profile {
    min-width: 0;
    margin: 0;
    padding: 0.62rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.75rem;
    background: var(--panel);
}

.automation-center__credential-profile > legend {
    width: calc(100% - 0.35rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0 0.2rem;
}

.automation-center__credential-profile > legend > span:first-child {
    width: 1.55rem;
    height: 1.55rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0.5rem;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--panel-strong));
}

.automation-center__credential-profile > legend > span:nth-child(2) {
    display: grid;
    min-width: 0;
}

.automation-center__credential-profile > legend strong {
    overflow: hidden;
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.automation-center__credential-profile > legend small {
    color: var(--text-muted);
    font-size: 0.61rem;
    font-weight: 500;
}

.automation-center__credential-profile > legend svg {
    width: 0.78rem !important;
    height: 0.78rem !important;
}

.automation-center__credential-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.48rem;
    margin-top: 0.45rem;
}

.automation-center__credential-fields > label {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    color: var(--text-muted);
    font-size: 0.63rem;
    font-weight: 700;
}

.automation-center__credential-fields > label > input,
.automation-center__credential-fields .launcher-password-shell,
.automation-center__credential-fields .launcher-password-shell > input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.automation-center__credential-fields .launcher-password-shell > input,
.automation-center__credential-fields > label > input {
    min-height: 2.15rem;
    font-size: 0.72rem;
}

.automation-center__credential-fields .launcher-password-shell {
    position: relative;
    display: block;
}

.automation-center__credential-fields .launcher-password-shell > input {
    padding-right: 2.45rem;
}

.automation-center__credential-fields .launcher-password-toggle {
    right: 0.28rem;
    width: 1.7rem;
    min-width: 1.7rem;
    height: 1.7rem;
    min-height: 1.7rem;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-radius: 0.48rem;
}

.automation-center__credential-fields .launcher-password-toggle > svg {
    width: 0.88rem !important;
    height: 0.88rem !important;
}

.automation-center__credential-fields .launcher-password-toggle__text {
    display: none;
}

.automation-center__credential-rule-actions,
.automation-center__credential-readiness,
.automation-center__credential-session,
.automation-center__credential-privacy {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.automation-center__credential-rule-actions {
    justify-content: space-between;
}

.automation-center__credential-readiness {
    padding: 0.42rem 0.55rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.62rem;
    font-size: 0.69rem;
}

.automation-center__credential-readiness.is-ready {
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 48%, var(--panel-border));
    background: color-mix(in srgb, var(--success) 8%, var(--panel));
}

.automation-center__credential-readiness.is-required {
    color: var(--warning);
    border-color: color-mix(in srgb, var(--warning) 50%, var(--panel-border));
    background: color-mix(in srgb, var(--warning) 8%, var(--panel));
}

@media (max-width: 70rem) {
    .automation-center__credential-profiles {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 45rem) {
    .automation-center__credentials > header,
    .automation-center__credential-fields {
        grid-template-columns: minmax(0, 1fr);
    }

    .automation-center__credentials-icon {
        display: none;
    }
}

@media (max-width: 64rem) {
    .automation-center__runbar {
        grid-template-columns: minmax(12rem, 1fr) minmax(14rem, 1fr);
    }
    .automation-center__runbar .automation-center__execute {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 45rem) {
    .automation-center__selection-card {
        padding: 0.62rem;
    }
    .automation-center__selection-card .automation-center__table-head {
        flex-direction: row;
        align-items: center;
    }
    .automation-center__table-toolbar {
        grid-template-columns: minmax(7rem, 1fr) auto auto auto;
    }
    .automation-center__table-toolbar > .search-field,
    .automation-center__table-toolbar > .toolbar-search {
        grid-column: auto;
    }
    .automation-center__table-toolbar .toolbar-button {
        padding-inline: 0.42rem;
        font-size: 0.64rem;
    }
    .automation-center__runbar {
        position: static;
        grid-template-columns: 1fr;
        padding: 0.68rem;
    }
    .automation-center__runbar .automation-center__execute {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
        max-width: none !important;
    }
    .automation-center__pagination {
        align-items: flex-start;
        flex-direction: column;
    }
    .automation-center__pagination > div {
        width: 100%;
        justify-content: space-between;
    }
    .automation-center__confirmation-grid {
        grid-template-columns: 1fr;
    }
    .automation-center__progress-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .automation-center__execute-fab-shell.is-running .automation-center__execute-fab,
    .automation-center__execute-fab-shell.is-running .automation-center__execute-fab-counts {
        animation: none;
    }
}

/* Top-bar typography and theme-aware voice action.
   Keep the refresh value and sync timestamp on one shared control scale, while
   retaining the smaller uppercase label as supporting information. */
.topbar #refreshIntervalSelect,
.topbar .topbar-sync__value {
    font-size: var(--easyclick-font-size-control, 0.86rem) !important;
    font-weight: var(--easyclick-font-weight-medium, 600) !important;
    line-height: 1.15 !important;
}

.topbar .topbar-theme-toggle {
    position: relative;
    color: #fbbf24;
    border-color: color-mix(in srgb, #fbbf24 48%, var(--shell-border)) !important;
    background: color-mix(in srgb, #fbbf24 11%, var(--surface-strong)) !important;
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 11%, transparent),
        0 0.28rem 0.8rem color-mix(in srgb, #fbbf24 12%, transparent);
}

html[data-theme="light"] .topbar .topbar-theme-toggle {
    color: #6366f1;
    border-color: color-mix(in srgb, #6366f1 42%, var(--shell-border)) !important;
    background: color-mix(in srgb, #6366f1 9%, var(--surface-strong)) !important;
}

.topbar .topbar-theme-toggle:hover {
    filter: brightness(1.08) saturate(1.08);
    transform: translateY(-1px);
}

.topbar .topbar-theme-toggle svg {
    width: 1.08rem !important;
    height: 1.08rem !important;
    stroke-width: 2;
}

/* Keep time range, maximize, and CSV on the first chart-header row. The live
   event count remains a full-width second line and no longer pushes actions
   below the selector. */
.dashboard-snapshot-time-series__head-actions {
    display: grid !important;
    grid-template-columns: minmax(6.8rem, 1fr) auto;
    grid-template-areas:
        "range actions"
        "status status";
    align-items: end;
    width: min(100%, 14.5rem);
    gap: 0.2rem 0.32rem !important;
}

.dashboard-snapshot-time-series__range {
    grid-area: range;
    min-width: 0 !important;
}

.dashboard-snapshot-time-series__actions {
    grid-area: actions;
    align-self: end;
    flex-wrap: nowrap;
    margin: 0 !important;
}

.dashboard-snapshot-time-series__actions :is(.icon-button, .toolbar-button) {
    height: 1.85rem !important;
    min-height: 1.85rem !important;
}

.dashboard-snapshot-time-series__actions .icon-button {
    width: 1.85rem !important;
    min-width: 1.85rem !important;
}

.dashboard-snapshot-time-series__head-actions > .status-pill {
    grid-area: status;
    width: 100%;
    min-width: 0;
    justify-content: center;
}

@media (max-width: 40rem) {
    .dashboard-snapshot-time-series__head-actions {
        width: 100%;
        max-width: 15rem;
        margin-inline-start: auto;
    }
}

/* Use one dark dashboard table surface. This removes the gray toolbar/footer
   band and matches the SLA Violations by Engineer Rank card. */
#appContent[data-view-id="dashboard"] :is(.table-widget, .compact-table-shell) {
    background: var(--surface-strong) !important;
}

/* Accessible point tooltip for dashboard time-series charts. */
.dashboard-snapshot-time-series__plot {
    position: relative;
}

.dashboard-snapshot-time-series__tooltip {
    position: absolute;
    z-index: 8;
    display: grid;
    gap: 0.42rem;
    width: max-content;
    min-width: 10.5rem;
    max-width: min(16rem, calc(100% - 1rem));
    padding: 0.62rem 0.68rem;
    border: 1px solid color-mix(in srgb, var(--dashboard-group-accent, var(--brand)) 42%, var(--panel-border));
    border-radius: 0.68rem;
    color: var(--text);
    background: color-mix(in srgb, var(--surface-strong) 96%, transparent);
    box-shadow: 0 0.8rem 1.8rem rgba(0, 0, 0, 0.28);
    pointer-events: none;
    opacity: 0;
    transform: translateY(0.2rem);
    transition: opacity 120ms ease, transform 120ms ease;
    backdrop-filter: blur(12px);
}

.dashboard-snapshot-time-series__tooltip[hidden] {
    display: none;
}

.dashboard-snapshot-time-series__tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.dashboard-snapshot-time-series__tooltip-date {
    padding-bottom: 0.34rem;
    border-bottom: 1px solid var(--panel-border);
    font-size: 0.68rem;
    line-height: 1.2;
}

.dashboard-snapshot-time-series__tooltip-list,
.dashboard-snapshot-time-series__tooltip-row {
    display: grid;
    align-items: center;
}

.dashboard-snapshot-time-series__tooltip-list {
    gap: 0.3rem;
}

.dashboard-snapshot-time-series__tooltip-row {
    grid-template-columns: 0.52rem minmax(0, 1fr) auto;
    gap: 0.42rem;
    font-size: 0.66rem;
    line-height: 1.2;
}

.dashboard-snapshot-time-series__tooltip-dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 12%, transparent);
}

.dashboard-snapshot-time-series__tooltip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-snapshot-time-series__tooltip-value {
    font-variant-numeric: tabular-nums;
}

/* Unified Automation & AI Center */
.automation-center--unified {
    gap: 0.8rem;
    scroll-behavior: smooth;
}

.automation-center--unified.is-running {
    scroll-behavior: auto;
}

.automation-center--unified.is-running .content-card:hover {
    transform: none !important;
}

.automation-center--unified > [id] {
    scroll-margin-top: 0.75rem;
}

.automation-center--unified #automationCenterScope { order: 1; }
.automation-center--unified .automation-center__metrics { order: 2; }
.automation-center--unified #automationCenterSelection { order: 3; }
.automation-center--unified #automationCenterStudioPanel { order: 4; }
.automation-center--unified #automationCenterRun { order: 5; }
.automation-center--unified .automation-center__result { order: 6; }

.automation-center__current-output {
    margin-top: 0.75rem;
}

.automation-center__result > .automation-center__progress {
    margin: 0 0 0.75rem;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--panel-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}

.automation-center__current-output .device-command-terminal__body {
    max-height: 20rem;
    overflow: auto;
}

.automation-center--unified .automation-center__hero {
    border-color: color-mix(in srgb, var(--brand) 34%, var(--panel-border));
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 24rem),
        linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 96%, var(--brand) 4%), var(--panel-strong));
}

.automation-center--unified .automation-center__heading .muted-copy {
    max-width: 62rem;
    margin: 0.28rem 0 0;
    font-size: 0.75rem;
}

.automation-center__studio-shell {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.8rem;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--brand) 34%, var(--panel-border));
    background: color-mix(in srgb, var(--panel-strong) 97%, var(--brand) 3%);
}

.automation-center__studio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.15rem 0.1rem;
}

.automation-center__studio-head h3 {
    margin: 0.08rem 0 0.18rem;
    font-size: 1rem;
}

.automation-center__studio-head .muted-copy {
    max-width: 72rem;
    margin: 0;
    font-size: 0.7rem;
}

.automation-center__studio-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.automation-center__studio-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 8rem;
    padding: 1.2rem;
    border: 1px dashed color-mix(in srgb, var(--brand) 42%, var(--panel-border));
    border-radius: var(--radius-lg);
    color: var(--text-soft);
    background: color-mix(in srgb, var(--brand) 4%, var(--panel));
    text-align: left;
}

.automation-center__studio-empty > span {
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 2.8rem;
    border-radius: 0.9rem;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 14%, var(--panel-strong));
}

.automation-center__studio-empty svg {
    width: 1.35rem;
    height: 1.35rem;
}

.automation-center__studio-empty strong {
    display: block;
    color: var(--text);
    font-size: 0.82rem;
}

.automation-center__studio-empty p {
    max-width: 56rem;
    margin: 0.2rem 0 0;
    font-size: 0.7rem;
    line-height: 1.45;
}

.automation-center__studio-host {
    min-width: 0;
    overflow: clip;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-lg);
    background: var(--panel);
}

.automation-center__studio-host .device-command-popup {
    gap: 0.65rem;
    min-width: 0;
    padding: 0.65rem;
}

.automation-center__studio-host .device-command-popup__sticky-head {
    position: static;
    top: auto;
    z-index: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.automation-center__studio-host .device-command-tabs,
.automation-center__studio-host .device-command-tabs__panels,
.automation-center__studio-host .device-command-tab-panel {
    border-color: var(--panel-border);
    color: var(--text);
    background: var(--panel-strong);
}

.automation-center__studio-host .device-command-tabs {
    margin-top: 0;
    box-shadow: none;
}

.automation-center__studio-host .device-command-tabs__list {
    position: static;
    border-color: var(--panel-border);
    background: color-mix(in srgb, var(--panel) 94%, var(--brand) 6%);
    scrollbar-width: none;
}

.automation-center__studio-host .device-command-tabs__list::-webkit-scrollbar {
    display: none;
}

.automation-center__studio-host .device-command-tabs__tab {
    color: var(--text-soft);
}

.automation-center__studio-host .device-command-tabs__tab:hover,
.automation-center__studio-host .device-command-tabs__tab.is-active {
    color: var(--text);
    border-color: var(--panel-border);
    border-bottom-color: var(--brand);
    background: var(--panel-strong);
}

.automation-center__studio-host .device-command-tabs__panels {
    margin-top: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.automation-center__studio-host .device-command-tab-panel {
    padding: 0.75rem;
}

@media (max-width: 64rem) {
    .automation-center__studio-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .automation-center__studio-actions {
        justify-content: flex-start;
        width: 100%;
    }
}

@media (max-width: 38rem) {
    .automation-center__studio-shell {
        padding: 0.55rem;
    }

    .automation-center__studio-actions,
    .automation-center__studio-actions .toolbar-button {
        width: 100%;
    }

    .automation-center__studio-empty {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Cisco Intersight: secure setup, readiness, and operation feedback */
.intersight-workspace {
    gap: 0.8rem;
}

.intersight-hero {
    border-color: color-mix(in srgb, #00bceb 34%, var(--panel-border));
    background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, #00bceb 15%, transparent), transparent 30rem),
        radial-gradient(circle at 92% 100%, color-mix(in srgb, #65c04f 9%, transparent), transparent 24rem),
        var(--panel-strong);
}

.intersight-hero__identity .muted-copy {
    max-width: 64rem;
    margin-bottom: 0;
    font-size: 0.75rem;
    line-height: 1.5;
}

.intersight-hero__badges {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    flex-wrap: wrap;
    margin-top: 0.58rem;
}

.intersight-hero__badges .status-pill {
    min-height: 1.65rem;
}

.intersight-hero__badges svg {
    width: 0.82rem;
    height: 0.82rem;
}

.intersight-connection-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.58rem;
}

.intersight-connection-summary article {
    display: grid;
    grid-template-columns: 2.3rem minmax(0, 1fr);
    gap: 0.1rem 0.6rem;
    align-items: center;
    min-width: 0;
    min-height: 4.8rem;
    padding: 0.68rem;
    overflow: hidden;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    color: var(--text);
    background: var(--panel-strong);
    box-shadow: var(--shadow-soft);
}

.intersight-connection-summary article > span {
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 0.72rem;
    color: #00bceb;
    background: color-mix(in srgb, #00bceb 13%, var(--panel));
}

.intersight-connection-summary article > span svg {
    width: 1.1rem;
    height: 1.1rem;
}

.intersight-connection-summary article > div {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.intersight-connection-summary small,
.intersight-connection-summary strong,
.intersight-connection-summary p {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intersight-connection-summary small {
    color: var(--text-soft);
    font-size: 0.64rem;
    font-weight: 600;
}

.intersight-connection-summary strong {
    font-size: 0.78rem;
    font-weight: 650;
}

.intersight-connection-summary p {
    color: var(--text-soft);
    font-size: 0.62rem;
}

.intersight-connection-summary .status-pill {
    width: fit-content;
    max-width: 100%;
    min-height: 1.3rem;
    font-size: 0.6rem;
    text-transform: capitalize;
}

.intersight-setup {
    border-color: color-mix(in srgb, #00bceb 24%, var(--panel-border));
    background: var(--panel-strong);
}

.intersight-setup > summary {
    min-height: 2.8rem;
}

.intersight-setup > summary > span:first-child {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 0.65rem;
    background: color-mix(in srgb, #65c04f 13%, var(--panel));
}

.intersight-setup__summary-action {
    margin-left: auto;
    padding: 0.28rem 0.52rem;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-soft);
    background: var(--panel);
    font-size: 0.62rem;
    font-weight: 650;
}

.intersight-setup__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.intersight-setup__steps article {
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.58rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, #00bceb 4%, var(--panel));
}

.intersight-setup__steps article > span {
    display: grid;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 0.58rem;
    color: #fff;
    background: linear-gradient(135deg, #00bceb, #3b82f6);
    font-size: 0.66rem;
    font-weight: 800;
}

.intersight-setup__steps article > div {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.intersight-setup__steps strong {
    color: var(--text);
    font-size: 0.7rem;
}

.intersight-setup__steps small {
    color: var(--text-soft);
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.35;
}

.intersight-auth-requirement {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: start;
    padding: 0.65rem;
    border: 1px solid color-mix(in srgb, var(--warning) 38%, var(--panel-border));
    border-radius: var(--radius-md);
    color: var(--text);
    background: color-mix(in srgb, var(--warning) 8%, var(--panel));
}

.intersight-auth-requirement > svg {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0.12rem auto 0;
    color: var(--warning);
}

.intersight-auth-requirement strong {
    font-size: 0.72rem;
}

.intersight-auth-requirement p {
    margin: 0.18rem 0 0;
    color: var(--text-soft);
    font-size: 0.66rem;
    line-height: 1.45;
}

.intersight-auth-requirement.is-ready {
    border-color: color-mix(in srgb, var(--success) 42%, var(--panel-border));
    background: color-mix(in srgb, var(--success) 8%, var(--panel));
}

.intersight-auth-requirement.is-ready > svg {
    color: var(--success);
}

.intersight-auth-requirement.is-missing {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--panel-border));
    background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}

.intersight-auth-requirement.is-missing > svg {
    color: var(--danger);
}

.intersight-setup__form .toolbar-actions {
    align-items: center;
    justify-content: space-between;
}

.intersight-operation-progress {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border: 1px solid color-mix(in srgb, #00bceb 38%, var(--panel-border));
    border-radius: var(--radius-md);
    color: var(--text);
    background: color-mix(in srgb, #00bceb 7%, var(--panel-strong));
}

.intersight-operation-progress > span {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 0.7rem;
    color: #00bceb;
    background: color-mix(in srgb, #00bceb 14%, var(--panel));
}

.intersight-operation-progress > span svg {
    width: 1rem;
    height: 1rem;
    animation: intersight-operation-spin 1.2s linear infinite;
}

.intersight-operation-progress strong {
    display: block;
    font-size: 0.75rem;
}

.intersight-operation-progress p {
    margin: 0.08rem 0 0.35rem;
    color: var(--text-soft);
    font-size: 0.64rem;
}

.intersight-operation-progress div > div {
    height: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, #00bceb 12%, var(--panel));
}

.intersight-operation-progress i {
    display: block;
    width: 38%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #00bceb, #65c04f, transparent);
    animation: intersight-operation-slide 1.1s ease-in-out infinite;
}

.intersight-scope-alert {
    display: grid;
    grid-template-columns: 2.45rem minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    padding: 0.82rem;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--warning) 48%, var(--panel-border));
    border-radius: var(--radius-md);
    color: var(--text);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--warning) 9%, var(--panel-strong)), var(--panel-strong));
    box-shadow: var(--shadow-soft);
}

.intersight-scope-alert > span {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    place-items: center;
    border-radius: 0.72rem;
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 14%, var(--panel));
}

.intersight-scope-alert > span svg {
    width: 1.15rem;
    height: 1.15rem;
}

.intersight-scope-alert h3 {
    margin: 0.12rem 0 0.24rem;
    color: var(--text);
    font-size: 0.88rem;
}

.intersight-scope-alert p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.7rem;
    line-height: 1.5;
}

.intersight-scope-alert__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.55rem;
}

.intersight-scope-alert__facts span {
    padding: 0.3rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--panel-border));
    border-radius: 999px;
    color: var(--text-soft);
    background: var(--panel);
    font-size: 0.64rem;
}

.intersight-scope-alert__facts strong {
    margin-right: 0.18rem;
    color: var(--warning);
}

.intersight-scope-alert .intersight-scope-alert__action {
    margin-top: 0.5rem;
    color: var(--text);
    font-weight: 600;
}

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

@keyframes intersight-operation-slide {
    from { transform: translateX(-120%); }
    to { transform: translateX(310%); }
}

@media (max-width: 72rem) {
    .intersight-connection-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 54rem) {
    .intersight-setup__steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 36rem) {
    .intersight-connection-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .intersight-setup > summary {
        align-items: flex-start;
    }

    .intersight-setup__summary-action {
        display: none;
    }

    .intersight-setup__form .toolbar-actions,
    .intersight-setup__form .toolbar-actions > * {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .intersight-operation-progress > span svg,
    .intersight-operation-progress i {
        animation: none;
    }
}

/* Compact Customer 360 profile-and-design card. Four items remain visible;
   additional design signals stay inside the card's own themed scroll area. */
html[data-theme] .customer360-accordion--customer > .customer360-accordion__summary {
    align-items: center;
    min-height: 3.35rem;
    padding: 0.58rem 2.5rem 0.58rem 0.72rem;
}

html[data-theme] .customer360-accordion--customer .customer360-accordion__summary-main {
    gap: 0.58rem;
}

html[data-theme] .customer360-accordion--customer .customer360-accordion__summary-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.7rem;
}

html[data-theme] .customer360-accordion--customer .customer360-accordion__summary-icon svg {
    width: 0.92rem;
    height: 0.92rem;
}

html[data-theme] .customer360-accordion--customer .customer360-accordion__summary .eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
}

html[data-theme] .customer360-accordion--customer .customer360-accordion__summary h3 {
    margin: 0.02rem 0 0;
    font-size: 0.94rem;
    line-height: 1.2;
}

html[data-theme] .customer360-accordion--customer .customer360-accordion__summary .muted-copy {
    margin-top: 0.12rem;
    font-size: 0.66rem;
    font-weight: 430;
    line-height: 1.3;
}

html[data-theme] .customer360-accordion--customer > .customer360-accordion__summary > .status-pill {
    min-height: 1.65rem;
    padding: 0.24rem 0.48rem;
    font-size: 0.62rem;
    white-space: nowrap;
}

html[data-theme] .customer360-accordion--customer > .customer360-accordion__body {
    padding: 0.42rem 0.55rem 0.55rem;
}

html[data-theme] .customer360-overview__panel--customer {
    padding: 0.68rem;
    border: 1px solid var(--widget-border);
    border-radius: 0.9rem;
}

html[data-theme] .customer360-overview__panel--customer > .chart-card__head {
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.52rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--widget-border) 78%, transparent);
}

html[data-theme] .customer360-overview__panel--customer > .chart-card__head .eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.12em;
}

html[data-theme] .customer360-overview__panel--customer > .chart-card__head h3 {
    margin-top: 0.08rem;
    font-size: 0.9rem;
    line-height: 1.2;
}

html[data-theme] .customer360-overview__panel--customer > .chart-card__head .muted-copy {
    margin-top: 0.08rem;
    font-size: 0.66rem;
    line-height: 1.3;
}

.customer360-profile-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.3rem;
}

html[data-theme] .customer360-profile-actions :is(.toolbar-button, .icon-button) {
    min-height: 1.95rem;
    padding: 0.32rem 0.5rem;
    border-radius: 0.62rem;
    font-size: 0.66rem;
}

.customer360-design-list {
    --customer360-design-row-height: 3.25rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(var(--customer360-design-row-height), auto);
    gap: 0.42rem;
    max-height: calc((var(--customer360-design-row-height) * 2) + 0.42rem);
    padding: 0 0.32rem 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--brand) 68%, var(--text-soft)) color-mix(in srgb, var(--surface-raised) 86%, transparent);
}

.customer360-design-list::-webkit-scrollbar {
    width: 0.42rem;
}

.customer360-design-list::-webkit-scrollbar-track {
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
}

.customer360-design-list::-webkit-scrollbar-thumb {
    border: 1px solid color-mix(in srgb, var(--surface-raised) 72%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand) 72%, var(--text-soft));
}

html[data-theme] .customer360-design-item {
    --customer360-step-accent: var(--brand);
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    align-items: center;
    gap: 0.52rem;
    min-width: 0;
    min-height: var(--customer360-design-row-height);
    margin: 0;
    padding: 0.4rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--customer360-step-accent) 24%, var(--widget-border));
    border-radius: 0.72rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--customer360-step-accent) 8%, var(--surface-raised)), var(--surface));
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent);
    transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

html[data-theme] .customer360-design-item:hover {
    border-color: color-mix(in srgb, var(--customer360-step-accent) 46%, var(--widget-border));
    background: linear-gradient(135deg, color-mix(in srgb, var(--customer360-step-accent) 13%, var(--surface-raised)), var(--surface));
    transform: translateY(-1px);
}

.customer360-design-item--blue { --customer360-step-accent: #4f8cff; }
.customer360-design-item--sky { --customer360-step-accent: #38bdf8; }
.customer360-design-item--mint { --customer360-step-accent: #32d583; }
.customer360-design-item--violet { --customer360-step-accent: #8b5cf6; }
.customer360-design-item--amber { --customer360-step-accent: #f7b955; }
.customer360-design-item--rose { --customer360-step-accent: #f97068; }

.customer360-design-item__icon {
    width: 1.9rem;
    height: 1.9rem;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--customer360-step-accent) 34%, transparent);
    border-radius: 0.58rem;
    color: var(--customer360-step-accent);
    background: color-mix(in srgb, var(--customer360-step-accent) 13%, var(--surface-raised));
    box-shadow: 0 5px 12px color-mix(in srgb, var(--customer360-step-accent) 14%, transparent);
}

.customer360-design-item__icon svg {
    width: 0.92rem;
    height: 0.92rem;
    stroke-width: 2.05;
}

.customer360-design-item__content {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

html[data-theme] .customer360-design-item .detail-item__label,
html[data-theme] .customer360-design-item .detail-item__value {
    display: block;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

html[data-theme] .customer360-design-item .detail-item__label {
    color: var(--text-soft);
    font-size: 0.62rem;
    font-weight: 520;
    line-height: 1.2;
}

html[data-theme] .customer360-design-item .detail-item__value {
    color: var(--text-strong);
    font-size: 0.75rem;
    font-weight: 620;
    line-height: 1.28;
}

@media (max-width: 44rem) {
    html[data-theme] .customer360-accordion--customer > .customer360-accordion__summary {
        align-items: flex-start;
    }

    html[data-theme] .customer360-accordion--customer > .customer360-accordion__summary > .status-pill {
        display: none;
    }

    html[data-theme] .customer360-overview__panel--customer > .chart-card__head {
        align-items: flex-start;
    }

    .customer360-design-list {
        grid-template-columns: minmax(0, 1fr);
        max-height: calc((var(--customer360-design-row-height) * 4) + (0.42rem * 3));
    }
}

/* Intersight adaptive analytics frames. The removed collection-scope picker is
   represented in the resource sidebar, leaving a compact, user-sized canvas. */
.intersight-workspace__content {
    container-name: intersight-content;
    container-type: inline-size;
}

html[data-theme] .intersight-hero {
    grid-template-columns: repeat(auto-fit, minmax(min(25rem, 100%), 1fr));
    gap: clamp(0.65rem, 1.4cqi, 1.25rem);
}

html[data-theme] .intersight-setup__form {
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: clamp(0.55rem, 1cqi, 0.8rem);
}

.intersight-frame-layout-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    min-width: 0;
    margin: 0;
    padding: 0.42rem 0.52rem;
    border: 1px solid color-mix(in srgb, #00bceb 20%, var(--panel-border));
    border-radius: 0.72rem;
    color: var(--text-soft);
    background: color-mix(in srgb, #00bceb 4%, var(--panel));
}

.intersight-frame-layout-toolbar > span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.intersight-frame-layout-toolbar > span > svg {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    color: #72ddf7;
}

.intersight-frame-layout-toolbar > span > span {
    display: grid;
    min-width: 0;
    gap: 0.06rem;
}

.intersight-frame-layout-toolbar strong {
    color: var(--text);
    font-size: 0.68rem;
    font-weight: 680;
}

.intersight-frame-layout-toolbar small {
    overflow: hidden;
    font-size: 0.6rem;
    font-weight: 450;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme] .intersight-frame-layout-toolbar .toolbar-button {
    flex: 0 0 auto;
    min-height: 2rem;
    padding: 0.34rem 0.55rem;
    border-radius: 0.58rem;
    font-size: 0.64rem;
}

.intersight-frame-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: 0.25rem;
    align-items: stretch;
    gap: clamp(0.3rem, 0.5cqi, 0.42rem);
    min-width: 0;
    margin: 0;
}

.intersight-resizable-frame {
    position: relative;
    z-index: 1;
    grid-column: span var(--intersight-frame-span, 6);
    grid-row: span var(--intersight-frame-rows, 36);
    min-width: 0;
    min-height: 0;
    overflow: visible;
    border-radius: var(--radius-lg);
    transition: filter 140ms ease, box-shadow 140ms ease;
}

.intersight-resizable-frame:hover,
.intersight-resizable-frame:focus-within,
.intersight-resizable-frame.is-resizing {
    z-index: 3;
}

.intersight-resizable-frame.is-resizing {
    filter: saturate(1.06);
    box-shadow: 0 0 0 1px color-mix(in srgb, #00bceb 72%, transparent), 0 0 1.4rem color-mix(in srgb, #00bceb 16%, transparent);
    user-select: none;
}

.intersight-resizable-frame__body {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    border-radius: inherit;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, #00bceb 54%, var(--text-soft)) transparent;
}

.intersight-resizable-frame__body > :only-child {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
}

.intersight-resizable-frame__body > .chart-card {
    display: flex;
    flex-direction: column;
}

.intersight-resizable-frame__body > .chart-card > :last-child {
    min-height: 0;
}

.intersight-resizable-frame__label {
    position: absolute;
    z-index: 8;
    top: -0.52rem;
    left: 50%;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    max-width: calc(100% - 2rem);
    padding: 0.17rem 0.4rem;
    opacity: 0;
    border: 1px solid color-mix(in srgb, #00bceb 44%, var(--panel-border));
    border-radius: 999px;
    color: #8be7fa;
    background: var(--panel-strong);
    box-shadow: var(--shadow-soft);
    font-size: 0.54rem;
    font-weight: 650;
    line-height: 1;
    pointer-events: none;
    transform: translateX(-50%) translateY(0.18rem);
    transition: opacity 140ms ease, transform 140ms ease;
}

.intersight-resizable-frame__label svg {
    flex: 0 0 auto;
    width: 0.68rem;
    height: 0.68rem;
}

.intersight-resizable-frame__label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.intersight-resizable-frame:hover > .intersight-resizable-frame__label,
.intersight-resizable-frame:focus-within > .intersight-resizable-frame__label,
.intersight-resizable-frame.is-resizing > .intersight-resizable-frame__label {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.intersight-frame-resize-handle {
    position: absolute;
    z-index: 7;
    display: block;
    touch-action: none;
    outline: none;
}

.intersight-frame-resize-handle::after {
    position: absolute;
    content: "";
    opacity: 0;
    border-radius: 999px;
    background: #72ddf7;
    box-shadow: 0 0 0 1px color-mix(in srgb, #00bceb 45%, transparent), 0 0 0.65rem color-mix(in srgb, #00bceb 28%, transparent);
    transition: opacity 120ms ease;
}

.intersight-resizable-frame:hover > .intersight-frame-resize-handle::after,
.intersight-frame-resize-handle:focus-visible::after,
.intersight-resizable-frame.is-resizing > .intersight-frame-resize-handle::after {
    opacity: 0.8;
}

.intersight-frame-resize-handle--n,
.intersight-frame-resize-handle--s {
    right: 0.85rem;
    left: 0.85rem;
    height: 0.65rem;
    cursor: ns-resize;
}

.intersight-frame-resize-handle--n { top: 0; }
.intersight-frame-resize-handle--s { bottom: 0; }
.intersight-frame-resize-handle--n::after,
.intersight-frame-resize-handle--s::after { right: 0; left: 0; height: 2px; }
.intersight-frame-resize-handle--n::after { top: 0.25rem; }
.intersight-frame-resize-handle--s::after { bottom: 0.25rem; }

.intersight-frame-resize-handle--e,
.intersight-frame-resize-handle--w {
    top: 0.85rem;
    bottom: 0.85rem;
    width: 0.65rem;
    cursor: ew-resize;
}

.intersight-frame-resize-handle--e { right: 0; }
.intersight-frame-resize-handle--w { left: 0; }
.intersight-frame-resize-handle--e::after,
.intersight-frame-resize-handle--w::after { top: 0; bottom: 0; width: 2px; }
.intersight-frame-resize-handle--e::after { right: 0.25rem; }
.intersight-frame-resize-handle--w::after { left: 0.25rem; }

.intersight-frame-resize-handle--ne,
.intersight-frame-resize-handle--nw,
.intersight-frame-resize-handle--se,
.intersight-frame-resize-handle--sw {
    width: 0.95rem;
    height: 0.95rem;
}

.intersight-frame-resize-handle--ne { top: 0; right: 0; cursor: nesw-resize; }
.intersight-frame-resize-handle--nw { top: 0; left: 0; cursor: nwse-resize; }
.intersight-frame-resize-handle--se { right: 0; bottom: 0; cursor: nwse-resize; }
.intersight-frame-resize-handle--sw { bottom: 0; left: 0; cursor: nesw-resize; }
.intersight-frame-resize-handle--ne::after,
.intersight-frame-resize-handle--nw::after,
.intersight-frame-resize-handle--se::after,
.intersight-frame-resize-handle--sw::after { inset: 0.28rem; }

@container intersight-content (max-width: 50rem) {
    .intersight-frame-layout-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .intersight-frame-layout-toolbar small {
        white-space: normal;
    }

    .intersight-frame-layout-toolbar .toolbar-button {
        align-self: flex-start;
    }

    .intersight-resizable-frame {
        grid-column: 1 / -1 !important;
    }

    .intersight-inventory__filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .intersight-inventory__filters .toolbar-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 54rem) {
    .intersight-resizable-frame {
        grid-column: 1 / -1 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .intersight-resizable-frame,
    .intersight-resizable-frame__label,
    .intersight-frame-resize-handle::after {
        transition: none;
    }
}
/* Provider-owned AI catalog and tenant-scoped inherited command governance. */
.admin-page--ai-governance {
    --admin-accent: #7c3aed;
    --admin-accent-strong: #6d28d9;
}

.ai-governance-workspace {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    container-type: inline-size;
}

.ai-governance-scope {
    margin-block: 0.7rem;
}

.ai-governance-summary {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(11.5rem, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 0.65rem;
    margin: 0.7rem 0;
    padding: 0.1rem 0 0.35rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
}

.ai-governance-metric {
    display: grid;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 4.6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--panel-border);
    border-radius: var(--radius-sm);
    background: var(--panel-strong);
    box-shadow: var(--shadow-soft);
}

.ai-governance-metric > span {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: 0.75rem;
    color: var(--admin-accent);
    background: color-mix(in srgb, var(--admin-accent) 13%, var(--panel));
}

.ai-governance-metric svg {
    width: 1.2rem;
    height: 1.2rem;
}

.ai-governance-metric div {
    display: grid;
    min-width: 0;
    gap: 0.05rem;
}

.ai-governance-metric small,
.ai-governance-metric em {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.69rem;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-governance-metric strong {
    color: var(--text);
    font-size: 1.05rem;
    line-height: 1.05;
}

.ai-governance-tabs {
    margin: 0.25rem 0 0.7rem;
}

.ai-governance-tabs .dataset-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ai-governance-tabs svg {
    width: 1rem;
    height: 1rem;
}

.ai-governance-tabs em {
    min-width: 1.65rem;
    padding: 0.1rem 0.38rem;
    border-radius: 999px;
    color: var(--text-muted);
    background: color-mix(in srgb, var(--admin-accent) 9%, var(--panel));
    font-size: 0.67rem;
    font-style: normal;
}

.ai-governance-body {
    display: grid;
    gap: 0.7rem;
    min-width: 0;
}

.ai-governance-editor-grid,
.ai-governance-table-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.ai-governance-rule-form,
.ai-governance-compact-form,
.ai-governance-capability-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
    gap: 0.65rem;
}

.ai-governance-compact-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ai-governance-price-form {
    grid-column: 1 / -1;
}

.ai-governance-price-form .chart-card__head,
.ai-governance-price-preview {
    grid-column: 1 / -1;
}

.ai-governance-price-preview {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.65rem;
    color: var(--text-soft);
    background: var(--panel);
    font-size: 0.78rem;
}

.ai-governance-price-table .ai-governance-table table {
    min-width: 74rem;
}

.ai-governance-capability-form {
    grid-template-columns: minmax(12rem, 1fr) minmax(10rem, 0.65fr) minmax(16rem, 1.5fr) max-content;
}

.ai-governance-rule-form label,
.ai-governance-compact-form label,
.ai-governance-capability-form label {
    display: grid;
    min-width: 0;
    gap: 0.28rem;
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 750;
}

.ai-governance-rule-form :is(input, select, textarea),
.ai-governance-compact-form :is(input, select, textarea),
.ai-governance-capability-form :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
}

.ai-governance-form-span,
.ai-governance-rule-form .toolbar-actions,
.ai-governance-compact-form .toolbar-actions {
    grid-column: 1 / -1;
}

.ai-governance-capability-form .chart-card__head {
    grid-column: 1 / -1;
}

.ai-governance-editor,
.ai-governance-compact-form,
.ai-governance-capability-form,
.ai-governance-body > .chart-card,
.ai-governance-table-grid > .chart-card {
    margin: 0;
}

.ai-governance-table {
    max-height: min(32rem, 55vh);
    overflow: auto;
    scrollbar-width: thin;
}

.ai-governance-table table {
    min-width: 58rem;
}

.ai-governance-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.ai-governance-table td {
    vertical-align: top;
}

.ai-governance-unified-catalog { min-width: 0; width: 100%; }
.ai-governance-unified-catalog .ai-governance-table table { min-width: 86rem; }
.ai-governance-unified-catalog td:first-child { min-width: 12rem; max-width: 17rem; overflow-wrap: anywhere; }
.ai-governance-unified-catalog td:nth-child(4) { min-width: 14rem; max-width: 20rem; overflow-wrap: anywhere; }
.ai-governance-unified-catalog td:nth-child(6) { min-width: 12rem; max-width: 22rem; white-space: normal; }
.ai-catalog-actions { display: flex; flex-wrap: wrap; gap: .6rem; min-width: 12rem; }
.ai-catalog-action-group { display: grid; gap: .2rem; }
.ai-catalog-action-group > small { color: var(--text-muted); font-size: .72rem; }
.ai-catalog-action-group .table-row-actions { flex-wrap: nowrap; }

.ai-governance-table td > small,
.ai-governance-table td > strong {
    display: block;
}

.ai-governance-table td > small {
    margin-top: 0.18rem;
    color: var(--text-muted);
}

.ai-governance-table code {
    color: var(--text);
    font-size: 0.72rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.ai-governance-learned-table {
    max-height: min(38rem, 62vh);
}

.ai-governance-table .success-text {
    color: var(--success);
}

.ai-governance-table .danger-text {
    color: var(--danger);
}

@container (max-width: 76rem) {
    .ai-governance-rule-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-governance-capability-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ai-governance-capability-form .toolbar-actions {
        grid-column: 1 / -1;
    }
}

@container (max-width: 54rem) {
    .ai-governance-editor-grid,
    .ai-governance-table-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .ai-governance-rule-form,
    .ai-governance-compact-form,
    .ai-governance-capability-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-governance-capability-form .toolbar-actions {
        grid-column: auto;
    }
}

/* -------------------------------------------------------------------------
   Final compact data surfaces

   These rules intentionally target table/search chrome and the two dense
   operational workspaces. Forms, dashboard cards, and general content keep
   their normal sizing. Table rows retain natural height so wrapped values are
   never clipped in exchange for density.
   ------------------------------------------------------------------------- */
:root {
    --easyclick-table-cell-block: 0.42rem;
    --easyclick-table-cell-inline: 0.56rem;
    --easyclick-table-search-height: 2.2rem;
}

#appContent :where(
    .table-wrap,
    .compact-table-shell,
    .meeting-history-table-shell,
    .device-command-table-wrap,
    .automation-center__table-wrap,
    .agentic-command-table-wrap,
    .agentic-target-table-wrap,
    .agentic-run-results__table-wrap,
    .ai-governance-table
) table :is(th, td) {
    height: auto;
    max-height: none;
    padding: var(--easyclick-table-cell-block) var(--easyclick-table-cell-inline);
    line-height: 1.35;
    vertical-align: top;
}

#appContent :where(
    .table-wrap,
    .compact-table-shell,
    .meeting-history-table-shell,
    .device-command-table-wrap,
    .automation-center__table-wrap,
    .agentic-command-table-wrap,
    .agentic-target-table-wrap,
    .agentic-run-results__table-wrap,
    .ai-governance-table
) table tbody tr {
    height: auto;
    min-height: 0;
    max-height: none;
}

#appContent :where(
    .table-wrap,
    .compact-table-shell,
    .meeting-history-table-shell,
    .device-command-table-wrap,
    .automation-center__table-wrap,
    .agentic-command-table-wrap,
    .agentic-target-table-wrap,
    .agentic-run-results__table-wrap,
    .ai-governance-table
) table td :is(p, small, code, pre) {
    max-height: none;
    line-height: inherit;
    overflow-wrap: anywhere;
}

html[data-theme] body #appContent :where(
    .table-wrap,
    .compact-table-shell,
    .meeting-history-table-shell,
    .device-command-table-wrap,
    .automation-center__table-wrap,
    .agentic-command-table-wrap,
    .agentic-target-table-wrap,
    .agentic-run-results__table-wrap,
    .ai-governance-table
) table thead th {
    position: sticky;
    top: 0;
    z-index: 6;
    background: var(--ds-surface-raised, var(--panel-strong)) !important;
    background-clip: padding-box !important;
    box-shadow: inset 0 -1px 0 var(--panel-border);
}

/* Shared data-grid search treatment; topbar and sidebar searches are excluded. */
#appContent :is(
    .table-widget__toolbar,
    .compact-table__toolbar,
    .table-searchband,
    .table-filter-strip,
    .easyclick-table-tools,
    .automation-center__table-toolbar,
    .automation-center__result-toolbar,
    .automation-center__picker-search,
    .automation-result-detail__search-field,
    .agentic-target-table-toolbar
) :is(input.toolbar-search, input.compact-search, input[type=search]) {
    box-sizing: border-box;
    width: 100%;
    height: var(--easyclick-table-search-height) !important;
    min-height: var(--easyclick-table-search-height) !important;
    padding: 0.36rem 2.15rem 0.36rem 2rem !important;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--panel-border)) !important;
    border-radius: 0.62rem !important;
    background-color: var(--panel-strong) !important;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent) !important;
}

#appContent :is(
    .table-widget__toolbar,
    .compact-table__toolbar,
    .table-searchband,
    .table-filter-strip,
    .automation-center__table-toolbar,
    .automation-center__result-toolbar,
    .agentic-target-table-toolbar
) .search-field::before {
    position: absolute;
    z-index: 2;
    left: 0.7rem;
    width: 0.58rem;
    height: 0.58rem;
    content: '';
    border: 1.5px solid var(--text-muted);
    border-radius: 50%;
    pointer-events: none;
}

#appContent :is(
    .table-widget__toolbar,
    .compact-table__toolbar,
    .table-searchband,
    .table-filter-strip,
    .automation-center__table-toolbar,
    .automation-center__result-toolbar,
    .agentic-target-table-toolbar
) .search-field::after {
    position: absolute;
    z-index: 2;
    left: 1.23rem;
    width: 0.38rem;
    height: 1.5px;
    content: '';
    background: var(--text-muted);
    pointer-events: none;
    transform: translateY(0.34rem) rotate(45deg);
    transform-origin: left center;
}

#appContent :is(
    .table-widget__toolbar,
    .compact-table__toolbar,
    .table-searchband,
    .table-filter-strip,
    .easyclick-table-tools,
    .automation-center__table-toolbar,
    .automation-center__result-toolbar,
    .automation-center__picker-search,
    .automation-result-detail__search-field,
    .agentic-target-table-toolbar
) :is(input.toolbar-search, input.compact-search, input[type=search]):is(:focus, :focus-visible) {
    outline: none !important;
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--brand) 18%, transparent) !important;
}

#appContent :is(
    .table-widget__toolbar,
    .compact-table__toolbar,
    .table-searchband,
    .table-filter-strip,
    .easyclick-table-tools,
    .automation-center__table-toolbar,
    .automation-center__result-toolbar,
    .automation-center__picker-search,
    .automation-result-detail__search-field,
    .agentic-target-table-toolbar
) input[type=search]::-webkit-search-cancel-button {
    display: none;
}

/* The shared Columns affordance is an icon button; its accessible name stays
   in the existing sr-only label and the menu remains a normal disclosure. */
.easyclick-table-tools .easyclick-column-menu > summary {
    width: 2.2rem;
    min-width: 2.2rem;
    max-width: 2.2rem;
    height: 2.2rem;
    min-height: 2.2rem;
    max-height: 2.2rem;
    display: inline-grid;
    place-items: center;
    gap: 0;
    padding: 0;
    border-color: color-mix(in srgb, var(--brand) 26%, var(--panel-border));
    border-radius: 0.62rem;
}

.easyclick-table-tools .easyclick-column-menu > summary > svg {
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
}

.easyclick-table-tools .easyclick-column-menu[open] > summary,
.easyclick-table-tools .easyclick-column-menu > summary:is(:hover, :focus-visible) {
    outline: none;
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 12%, var(--panel-strong));
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--brand) 14%, transparent);
}

/* Reusable count badge for checkbox-backed summary controls. */
.selection-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 3.8rem;
    min-height: 1.25rem;
    padding: 0.14rem 0.42rem;
    border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--panel-border));
    border-radius: 999px;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 9%, var(--panel));
    font-size: 0.6875rem !important;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

details > summary.toolbar-select:has(.selection-count-badge) > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Agentic target filters use compact checkbox disclosures that stay above the
   picker table instead of expanding its toolbar. */
.agentic-filter-menu {
    position: relative;
    min-width: 0;
    font-family: var(--font-sans);
    line-height: 1.35;
    letter-spacing: normal;
    text-transform: none;
}

.agentic-device-picker select {
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.agentic-filter-menu[open] {
    z-index: 90;
}

.agentic-filter-menu > summary {
    min-width: 0;
    min-height: 3rem;
    display: flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.32rem 0.52rem;
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--panel-border));
    border-radius: 0.62rem;
    color: var(--text);
    background: var(--panel-strong);
    cursor: pointer;
    list-style: none;
}

.agentic-filter-menu > summary::-webkit-details-marker {
    display: none;
}

.agentic-filter-menu > summary > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agentic-filter-menu > summary > svg:last-child {
    width: 0.82rem !important;
    height: 0.82rem !important;
    margin-inline-start: auto;
    transition: transform 140ms ease;
}

.agentic-filter-menu[open] > summary {
    border-color: var(--brand);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--brand) 14%, transparent);
}

.agentic-filter-menu[open] > summary > svg:last-child {
    transform: rotate(180deg);
}

.agentic-filter-menu__panel {
    position: absolute;
    z-index: 100;
    top: calc(100% + 0.32rem);
    left: 0;
    width: min(25rem, calc(100vw - 2rem));
    max-height: min(24rem, 60vh);
    display: grid;
    align-content: start;
    gap: 0.25rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.45rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.72rem;
    color: var(--text);
    background: var(--panel-strong);
    box-shadow: 0 1rem 2.4rem rgba(1, 4, 9, 0.38);
    scrollbar-width: thin;
}

.agentic-filter-menu:last-child .agentic-filter-menu__panel {
    right: 0;
    left: auto;
}

.agentic-filter-menu__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.agentic-filter-menu .selection-count-badge {
    min-width: 2.8rem;
    font-size: 0.75rem !important;
}

.agentic-filter-menu__option {
    min-width: 0;
    min-height: 2.75rem;
    display: grid;
    grid-template-columns: 1.125rem 1.25rem minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 0.52rem;
    color: var(--text);
    background: transparent;
    cursor: pointer;
}

.agentic-filter-menu__option:hover,
.agentic-filter-menu__option:focus-within {
    border-color: color-mix(in srgb, var(--brand) 25%, var(--panel-border));
    background: color-mix(in srgb, var(--brand) 8%, var(--panel));
}

.agentic-filter-menu__option input[type=checkbox] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: var(--brand);
}

.agentic-filter-menu__option :is(svg, img, .country-flag-icon),
.agentic-filter-menu__option .automation-ios-badge > span,
.agentic-filter-menu__option .agentic-ios-badge > span {
    width: 1rem !important;
    min-width: 1rem !important;
    max-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    max-height: 1rem !important;
    margin: 0;
}

/* The shared IOS badge includes a label for tables; picker options already
   render the full IOS name in their text column, so keep only its icon here. */
.agentic-filter-menu__option-icon--ios {
    display: grid;
    place-items: center;
    width: 1.25rem;
    min-width: 0;
    overflow: hidden;
}

.agentic-filter-menu__option-icon--ios .automation-ios-badge {
    display: grid;
    place-items: center;
    width: 1.25rem;
    min-width: 0;
    gap: 0;
}

.agentic-filter-menu__option-icon--ios .automation-ios-badge strong {
    display: none;
}

.agentic-filter-menu__clear {
    min-height: 1.9rem;
    justify-self: stretch;
    margin-bottom: 0.12rem;
    padding: 0.3rem 0.48rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.5rem;
    color: var(--text-muted);
    background: var(--panel);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

html[data-theme=dark] .agentic-filter-menu__panel {
    border-color: #30363d;
    color: #f0f6fc;
    background: #0d1117;
}

html[data-theme=dark] .agentic-filter-menu__option:hover,
html[data-theme=dark] .agentic-filter-menu__option:focus-within {
    background: color-mix(in srgb, var(--brand) 12%, #161b22);
}

@media (max-width: 42rem) {
    .agentic-filter-menu {
        flex: 1 1 min(10rem, 100%);
    }

    .agentic-filter-menu__panel {
        width: min(25rem, calc(100vw - 1.5rem));
        max-height: min(18rem, 52vh);
    }
}

/* Database status is the fifth compact footer segment. */
.workspace > .workspace-footer,
html[data-theme=dark] .workspace > .workspace-footer,
html[data-theme=light] .workspace > .workspace-footer {
    grid-template-columns: repeat(5, minmax(10.5rem, 1fr));
}

.workspace-footer #databaseStatusButton.footer-pill--database {
    --footer-accent: #8c959f;
    appearance: none;
    width: auto;
    color: #f0f6fc;
    font: inherit;
    text-align: left;
    cursor: pointer;
    opacity: 1;
    transition: background-color 140ms ease, box-shadow 140ms ease;
}

.workspace-footer #databaseStatusButton.footer-pill--database:is(:hover, :focus-visible) {
    outline: none;
    background: color-mix(in srgb, var(--footer-accent) 9%, #0d1117);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--footer-accent) 56%, #21262d);
}

.workspace-footer #databaseStatusButton.footer-pill--database.is-connected {
    --footer-accent: #3fb950;
}

.workspace-footer #databaseStatusButton.footer-pill--database.is-failed {
    --footer-accent: #f85149;
}

.workspace-footer #databaseStatusButton.footer-pill--database.is-checking {
    --footer-accent: #d29922;
    cursor: wait;
}

.workspace-footer #databaseStatusButton.footer-pill--database :is(#databaseStatusValue, #databaseStatusMeta) {
    color: color-mix(in srgb, var(--footer-accent) 82%, #f0f6fc);
}

.workspace-footer #databaseStatusButton.footer-pill--database.is-checking .footer-pill__icon {
    animation: easyclick-database-status-pulse 900ms ease-in-out infinite alternate;
}

@keyframes easyclick-database-status-pulse {
    from { opacity: 0.58; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

/* Keep generated table controls on one compact baseline and expose the
   column-resize hit area without adding row height. */
#appContent .agentic-target-table-toolbar > .easyclick-table-tools--inline,
#appContent :is(.table-widget__toolbar, .compact-table__toolbar, .automation-center__table-toolbar) > .easyclick-table-tools--inline {
    flex: 0 0 auto;
    align-self: center;
    margin-block: 0;
    margin-inline-start: auto;
}

#appContent .agentic-target-table-toolbar > :is(.table-search-logic, .table-page-size) {
    min-height: var(--easyclick-table-search-height);
    align-self: center;
}

#appContent .agentic-target-table-toolbar > :is(.table-search-logic, .table-page-size) select {
    height: var(--easyclick-table-search-height);
    min-height: var(--easyclick-table-search-height);
}

#appContent .easyclick-managed-table thead th > .easyclick-column-resizer {
    top: 15%;
    right: -0.22rem;
    width: 0.5rem;
    height: 70%;
    border-inline-end: 2px solid color-mix(in srgb, var(--brand) 38%, transparent);
    border-radius: 999px;
    opacity: 0.5;
    transition: opacity 120ms ease, background-color 120ms ease;
}

#appContent .easyclick-managed-table thead th:is(:hover, :focus-within) > .easyclick-column-resizer,
#appContent .easyclick-managed-table thead th > .easyclick-column-resizer:is(:hover, :focus-visible) {
    opacity: 1;
    background: color-mix(in srgb, var(--brand) 22%, transparent);
}

#appContent .agentic-target-table-wrap .agentic-target-table tbody > tr > :is(th, td) {
    height: auto;
    max-height: none;
    padding-block: 0.38rem;
}

/* Agentic workspace: compact shell, sidebar, header metrics, and stage rail. */
html .app-shell[data-view-kind=agentic_network] .agentic-workspace {
    grid-template-columns: minmax(13.75rem, 15.25rem) minmax(0, 1fr) !important;
}

html .app-shell[data-view-kind=agentic_network] .agentic-workspace.is-history-collapsed {
    grid-template-columns: 3.25rem minmax(0, 1fr) !important;
}

/* Fill the measured lane between the content area's top edge and the real
   workspace footer. The measured fallback avoids legacy viewport caps and
   keeps the composer immediately above the footer at every desktop size. */
@media (min-width: 56.251rem) {
    html body .app-shell[data-view-kind=agentic_network] .content-stage {
        height: 100%;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr);
        gap: 0 !important;
        padding: 0.25rem !important;
        overflow: hidden !important;
        scroll-padding-bottom: 0 !important;
    }

    html body .app-shell[data-view-kind=agentic_network] .agentic-workspace {
        box-sizing: border-box;
        height: var(--agentic-viewport-lane-height, 100%) !important;
        min-height: 0 !important;
        max-height: none !important;
        align-self: start;
    }
}

html .app-shell[data-view-kind=agentic_network] .agentic-history-panel {
    gap: 0.55rem;
    padding: 0.65rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-history-panel__head {
    gap: 0.4rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-history-panel__new {
    min-height: 2.15rem;
    padding: 0.38rem 0.52rem;
}

html .app-shell[data-view-kind=agentic_network] :is(.agentic-profile-card, .agentic-inventory-card, .agentic-safety-card) {
    padding: 0.55rem;
    border-radius: 0.68rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-profile-card {
    grid-template-columns: 1.85rem minmax(0, 1fr);
    gap: 0.45rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-profile-card__mark {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.52rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-inventory-card__metric {
    margin-top: 0.35rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-inventory-card__metric strong {
    font-size: 1.08rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-chat-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
}

html .app-shell[data-view-kind=agentic_network] .agentic-chat-panel__notice-slot {
    min-width: 0;
    min-height: 0;
    max-height: 8rem;
    overflow: auto;
}

html .app-shell[data-view-kind=agentic_network] .agentic-chat-panel__notice-slot:empty {
    height: 0;
    overflow: hidden;
}

html .app-shell[data-view-kind=agentic_network] .agentic-chat-panel__notice-slot > .notice-card {
    margin: 0.4rem 0.72rem 0;
}

html .app-shell[data-view-kind=agentic_network] .agentic-chat-panel__head {
    min-height: 0;
    grid-template-columns: minmax(13rem, 1fr) minmax(24rem, auto) !important;
    gap: 0.55rem !important;
    padding: 0.58rem 0.8rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-chat-panel__head > div:first-child {
    min-width: 0;
}

html .app-shell[data-view-kind=agentic_network] .agentic-chat-panel__head > div:first-child > p:not(.eyebrow) {
    overflow: hidden;
    margin-top: 0.12rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Professional Agentic response header - quiet navy surface with accessible contrast. */
.agentic-conversation > .agentic-message--assistant .agentic-message__meta {
    min-height: 3.1rem;
    padding: 0.58rem 0.76rem;
    border-bottom: 1px solid rgba(125, 160, 255, 0.26);
    color: #f8fafc;
    background: linear-gradient(110deg, #172554 0%, #1e293b 58%, #24324a 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.agentic-conversation > .agentic-message--assistant .agentic-message__meta :is(
    .agentic-message__identity,
    .agentic-message__identity > span,
    .agentic-message__meta-actions time
) {
    color: #f8fafc !important;
}

.agentic-conversation > .agentic-message--assistant .agentic-message__meta-actions time {
    color: #cbd5e1 !important;
    opacity: 1;
}

.agentic-message__header-identity,
.agentic-message__identity {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
}

.agentic-message__identity-icon {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-grid;
    flex: 0 0 1.7rem;
    place-items: center;
    border: 1px solid rgba(147, 197, 253, 0.34);
    border-radius: 0.52rem;
    color: #bfdbfe !important;
    background: rgba(59, 130, 246, 0.16);
}

.agentic-message__identity-icon svg {
    width: 0.92rem !important;
    height: 0.92rem !important;
}

.agentic-message__operation {
    min-height: 1.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(196, 181, 253, 0.42);
    border-radius: 999px;
    color: #ede9fe !important;
    background: rgba(124, 58, 237, 0.18);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.025em;
}

.agentic-message__operation svg {
    width: 0.78rem !important;
    height: 0.78rem !important;
}

.agentic-conversation > .agentic-message--assistant .agentic-message__meta-actions button {
    border-color: rgba(148, 163, 184, 0.42);
    color: #e2e8f0;
    background: rgba(15, 23, 42, 0.48);
}

.agentic-conversation > .agentic-message--assistant .agentic-message__meta-actions button:hover {
    border-color: rgba(147, 197, 253, 0.62);
    color: #ffffff;
    background: rgba(59, 130, 246, 0.24);
}

html .app-shell[data-view-kind=agentic_network] .agentic-header-tools {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center !important;
    gap: 0.35rem !important;
}

html .app-shell[data-view-kind=agentic_network] .agentic-run-metrics {
    width: min(100%, 34rem) !important;
    grid-template-columns: minmax(6rem, 1.4fr) repeat(4, minmax(3.65rem, 1fr)) !important;
    gap: 0.22rem !important;
}

html .app-shell[data-view-kind=agentic_network] .agentic-run-metrics > span {
    min-height: 1.85rem;
    padding: 0.22rem 0.34rem;
    border-radius: 0.46rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-operation-chip,
html .app-shell[data-view-kind=agentic_network] .agentic-stop-button {
    min-height: 1.85rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.46rem;
    border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--border));
    border-radius: 999px;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 9%, var(--surface));
    font-size: 0.66rem;
    font-weight: 750;
    white-space: nowrap;
}

html .app-shell[data-view-kind=agentic_network] .agentic-operation-chip svg {
    width: 0.78rem !important;
    height: 0.78rem !important;
}

html .app-shell[data-view-kind=agentic_network] .agentic-workflow-tabs {
    display: flex !important;
    gap: 0.28rem;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0.34rem 0.5rem;
    scrollbar-width: thin;
}

html .app-shell[data-view-kind=agentic_network] .agentic-workflow-tab {
    flex: 1 0 5.6rem;
    width: auto !important;
    min-width: 5.6rem !important;
    min-height: 2.2rem;
    gap: 0.26rem;
    padding: 0.3rem 0.4rem;
}

/* Agentic composer controls stay dense without changing form controls outside
   the Agentic workspace. */
html .app-shell[data-view-kind=agentic_network] .agentic-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        'status notice'
        'attachments attachments'
        'input input';
    align-items: center;
    gap: 0.22rem 0.65rem;
    padding: 0.4rem 0.72rem max(0.45rem, env(safe-area-inset-bottom, 0px));
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer__status {
    grid-area: status;
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer__notice {
    grid-area: notice;
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer__attachment-panel {
    grid-area: attachments;
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer__input {
    grid-area: input;
    width: 100%;
    min-height: 0;
    grid-template-columns: auto minmax(10rem, 1fr) 2.15rem 2.15rem !important;
    align-items: end;
    gap: 0.32rem;
    margin: 0;
    padding: 0.34rem 0.38rem;
    border-radius: 0.76rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer__tool-cluster {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer-tool {
    min-width: 0;
    height: 2.15rem;
    display: grid;
    grid-template-columns: 1.7rem minmax(5.4rem, auto);
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 0.58rem;
    color: var(--text);
    background: var(--surface-muted);
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer-tool > span:first-child {
    display: grid;
    place-items: center;
    color: var(--brand);
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer-tool svg {
    width: 0.78rem !important;
    height: 0.78rem !important;
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer-tool select {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0.24rem 1.3rem 0.24rem 0.15rem;
    border: 0;
    outline: 0;
    color: inherit;
    background-color: transparent;
    font: inherit;
    font-size: 0.66rem;
    font-weight: 700;
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer textarea {
    box-sizing: border-box;
    height: 3.15rem !important;
    min-height: 3.15rem !important;
    max-height: 6.5rem !important;
    padding: 0.3rem 0.2rem;
    overflow-y: auto;
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer .agentic-control-button {
    width: 2.15rem;
    min-width: 2.15rem;
    height: 2.15rem;
    min-height: 2.15rem;
    border-radius: 0.58rem;
}

html .app-shell[data-view-kind=agentic_network] :is(.agentic-composer__status, .agentic-composer__notice) {
    width: auto;
    min-width: 0;
    overflow: hidden;
    margin: 0;
    font-size: 0.62rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html .app-shell[data-view-kind=agentic_network] .agentic-working__body {
    min-height: 3rem;
    gap: 0.55rem;
    padding: 0.52rem 0.65rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-working__progress {
    display: inline-flex;
    align-items: center;
    min-height: 1.2rem;
    margin-inline-start: 0;
    padding: 0.12rem 0.38rem;
    border: 1px solid color-mix(in srgb, #67e8f9 38%, var(--border));
    border-radius: 999px;
    color: color-mix(in srgb, #67e8f9 82%, var(--text));
    background: color-mix(in srgb, #67e8f9 9%, var(--surface));
    font-size: 0.62rem;
    line-height: 1;
}

html .app-shell[data-view-kind=agentic_network] .agentic-run-results__progress {
    height: 0.32rem;
    border-radius: 999px;
}

html .app-shell[data-view-kind=agentic_network] .agentic-run-results__progress > span {
    min-width: 0.18rem;
    border-radius: inherit;
}

/* Automation Center: a compact status rail and an independently collapsible
   command library. */
.automation-center__heading-tools {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.automation-center__summary-rail {
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(4.65rem, max-content);
    align-items: stretch;
    gap: 0.3rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.08rem;
    scrollbar-width: thin;
}

.automation-center__summary-chip {
    --automation-summary-tone: var(--brand);
    min-width: 0;
    display: grid;
    grid-template-columns: 1.3rem minmax(0, 1fr);
    grid-template-areas:
        'icon value'
        'icon label';
    align-items: center;
    gap: 0 0.34rem;
    padding: 0.3rem 0.42rem;
    border: 1px solid color-mix(in srgb, var(--automation-summary-tone) 30%, var(--panel-border));
    border-radius: 0.58rem;
    color: var(--automation-summary-tone);
    background: color-mix(in srgb, var(--automation-summary-tone) 8%, var(--panel-strong));
}

.automation-center__summary-chip > span {
    grid-area: icon;
    width: 1.3rem;
    height: 1.3rem;
    display: grid;
    place-items: center;
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--automation-summary-tone) 13%, transparent);
}

.automation-center__summary-chip svg {
    width: 0.72rem !important;
    height: 0.72rem !important;
}

.automation-center__summary-chip strong {
    grid-area: value;
    min-width: 0;
    overflow: hidden;
    font-size: 0.78rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.automation-center__summary-chip small {
    grid-area: label;
    min-width: 0;
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.61rem;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.automation-center__summary-chip.is-info { --automation-summary-tone: #38bdf8; }
.automation-center__summary-chip.is-brand { --automation-summary-tone: var(--brand); }
.automation-center__summary-chip.is-warning { --automation-summary-tone: #f59e0b; }
.automation-center__summary-chip.is-success { --automation-summary-tone: #2ec27e; }
.automation-center__summary-chip.is-danger { --automation-summary-tone: #f85149; }

.automation-center__selection-card--commands.is-command-list-collapsed {
    align-self: start;
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0.65rem;
    resize: none;
}

.automation-center__selection-card--commands.is-command-list-collapsed > :not(.automation-center__table-head) {
    display: none !important;
}

.automation-center__selection-card--commands.is-command-list-collapsed > .automation-center__table-head {
    margin-bottom: 0;
}

.automation-center__table-counts [data-automation-toggle-command-list] {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    min-height: 2rem;
    padding: 0;
    border-radius: 0.55rem;
}

@media (max-width: 68rem) {
    .automation-center__heading-tools {
        width: 100%;
        align-items: stretch;
        justify-content: flex-start;
    }

    .automation-center__summary-rail {
        width: 100%;
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-chat-panel__head {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-header-tools {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) auto;
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-run-metrics {
        width: 100% !important;
    }
}

@media (max-width: 56.25rem) {
    html .app-shell[data-view-kind=agentic_network] .agentic-workspace,
    html .app-shell[data-view-kind=agentic_network] .agentic-workspace.is-history-collapsed {
        height: auto;
        min-height: 100%;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-history-panel {
        max-height: 15rem;
        overflow: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-workspace.is-history-collapsed .agentic-history-panel {
        max-height: 3.25rem;
        overflow: hidden;
    }

    #appContent .agentic-target-table-toolbar {
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    #appContent .agentic-target-table-toolbar > .agentic-target-search {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 48rem) {
    html .app-shell[data-view-kind=agentic_network] .agentic-header-tools {
        grid-template-columns: minmax(0, 1fr);
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-run-metrics {
        grid-template-columns: repeat(5, minmax(5.1rem, 1fr)) !important;
        overflow-x: auto;
        padding-bottom: 0.12rem;
        scrollbar-width: thin;
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-operation-chip {
        justify-self: start;
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-composer {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            'status'
            'attachments'
            'input'
            'notice';
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-composer__input {
        grid-template-columns: minmax(0, 1fr) 2.15rem 2.15rem !important;
        grid-template-areas:
            'tools tools tools'
            'prompt action voice';
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-composer__tool-cluster {
        grid-area: tools;
        overflow-x: auto;
        padding-bottom: 0.08rem;
        scrollbar-width: thin;
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-composer__tool-cluster > .agentic-composer-tool {
        flex: 1 0 7.25rem;
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-composer textarea {
        grid-area: prompt;
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-composer :is(.agentic-inline-stop, .agentic-send-button) {
        grid-area: action;
    }

    html .app-shell[data-view-kind=agentic_network] .agentic-composer .agentic-voice-button {
        grid-area: voice;
    }
}

@media (prefers-reduced-motion: reduce) {
    .workspace-footer #databaseStatusButton.footer-pill--database.is-checking .footer-pill__icon {
        animation: none;
    }
}

/* Compact selection language: count badges show only double-check + number,
   while bulk actions remain fully named through aria-label and title. */
.selection-count-badge {
    min-width: 2.45rem;
    gap: 0.22rem;
    padding-inline: 0.38rem;
}

.selection-count-badge svg {
    width: 0.72rem !important;
    height: 0.72rem !important;
}

.selection-action {
    width: 2.2rem !important;
    min-width: 2.2rem !important;
    height: 2.2rem !important;
    min-height: 2.2rem !important;
    display: inline-grid !important;
    place-items: center;
    padding: 0 !important;
}

.selection-action svg {
    width: 0.92rem !important;
    height: 0.92rem !important;
}

.selection-action--all {
    color: var(--success) !important;
    border-color: color-mix(in srgb, var(--success) 42%, var(--panel-border)) !important;
    background: color-mix(in srgb, var(--success) 10%, var(--panel-strong)) !important;
}

.selection-action--clear {
    color: var(--danger) !important;
    border-color: color-mix(in srgb, var(--danger) 42%, var(--panel-border)) !important;
    background: color-mix(in srgb, var(--danger) 9%, var(--panel-strong)) !important;
}

.selection-action--show {
    color: var(--brand) !important;
    border-color: color-mix(in srgb, var(--brand) 42%, var(--panel-border)) !important;
    background: color-mix(in srgb, var(--brand) 9%, var(--panel-strong)) !important;
}

.selection-action--show.is-active {
    color: var(--success) !important;
    border-color: color-mix(in srgb, var(--success) 55%, var(--panel-border)) !important;
    background: color-mix(in srgb, var(--success) 14%, var(--panel-strong)) !important;
}

/* Boolean operators are typed directly into the search field. Retain legacy
   controls in the DOM only for compatibility; never expose a second mode UI. */
.table-search-logic,
label:has(> #searchLogicSelect),
label:has(> #infraIosXePickerSearchLogic),
label:has(> #automationCenterDeviceSearchLogic),
label:has(> #automationCenterCommandSearchLogic),
label:has(> select[id$="SearchLogic"]),
label:has(> select[data-static-search-logic]) {
    display: none !important;
}

/* Agentic execution and operation controls are icon-only disclosure buttons.
   Composer menus open upward; message-level execution menus open downward. */
html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu {
    position: relative;
    flex: 0 0 auto;
    min-width: 0;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu > summary.agentic-composer-tool {
    box-sizing: border-box;
    width: 2.15rem;
    min-width: 2.15rem;
    max-width: 2.15rem;
    height: 2.15rem;
    min-height: 2.15rem;
    display: inline-grid;
    grid-template-columns: 1fr;
    place-items: center;
    padding: 0;
    overflow: visible;
    list-style: none;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--border));
    border-radius: 0.58rem;
    color: var(--brand);
    background: var(--surface-muted);
    cursor: pointer;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu > summary.agentic-composer-tool::-webkit-details-marker {
    display: none;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu > summary.agentic-composer-tool::marker {
    content: "";
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu > summary.agentic-composer-tool > span:first-child {
    display: inline-grid;
    place-items: center;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu > summary.agentic-composer-tool svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu[open] > summary.agentic-composer-tool,
html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu > summary.agentic-composer-tool:is(:hover, :focus-visible) {
    outline: none;
    color: var(--text);
    border-color: var(--brand);
    background: color-mix(in srgb, var(--brand) 16%, var(--surface-muted));
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--brand) 16%, transparent);
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu[data-disabled=true] > summary.agentic-composer-tool {
    cursor: not-allowed;
    opacity: 0.48;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__panel {
    position: absolute;
    z-index: 420;
    left: 0;
    bottom: calc(100% + 0.46rem);
    box-sizing: border-box;
    width: min(28rem, calc(100vw - 2rem));
    max-height: min(32rem, calc(100dvh - 4rem));
    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: 0.45rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--panel-border));
    border-radius: 0.72rem;
    background: var(--panel-strong);
    box-shadow: 0 1rem 2.6rem rgba(0, 0, 0, 0.38);
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 0;
    padding: 0.16rem 0.3rem 0.32rem;
    color: var(--text);
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__panel > header small {
    color: var(--brand);
    font-size: 0.68rem;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__option {
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    min-height: 4.45rem !important;
    max-height: none !important;
    display: grid;
    grid-template-columns: 1.8rem minmax(0, 1fr) 1.1rem;
    align-items: center;
    gap: 0.55rem;
    padding: 0.62rem 0.66rem;
    overflow: visible !important;
    border: 1px solid transparent;
    border-radius: 0.58rem;
    color: var(--text);
    background: transparent;
    font: inherit;
    line-height: normal;
    white-space: normal !important;
    text-align: left;
    cursor: pointer;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__option:is(:hover, :focus-visible),
html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__option.is-active {
    outline: none;
    border-color: color-mix(in srgb, var(--brand) 34%, var(--panel-border));
    background: color-mix(in srgb, var(--brand) 11%, var(--panel));
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__option-icon {
    width: 1.7rem;
    height: 1.7rem;
    display: inline-grid;
    place-items: center;
    align-self: center;
    border-radius: 0.48rem;
    color: var(--brand);
    background: color-mix(in srgb, var(--brand) 13%, var(--panel));
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__option-copy {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 0.18rem;
    overflow: visible;
    white-space: normal;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__option strong {
    display: block;
    font-size: 0.75rem;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: break-word;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__option small {
    display: block;
    margin: 0;
    overflow: visible;
    color: var(--text-muted);
    font-size: 0.64rem;
    line-height: 1.42;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__check {
    min-width: 0;
    display: inline-grid;
    place-items: center;
    align-self: center;
    color: var(--success);
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__check svg {
    width: 0.88rem !important;
    height: 0.88rem !important;
}

html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu--message .agentic-icon-menu__panel {
    inset: calc(100% + 0.4rem) 0 auto auto;
}

html .app-shell[data-view-kind=agentic_network] .agentic-composer__tool-cluster {
    overflow: visible !important;
}

html .app-shell[data-view-kind=agentic_network] .agentic-run-metric--tokens em {
    color: var(--text-muted);
    font-size: 0.54rem;
    font-style: normal;
    line-height: 1;
}

.agentic-typewriter__caret {
    display: inline-block;
    width: 0.08em;
    height: 1em;
    margin-left: 0.14em;
    vertical-align: -0.12em;
    background: currentColor;
    animation: agentic-typewriter-caret 0.8s steps(1, end) infinite;
}

@keyframes agentic-typewriter-caret {
    50% { opacity: 0; }
}

@media (max-width: 720px) {
    html .app-shell[data-view-kind=agentic_network] .agentic-icon-menu__panel {
        position: fixed;
        inset: auto 0.75rem 5.8rem;
        width: auto;
        max-height: calc(100dvh - 7.2rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .agentic-typewriter__caret {
        animation: none;
    }
}

/* Shared accessible text utility. It must never consume layout space inside
   icon-only controls, menus, search fields, or export toolbars. */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.automation-center__command-search {
    position: relative;
    display: flex;
    grid-column: auto;
    align-items: center;
    min-width: 0;
}

.automation-center__command-search > .toolbar-search {
    width: 100%;
    padding-right: 3.25rem;
}

.automation-center__command-search > [data-automation-toggle-command-list] {
    position: absolute;
    top: 50%;
    right: 0.28rem;
    z-index: 1;
    transform: translateY(-50%);
}

.automation-center__table-toolbar--commands {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.automation-center__table-toolbar--commands .automation-center__table-toolbar-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.42rem;
    min-width: max-content;
}

@container (max-width: 46rem) {
    .automation-center__selection-card--resizable .automation-center__table-toolbar--commands {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.popup-window--no-eyebrow #popupWindowEyebrow {
    display: none;
}

/* Keep donut chart filters, export, and glossary controls in one row on desktop. */
.donut-card .chart-controls {
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: center;
}

.donut-card .chart-controls .toolbar-search,
.donut-card .chart-controls .compact-search {
    flex: 1 1 11.5rem;
    min-width: 10rem;
}

.donut-glossary-trigger {
    flex-wrap: nowrap;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .donut-card .chart-controls {
        width: 100%;
    }
}

/* Dashboard enterprise value stays in one framed group and uses the same
   accent-rail flash-card language as the infrastructure snapshot. */
html[data-theme] body #appContent[data-view-kind="dashboard"] .dashboard-flash-group--value .dashboard-flash-group__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Automation summary: original accent-rail flash cards in a compact frame. */
.automation-center__summary-frame {
    display: grid;
    gap: 0.48rem;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}

.automation-center__summary-frame-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
}

.automation-center__summary-frame-head :is(p, h3) { margin: 0; }
.automation-center__summary-frame-head h3 { margin-top: 0.12rem; font-size: 0.92rem; }

.automation-center__summary-frame .automation-center__summary-rail {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.42rem;
    width: 100%;
    padding: 0;
    overflow: visible;
}

.automation-center__summary-frame .automation-center__summary-chip {
    --automation-summary-tone: var(--brand);
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas: "icon label value";
    align-items: center;
    min-height: 2.75rem;
    gap: 0.38rem;
    padding: 0.32rem 0.46rem 0.32rem 0.62rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--automation-summary-tone) 40%, var(--panel-border));
    border-radius: 999px;
    color: var(--text);
    background: linear-gradient(102deg,
        color-mix(in srgb, var(--automation-summary-tone) 16%, var(--panel-strong)) 0%,
        color-mix(in srgb, var(--automation-summary-tone) 7%, var(--panel-strong)) 42%,
        var(--panel-strong) 100%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}

.automation-center__summary-frame .automation-center__summary-chip::before {
    content: none;
    display: none;
}

.automation-center__summary-frame .automation-center__summary-chip > span {
    grid-area: icon;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid color-mix(in srgb, var(--automation-summary-tone) 62%, #fff 16%);
    border-radius: 999px;
    color: color-mix(in srgb, var(--automation-summary-tone) 38%, #fff 62%);
    background: color-mix(in srgb, var(--automation-summary-tone) 68%, var(--panel-strong));
    box-shadow: 0 0.24rem 0.68rem color-mix(in srgb, var(--automation-summary-tone) 22%, transparent);
}

.automation-center__summary-frame .automation-center__summary-chip svg {
    width: 0.78rem !important;
    height: 0.78rem !important;
}

.automation-center__summary-frame .automation-center__summary-chip small {
    grid-area: label;
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 750;
    line-height: 1.2;
}

.automation-center__summary-frame .automation-center__summary-chip strong {
    grid-area: value;
    min-width: 2.5rem;
    padding: 0.25rem 0.46rem;
    border: 1px solid color-mix(in srgb, var(--automation-summary-tone) 50%, var(--panel-border));
    border-radius: 999px;
    color: color-mix(in srgb, var(--automation-summary-tone) 55%, #fff 45%);
    background: color-mix(in srgb, var(--automation-summary-tone) 12%, transparent);
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    text-align: center;
}

@media (max-width: 72rem) {
    html[data-theme] body #appContent[data-view-kind="dashboard"] .dashboard-flash-group--value .dashboard-flash-group__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .automation-center__summary-frame .automation-center__summary-rail {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 42rem) {
    html[data-theme] body #appContent[data-view-kind="dashboard"] .dashboard-flash-group--value .dashboard-flash-group__grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .automation-center__summary-frame .automation-center__summary-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 32rem) {
    .automation-center__summary-frame .automation-center__summary-rail {
        grid-template-columns: minmax(0, 1fr);
    }
}
.ai-prompt-catalog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.ai-prompt-catalog__head {
    align-items: flex-start;
}

.ai-prompt-catalog__head > div {
    min-width: 0;
}

.ai-prompt-catalog__head h3 {
    max-width: 60rem;
    line-height: 1.2;
}

.ai-prompt-catalog__head > .primary-button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.ai-prompt-catalog__categories {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .65rem;
}

.ai-prompt-catalog__categories span,
.ai-prompt-category {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: .2rem .5rem;
    border: 1px solid color-mix(in srgb, var(--brand) 34%, var(--panel-border));
    border-radius: 999px;
    color: color-mix(in srgb, var(--brand) 74%, var(--text));
    background: color-mix(in srgb, var(--brand) 10%, var(--panel));
    font-size: .66rem;
    font-weight: 800;
    white-space: nowrap;
}

.ai-prompt-table {
    border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--panel-border));
    border-radius: .8rem;
    overflow-x: auto;
}

.ai-prompt-table table {
    width: max(100%, 76rem);
    table-layout: fixed;
}

.ai-prompt-table th,
.ai-prompt-table td {
    vertical-align: middle;
}

.ai-prompt-table th:nth-child(1),
.ai-prompt-table td:nth-child(1) { width: 10rem; }
.ai-prompt-table th:nth-child(2),
.ai-prompt-table td:nth-child(2) { width: 24rem; }
.ai-prompt-table th:nth-child(3),
.ai-prompt-table td:nth-child(3) { width: 19rem; }
.ai-prompt-table th:nth-child(4),
.ai-prompt-table td:nth-child(4) { width: 6rem; }
.ai-prompt-table th:nth-child(5),
.ai-prompt-table td:nth-child(5) { width: 8rem; }
.ai-prompt-table th:nth-child(6),
.ai-prompt-table td:nth-child(6) { width: 16rem; }
.ai-prompt-table th:nth-child(7),
.ai-prompt-table td:nth-child(7) { width: 8rem; }

.ai-prompt-table td:nth-child(2) strong,
.ai-prompt-table td:nth-child(2) small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-prompt-table td:nth-child(2) strong {
    margin-bottom: .22rem;
}

.ai-prompt-table td:nth-child(2) code {
    color: var(--text-soft);
    font-size: .72rem;
}

.ai-prompt-table .table-row-actions {
    justify-content: flex-start;
}

.ai-prompt-modal .admin-edit-modal__panel {
    display: flex;
    flex-direction: column;
    width: min(72rem, calc(100vw - 2rem));
    max-height: min(54rem, calc(100dvh - 2rem));
    overflow: hidden;
}

.ai-prompt-modal .admin-edit-modal__header {
    flex: 0 0 auto;
    align-items: center;
    gap: 1rem;
}

.ai-prompt-modal .admin-edit-modal__header > div {
    min-width: 0;
}

.ai-prompt-modal .admin-edit-modal__header .icon-button {
    flex: 0 0 auto;
    margin-left: auto;
}

.ai-prompt-modal .admin-edit-modal__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ai-prompt-editor > .chart-card__head {
    margin-bottom: 0.8rem;
}

.ai-prompt-editor > .chart-card__head h3 {
    display: none;
}

.ai-prompt-editor > .chart-card__head p {
    margin: 0;
}

.ai-prompt-editor .admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem 1rem;
}

.ai-prompt-editor .admin-form-grid > label {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    min-width: 0;
}

.ai-prompt-editor .admin-form-grid > label > span {
    color: var(--text-soft);
    font-size: 0.78rem;
    font-weight: 600;
}

.ai-prompt-editor .admin-form-grid :is(input, select, textarea) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.ai-prompt-editor textarea {
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    line-height: 1.45;
}

.ai-prompt-editor textarea[name="response_schema_json"] {
    min-height: 8rem;
}

.ai-prompt-editor textarea[name="template_text"] {
    min-height: 16rem;
}

.ai-prompt-editor .checkbox-field {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

.ai-prompt-editor .checkbox-field input {
    width: auto;
}

.ai-prompt-editor .toolbar-actions {
    position: sticky;
    z-index: 2;
    bottom: -1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin: 0.9rem -1.15rem -1rem;
    padding: 0.8rem 1.15rem 1rem;
    border-top: 1px solid var(--panel-border);
    background: var(--panel-strong);
}

@media (max-width: 46rem) {
    .ai-prompt-modal .admin-edit-modal__panel {
        width: 100%;
        max-height: 94dvh;
    }

    .ai-prompt-editor .admin-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ai-prompt-markdown-editor {
    tab-size: 4;
    white-space: pre-wrap;
}

.operational-metric-rules {
    display: grid;
    gap: 0.9rem;
}

.metric-technology-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.68rem;
    overflow-x: auto;
    padding: 0.15rem 0.15rem 0.45rem;
    scrollbar-width: thin;
}

.metric-technology-card {
    --metric-card-accent: #7c8aa5;
    position: relative;
    display: grid;
    grid-template-columns: 2.7rem minmax(0, 1fr) 1.25rem;
    align-items: center;
    gap: 0.68rem;
    min-height: 5.15rem;
    padding: 0.72rem 0.72rem 0.72rem 0.9rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--metric-card-accent) 24%, var(--panel-border));
    border-radius: 0.9rem;
    color: var(--text);
    text-align: left;
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--metric-card-accent) 16%, transparent), transparent 4.8rem),
        linear-gradient(145deg, color-mix(in srgb, var(--metric-card-accent) 9%, var(--panel-strong)), var(--panel));
    box-shadow: 0 0.7rem 1.5rem rgb(3 8 20 / 16%), inset 0 1px 0 rgb(255 255 255 / 4%);
    cursor: pointer;
    isolation: isolate;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.metric-technology-strip > .metric-technology-card {
    flex: 0 0 12.5rem;
}

/* Compact metric technology navigation; leave unrelated cards unchanged. */
.metric-technology-rail { position: relative; min-width: 0; margin-block: .4rem .8rem; }
.metric-technology-rail .metric-technology-strip { gap: .45rem; padding-inline: 2.4rem; scroll-padding-inline: 2.4rem; }
.metric-technology-rail .metric-technology-card { grid-template-columns: 2rem minmax(0, 1fr) 1rem; gap: .45rem; min-height: 3.8rem; padding: .5rem .55rem .5rem .65rem; border-radius: .65rem; }
.metric-technology-rail .metric-technology-card__icon { width: 2rem; height: 2rem; border-radius: .55rem; }
.metric-technology-rail .metric-technology-card__icon :is(svg, .vendor-mark) { width: 1.1rem; height: 1.1rem; }
.metric-technology-rail .metric-technology-card__copy strong { font-size: .84rem; }
.metric-technology-rail .metric-technology-card__copy small { font-size: .7rem; }
.metric-technology-rail .metric-technology-card__status { width: 1rem; height: 1rem; }
.metric-technology-rail .metric-technology-card__status svg { width: .8rem; height: .8rem; }
.metric-technology-nav { display: none; position: absolute; top: calc(50% - .2rem); transform: translateY(-50%); z-index: 3; width: 2.1rem; min-width: 2.1rem; height: 2.1rem; padding: .4rem; border: 1px solid var(--panel-border); border-radius: 50%; background: var(--panel-strong); color: var(--text); box-shadow: 0 .2rem .5rem #0003; cursor: pointer; }
.metric-technology-rail.has-overflow .metric-technology-nav { display: grid; place-items: center; }
.metric-technology-nav--previous { left: .15rem; }
.metric-technology-nav--next { right: .15rem; }
.metric-technology-nav svg { width: 1.1rem; height: 1.1rem; }
.metric-technology-nav:is(:hover,:focus-visible) { border-color: var(--brand); color: var(--brand); }
.metric-technology-nav:disabled { opacity: .35; cursor: default; }

.metric-technology-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 0.24rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--metric-card-accent) 70%, white), var(--metric-card-accent));
    box-shadow: 0 0 0.9rem color-mix(in srgb, var(--metric-card-accent) 45%, transparent);
}

.metric-technology-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -1.2rem;
    bottom: -1.8rem;
    width: 5.4rem;
    height: 5.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--metric-card-accent) 12%, transparent);
    filter: blur(0.8rem);
}

.metric-technology-card__icon {
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--metric-card-accent) 42%, var(--panel-border));
    border-radius: 0.78rem;
    color: var(--metric-card-accent);
    background: color-mix(in srgb, var(--metric-card-accent) 16%, var(--panel-strong));
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%), 0 0.55rem 1rem color-mix(in srgb, var(--metric-card-accent) 18%, transparent);
}

.metric-technology-card__icon :is(svg, .vendor-mark) {
    width: 1.35rem;
    height: 1.35rem;
}

.metric-technology-card__icon .vendor-mark svg {
    width: 100%;
    height: 100%;
}

.metric-technology-card__copy {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.metric-technology-card__copy strong {
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-technology-card__copy small {
    color: var(--text-soft);
    font-size: 0.72rem;
    font-weight: 650;
}

.metric-technology-card__status {
    display: grid;
    width: 1.22rem;
    height: 1.22rem;
    place-items: center;
    align-self: start;
    color: var(--text-soft);
}

.metric-technology-card__status svg {
    width: 0.92rem;
    height: 0.92rem;
}

.metric-technology-card__status.is-complete {
    color: #75d69d;
}

.metric-technology-card__selected-check {
    position: absolute;
    top: 0.42rem;
    right: 0.42rem;
    z-index: 2;
    display: grid;
    width: 1.05rem;
    height: 1.05rem;
    place-items: center;
    color: #8be3a9;
    border-radius: 50%;
    background: color-mix(in srgb, #22c55e 18%, var(--panel-strong));
    box-shadow: 0 0 0.65rem rgb(34 197 94 / 42%);
}

.metric-technology-card__selected-check svg {
    width: 0.88rem;
    height: 0.88rem;
}

.metric-technology-card.is-active .metric-technology-card__status {
    opacity: 0;
}

.metric-technology-card:is(:hover, :focus-visible),
.metric-technology-card.is-active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--metric-card-accent) 76%, white 8%);
    outline: none;
    box-shadow: 0 0.9rem 2rem rgb(3 8 20 / 25%), 0 0 0 0.15rem color-mix(in srgb, var(--metric-card-accent) 15%, transparent);
}

.metric-technology-card.is-active {
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--metric-card-accent) 25%, transparent), transparent 5rem),
        linear-gradient(145deg, color-mix(in srgb, var(--metric-card-accent) 18%, var(--panel-strong)), var(--panel));
}

.metric-technology-card--violet { --metric-card-accent: #9b87f5; }
.metric-technology-card--indigo { --metric-card-accent: #6f8cff; }
.metric-technology-card--cyan { --metric-card-accent: #22c7df; }
.metric-technology-card--blue { --metric-card-accent: #5b8def; }
.metric-technology-card--sky { --metric-card-accent: #49b8f2; }
.metric-technology-card--mint { --metric-card-accent: #65c991; }
.metric-technology-card--rose { --metric-card-accent: #ef7185; }
.metric-technology-card--purple { --metric-card-accent: #8b83ed; }
.metric-technology-card--teal { --metric-card-accent: #42c4b0; }
.metric-technology-card--azure { --metric-card-accent: #5d9cf6; }
.metric-technology-card--slate { --metric-card-accent: #8c98ab; }

.operational-metric-rules td small {
    display: block;
    margin-top: 0.2rem;
    color: var(--text-soft);
}

.admin-form-grid__wide {
    grid-column: 1 / -1;
}

.admin-search-field {
    display: grid;
    gap: .35rem;
    margin: 1rem 0;
}

.ai-prompt-table code {
    color: var(--muted-text, #a7b1c8);
    font-size: .78rem;
}

@media (max-width: 1100px) {
    .ai-prompt-catalog-grid { grid-template-columns: 1fr; }
}

/* Super Admin / System Settings */
.system-settings-workspace {
    display: grid;
    gap: 0.72rem;
}

.system-settings-workspace .admin-page-hero {
    grid-template-columns: 2.45rem minmax(0, 1fr) auto;
    gap: 0.6rem;
    min-height: 4.35rem;
    padding: 0.55rem 0.72rem;
}

.system-settings-workspace .admin-page-hero__icon {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.68rem;
}

.system-settings-workspace .admin-page-hero__icon svg {
    width: 1.12rem;
    height: 1.12rem;
}

.system-settings-workspace .admin-page-hero__copy .eyebrow {
    flex-wrap: wrap;
    font-size: 0.6rem;
    line-height: 1.2;
}

.system-settings-workspace .admin-page-hero__copy h2 {
    font-size: clamp(1.04rem, 1.35vw, 1.26rem);
}

.system-settings-workspace .admin-page-hero__copy > p:last-child {
    font-size: 0.68rem;
    line-height: 1.32;
}

.system-settings-workspace .admin-page-hero__actions .status-pill {
    min-height: 1.95rem;
    padding-inline: 0.58rem;
    font-size: 0.68rem;
}

.system-settings-cards {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    overflow-x: auto;
    padding: .08rem .08rem .22rem;
    scrollbar-width: thin;
}

.system-settings-cards > .system-settings-card {
    flex: 1 0 10.5rem;
}

.system-settings-table .table-row-actions .function-view {
    color: #7dd3fc;
    border-color: rgb(56 189 248 / 45%);
    background: rgb(14 116 144 / 18%);
}

.system-settings-table .table-row-actions .function-edit {
    color: #fcd34d;
    border-color: rgb(245 158 11 / 48%);
    background: rgb(180 83 9 / 18%);
}

.system-settings-table .table-row-actions .function-delete {
    color: #fda4af;
    border-color: rgb(244 63 94 / 48%);
    background: rgb(190 18 60 / 18%);
}

.system-settings-card {
    --system-settings-accent: #60a5fa;
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .16rem .5rem;
    min-height: 4.25rem;
    padding: .58rem .62rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--system-settings-accent) 32%, var(--panel-border));
    border-radius: .7rem;
    color: var(--text);
    text-align: left;
    background: linear-gradient(145deg, color-mix(in srgb, var(--system-settings-accent) 11%, var(--panel-strong)), var(--panel));
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.system-settings-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: .24rem;
    background: var(--system-settings-accent);
    box-shadow: 0 0 1rem color-mix(in srgb, var(--system-settings-accent) 55%, transparent);
}

.system-settings-card::after {
    content: "✓";
    position: absolute;
    top: .4rem;
    right: .4rem;
    display: grid;
    width: 1.1rem;
    height: 1.1rem;
    place-items: center;
    border: 2px solid var(--panel-strong);
    border-radius: 50%;
    color: #fff;
    background: #22c55e;
    box-shadow: 0 0 .7rem rgb(34 197 94 / 45%);
    font-size: .82rem;
    font-weight: 900;
    line-height: 1;
    opacity: 0;
    transform: scale(.7);
    transition: opacity 160ms ease, transform 160ms ease;
}

.system-settings-card.is-active::after {
    opacity: 1;
    transform: scale(1);
}

.system-settings-card > span {
    display: grid;
    grid-row: 1 / span 2;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--system-settings-accent) 50%, var(--panel-border));
    border-radius: .58rem;
    color: var(--system-settings-accent);
    background: color-mix(in srgb, var(--system-settings-accent) 14%, var(--panel));
}

.system-settings-card > span svg { width: 1rem; height: 1rem; }
.system-settings-card strong { align-self: end; font-size: .79rem; line-height: 1.18; }
.system-settings-card small { align-self: start; color: var(--text-soft); font-size: .66rem; }
.system-settings-card:is(:hover, :focus-visible),
.system-settings-card.is-active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--system-settings-accent) 78%, white 8%);
    outline: none;
    box-shadow: 0 .9rem 2rem rgb(3 8 20 / 25%), 0 0 0 .14rem color-mix(in srgb, var(--system-settings-accent) 14%, transparent);
}

@container (max-width: 48rem) {
    .system-settings-workspace .admin-page-hero {
        grid-template-columns: 2.45rem minmax(0, 1fr);
    }

    .system-settings-workspace .admin-page-hero__actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-left: 3.05rem;
    }
}

@container (max-width: 32rem) {
    .system-settings-workspace .admin-page-hero__actions {
        padding-left: 0;
    }
}

.system-settings-panel { min-width: 0; }
.system-settings-panel .chart-card__head {
    align-items: center;
    gap: 0.55rem;
    padding-block: 0.35rem;
}

html[data-theme] body .system-settings-workspace .admin-page-hero__actions .system-settings-relationship-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 1.8rem;
    width: 1.8rem;
    height: 1.8rem;
    min-width: 1.8rem;
    min-height: 1.8rem;
    padding: 0;
    border-radius: 50%;
    font: 700 1rem/1 var(--frame-heading-font);
}
html[data-theme] body .system-settings-relationship-info:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}
.system-settings-panel .chart-card__head .primary-button {
    min-height: 2.25rem;
    padding: 0.45rem 0.68rem;
    font-size: 0.76rem;
}
.system-settings-table { max-height: 52rem; }
.system-settings-table tbody tr { cursor: pointer; }
.system-settings-table tbody tr:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); outline: none; }
.system-settings-table td { max-width: 30rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.system-settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.system-settings-form > label:not(.checkbox-field) { display: grid; gap: .35rem; }
.system-settings-form :is(input, select, textarea) { width: 100%; }
.system-settings-field--wide,
.system-settings-form .admin-edit-modal__footer { grid-column: 1 / -1; }
.system-settings-field--check { align-self: end; min-height: 3rem; }
.system-settings-form :is(input, select, textarea):disabled { opacity: .86; cursor: default; }

/* Final interaction layout overrides. Keep these after the legacy responsive
   rules so compact frames remain usable without wrapping their controls. */
html .app-shell[data-view-kind="agentic_network"] .agentic-chat-panel__head {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 0 !important;
    padding: 0.48rem 0.72rem !important;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-header-tools {
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.55rem !important;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    grid-template-columns: repeat(5, minmax(5.6rem, 1fr)) !important;
    gap: 0.28rem !important;
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics small {
    font-size: 0.58rem;
    line-height: 1.05;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics strong {
    max-width: 100%;
    font-size: 0.73rem;
    line-height: 1.12;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-header-controls,
html .app-shell[data-view-kind="agentic_network"] .agentic-operation-toolbar,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.42rem;
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
}

html .app-shell[data-view-kind="agentic_network"] .agentic-header-controls {
    flex: 0 0 auto;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-operation-toolbar,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar > label,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar__wake,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar__status {
    min-height: 2.2rem;
    padding: 0.3rem 0.48rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.58rem;
    color: var(--text-muted);
    background: var(--panel-strong);
    font-size: 0.68rem;
    font-weight: 750;
    white-space: nowrap;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-operation-toolbar select,
html .app-shell[data-view-kind="agentic_network"] .agentic-voice-toolbar select {
    max-width: 9rem;
    min-width: 0;
    border: 0;
    color: var(--text);
    background: transparent;
    font: 750 0.74rem/1.1 var(--font-sans, Inter, system-ui, sans-serif);
}

html .automation-center__summary-frame .automation-center__summary-chip {
    min-height: 2.2rem;
    padding: 0.22rem 0.36rem 0.22rem 0.48rem;
    border-radius: 0.62rem;
}

html .automation-center__summary-frame .automation-center__summary-chip > span {
    width: 1.42rem;
    height: 1.42rem;
}

html .automation-center__summary-frame .automation-center__summary-chip small {
    font-size: 0.64rem;
}

html .automation-center__summary-frame .automation-center__summary-chip strong {
    min-width: 2rem;
    padding: 0.2rem 0.38rem;
    font-size: 0.68rem;
}

@media (min-width: 72rem) {
    html .automation-center__summary-frame {
        position: relative;
        min-height: 3.35rem;
    }

    html .automation-center__summary-frame .automation-center__summary-rail {
        position: absolute;
        top: 0.55rem;
        right: 0.55rem;
        width: auto;
        max-width: calc(100% - 0.9rem);
        grid-template-columns: repeat(5, minmax(7rem, max-content));
        justify-content: end;
        overflow-x: auto;
    }
}

html .automation-center__selection-card--resizable .automation-center__table-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    min-width: max-content;
    overflow-x: auto;
}

html .automation-center__selection-card--resizable .automation-center__table-toolbar > .toolbar-search,
html .automation-center__selection-card--resizable .automation-center__table-toolbar > .search-field {
    flex: 1 1 18rem;
    min-width: 14rem;
    grid-column: auto !important;
}

html .automation-center__selection-card--resizable .automation-center__table-toolbar > label,
html .automation-center__selection-card--resizable .automation-center__table-toolbar-actions,
html .automation-center__selection-card--resizable .automation-center__table-toolbar > button {
    flex: 0 0 auto;
}

html .automation-center__selection-card--resizable .automation-center__table-toolbar--commands .automation-center__table-toolbar-actions {
    flex-wrap: nowrap !important;
    min-width: max-content;
}

@media (max-width: 68rem) {
    html .app-shell[data-view-kind="agentic_network"] .agentic-header-tools {
        flex-wrap: wrap;
    }

    html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics {
        flex: 1 1 100%;
    }
}

@media (max-width: 48rem) {
    .system-settings-form { grid-template-columns: minmax(0, 1fr); }
    .system-settings-field--wide,
    .system-settings-form .admin-edit-modal__footer { grid-column: auto; }
}

/* Tenant-aware asset lifecycle and device-health dashboard. */
.asset-health-workspace {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 1rem;
    padding: clamp(.75rem, 1.2vw, 1.35rem);
}

.asset-health-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: clamp(1rem, 1.7vw, 1.65rem);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--panel-border));
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at 92% 5%, rgb(111 126 255 / 16%), transparent 32%),
        linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 92%, #18294a), var(--panel));
    box-shadow: 0 1rem 2.4rem rgb(2 7 18 / 24%);
}

.asset-health-hero__icon {
    display: grid;
    width: 4rem;
    height: 4rem;
    place-items: center;
    border: 1px solid rgb(134 153 255 / 58%);
    border-radius: 1rem;
    color: #eaf0ff;
    background: linear-gradient(145deg, #637cf4, #445dd2);
    box-shadow: 0 .8rem 1.8rem rgb(64 85 210 / 30%);
}

.asset-health-hero__icon svg { width: 2rem; height: 2rem; }
.asset-health-hero h2 { margin: .16rem 0 .32rem; font-size: clamp(1.35rem, 2vw, 2.15rem); }
.asset-health-hero p { margin: 0; color: var(--text-soft); }
.asset-health-hero__actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap; }

.asset-health-scope-badge {
    display: inline-flex;
    align-items: center;
    max-width: min(24rem, 100%);
    gap: .42rem;
    padding: .42rem .68rem;
    border: 1px solid color-mix(in srgb, #69d5a4 38%, var(--panel-border));
    border-radius: 999px;
    color: #8ee0b6;
    background: color-mix(in srgb, #69d5a4 10%, var(--panel-strong));
    font-size: .72rem;
    font-weight: 750;
    line-height: 1.25;
}

.asset-health-scope-badge i {
    display: grid;
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    place-items: center;
    font-style: normal;
}

.asset-health-scope-badge i svg {
    width: 1rem !important;
    min-width: 1rem !important;
    max-width: 1rem !important;
    height: 1rem !important;
    min-height: 1rem !important;
    max-height: 1rem !important;
}

.asset-health-filterbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(13rem, 1fr)) minmax(12rem, auto);
    align-items: end;
    gap: .85rem;
    padding: .9rem;
}

.asset-health-filterbar label,
.asset-health-filterbar__meta { display: grid; gap: .35rem; }
.asset-health-filterbar label > span,
.asset-health-filterbar__meta > span { color: var(--text-soft); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.asset-health-filterbar select { width: 100%; min-height: 3rem; }
.asset-health-filterbar__meta { justify-self: end; min-width: 12rem; padding: .35rem .6rem; text-align: right; }
.asset-health-filterbar__meta strong { font-size: .84rem; }

.asset-health-flash-group {
    width: 100%;
    max-width: none;
}

.asset-health-report-index {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .8rem 1rem;
    padding: .78rem .9rem;
}

.asset-health-report-index h3 {
    margin: .12rem 0 0;
    font-size: .92rem;
}

.asset-health-report-index__links {
    display: flex;
    min-width: 0;
    gap: .42rem;
    padding-bottom: .16rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.asset-health-report-index__links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.1rem;
    flex: 0 0 auto;
    gap: .45rem;
    padding: .38rem .58rem;
    border: 1px solid var(--panel-border);
    border-radius: .62rem;
    color: var(--text-soft);
    background: color-mix(in srgb, var(--panel-strong) 82%, transparent);
    font-size: .68rem;
    font-weight: 700;
    text-decoration: none;
}

.asset-health-report-index__links a:hover,
.asset-health-report-index__links a:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--panel-border));
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 9%, var(--panel-strong));
}

.asset-health-report-index__links strong {
    min-width: 1.6rem;
    padding: .12rem .34rem;
    border-radius: 999px;
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.asset-health-report-anchor {
    display: grid;
    min-width: 0;
    scroll-margin-top: 5rem;
}

.asset-health-report-anchor > .donut-card {
    min-width: 0;
    height: 100%;
}

.asset-health-cards {
    display: grid;
    grid-template-columns: repeat(6, minmax(9rem, 1fr));
    gap: .75rem;
}

.asset-health-card {
    --asset-card-accent: #7f8cff;
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 6.2rem;
    gap: .75rem;
    padding: .9rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--asset-card-accent) 34%, var(--panel-border));
    border-radius: .95rem;
    background: linear-gradient(145deg, color-mix(in srgb, var(--asset-card-accent) 10%, var(--panel-strong)), var(--panel));
    box-shadow: inset .22rem 0 0 var(--asset-card-accent), 0 .65rem 1.5rem rgb(2 7 18 / 16%);
}

.asset-health-card > span {
    display: grid;
    flex: 0 0 2.55rem;
    width: 2.55rem;
    height: 2.55rem;
    place-items: center;
    border-radius: .78rem;
    color: var(--asset-card-accent);
    background: color-mix(in srgb, var(--asset-card-accent) 16%, var(--panel-strong));
}

.asset-health-card > span svg { width: 1.3rem; height: 1.3rem; }
.asset-health-card div { display: grid; min-width: 0; gap: .2rem; }
.asset-health-card small { overflow: hidden; color: var(--text-soft); font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.asset-health-card strong { font-size: clamp(1.2rem, 1.7vw, 1.75rem); line-height: 1; }
.asset-health-card--mint { --asset-card-accent: #69d5a4; }
.asset-health-card--rose { --asset-card-accent: #f07182; }
.asset-health-card--violet { --asset-card-accent: #a58cff; }
.asset-health-card--amber { --asset-card-accent: #f4bd53; }
.asset-health-card--sky { --asset-card-accent: #68c7ed; }
.asset-health-card--ocean { --asset-card-accent: #72a7ff; }

.asset-health-grid { display: grid; min-width: 0; gap: 1rem; }
.asset-health-grid--overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.asset-health-grid--tables { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.asset-health-panel { min-width: 0; padding: 1rem; overflow: hidden; }
.asset-health-panel--wide { grid-column: 1 / -1; }
.asset-health-panel > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.asset-health-panel > header h3 { margin: .12rem 0 0; }
.asset-health-panel > header > span { color: var(--text-soft); font-size: .78rem; font-weight: 700; }

.asset-health-donut-wrap { display: grid; grid-template-columns: minmax(10rem, .8fr) minmax(12rem, 1fr); align-items: center; gap: 1rem; min-height: 15rem; }
.asset-health-donut {
    display: grid;
    width: min(13rem, 100%);
    aspect-ratio: 1;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    box-shadow: 0 0 2rem rgb(82 105 255 / 15%);
}
.asset-health-donut > div { display: grid; width: 66%; aspect-ratio: 1; place-content: center; border-radius: 50%; text-align: center; background: var(--panel); }
.asset-health-donut strong { font-size: 1.65rem; }
.asset-health-donut span { color: var(--text-soft); font-size: .72rem; }
.asset-health-legend { display: grid; gap: .55rem; }
.asset-health-legend > span { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; padding: .55rem .65rem; border: 1px solid var(--panel-border); border-radius: .65rem; background: color-mix(in srgb, var(--panel-strong) 76%, transparent); }
.asset-health-legend i { width: .65rem; height: .65rem; border-radius: 50%; background: var(--legend); box-shadow: 0 0 .7rem color-mix(in srgb, var(--legend) 65%, transparent); }
.asset-health-legend em { color: var(--text-soft); font-style: normal; font-weight: 750; }

.asset-health-bars { display: grid; align-content: center; min-height: 12rem; gap: .75rem; }
.asset-health-bar { display: grid; gap: .38rem; }
.asset-health-bar > div:first-child { display: flex; justify-content: space-between; gap: .75rem; font-size: .82rem; }
.asset-health-bar > div:first-child span { color: var(--text-soft); }
.asset-health-bar__track { height: .62rem; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--panel-border) 72%, transparent); }
.asset-health-bar__track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #637cf4, hsl(calc(166 + var(--bar-index) * 22) 65% 61%)); box-shadow: 0 0 .8rem rgb(99 124 244 / 35%); }

.asset-health-trend { width: 100%; overflow-x: auto; }
.asset-health-trend svg { display: block; width: 100%; min-width: 42rem; height: auto; }
.asset-health-gridline { stroke: color-mix(in srgb, var(--panel-border) 75%, transparent); stroke-width: 1; }
.asset-health-trend__line { fill: none; stroke: #8796ff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 .35rem rgb(113 132 255 / 35%)); }
.asset-health-trend circle { fill: var(--panel); stroke: #9eabff; stroke-width: 3; }
.asset-health-trend text { fill: var(--text-soft); font-size: 11px; }

.asset-health-panel--table { padding: 0; }
.asset-health-panel--table > header { padding: 1rem 1rem 0; }
.asset-health-panel--table .table-wrap { max-width: 100%; overflow: auto; }
.asset-health-panel--table table { width: 100%; min-width: 42rem; border-collapse: collapse; }
.asset-health-panel--table :is(th, td) { padding: .78rem .9rem; border-top: 1px solid var(--panel-border); text-align: left; vertical-align: middle; }
.asset-health-panel--table th { position: sticky; top: 0; z-index: 1; color: var(--text-soft); background: var(--panel-strong); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
.asset-health-panel--table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel-strong) 52%, transparent); }
.asset-health-panel--table td small { display: block; margin-top: .2rem; color: var(--text-soft); font-size: .7rem; }
.asset-health-loading { display: grid; min-height: 16rem; place-items: center; align-content: center; gap: .7rem; text-align: center; }
.asset-health-loading p { max-width: 45rem; margin: 0; color: var(--text-soft); }

@media (max-width: 88rem) {
    .asset-health-cards { grid-template-columns: repeat(3, minmax(10rem, 1fr)); }
    .asset-health-grid--tables { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 62rem) {
    .asset-health-hero { grid-template-columns: auto minmax(0, 1fr); }
    .asset-health-hero__actions { grid-column: 1 / -1; justify-content: flex-start; }
    .asset-health-grid--overview { grid-template-columns: minmax(0, 1fr); }
    .asset-health-panel--wide { grid-column: auto; }
    .asset-health-filterbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .asset-health-filterbar__meta { grid-column: 1 / -1; justify-self: start; text-align: left; }
    .asset-health-report-index { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 42rem) {
    .asset-health-workspace { padding: .55rem; }
    .asset-health-hero { grid-template-columns: minmax(0, 1fr); }
    .asset-health-hero__icon { width: 3.2rem; height: 3.2rem; }
    .asset-health-filterbar,
    .asset-health-cards { grid-template-columns: minmax(0, 1fr); }
    .asset-health-filterbar__meta { grid-column: auto; }
    .asset-health-donut-wrap { grid-template-columns: minmax(0, 1fr); }
}

/* Automation target evidence: compact run totals and a viewport-level ODHI
   explainer that is not clipped by the table's horizontal scroll frame. */
.automation-device-run-metric {
    display: inline-grid;
    gap: 0.22rem;
    min-width: 6.6rem;
    padding: 0.34rem 0.42rem;
    border: 1px solid var(--panel-border);
    border-radius: 0.62rem;
    background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
    white-space: nowrap;
}

.automation-device-run-metric__total,
.automation-device-run-metric__outcomes {
    display: flex;
    align-items: center;
}

.automation-device-run-metric__total { gap: 0.3rem; }
.automation-device-run-metric__total svg { width: 0.9rem; height: 0.9rem; color: var(--brand); }
.automation-device-run-metric__total strong { font-size: 0.82rem; line-height: 1; }
.automation-device-run-metric__total small { color: var(--text-soft); font-size: 0.64rem !important; }
.automation-device-run-metric__outcomes { gap: 0.28rem; }
.automation-device-run-metric__outcomes b { font-size: 0.64rem; font-weight: 650; }
.automation-device-run-metric__outcomes .is-pass { color: var(--success); }
.automation-device-run-metric__outcomes .is-fail { color: var(--danger); }
.automation-device-run-metric__outcomes .is-blocked { color: var(--warning); }
.automation-device-run-metric--agentic .automation-device-run-metric__total svg { color: #a78bfa; }

.automation-device-health {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-width: 6.7rem;
    min-height: 2.25rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid color-mix(in srgb, var(--health-tone, var(--panel-border)) 55%, var(--panel-border));
    border-radius: 0.66rem;
    color: var(--text);
    background: color-mix(in srgb, var(--health-tone, var(--panel)) 9%, var(--panel));
    text-align: left;
    cursor: help;
}

.automation-device-health > svg { width: 1rem; height: 1rem; color: var(--health-tone, var(--text-soft)); }
.automation-device-health > span { display: grid; gap: 0.04rem; }
.automation-device-health strong { font-size: 0.78rem; line-height: 1; }
.automation-device-health small { color: var(--text-soft); font-size: 0.62rem !important; }
.automation-device-health--good { --health-tone: #2ec27e; }
.automation-device-health--warn { --health-tone: #f59e0b; }
.automation-device-health--bad { --health-tone: #f85149; }
.automation-device-health--soft { --health-tone: #7c8ba1; }
.automation-device-health:is(:hover, :focus-visible) { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--health-tone) 28%, transparent); }

.automation-device-power {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.46rem;
    border: 1px solid color-mix(in srgb, var(--power-tone, var(--panel-border)) 52%, var(--panel-border));
    border-radius: 999px;
    color: var(--power-tone, var(--text-soft));
    background: color-mix(in srgb, var(--power-tone, var(--panel)) 8%, var(--panel));
    font-size: 0.68rem;
    white-space: nowrap;
}
.automation-device-power svg { width: 0.82rem; height: 0.82rem; }
.automation-device-power--good { --power-tone: #2ec27e; }
.automation-device-power--bad { --power-tone: #f85149; }
.automation-device-power--soft { --power-tone: #7c8ba1; }

.automation-device-health-popover {
    position: fixed;
    z-index: 1700;
    display: grid;
    gap: 0.62rem;
    width: min(30rem, calc(100vw - 1.5rem));
    padding: 0.78rem;
    border: 1px solid color-mix(in srgb, var(--brand) 38%, var(--panel-border));
    border-radius: 0.9rem;
    color: var(--text);
    background: color-mix(in srgb, var(--panel) 97%, #08111f);
    box-shadow: 0 1.1rem 3.2rem rgb(0 0 0 / 42%);
    pointer-events: none;
}
.automation-device-health-popover.hidden { display: none; }
.automation-device-health-popover__head {
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.58rem;
    padding-bottom: 0.58rem;
    border-bottom: 1px solid var(--panel-border);
}
.automation-device-health-popover__head > span {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border-radius: 0.66rem;
    color: var(--health-popover-tone, var(--brand));
    background: color-mix(in srgb, var(--health-popover-tone, var(--brand)) 13%, var(--panel-strong));
}
.automation-device-health-popover__head > span svg { width: 1.12rem; height: 1.12rem; }
.automation-device-health-popover__head > div { display: grid; gap: 0.08rem; }
.automation-device-health-popover__head small,
.automation-device-health-popover section > small { color: var(--text-soft); font-size: 0.64rem; letter-spacing: 0.04em; text-transform: uppercase; }
.automation-device-health-popover__head strong { font-size: 0.86rem; }
.automation-device-health-popover__head > b { color: var(--health-popover-tone, var(--brand)); font-size: 1rem; }
.automation-device-health-popover__head--good { --health-popover-tone: #2ec27e; }
.automation-device-health-popover__head--warn { --health-popover-tone: #f59e0b; }
.automation-device-health-popover__head--bad { --health-popover-tone: #f85149; }
.automation-device-health-popover__head--soft { --health-popover-tone: #7c8ba1; }
.automation-device-health-popover__severity { display: flex; align-items: center; gap: 0.48rem; }
.automation-device-health-popover__severity > strong { margin-left: auto; font-size: 0.72rem; }
.automation-device-health-popover__severity > small { color: var(--text-soft); font-size: 0.66rem; }
.automation-device-health-popover section { display: grid; gap: 0.16rem; }
.automation-device-health-popover section p { margin: 0; font-size: 0.72rem; line-height: 1.45; }
.automation-device-health-popover__formula { color: color-mix(in srgb, var(--brand) 72%, var(--text)); font-family: var(--font-mono, monospace); }
.automation-device-health-popover__components { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.38rem; }
.automation-device-health-popover__components > span { display: grid; gap: 0.06rem; padding: 0.4rem; border: 1px solid var(--panel-border); border-radius: 0.58rem; background: var(--panel-strong); }
.automation-device-health-popover__components small { color: var(--text-soft); font-size: 0.6rem; }
.automation-device-health-popover__components strong { font-size: 0.78rem; }
.automation-device-health-popover__components em { color: var(--brand); font-size: 0.62rem; font-style: normal; }
.automation-device-health-popover__empty { padding: 0.5rem; border: 1px dashed var(--panel-border); border-radius: 0.58rem; color: var(--text-soft); font-size: 0.7rem; }
.automation-device-health-popover footer { display: flex; justify-content: space-between; gap: 0.6rem; padding-top: 0.5rem; border-top: 1px solid var(--panel-border); color: var(--text-soft); font-size: 0.64rem; }
.automation-device-health-popover footer span { display: inline-flex; align-items: center; gap: 0.25rem; }
.automation-device-health-popover footer svg { width: 0.8rem; height: 0.8rem; color: var(--brand); }

@media (max-width: 36rem) {
    .automation-device-health-popover__components { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .automation-device-health-popover footer { align-items: flex-start; flex-direction: column; }
}

/* ROI cards share the compact flash-card rail while preserving hours,
   currency, and the Agentic API spend deduction as separate evidence. */
.automation-center__summary-frame-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
}

.automation-center__summary-frame-actions .toolbar-button {
    min-height: 1.8rem;
    padding: 0.28rem 0.48rem;
    font-size: 0.65rem;
}

.automation-center__summary-frame .automation-center__summary-chip--roi {
    grid-template-columns: 2rem minmax(0, 1fr);
    grid-template-areas:
        "icon label"
        "icon value"
        "icon meta";
    align-content: center;
    min-width: 12rem;
}

.automation-center__summary-frame .automation-center__summary-chip--roi strong {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: color-mix(in srgb, var(--automation-summary-tone) 52%, #fff 48%);
    background: transparent;
    font-size: 0.67rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.automation-center__summary-frame .automation-center__summary-chip--roi em {
    grid-area: meta;
    overflow: hidden;
    color: var(--text-soft);
    font-size: 0.57rem;
    font-style: normal;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.automation-center__summary-chip.is-ocean { --automation-summary-tone: #22d3ee; }
.automation-center__summary-chip.is-violet { --automation-summary-tone: #a78bfa; }

@media (min-width: 72rem) {
    html .automation-center__summary-frame {
        min-height: 0;
    }

    html .automation-center__summary-frame .automation-center__summary-rail {
        position: static;
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(5, minmax(7rem, 1fr)) repeat(2, minmax(12rem, 1.45fr));
        justify-content: stretch;
        overflow-x: auto;
    }
}

@media (max-width: 46rem) {
    .automation-center__summary-frame-head { align-items: flex-start; }
    .automation-center__summary-frame-actions .status-pill { display: none; }
    .automation-center__summary-frame .automation-center__summary-chip--roi { min-width: 10rem; }
}

/* Stylish Agentic response context: execution control and operation are both
   visible, with concise descriptions instead of ambiguous icon-only pills. */
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message--assistant:not(.agentic-message--working) .agentic-message__meta {
    border: 1px solid rgba(125, 211, 252, 0.2) !important;
    border-bottom-color: rgba(167, 139, 250, 0.42) !important;
    color: #f8fafc !important;
    background:
        radial-gradient(circle at 6% 0%, rgba(56, 189, 248, 0.2), transparent 31%),
        linear-gradient(105deg, #10243f 0%, #26356f 47%, #654d72 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0.55rem 1.5rem rgba(2, 8, 23, 0.2) !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__header-identity {
    flex: 1 1 auto;
    gap: 0.52rem;
    overflow: hidden;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-badges {
    display: inline-flex;
    min-width: 0;
    align-items: stretch;
    gap: 0.34rem;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] :is(.agentic-message__mode, .agentic-message__operation) {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    min-height: 2rem;
    gap: 0.3rem;
    padding: 0.25rem 0.48rem;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 0.58rem;
    color: #f8fafc !important;
    background: rgba(5, 14, 31, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] :is(.agentic-message__mode, .agentic-message__operation) > svg {
    width: 0.82rem !important;
    height: 0.82rem !important;
    color: #bae6fd;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] :is(.agentic-message__mode, .agentic-message__operation) > span {
    display: grid;
    min-width: 0;
    gap: 0.05rem;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] :is(.agentic-message__mode, .agentic-message__operation) b {
    color: #fff;
    font-size: 0.61rem;
    line-height: 1.05;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] :is(.agentic-message__mode, .agentic-message__operation) small {
    max-width: 17rem;
    overflow: hidden;
    color: #dbeafe;
    font-size: 0.53rem;
    font-weight: 550;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__mode--hitl {
    border-color: rgba(251, 191, 36, 0.46);
    background: rgba(120, 53, 15, 0.22);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__mode--hitl > svg { color: #fde68a; }
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__operation--rca > svg { color: #7dd3fc; }
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__operation--change > svg { color: #fbbf24; }
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__operation--kb > svg { color: #c4b5fd; }
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__operation--compliance > svg { color: #6ee7b7; }

@media (max-width: 70rem) {
    html[data-theme] body .app-shell[data-view-kind="agentic_network"] :is(.agentic-message__mode, .agentic-message__operation) small { display: none; }
    html[data-theme] body .app-shell[data-view-kind="agentic_network"] :is(.agentic-message__mode, .agentic-message__operation) { min-height: 1.7rem; }
}

@media (max-width: 44rem) {
    html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-badges { display: none; }
}

/* The Automation summary is always one contained rail. This final rule wins
   over older three/two-column breakpoints that made ROI cards overlap scope. */
html .automation-center__summary-frame .automation-center__summary-rail {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0.36rem;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin;
}

/* Conversation flow: full-width user cards followed by open, readable OpsPilot
   answers. These final-cascade rules keep the hierarchy stable in both themes. */
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation {
    gap: 0;
    padding: clamp(0.75rem, 1.5vw, 1.35rem);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation > .agentic-message,
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation > .agentic-message--user,
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation > .agentic-message--assistant {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 2.65rem minmax(0, 1fr) !important;
    grid-template-areas: "avatar body" !important;
    gap: 0.78rem !important;
    align-self: stretch !important;
    margin: 0 0 1.05rem !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation > .agentic-message--user {
    width: min(88%, 74rem) !important;
    grid-template-columns: minmax(0, 1fr) 2.65rem !important;
    grid-template-areas: "body avatar" !important;
    align-self: flex-end !important;
    margin-left: auto !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation > .agentic-message--assistant:not(.agentic-message--working) {
    width: min(94%, 82rem) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: "body" !important;
    align-self: flex-start !important;
    margin-left: 0.75rem !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation > .agentic-message--assistant:not(.agentic-message--working) > .agentic-message__avatar {
    display: none !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__avatar {
    width: 2.65rem !important;
    min-width: 2.65rem !important;
    height: 2.65rem !important;
    border: 1px solid color-mix(in srgb, #60a5fa 46%, var(--border));
    border-radius: 50% !important;
    color: #e0f2fe;
    background: linear-gradient(145deg, #14345a, #2563a5);
    box-shadow: 0 0.45rem 1.15rem rgba(15, 23, 42, 0.26);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--assistant .agentic-message__avatar {
    color: #ecfeff;
    background: linear-gradient(145deg, #155e75, #4f46e5);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__body {
    min-width: 0 !important;
    padding: 0 !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--user .agentic-message__body {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #6f8cff 48%, var(--border)) !important;
    border-right: 0.24rem solid #6f8cff !important;
    border-radius: 0.82rem 0.24rem 0.82rem 0.82rem !important;
    background: linear-gradient(115deg, color-mix(in srgb, #4969d8 9%, var(--surface)), color-mix(in srgb, #7c3aed 5%, var(--surface))) !important;
    box-shadow: 0 0.55rem 1.4rem rgba(2, 8, 23, 0.14) !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--assistant:not(.agentic-message--working) .agentic-message__body {
    overflow: visible;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__meta,
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--assistant:not(.agentic-message--working) .agentic-message__meta {
    display: flex;
    min-height: 2.2rem !important;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.32rem 0.62rem !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 68%, transparent) !important;
    color: var(--text) !important;
    background: transparent !important;
    box-shadow: none !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--assistant:not(.agentic-message--working) .agentic-message__meta {
    padding: 0 0.15rem 0.42rem 0.4rem !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--user .agentic-message__meta {
    border-bottom-color: color-mix(in srgb, #6f8cff 24%, var(--border)) !important;
    background: color-mix(in srgb, #617cff 7%, transparent) !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__identity,
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__identity > span,
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__meta-actions time {
    color: var(--text) !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__identity {
    font-size: 0.92rem;
    font-weight: 820;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__identity-icon {
    display: none;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--assistant:not(.agentic-message--working) .agentic-message__identity-icon {
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    flex: 0 0 2rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, #67e8f9 42%, var(--border));
    border-radius: 0.62rem;
    color: #d8f7ff !important;
    background: linear-gradient(145deg, #155e75, #4f46e5);
    box-shadow: 0 0.35rem 0.9rem rgba(15, 23, 42, 0.24);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--assistant:not(.agentic-message--working) .agentic-message__identity-icon svg {
    width: 1.05rem !important;
    height: 1.05rem !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__source {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 650;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__source > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__context-badges {
    flex: 0 1 auto;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation :is(.agentic-message__mode, .agentic-message__operation) {
    display: inline-flex;
    min-height: 1.55rem;
    grid-template-columns: none;
    gap: 0.25rem;
    padding: 0.16rem 0.42rem;
    border-color: color-mix(in srgb, #818cf8 42%, var(--border));
    border-radius: 999px;
    color: var(--text) !important;
    background: color-mix(in srgb, #6366f1 10%, var(--surface-muted));
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation :is(.agentic-message__mode, .agentic-message__operation) b {
    color: var(--text) !important;
    font-size: 0.59rem;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation :is(.agentic-message__mode, .agentic-message__operation) small {
    display: none;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__meta-actions button {
    border-color: color-mix(in srgb, #5b7cfa 40%, var(--border));
    color: #8fb0ff;
    background: color-mix(in srgb, #5b7cfa 8%, transparent);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__meta-actions button:hover {
    border-color: #6f91ff;
    color: #dbe7ff;
    background: color-mix(in srgb, #5b7cfa 20%, transparent);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__meta-actions time {
    color: var(--muted) !important;
    font-size: 0.67rem;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] :is(.agentic-message__meta, .agentic-message__meta-actions) {
    overflow: visible;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__body {
    overflow: visible;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--user .agentic-message__body {
    overflow: visible !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__user-token-summary {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.32rem;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-item {
    position: relative;
    min-height: 1.7rem;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.28rem;
    padding: 0.18rem 0.48rem 0.18rem 0.34rem;
    border: 1px solid color-mix(in srgb, currentColor 44%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: 0.64rem;
    line-height: 1;
    white-space: nowrap;
    cursor: help;
    outline: none;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-item > span:first-child,
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-item > span:first-child svg {
    width: 0.86rem !important;
    height: 0.86rem !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-item > strong {
    color: currentColor !important;
    font-weight: 840;
    letter-spacing: 0.015em;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-item--operation-rca,
html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-item--operation-kb {
    color: #93c5fd !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] :is(.agentic-message__context-item--operation-change, .agentic-message__context-item--operation-compliance) {
    color: #67e8f9 !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-item--execution-hitl {
    color: #fcd34d !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-item--execution-fully_agentic {
    color: #a78bfa !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-item--execution-manual {
    color: #5eead4 !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-item:is(:hover, :focus-visible, :focus-within) {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 18%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 14%, transparent);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-tooltip {
    position: absolute;
    z-index: 126;
    top: calc(100% + 0.48rem);
    left: 0;
    width: max-content;
    max-width: 19rem;
    display: grid;
    gap: 0.2rem;
    padding: 0.58rem 0.66rem;
    border: 1px solid color-mix(in srgb, currentColor 38%, #26324d);
    border-radius: 0.62rem;
    color: #eef3ff !important;
    background: #101828;
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.25rem);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-tooltip::before {
    content: "";
    position: absolute;
    left: 0.65rem;
    bottom: 100%;
    border: 0.32rem solid transparent;
    border-bottom-color: #101828;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-item:is(:hover, :focus-visible, :focus-within) .agentic-message__context-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-tooltip > b {
    color: #aebfff !important;
    font-size: 0.56rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-tooltip > strong {
    color: #f8faff !important;
    font-size: 0.76rem;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-tooltip > small {
    color: #9aa8c1 !important;
    font-size: 0.56rem;
    line-height: 1.4;
    white-space: normal;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-item {
    position: relative;
    min-height: 1.7rem;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.18rem 0.46rem 0.18rem 0.3rem;
    border: 1px solid color-mix(in srgb, currentColor 44%, var(--border));
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: 0.66rem;
    font-weight: 820;
    line-height: 1;
    white-space: nowrap;
    cursor: help;
    outline: none;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-item--chat {
    color: #7dd3fc !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-item--voice {
    color: #c4b5fd !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-item--used-percent {
    color: #a5b4fc !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-item--free-percent-healthy {
    color: #6ee7b7 !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-item--free-percent-watch {
    color: #fcd34d !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-item--free-percent-low {
    color: #fb923c !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-item:is(:hover, :focus-visible, :focus-within) {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 18%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 14%, transparent);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-icon {
    width: 0.9rem;
    height: 0.9rem;
    display: inline-grid;
    place-items: center;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-icon svg {
    width: 0.9rem !important;
    height: 0.9rem !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-item > strong {
    color: currentColor !important;
    font-variant-numeric: tabular-nums;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-tooltip {
    position: absolute;
    z-index: 125;
    top: calc(100% + 0.48rem);
    right: 0;
    min-width: 12rem;
    display: grid;
    gap: 0.18rem;
    padding: 0.58rem 0.66rem;
    border: 1px solid color-mix(in srgb, currentColor 38%, #26324d);
    border-radius: 0.62rem;
    color: #eef3ff !important;
    background: #101828;
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.25rem);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-tooltip::before {
    content: "";
    position: absolute;
    right: 0.65rem;
    bottom: 100%;
    border: 0.32rem solid transparent;
    border-bottom-color: #101828;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-item:is(:hover, :focus-visible, :focus-within) .agentic-message__quota-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-tooltip > b {
    color: #aebfff !important;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-tooltip > strong {
    color: #f8faff !important;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__quota-tooltip > small {
    color: #9aa8c1 !important;
    font-size: 0.56rem;
    line-height: 1.35;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-usage {
    position: relative;
    min-height: 1.7rem;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    padding: 0.18rem 0.42rem;
    border: 1px solid color-mix(in srgb, #8ea8ff 46%, var(--border));
    border-radius: 999px;
    color: #cbd8ff !important;
    background: color-mix(in srgb, #536dfe 13%, transparent);
    font-size: 0.66rem;
    font-weight: 820;
    line-height: 1;
    white-space: nowrap;
    cursor: help;
    outline: none;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-usage:is(:hover, :focus-visible, :focus-within) {
    border-color: #91aaff;
    color: #f2f6ff !important;
    background: color-mix(in srgb, #536dfe 25%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, #718cff 18%, transparent);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-icon {
    width: 0.82rem;
    height: 0.82rem;
    display: inline-grid;
    place-items: center;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-icon svg {
    width: 0.82rem !important;
    height: 0.82rem !important;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-tooltip {
    position: absolute;
    z-index: 120;
    top: calc(100% + 0.52rem);
    right: 0;
    width: max-content;
    min-width: 12.5rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(3.2rem, 1fr));
    gap: 0.42rem;
    padding: 0.62rem;
    border: 1px solid color-mix(in srgb, #8ea8ff 45%, #26324d);
    border-radius: 0.65rem;
    color: #eef3ff !important;
    background: #101828;
    box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.36);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-0.3rem);
    transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-tooltip::before {
    content: "";
    position: absolute;
    right: 0.72rem;
    bottom: 100%;
    border: 0.34rem solid transparent;
    border-bottom-color: #101828;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-usage:is(:hover, :focus-visible, :focus-within) .agentic-message__token-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-tooltip-title {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.34rem;
    padding-bottom: 0.38rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-tooltip-title svg {
    width: 0.88rem !important;
    height: 0.88rem !important;
    color: #91aaff;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-tooltip-title b {
    margin-right: auto;
    font-size: 0.68rem;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-tooltip-title em {
    color: #aebfff;
    font-size: 0.56rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-tooltip > span:not(.agentic-message__token-tooltip-title, .agentic-message__token-tooltip-model) {
    display: grid;
    gap: 0.12rem;
    padding: 0.34rem 0.38rem;
    border-radius: 0.42rem;
    background: rgba(99, 102, 241, 0.12);
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-tooltip small {
    color: #9aa8c1;
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-tooltip > span > b {
    color: #f8faff;
    font-size: 0.72rem;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__token-tooltip-model {
    grid-column: 1 / -1;
    overflow: hidden;
    color: #9aa8c1 !important;
    font-size: 0.56rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__content {
    padding: 0.48rem 0.7rem 0.58rem;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.65;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--assistant .agentic-message__content {
    padding: 0.7rem 0.65rem 0.38rem 1.9rem;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--user .agentic-structured-reply > p {
    margin: 0;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message--assistant .agentic-rich-answer.section-box {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__content .agentic-structured-reply > p {
    margin: 0 0 0.85rem;
    line-height: 1.68;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__content .agentic-structured-reply > :is(h2, h3, h4) {
    margin: 1.15rem 0 0.48rem;
    color: var(--text);
    font-size: 0.93rem;
    font-weight: 820;
    letter-spacing: 0.005em;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__content .agentic-structured-reply > :is(ul, ol) {
    margin: 0.58rem 0 1rem;
    padding-left: 1.55rem;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__content .agentic-structured-reply li {
    padding-left: 0.18rem;
    line-height: 1.62;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__content .agentic-structured-reply li + li {
    margin-top: 0.58rem;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__content .agentic-structured-reply strong {
    color: color-mix(in srgb, var(--text) 90%, #a5b4fc 10%);
    font-weight: 820;
}

html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__content .agentic-structured-reply code {
    padding: 0.1rem 0.3rem;
    border: 1px solid color-mix(in srgb, #60a5fa 30%, var(--border));
    border-radius: 0.3rem;
    color: #9bd6ff;
    background: color-mix(in srgb, #0f2742 72%, var(--surface));
}

@media (max-width: 52rem) {
    html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation {
        padding: 0.65rem;
    }

    html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation > .agentic-message {
        grid-template-columns: 2.2rem minmax(0, 1fr) !important;
        gap: 0.55rem !important;
    }

    html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation > .agentic-message--user {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) 2.2rem !important;
    }

    html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation > .agentic-message--assistant:not(.agentic-message--working) {
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
        margin-left: 0 !important;
    }

    html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message--assistant .agentic-message__content {
        padding-left: 1rem;
    }

    html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-conversation .agentic-message__avatar {
        width: 2.2rem !important;
        min-width: 2.2rem !important;
        height: 2.2rem !important;
    }

    html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__context-badges,
    html[data-theme] body .app-shell[data-view-kind="agentic_network"] .agentic-message__meta-actions time {
        display: none;
    }
}

html .automation-center__summary-frame .automation-center__summary-chip {
    flex: 1 1 6.6rem;
    min-width: 6.2rem;
    min-height: 2.55rem;
}

html .automation-center__summary-frame .automation-center__summary-chip--roi {
    flex: 1.45 1 10rem;
    min-width: 9.5rem;
    min-height: 2.55rem;
}

html .automation-center__summary-frame .automation-center__summary-chip--roi strong {
    font-size: 0.62rem;
}

html .automation-center__summary-frame .automation-center__summary-chip--roi em {
    font-size: 0.54rem;
}

.automation-device-hostname {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 0.42rem;
}

.automation-device-hostname > strong {
    min-width: 0;
    overflow: hidden;
    font-size: inherit;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.automation-device-power--compact {
    width: auto;
    min-width: 1.42rem;
    height: 1.42rem;
    min-height: 1.42rem;
    justify-content: center;
    padding: 0 0.34rem;
    border-radius: 0.42rem;
}

.automation-device-power--compact svg {
    width: 0.76rem;
    height: 0.76rem;
}

.automation-device-power--compact span {
    font-size: 0.56rem;
    font-weight: 700;
}

.automation-device-severity {
    display: inline-flex;
    align-items: center;
    gap: 0.24rem;
    white-space: nowrap;
}

.automation-device-severity svg {
    width: 0.72rem !important;
    height: 0.72rem !important;
}

@media (max-width: 56rem) {
    html .automation-center__summary-frame .automation-center__summary-chip { flex: 0 0 7.2rem; }
    html .automation-center__summary-frame .automation-center__summary-chip--roi { flex-basis: 10.5rem; }
}

/* Shared movable-window behavior for workspace popups, record drawers,
   administrator editors, and native dialogs. JavaScript keeps the header in
   the viewport so every data window remains portable throughout the GUI. */
.portable-popup-panel {
    will-change: translate;
}

.portable-popup-handle {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.portable-popup-handle:is(:hover, :focus-visible) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent);
}

.portable-popup-panel.is-portable-dragging {
    transition: none !important;
    box-shadow: 0 1.4rem 4rem rgb(0 0 0 / 42%) !important;
}

.portable-popup-panel.is-portable-dragging .portable-popup-handle {
    cursor: grabbing;
}

html[data-theme] body .portable-popup-panel.is-portable-docked {
    position: fixed !important;
    inset: 0 0 0 auto !important;
    z-index: 4 !important;
    width: min(42rem, 100vw) !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 1.25rem 0 0 1.25rem !important;
    animation: none !important;
    transform: none !important;
}

html[data-theme] body :is(.popup-window, .detail-drawer, .admin-edit-modal).has-portable-docked-panel {
    background: transparent !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
}

html[data-theme] body .portable-popup-panel.is-portable-docked {
    pointer-events: auto !important;
}

html:has(.detail-drawer.open.has-portable-docked-panel),
body:has(.detail-drawer.open.has-portable-docked-panel) {
    overflow: auto !important;
}

.portable-popup-panel.is-portable-docked .portable-popup-handle {
    cursor: default;
}

@media (max-width: 48rem) {
    html[data-theme] body .portable-popup-panel.is-portable-docked {
        width: 100vw !important;
        border-radius: 0 !important;
    }
}

/* Per-device Automation and Agentic execution guardrails. */
.automation-center__device-action--execution-policy {
    border-color: color-mix(in srgb, #60a5fa 45%, var(--border));
    color: #bfdbfe;
    background: color-mix(in srgb, #1d4ed8 18%, var(--panel));
}

.automation-center__device-action--execution-policy.is-restricted {
    border-color: color-mix(in srgb, #f59e0b 58%, var(--border));
    color: #fde68a;
    background: color-mix(in srgb, #92400e 22%, var(--panel));
}

.popup-window--automation-device-policy .popup-window__dialog {
    width: min(42rem, calc(100vw - 1.5rem));
}

.automation-device-policy {
    display: grid;
    gap: 0.85rem;
}

.automation-device-policy__hero {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
}

.automation-device-policy__hero > span {
    display: grid;
    width: 2.4rem;
    height: 2.4rem;
    place-items: center;
    border: 1px solid color-mix(in srgb, #60a5fa 45%, var(--border));
    border-radius: 0.72rem;
    color: #93c5fd;
    background: color-mix(in srgb, #1d4ed8 22%, var(--panel));
}

.automation-device-policy__hero svg,
.automation-device-policy__limit > span:first-child svg {
    width: 1rem;
    height: 1rem;
}

.automation-device-policy__hero :is(h3, p) { margin: 0; }
.automation-device-policy__hero p:last-child { margin-top: 0.2rem; color: var(--text-soft); font-size: 0.72rem; }

.automation-device-policy__channels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.automation-device-policy__channel {
    position: relative;
    display: block;
    min-width: 0;
}

.automation-device-policy__channel > input {
    position: absolute;
    inset: 0.7rem 0.7rem auto auto;
    z-index: 1;
}

.automation-device-policy__channel > span {
    display: grid;
    min-height: 6.2rem;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    align-content: center;
    gap: 0.2rem 0.55rem;
    padding: 0.8rem 2.2rem 0.8rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--panel) 88%, #020617);
}

.automation-device-policy__channel > input:checked + span {
    border-color: color-mix(in srgb, #34d399 48%, var(--border));
    box-shadow: inset 0 0 0 1px rgb(52 211 153 / 8%);
}

.automation-device-policy__channel svg { grid-row: 1 / 3; width: 1rem; height: 1rem; color: #93c5fd; }
.automation-device-policy__channel strong { color: var(--text); font-size: 0.76rem; }
.automation-device-policy__channel small { color: var(--text-soft); font-size: 0.65rem; line-height: 1.3; }

.automation-device-policy__limit {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr) 5.5rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.72rem;
    border: 1px solid var(--border);
    border-radius: 0.72rem;
    background: color-mix(in srgb, var(--panel) 90%, #020617);
}

.automation-device-policy__limit > span:first-child {
    display: grid;
    width: 1.9rem;
    height: 1.9rem;
    place-items: center;
    border-radius: 0.52rem;
    color: #c4b5fd;
    background: rgb(124 58 237 / 18%);
}

.automation-device-policy__limit > span:nth-child(2) { display: grid; gap: 0.1rem; }
.automation-device-policy__limit strong { font-size: 0.75rem; }
.automation-device-policy__limit small { color: var(--text-soft); font-size: 0.63rem; }
.automation-device-policy__limit input { width: 100%; min-height: 2.2rem; text-align: center; }
.automation-device-policy__actions { justify-content: flex-end; }

@media (max-width: 36rem) {
    .automation-device-policy__channels { grid-template-columns: 1fr; }
    .automation-device-policy__limit { grid-template-columns: 1.9rem minmax(0, 1fr); }
    .automation-device-policy__limit input { grid-column: 1 / -1; }
}

/* Live data-center clock in the Device Activity popup header. */
.automation-device-history__header-clock {
    min-width: 14.5rem;
    border-color: color-mix(in srgb, #64748b 48%, var(--border));
    background: linear-gradient(135deg, color-mix(in srgb, #0f172a 72%, var(--surface)), var(--surface-muted));
}

.automation-device-history__header-clock strong {
    display: block;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.automation-device-history__header-clock em {
    display: block;
    margin-top: 0.1rem;
    overflow: hidden;
    color: var(--text-soft);
    font-size: 0.58rem;
    font-style: normal;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.automation-device-history__header-clock small b {
    color: inherit;
    font: inherit;
}

.automation-device-history__header-clock.is-day {
    border-color: rgb(251 191 36 / 48%);
}

.automation-device-history__header-clock.is-day .automation-device-history__header-chip-icon {
    color: #fbbf24;
    background: rgb(245 158 11 / 16%);
}

.automation-device-history__header-clock.is-night {
    border-color: rgb(129 140 248 / 48%);
}

.automation-device-history__header-clock.is-night .automation-device-history__header-chip-icon {
    color: #c4b5fd;
    background: rgb(99 102 241 / 18%);
}

.automation-device-history__header-clock.is-working em { color: #6ee7b7; }
.automation-device-history__header-clock.is-off-hours em { color: #fcd34d; }
.automation-device-history__header-clock.is-unavailable .automation-device-history__header-chip-icon { color: #94a3b8; }

@media (max-width: 74rem) {
    .automation-device-history__header-meta { justify-content: flex-start; }
    .automation-device-history__header-clock { flex: 1 1 14.5rem; }
}

/* Automation summary rail: compact cards, small trailing icons, and a
   right-aligned desktop position without allowing the seven cards to wrap. */
html .automation-center__summary-frame .automation-center__summary-rail {
    justify-content: safe flex-end !important;
}

html .automation-center__summary-frame .automation-center__summary-chip {
    grid-template-columns: minmax(0, 1fr) auto 1.18rem !important;
    grid-template-areas: "label value icon" !important;
    flex: 0 0 7.1rem;
    min-width: 7.1rem;
    min-height: 2.25rem;
    gap: 0.28rem;
    padding: 0.24rem 0.36rem 0.24rem 0.5rem;
}

html .automation-center__summary-frame .automation-center__summary-chip > span {
    display: grid;
    width: 1.18rem;
    height: 1.18rem;
    place-items: center;
    justify-self: end;
    border-radius: 0.38rem;
}

html .automation-center__summary-frame .automation-center__summary-chip svg {
    width: 0.62rem !important;
    height: 0.62rem !important;
}

html .automation-center__summary-frame .automation-center__summary-chip small {
    min-width: 0;
    overflow: hidden;
    font-size: 0.61rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html .automation-center__summary-frame .automation-center__summary-chip strong {
    min-width: 1.72rem;
    padding: 0.17rem 0.3rem;
    font-size: 0.62rem;
}

html .automation-center__summary-frame .automation-center__summary-chip--roi {
    grid-template-columns: minmax(0, 1fr) 1.18rem !important;
    grid-template-areas:
        "label icon"
        "value icon"
        "meta icon" !important;
    flex: 0 0 12.2rem;
    min-width: 12.2rem;
    min-height: 2.25rem;
}

html .automation-center__summary-frame .automation-center__summary-chip--roi > span {
    align-self: center;
}

html .automation-center__summary-frame .automation-center__summary-chip--roi strong {
    font-size: 0.58rem;
}

html .automation-center__summary-frame .automation-center__summary-chip--roi em {
    font-size: 0.5rem;
}

@media (min-width: 90rem) {
    html .automation-center__summary-frame {
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: center;
        column-gap: 0.8rem;
    }

    html .automation-center__summary-frame .automation-center__summary-frame-head {
        grid-column: 1;
    }

    html .automation-center__summary-frame .automation-center__summary-rail {
        grid-column: 2;
        justify-self: stretch;
    }
}

@media (max-width: 56rem) {
    html .automation-center__summary-frame .automation-center__summary-chip {
        flex-basis: 7.1rem;
    }

    html .automation-center__summary-frame .automation-center__summary-chip--roi {
        flex-basis: 12.2rem;
    }
}

/* Canonical Agentic usage strip. Kept last so legacy header rules cannot
   collapse the six operational metrics back into the former five-card row. */
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics {
    grid-template-columns: minmax(7.2rem, 1.25fr) repeat(5, minmax(5.6rem, 1fr)) !important;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics > span {
    --agentic-metric-tone: #60a5fa;
    position: relative;
    display: grid;
    grid-template-columns: 1.7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.38rem;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--agentic-metric-tone) 30%, var(--panel-border));
    background: linear-gradient(100deg, color-mix(in srgb, var(--agentic-metric-tone) 9%, var(--panel-strong)), var(--panel-strong));
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--agentic-metric-tone) 78%, transparent);
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric__icon {
    width: 1.62rem;
    height: 1.62rem;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--agentic-metric-tone) 48%, transparent);
    border-radius: 0.5rem;
    color: color-mix(in srgb, var(--agentic-metric-tone) 88%, white);
    background: color-mix(in srgb, var(--agentic-metric-tone) 15%, transparent);
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric__icon svg {
    width: 0.86rem !important;
    height: 0.86rem !important;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric__copy {
    display: grid;
    min-width: 0;
    gap: 0.04rem;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics em {
    overflow: hidden;
    color: var(--text-muted);
    font-size: 0.52rem;
    font-style: normal;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--model { --agentic-metric-tone: #8b5cf6; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--elapsed { --agentic-metric-tone: #38bdf8; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--chat { --agentic-metric-tone: #60a5fa; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--voice { --agentic-metric-tone: #c084fc; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--session { --agentic-metric-tone: #fbbf24; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--mode { --agentic-metric-tone: #34d399; }
html .app-shell[data-view-kind="agentic_network"] .agentic-run-metric--mode.is-voice { --agentic-metric-tone: #a78bfa; }

/* Desktop header: keep the page identity and controls on one deliberate row.
   Older header rules gave each control group permission to wrap on its own,
   producing a stranded second row even at wide desktop sizes. */
@media (min-width: 64.01rem) {
    :root {
        --agentic-full-header-height: 4.75rem;
    }

    /* The workspace header spans the viewport; navigation and content begin
       beneath it instead of competing for the first horizontal row. */
    .topbar {
        position: absolute;
        top: 0;
        left: calc(-1 * var(--sidebar-width));
        z-index: 60;
        width: 100vw !important;
        max-width: none;
        min-height: var(--agentic-full-header-height);
        height: var(--agentic-full-header-height);
        margin: 0;
        border-radius: 0 0 0.9rem 0.9rem;
        box-sizing: border-box;
    }

    .app-shell.sidebar-collapsed .topbar {
        left: -5.8rem;
    }

    .sidebar {
        top: var(--agentic-full-header-height);
        height: calc(100dvh - var(--agentic-full-header-height));
        min-height: calc(100dvh - var(--agentic-full-header-height));
        margin-top: var(--agentic-full-header-height);
        box-sizing: border-box;
    }

    .workspace {
        height: 100dvh;
        min-height: 100dvh;
        padding-top: var(--agentic-full-header-height);
        box-sizing: border-box;
    }

    .topbar {
        grid-template-columns: clamp(15rem, 18vw, 18rem) minmax(0, 1fr);
        align-items: center;
    }

    .topbar__left {
        min-width: 0;
    }

    .topbar__right {
        display: flex;
        min-width: 0;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 0.4rem;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .topbar-control-group {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        width: auto !important;
        max-width: none !important;
    }

    .topbar-control-group--navigation {
        flex: 1 1 16rem;
        min-width: 0;
    }

    .topbar-search {
        flex: 1 1 16rem;
        width: auto;
        min-width: 10rem;
        max-width: 22rem;
    }

    .topbar__utility-group {
        flex-wrap: nowrap;
        width: auto !important;
    }
}

@media (max-width: 82rem) {
    html .app-shell[data-view-kind="agentic_network"] .agentic-header-tools {
        flex-wrap: wrap;
    }

    html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics {
        flex: 1 1 100%;
    }
}

@media (max-width: 48rem) {
    html .app-shell[data-view-kind="agentic_network"] .agentic-run-metrics {
        grid-template-columns: repeat(6, minmax(7.2rem, 1fr)) !important;
        overflow-x: auto;
        padding-bottom: 0.18rem;
    }
}