/* Zelf-gehost webfont: Inter (variabel, assets/fonts/inter). Eén bestand dekt
   alle gewichten 100-900. Voorheen werd geen enkel webfont geladen: de stack
   noemde Inter zonder @font-face, waardoor elke bezoeker zijn systeemfont zag. */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Variable.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/Inter-Italic-Variable.ttf") format("truetype-variations");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    /* Geconsolideerd uit 5 losse :root-blokken (2026-07-17). Waarden zijn de
       effectieve cascade-uitkomst; rendering blijft identiek. */

    /* Oppervlakken & achtergronden */
    --color-bg: #F6F9FF;
    --color-surface: #FFFFFF;
    --color-surface-subtle: #F8FAFC;
    --color-surface-blue: #EAF2FF;
    --color-surface-cyan: #E9FBFD;
    --color-surface-violet: #F5F3FF;
    --color-border: #DDE7F7;

    /* Tekst */
    --color-text-primary: #071A3D;
    --color-text-secondary: #40516B;
    --color-text-muted: #5A6A84; /* WCAG AA: ~5.2:1 op de lichte achtergrond */

    /* Merk- & accentkleuren */
    --color-primary: #1E5BFF;
    --color-primary-hover: #1748CC;
    --color-primary-soft: #EAF2FF;
    --color-bright-blue: #4F8CFF;
    --color-secondary-accent: #12B3C7;
    --color-brand-teal: #087F8C; /* de "Minds"-teal uit het logo */
    --color-ai-accent: #7C3AED;
    --color-success: #16A34A;
    --color-warning: #F59E0B;
    --color-error: #DC2626;
    --color-info: #0EA5E9;

    /* Semantische varianten (tranche 2 kleursanering) */
    --color-success-soft: #F0FDF4;
    --color-success-strong: #047857;
    --color-warning-soft: #FFFBEB;
    --color-warning-strong: #B45309;
    --color-warning-border: #F1D28A;
    --color-error-soft: #FEF2F2;
    --color-error-strong: #B91C1C;
    --color-info-strong: #075985;

    /* Scoreschaal 1-5 (rood -> groen), o.a. AI-readiness model en heatmaps */
    --color-score-1: #D94232;
    --color-score-2: #ED7B21;
    --color-score-3: #E7AD12;
    --color-score-4: #78A846;
    --color-score-5: #3F8D57;

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --radius-full: 999px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Schaduwen */
    --shadow-sm: 0 6px 18px rgba(7, 26, 61, 0.05);
    --shadow-md: 0 16px 38px rgba(7, 26, 61, 0.08);
    --shadow-lg: 0 24px 62px rgba(7, 26, 61, 0.12);

    /* Typografie */
    --font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* AI-readiness domeinkleuren — enige bron; CSS en JS (getComputedStyle) lezen beide hieruit */
    --domain-color-1: #287C55; /* Governance */
    --domain-color-2: #3477BD; /* Process */
    --domain-color-3: #7560A8; /* Data */
    --domain-color-4: #2D929D; /* Technology */
    --domain-color-5: #E6841C; /* Engineering */
    --domain-color-6: #D6A40B; /* Ecosystem */

    /* Legacy mm-* aliassen (verwijzen naar de tokens hierboven) */
    --mm-primary: var(--color-primary);
    --mm-accent: var(--color-warning);
    --mm-bg: var(--color-bg);
    --mm-text: var(--color-text-primary);
    --mm-soft: var(--color-surface-blue);
}

/* AI Readiness multi-assessment overview */
.ai-readiness-overview-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(32rem,1.15fr);gap:1.5rem;align-items:start}
.ai-readiness-intro-panel,.ai-readiness-scores-panel{background:#fff;border:1px solid var(--color-border);border-radius:18px;padding:2rem;box-shadow:0 10px 30px rgba(17,43,82,.06)}
.ai-readiness-intro-panel{position:sticky;top:1.25rem;background:linear-gradient(145deg,var(--color-surface-subtle) 0%,#fff 70%)}
.ai-readiness-intro-panel h2,.ai-readiness-scores-panel h2{color:#0b2148;margin:.35rem 0 .8rem;font-size:1.45rem}
.ai-readiness-intro-panel>p{color:#5d6b82;line-height:1.7}
.ai-readiness-intro-points{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.75rem}
.ai-readiness-intro-points div{border-top:3px solid var(--color-primary);background:#f4f8fd;border-radius:4px 4px 12px 12px;padding:1rem .75rem}
.ai-readiness-intro-points strong{display:block;color:#0b4f91;font-size:1.5rem}.ai-readiness-intro-points span{display:block;color:var(--color-text-muted);font-size:.78rem}
.ai-readiness-scores-heading,.ai-readiness-score-card-top,.ai-readiness-score-card-footer,.ai-readiness-scope-box-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.ai-readiness-score-count{display:grid;place-items:center;min-width:2.2rem;height:2.2rem;border-radius:50%;background:var(--color-surface-blue);color:#0b4f91;font-weight:700}
.ai-readiness-score-list{display:grid;gap:1rem}.ai-readiness-score-card{border:1px solid var(--color-border);border-radius:14px;padding:1.25rem;transition:.2s ease;background:#fff}.ai-readiness-score-card:hover{border-color:#aac8e5;box-shadow:0 8px 22px rgba(19,56,94,.08)}
.ai-readiness-score-card h3{font-size:1.05rem;color:var(--color-text-primary);margin:.4rem 0 0}.ai-readiness-status{display:inline-flex;border-radius:999px;padding:.25rem .55rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#fff4db;color:#916200}.ai-readiness-status.is-complete{background:#e5f5ec;color:#24704d}.ai-readiness-status.is-progress{background:var(--color-warning-soft);color:var(--color-warning-strong)}.ai-readiness-status.is-not-started{background:var(--color-surface-subtle);color:var(--color-text-muted)}
.ai-readiness-card-value,.ai-readiness-card-progress-value{display:flex;align-items:baseline;gap:.2rem;color:#145a91}.ai-readiness-card-value strong{font-size:1.7rem}.ai-readiness-card-progress-value strong{font-size:1.3rem}.ai-readiness-card-value span,.ai-readiness-card-progress-value span{font-size:.78rem;color:#718096}
.ai-readiness-score-description{font-size:.88rem;color:#66758b;margin:.8rem 0}.ai-readiness-card-scope{display:flex;gap:.75rem;align-items:flex-start;margin:.9rem 0}.ai-readiness-card-scope>span,.ai-readiness-selected-scope>span{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:#718096;font-weight:700;padding-top:.25rem}.ai-readiness-card-scope>div,.ai-readiness-selected-scope>div{display:flex;flex-wrap:wrap;gap:.35rem}.ai-readiness-card-scope small,.ai-readiness-selected-scope small{background:#edf4fb;color:var(--color-info-strong);border-radius:999px;padding:.25rem .55rem;font-size:.72rem}
.ai-readiness-card-progress{height:5px;background:#edf1f6;border-radius:99px;overflow:hidden;margin:1rem 0}.ai-readiness-card-progress i{display:block;height:100%;background:var(--color-primary);border-radius:inherit}.ai-readiness-score-card-footer{align-items:center;margin-top:1rem}.ai-readiness-score-card-footer>span{font-size:.76rem;color:#7b8799}.ai-readiness-empty-state{text-align:center;padding:3rem 1rem;color:#68758a}.ai-readiness-empty-state h3{color:var(--color-text-primary)}
.ai-readiness-create-modal{border-radius:18px;overflow:hidden}.ai-readiness-create-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:1.25rem}.ai-readiness-create-box{border:1px solid var(--color-border);border-radius:14px;padding:1.4rem;background:#f9fbfe}.ai-readiness-create-box h3{font-size:1.05rem;color:var(--color-text-primary);margin:0 0 .25rem}.ai-readiness-create-box>p,.ai-readiness-scope-box-heading p{font-size:.84rem;color:#6c788a;margin:0 0 1.25rem}.ai-readiness-scope-box{display:flex;flex-direction:column;min-height:28rem}.ai-readiness-scope-box-heading>span{white-space:nowrap;background:var(--color-surface-blue);color:var(--color-info-strong);border-radius:999px;padding:.3rem .6rem;font-size:.73rem;font-weight:700}.ai-readiness-scope-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;overflow-y:auto;max-height:17rem;padding-right:.25rem}.ai-readiness-scope-option{display:flex;gap:.65rem;align-items:center;border:1px solid #dce5ef;border-radius:10px;background:#fff;padding:.75rem;cursor:pointer}.ai-readiness-scope-option.is-selected{border-color:var(--color-primary);background:#eef6fd}.ai-readiness-scope-option span{min-width:0}.ai-readiness-scope-option strong,.ai-readiness-scope-option small{display:block}.ai-readiness-scope-option strong{font-size:.82rem;color:var(--color-text-primary)}.ai-readiness-scope-option small{font-size:.68rem;color:#7a8798}.ai-readiness-selected-scope{border-top:1px solid #dce5ef;margin-top:auto;padding-top:1rem;display:grid;grid-template-columns:auto 1fr;gap:.75rem}.ai-readiness-selected-scope em{font-size:.8rem;color:#8a95a5}
.ai-readiness-back-link{display:block;color:#4f6f92;font-size:.82rem;text-decoration:none;margin-bottom:.75rem}.ai-readiness-detail-scope{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-top:.75rem}.ai-readiness-detail-scope>span{font-size:.7rem;font-weight:700;text-transform:uppercase;color:#77869a;margin-right:.2rem}.ai-readiness-detail-scope small{background:var(--color-surface-blue);color:var(--color-info-strong);border-radius:999px;padding:.25rem .55rem}
@media(max-width:1100px){.ai-readiness-overview-layout{grid-template-columns:1fr}.ai-readiness-intro-panel{position:static}.ai-readiness-create-grid{grid-template-columns:1fr}}
@media(max-width:640px){.ai-readiness-intro-points,.ai-readiness-scope-options{grid-template-columns:1fr}.ai-readiness-intro-panel,.ai-readiness-scores-panel{padding:1.25rem}}

/* Compact creation scope and keep all 12 L1 capabilities visible. */
.ai-readiness-scope-box{min-height:0}
.ai-readiness-scope-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;overflow:visible;max-height:none;padding-right:0}
.ai-readiness-scope-option{gap:.5rem;padding:.48rem .55rem;min-height:3.15rem;border-radius:9px}
.ai-readiness-scope-option strong{font-size:.72rem;line-height:1.18}
.ai-readiness-scope-option small{font-size:.61rem;margin-top:.1rem}
.ai-readiness-selected-scope{margin-top:.7rem;padding-top:.7rem}

/* Fixed navigation must never render above a modal. */
.modal-backdrop{z-index:3000}
.modal{z-index:3010}
.modal-backdrop.show{opacity:.58}

@media(max-width:1100px){.ai-readiness-scope-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.ai-readiness-scope-options{grid-template-columns:1fr}}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--mm-bg) 100%);
    color: var(--mm-text);
    min-height: 100vh;
    margin: 0;
    font-family: var(--font-family);
    line-height: 1.5;
}

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

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skip-link {
    position: absolute;
    top: -48px;
    left: 12px;
    z-index: 200;
    padding: 8px 16px;
    border-radius: 0 0 10px 10px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0;
}

.portfolio-workspace-v2-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.55rem;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.portfolio-workspace-v2-breadcrumb a {
    color: var(--color-primary);
    font-weight: 600;
}

.portfolio-workspace-v2-breadcrumb a:hover {
    text-decoration: underline;
}

button,
input,
select,
textarea {
    font: inherit;
}

img,
svg,
canvas {
    max-width: 100%;
}

/* Tailwind migration bridge: replaces the Bootstrap runtime classes still present in PHP templates. */
.container {
    width: min(100% - 2rem, 1180px);
    margin-inline: auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: calc(var(--mm-gutter-x, 1.5rem) / -2);
    margin-top: calc(var(--mm-gutter-y, 0rem) * -1);
}

.row > * {
    width: 100%;
    max-width: 100%;
    padding-inline: calc(var(--mm-gutter-x, 1.5rem) / 2);
    margin-top: var(--mm-gutter-y, 0rem);
}

.g-0 { --mm-gutter-x: 0rem; --mm-gutter-y: 0rem; }
.g-2 { --mm-gutter-x: 0.5rem; --mm-gutter-y: 0.5rem; }
.g-3 { --mm-gutter-x: 1rem; --mm-gutter-y: 1rem; }
.g-4 { --mm-gutter-x: 1.5rem; --mm-gutter-y: 1.5rem; }
.g-5 { --mm-gutter-x: 3rem; --mm-gutter-y: 3rem; }

.col,
.col-12 { flex: 0 0 auto; width: 100%; }
.col-6 { flex: 0 0 auto; width: 50%; }

@media (min-width: 768px) {
    .col-md-3 { flex: 0 0 auto; width: 25%; }
    .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-md-6 { flex: 0 0 auto; width: 50%; }
    .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-md-9 { flex: 0 0 auto; width: 75%; }
    .flex-md-row { flex-direction: row !important; }
    .align-items-md-center { align-items: center !important; }
    .text-md-end { text-align: right !important; }
    .p-md-4 { padding: 1.5rem !important; }
    .p-md-5 { padding: 3rem !important; }
}

@media (min-width: 992px) {
    .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-lg-3 { flex: 0 0 auto; width: 25%; }
    .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-lg-6 { flex: 0 0 auto; width: 50%; }
    .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-lg-9 { flex: 0 0 auto; width: 75%; }
    .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-lg-12 { flex: 0 0 auto; width: 100%; }
    .d-lg-block { display: block !important; }
    .ms-lg-auto { margin-left: auto !important; }
}

@media (min-width: 1200px) {
    .col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
    .col-xl-3 { flex: 0 0 auto; width: 25%; }
    .col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
    .col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
    .col-xl-6 { flex: 0 0 auto; width: 50%; }
    .col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
    .col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
    .col-xl-9 { flex: 0 0 auto; width: 75%; }
    .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
    .col-xl-12 { flex: 0 0 auto; width: 100%; }
}

.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-start { align-self: flex-start !important; }
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.position-relative { position: relative !important; }

.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.mx-auto { margin-inline: auto !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.px-0 { padding-inline: 0 !important; }
.px-2 { padding-inline: 0.5rem !important; }
.px-3 { padding-inline: 1rem !important; }
.px-4 { padding-inline: 1.5rem !important; }
.py-2 { padding-block: 0.5rem !important; }
.py-3 { padding-block: 1rem !important; }
.py-4 { padding-block: 1.5rem !important; }
.py-5 { padding-block: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.ps-0 { padding-left: 0 !important; }
.ps-3 { padding-left: 1rem !important; }

.small { font-size: 0.875rem !important; }
.lead { font-size: 1.125rem; line-height: 1.75; }
.h1, .display-6 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.15; }
.h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); line-height: 1.2; }
.h4 { font-size: 1.25rem; line-height: 1.25; }
.h5 { font-size: 1.125rem; line-height: 1.35; }
.fw-semibold { font-weight: 600 !important; }
.fw-bold { font-weight: 700 !important; }
.text-center { text-align: center !important; }
.text-end { text-align: right !important; }
.text-decoration-none { text-decoration: none !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-primary { color: var(--mm-primary) !important; }
.text-white { color: #fff !important; }
.text-white-50 { color: rgba(255, 255, 255, 0.88) !important; }
.text-danger { color: var(--color-error-strong) !important; }
.text-success { color: var(--color-success-strong) !important; }

.bg-light { background: var(--color-surface-subtle) !important; }
.bg-white { background: #fff !important; }
.bg-dark { background: #13263b !important; }
.bg-primary { background: var(--mm-primary) !important; color: #fff !important; }

.border { border: 1px solid var(--color-border) !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid var(--color-border) !important; }
.border-bottom { border-bottom: 1px solid var(--color-border) !important; }
.rounded { border-radius: 0.5rem !important; }
.rounded-3 { border-radius: 0.75rem !important; }
.rounded-4 { border-radius: 1rem !important; }
.rounded-pill { border-radius: 999px !important; }
.shadow-sm { box-shadow: 0 8px 26px rgba(15, 76, 129, 0.08) !important; }
.shadow-lg { box-shadow: 0 28px 80px rgba(15, 35, 55, 0.24) !important; }

.app-topbar,
.navbar {
    background: linear-gradient(90deg, var(--color-text-primary) 0%, var(--color-text-primary) 55%, var(--color-primary-hover) 100%) !important;
    color: #fff;
}

.navbar > .container,
.navbar .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    min-height: 4.35rem;
}

.navbar-brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
}

.navbar-toggler {
    margin-left: auto;
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.navbar-toggler-icon {
    width: 1.2rem;
    height: 0.85rem;
    border-top: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    position: relative;
}

.navbar-toggler-icon::before {
    content: "";
    position: absolute;
    inset: 50% 0 auto;
    border-top: 2px solid currentColor;
    transform: translateY(-50%);
}

.navbar-collapse {
    width: 100%;
}

.navbar-nav,
.nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navbar-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.nav-link,
.navbar .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.7rem;
    color: rgba(255, 255, 255, 0.76);
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.customer-subnav .nav-link {
    color: #31546d;
    background: var(--color-surface-subtle);
}

.customer-subnav .nav-link:hover,
.customer-subnav .nav-link:focus,
.customer-subnav .nav-link.active {
    color: #fff;
    background: var(--mm-primary);
}

@media (min-width: 992px) {
    .navbar-toggler { display: none !important; }
    .navbar-collapse {
        display: flex !important;
        align-items: center;
        flex: 1 1 auto;
        width: auto;
    }
    .navbar-nav {
        flex-direction: row;
        align-items: center;
        width: auto;
    }
}

.collapse:not(.show) { display: none !important; }
.collapsing { overflow: hidden; }

@media (min-width: 992px) {
    .collapse.d-lg-block {
        display: block !important;
    }

    .collapse.d-lg-flex {
        display: flex !important;
    }
}

.dropdown-toggle::after {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0.72;
}

.dropdown-menu {
    position: absolute;
    z-index: 60;
    display: none;
    min-width: 14rem;
    margin: 0.35rem 0 0;
    padding: 0.4rem;
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 35, 55, 0.16);
    list-style: none;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 0.6rem;
    color: #25445f;
    font-weight: 600;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background: var(--color-surface-blue);
    color: var(--mm-primary);
}

.customer-subnav-capability-item,
.nav-item {
    position: relative;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.45rem;
    padding: 0.55rem 0.95rem;
    border: 1px solid transparent;
    border-radius: 0.7rem;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:disabled {
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
}

.btn-sm {
    min-height: 2rem;
    padding: 0.42rem 0.7rem;
    border-radius: 0.55rem;
    font-size: 0.875rem;
}

.btn-lg {
    min-height: 3rem;
    padding: 0.75rem 1.2rem;
    border-radius: 0.85rem;
    font-size: 1rem;
}

.btn-primary {
    background: var(--mm-primary);
    border-color: var(--mm-primary);
    color: #fff;
    box-shadow: 0 10px 24px rgba(15, 76, 129, 0.2);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #0b3d68;
    border-color: #0b3d68;
    color: #fff;
}

.btn-secondary {
    background: var(--color-text-secondary);
    border-color: var(--color-text-secondary);
    color: #fff;
}

.btn-dark {
    background: var(--color-text-primary);
    border-color: var(--color-text-primary);
    color: #fff;
}

.btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--color-text-primary);
}

.btn-outline-primary {
    background: #fff;
    border-color: rgba(15, 76, 129, 0.32);
    color: var(--mm-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: #eaf3f9;
    border-color: var(--mm-primary);
}

.btn-outline-secondary {
    background: #fff;
    border-color: #cbd5e1;
    color: var(--color-text-secondary);
}

.btn-outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
}

.btn-danger,
.btn-outline-danger:hover {
    background: var(--color-error);
    border-color: var(--color-error);
    color: #fff;
}

.btn-success,
.btn-outline-success:hover {
    background: var(--color-success-strong);
    border-color: var(--color-success-strong);
    color: #fff;
}

.btn-warning,
.btn-outline-warning:hover {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--color-text-primary);
}

.btn-outline-danger {
    background: #fff;
    border-color: rgba(220, 38, 38, 0.35);
    color: var(--color-error-strong);
}

.btn-outline-success {
    background: #fff;
    border-color: rgba(4, 120, 87, 0.35);
    color: var(--color-success-strong);
}

.btn-outline-warning {
    background: #fff;
    border-color: rgba(245, 158, 11, 0.45);
    color: var(--color-warning-strong);
}

.btn-link {
    min-height: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mm-primary);
    box-shadow: none;
}

.modal-open {
    overflow: hidden;
}

.btn-close {
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: #eef4f8;
    color: var(--color-text-secondary);
    position: relative;
    cursor: pointer;
}

.btn-close::before,
.btn-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.9rem;
    border-top: 2px solid currentColor;
}

.btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

.alert-dismissible {
    position: relative;
    padding-right: 3.4rem;
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 50%;
    right: 0.7rem;
    transform: translateY(-50%);
    width: 1.8rem;
    height: 1.8rem;
    background: transparent;
    color: inherit;
    opacity: 0.65;
}

.alert-dismissible .btn-close:hover { opacity: 1; }

.form-label {
    display: inline-flex;
    margin-bottom: 0.45rem;
    color: #243b53;
    font-size: 0.9rem;
    font-weight: 700;
}

.form-control,
.form-select {
    display: block;
    width: 100%;
    min-height: 2.7rem;
    padding: 0.62rem 0.78rem;
    border: 1px solid #cbdceb;
    border-radius: 0.75rem;
    background: #fff;
    color: #1f2937;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.form-control {
    min-height: 7rem;
    resize: vertical;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--mm-primary);
    box-shadow: 0 0 0 0.2rem rgba(15, 76, 129, 0.12);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check-input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--mm-primary);
}

.form-text {
    margin-top: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.card,
.modal-content {
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: #fff;
}

.card-body {
    padding: 1.5rem;
}

.card-header,
.card-footer {
    padding: 1rem 1.5rem;
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    background: #eaf3f9;
    color: #22506d;
    font-size: 0.75rem;
    font-weight: 800;
}

.alert {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    background: var(--color-surface-subtle);
    color: #243b53;
}

.alert-success { border-color: #bbf7d0; background: #ecfdf3; color: var(--color-success-strong); }
.alert-danger { border-color: #fecaca; background: var(--color-error-soft); color: var(--color-error-strong); }
.alert-warning { border-color: #fde68a; background: var(--color-warning-soft); color: var(--color-warning-strong); }
.alert-info { border-color: #bae6fd; background: #f0f9ff; color: var(--color-info-strong); }
.alert-light { background: #fff; color: var(--color-text-secondary); }

.table {
    width: 100%;
    border-collapse: collapse;
    vertical-align: top;
}

.table th,
.table td {
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}

.table thead th {
    background: var(--color-surface-subtle);
    color: #415b76;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.table-hover tbody tr:hover {
    background: var(--color-surface-subtle);
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    overflow: auto;
    padding: 1rem;
    background: rgba(10, 20, 32, 0.58);
}

.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    width: min(100%, 42rem);
    margin: auto;
}

.modal-lg { width: min(100%, 56rem); }
.modal-xl { width: min(100%, 72rem); }
.modal-dialog-scrollable {
    max-height: calc(100vh - 2rem);
}
.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 2rem);
    overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
    overflow: auto;
}

.modal-header,
.modal-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.modal-footer {
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid var(--color-border);
    border-bottom: 0;
}

.modal-body {
    padding: 1.5rem;
}

.modal-title {
    color: var(--color-text-primary);
    font-weight: 800;
}

.offcanvas {
    position: fixed;
    z-index: 980;
    inset: 0 0 0 auto;
    display: none;
    width: min(100%, 42rem);
    overflow: auto;
    background: #fff;
    box-shadow: -18px 0 50px rgba(15, 35, 55, 0.22);
}

.offcanvas.show {
    display: block;
}

.accordion {
    display: grid;
    gap: 0.75rem;
}

.accordion-item {
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    background: #fff;
    overflow: hidden;
}

.accordion-header {
    margin: 0;
}

.accordion-button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1rem;
    border: 0;
    background: #fff;
    color: var(--color-text-primary);
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.accordion-button::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(225deg);
    transition: transform 0.15s ease;
}

.accordion-button.collapsed::after {
    transform: rotate(45deg);
}

.accordion-button:not(.collapsed) {
    background: var(--color-surface-subtle);
}

.accordion-body {
    padding: 1rem;
}

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    border-bottom: 1px solid var(--color-border);
}

.nav-tabs .nav-link {
    color: #46637d;
    background: transparent;
    border-radius: 0.75rem 0.75rem 0 0;
}

.nav-tabs .nav-link.active {
    color: var(--mm-primary);
    background: #fff;
    box-shadow: inset 0 -2px 0 var(--mm-primary);
}

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .tab-pane.active,
.tab-content > .tab-pane.show {
    display: block;
}

.carousel {
    position: relative;
}

.carousel-item {
    display: none;
}

.carousel-item.active {
    display: block;
}

.carousel-indicators {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin: 1rem 0 0;
}

.carousel-indicators button {
    width: 0.7rem;
    height: 0.7rem;
    border: 0;
    border-radius: 999px;
    background: #adc5d8;
}

.carousel-indicators button.active {
    background: var(--mm-primary);
}

}

.navbar-brand {
    letter-spacing: 0.02em;
}

.app-account-link {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.15s ease;
}

.app-account-link:hover,
.app-account-link:focus {
    color: #fff;
}

.public-hero,
.public-page-hero {
    padding: 1rem 0 4rem;
}

.public-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.9rem;
    color: var(--color-brand-teal);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-hero-title,
.public-page-title {
    max-width: 14ch;
    margin-bottom: 1.1rem;
    color: var(--color-text-primary);
    font-size: clamp(2.5rem, 5vw, 4.35rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.04em;
}

.public-page-title {
    max-width: 16ch;
    font-size: clamp(2.2rem, 4vw, 3.35rem);
}

.public-hero-copy,
.public-page-copy,
.public-section-copy,
.public-cta-copy {
    max-width: 56rem;
    color: var(--color-text-secondary);
    font-size: 1.05rem;
    line-height: 1.8;
}

.public-hero-actions,
.public-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 2rem;
}

.public-home-hero-image-shell {
    border: 1px solid var(--color-border);
    border-radius: 1.6rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(247, 251, 254, 0.98) 0%, rgba(239, 246, 251, 0.98) 100%);
    box-shadow: 0 18px 42px rgba(15, 76, 129, 0.08);
}

.public-home-hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.public-about-hero-image-shell {
    border: 1px solid var(--color-border);
    border-radius: 1.6rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(247, 251, 254, 0.98) 0%, rgba(239, 246, 251, 0.98) 100%);
    box-shadow: 0 18px 42px rgba(15, 76, 129, 0.08);
}

.public-about-hero-image {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1.055);
    transform-origin: center 44%;
}

.public-decision-image-shell {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 76, 129, 0.08);
    padding: 1rem;
}

.public-decision-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    transform: scale(1.1) translateY(-1.25rem);
    transform-origin: center top;
}

.public-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.public-trust-strip span {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--color-text-primary);
    font-size: 0.84rem;
    font-weight: 600;
}

.public-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.public-stat-chip {
    display: grid;
    gap: 0.1rem;
    padding: 0.9rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
}

.public-stat-chip strong {
    color: var(--color-text-primary);
    font-size: 1.35rem;
    font-weight: 700;
}

.public-stat-chip span {
    color: #5d7387;
    font-size: 0.84rem;
}

.public-board-stat-grid,
.public-score-columns,
.public-difference-grid,
.public-contact-points {
    display: grid;
    gap: 0.75rem;
}

.public-app-scene {
    position: relative;
    min-height: 34rem;
}

.public-app-window {
    border: 1px solid rgba(15, 76, 129, 0.12);
    border-radius: 1.45rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 30px 70px rgba(15, 76, 129, 0.12);
    overflow: hidden;
}

.public-app-window-main {
    position: relative;
    z-index: 2;
}

.public-app-window-float {
    position: absolute;
    right: -1rem;
    bottom: 1rem;
    width: min(19rem, 82%);
    z-index: 3;
}

.public-app-window-bar {
    display: flex;
    gap: 0.45rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-border);
}

.public-app-window-bar span {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: #d8e6f2;
}

.public-app-window-body {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    min-height: 29rem;
}

.public-app-window-body.compact {
    display: block;
    min-height: auto;
    padding: 1rem 1.1rem 1.15rem;
}

.public-app-sidebar {
    display: grid;
    align-content: start;
    gap: 0.65rem;
    padding: 1rem;
    background: linear-gradient(180deg, #f4f9fd 0%, #eef5fa 100%);
    border-right: 1px solid var(--color-border);
}

.public-app-sidebar-item {
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    color: var(--color-text-secondary);
    font-size: 0.92rem;
    font-weight: 600;
}

.public-app-sidebar-item.is-active {
    background: #fff;
    color: var(--color-text-primary);
    box-shadow: 0 10px 22px rgba(15, 76, 129, 0.08);
}

.public-app-content {
    display: grid;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
}

.public-app-panel {
    padding: 1rem;
    border: 1px solid #dbe8f1;
    border-radius: 1rem;
    background: #fff;
}

.public-app-panel-hero {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
}

.public-app-panel-kicker {
    margin-bottom: 0.75rem;
    color: var(--color-brand-teal);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-app-chart-row,
.public-app-mini-grid,
.public-app-metrics,
.public-board-stat-grid,
.public-score-columns,
.public-difference-grid,
.public-contact-points {
    display: grid;
    gap: 0.75rem;
}

.public-app-chart-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-app-filter-pill {
    padding: 0.65rem 0.75rem;
    border-radius: 0.85rem;
    background: #eff6fb;
    color: var(--color-text-primary);
    font-size: 0.83rem;
    font-weight: 600;
    text-align: center;
}

.public-app-filter-pill.is-wide {
    grid-column: span 1;
}

.public-app-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.public-app-list-item {
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 0.95rem;
    border-radius: 0.9rem;
    background: var(--color-surface-subtle);
}

.public-app-list-item strong,
.public-board-title,
.public-service-card-title,
.public-journey-title,
.public-contact-card-kicker {
    color: var(--color-text-primary);
}

.public-app-list-item span,
.public-board-card p,
.public-service-card-list li,
.public-difference-card span,
.public-contact-points span {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.public-app-metrics div,
.public-board-stat-grid div,
.public-score-columns div,
.public-contact-points div {
    display: grid;
    gap: 0.18rem;
}

.public-app-metrics strong,
.public-board-stat-grid strong,
.public-score-columns strong {
    color: var(--color-text-primary);
    font-size: 1.15rem;
    font-weight: 700;
}

.public-app-metrics span,
.public-board-stat-grid span,
.public-score-columns span,
.public-contact-points strong,
.public-contact-points span {
    font-size: 0.82rem;
}

.public-app-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-app-bars {
    display: grid;
    gap: 0.55rem;
}

.public-app-bars span {
    display: block;
    height: 0.6rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--color-bright-blue) 0%, #5aa4d0 100%);
}

.public-app-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

.public-quadrant-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 4rem;
    border-radius: 0.95rem;
    background: var(--color-surface-subtle);
    color: var(--color-text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    text-align: center;
}

.public-section {
    padding: 4rem 0;
}

.public-section-alt {
    padding: 4rem 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 2rem;
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(244,250,255,0.95) 100%);
}

.public-section-head {
    max-width: 58rem;
    margin-bottom: 2rem;
}

.public-section-title,
.public-cta-title {
    margin-bottom: 1rem;
    color: var(--color-text-primary);
    font-size: clamp(1.9rem, 3vw, 2.8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.public-feature-card,
.public-board-card,
.public-journey-card,
.public-bullet-board-item,
.public-service-card,
.public-difference-card,
.public-contact-card,
.public-contact-form-card,
.public-contact-side-card {
    height: 100%;
    padding: 1.3rem 1.35rem;
    border: 1px solid var(--color-border);
    border-radius: 1.2rem;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 34px rgba(15, 76, 129, 0.05);
}

.public-feature-title {
    margin-bottom: 0.65rem;
    color: var(--color-text-primary);
    font-size: 1.22rem;
    font-weight: 700;
}

.public-feature-copy {
    color: var(--color-text-secondary);
    line-height: 1.75;
}

.public-feature-list {
    display: grid;
    gap: 0.6rem;
    padding-left: 1.1rem;
    color: var(--color-text-secondary);
}

.public-highlight-stack {
    display: grid;
    gap: 1.2rem;
}

.public-highlight-row {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
    align-items: center;
    padding: 1.2rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 40px rgba(15, 76, 129, 0.05);
}

.public-mock-card,
.public-mock-board {
    display: grid;
    gap: 0.9rem;
}

.public-mock-card {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 1.2rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
}

.public-mock-header {
    color: var(--color-text-primary);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.public-radar-visual {
    position: relative;
    width: 11rem;
    height: 11rem;
    margin: 0 auto;
}

.public-radar-ring,
.public-radar-shape {
    position: absolute;
    inset: 0;
    border-radius: 999px;
}

.public-radar-ring {
    border: 1px solid rgba(42, 111, 151, 0.18);
}

.public-radar-ring.ring-2 {
    inset: 1.25rem;
}

.public-radar-ring.ring-3 {
    inset: 2.5rem;
}

.public-radar-shape {
    inset: 1.55rem;
    background: radial-gradient(circle at 40% 35%, rgba(37, 111, 143, 0.42), rgba(37, 111, 143, 0.12));
    clip-path: polygon(50% 0%, 84% 26%, 76% 82%, 24% 90%, 10% 38%);
}

.public-mock-tabs,
.public-mock-levels,
.public-mock-quadrants {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.public-mock-tabs span,
.public-mock-levels span,
.public-mock-quadrants span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.7rem;
    border-radius: 0.85rem;
    background: var(--color-surface-blue);
    color: var(--color-text-primary);
    font-size: 0.83rem;
    font-weight: 600;
    text-align: center;
}

.public-mock-role-list,
.public-mock-conditions {
    display: grid;
    gap: 0.65rem;
}

.public-mock-role-list div,
.public-mock-conditions div {
    display: grid;
    gap: 0.15rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.9rem;
    background: var(--color-surface-subtle);
}

.public-mock-role-list strong,
.public-mock-conditions div {
    color: var(--color-text-primary);
    font-weight: 700;
}

.public-mock-role-list span {
    color: #5d7387;
    font-size: 0.88rem;
}

.public-mock-heatmap {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.public-mock-heatmap span {
    display: block;
    min-height: 3.3rem;
    border-radius: 0.8rem;
}

.public-mock-heatmap .tone-strong {
    background: #9fd4f2;
}

.public-mock-heatmap .tone-mid {
    background: #d8ecf8;
}

.public-mock-heatmap .tone-soft {
    background: #eef6fb;
}

.public-board-grid,
.public-bullet-board {
    display: grid;
    gap: 1rem;
}

.public-board-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1rem;
}

.public-score-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 1rem;
}

.public-journey-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-journey-step {
    margin-bottom: 1rem;
    color: var(--color-brand-teal);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.public-journey-copy {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.public-cta-section {
    margin: 0;
    padding: 4rem 2.5rem;
    border-radius: 2rem;
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 55%, var(--color-secondary-accent) 130%);
    color: #fff;
}

.public-cta-section-spaced {
    margin-top: 4rem;
}

.public-cta-section .public-kicker,
.public-cta-title,
.public-cta-copy {
    color: #fff;
}

.public-cta-copy {
    max-width: 44rem;
    opacity: 0.88;
}

.public-service-visual,
.public-about-visual {
    position: relative;
    display: grid;
    gap: 1rem;
    min-height: 22rem;
}

.public-service-layer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.public-service-layer span,
.public-about-node {
    display: grid;
    gap: 0.2rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 1.1rem;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 16px 34px rgba(15, 76, 129, 0.05);
    color: var(--color-text-primary);
    font-weight: 700;
}

.public-service-card {
    max-width: 28rem;
    justify-self: end;
}

.public-service-carousel {
    position: relative;
    min-height: 26rem;
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(247, 251, 254, 0.98) 0%, rgba(239, 246, 251, 0.98) 100%);
    box-shadow: 0 18px 42px rgba(15, 76, 129, 0.08);
}

.public-service-carousel-inner,
.public-service-carousel .carousel-item {
    min-height: 26rem;
}

.public-service-carousel .carousel-item {
    padding: 1rem 1rem 0;
    background: transparent;
}

.public-service-carousel-image-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24.5rem;
    overflow: hidden;
    border-radius: 1rem;
    background: #ffffff;
    padding: 0.15rem;
}

.public-service-carousel-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 24.5rem;
    object-fit: contain;
    transform: scale(1.12);
    transform-origin: center center;
}

.public-service-carousel-image.is-default {
    transform: scale(1.12) translateY(-0.28rem);
}

.public-service-carousel-image.is-shift-up,
.public-service-carousel-image.is-shift-down-soft {
    transform: scale(1.12);
}

.public-service-carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1rem 1rem;
}

.public-service-carousel-indicators {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
}

.public-service-carousel-indicators [data-bs-target] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    height: 0.28rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background-color: rgba(216, 230, 241, 0.92);
    color: transparent;
    font-size: 0;
    font-weight: 400;
    opacity: 1;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.public-service-carousel-indicators [data-bs-target]:hover,
.public-service-carousel-indicators [data-bs-target]:focus {
    border-color: #b8cfdf;
    transform: translateY(-1px);
}

.public-service-carousel-indicators .active {
    background-color: var(--mm-primary);
    border-color: var(--mm-primary);
    box-shadow: 0 0 0 0.18rem rgba(15, 76, 129, 0.12);
}

.public-service-card-list {
    display: grid;
    gap: 0.65rem;
    padding-left: 1.1rem;
    margin-bottom: 0;
}

.public-about-visual {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.public-about-node span {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

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

.public-difference-card strong {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--color-text-primary);
    font-size: 1rem;
}

.public-contact-points {
    margin-top: 1.5rem;
}

.public-contact-points strong {
    color: var(--color-text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.public-contact-card-kicker {
    margin-bottom: 0.8rem;
    font-size: 1rem;
    font-weight: 700;
}

.public-contact-form {
    display: grid;
    gap: 1rem;
}

.public-form-label {
    color: var(--color-text-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

.public-form-input {
    min-height: 3.2rem;
    border: 1px solid #d7e4ee;
    border-radius: 0.95rem;
    background: #fff;
    color: var(--color-text-primary);
}

.public-form-input:focus {
    border-color: #9ec0da;
    box-shadow: 0 0 0 0.2rem rgba(15, 76, 129, 0.12);
}

.public-form-textarea {
    min-height: 10rem;
    resize: vertical;
}

.public-contact-form-actions {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.25rem;
}

.account-panel-card {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.1rem;
}

.account-readonly-field {
    background-color: var(--color-surface-subtle);
    border-color: var(--color-border);
    color: var(--color-text-primary);
    font-weight: 600;
}

.account-readonly-field:focus {
    background-color: var(--color-surface-subtle);
    border-color: var(--color-border);
    box-shadow: none;
}

.account-input-field {
    border-color: var(--color-border);
    border-radius: 0.9rem;
    min-height: 3rem;
}

.account-input-field:focus {
    border-color: #9ec0da;
    box-shadow: 0 0 0 0.2rem rgba(15, 76, 129, 0.12);
}

.account-input-field.is-invalid-lite {
    border-color: #d92d20;
    box-shadow: 0 0 0 0.15rem rgba(217, 45, 32, 0.12);
}

.account-password-field {
    align-items: center;
    display: flex;
    gap: 0.65rem;
}

.account-password-field .account-input-field {
    flex: 1 1 auto;
}

.account-password-toggle {
    border-radius: 0.75rem;
    font-size: 0.76rem;
    min-width: 3.2rem;
    padding-inline: 0.55rem;
}

.account-password-hint,
.account-password-match-hint {
    color: #4f6477;
    font-size: 0.87rem;
    line-height: 1.45;
}

.account-password-hint strong,
.account-password-match-hint strong {
    color: var(--color-text-primary);
    font-weight: 700;
}

.account-password-hint.is-weak,
.account-password-match-hint.is-mismatch {
    color: #b54708;
}

.account-password-hint.is-strong,
.account-password-match-hint.is-match {
    color: #0f766e;
}

.customer-login-stage {
    padding: 0.5rem 0 1.5rem;
}

.customer-login-title {
    max-width: 11ch;
}

.customer-login-card {
    border: 1px solid var(--color-border);
    border-radius: 1.6rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    box-shadow: 0 18px 42px rgba(15, 76, 129, 0.08);
    padding: 2rem;
}

.customer-login-submit {
    min-height: 3.2rem;
    border-radius: 0.95rem;
}

.customer-login-meta {
    margin-top: 1.4rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.customer-login-meta-label {
    color: var(--color-brand-teal);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.customer-login-meta-value {
    color: var(--color-text-secondary);
    font-size: 0.96rem;
}

.customer-login-visual-shell {
    border: 1px solid var(--color-border);
    border-radius: 1.6rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(247, 251, 254, 0.98) 0%, rgba(239, 246, 251, 0.98) 100%);
    box-shadow: 0 18px 42px rgba(15, 76, 129, 0.08);
    padding: 1rem;
}

.customer-login-visual {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    transform: scale(1.065) translateY(-1rem);
    transform-origin: center top;
}

.dashboard-hero {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 30%),
        linear-gradient(135deg, #0f2b53 0%, #184e7a 55%, #1a6ca8 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    box-shadow: 0 30px 65px rgba(15, 23, 42, 0.15);
    color: #ffffff;
    display: grid;
    gap: 1.5rem;
    overflow: hidden;
    padding: 2rem;
}

.dashboard-hero-main {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem);
}

.dashboard-hero-title {
    color: #ffffff;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    max-width: 48rem;
}

.dashboard-hero-copy {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.02rem;
    line-height: 1.65;
    max-width: 64ch;
}

.dashboard-hero-subtle {
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.8rem;
    font-weight: 600;
}

.dashboard-hero-action-panel {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 0.85rem;
    box-shadow: 0 18px 38px rgba(8, 31, 50, 0.12);
    display: grid;
    gap: 0.65rem;
    padding: 0.9rem;
}

.dashboard-hero-action-title {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.dashboard-hero-action-panel .btn {
    justify-content: center;
    min-height: 2.7rem;
    white-space: nowrap;
}

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

.dashboard-summary-card,
.dashboard-panel-card {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    box-shadow: 0 16px 34px rgba(15, 76, 129, 0.08);
}

.dashboard-summary-card {
    padding: 1.1rem 1.2rem;
}

.dashboard-summary-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dashboard-summary-value {
    color: var(--color-text-primary);
    font-size: clamp(1.8rem, 2.5vw, 2.35rem);
    font-weight: 700;
    line-height: 1.05;
    margin-top: 0.45rem;
}

.dashboard-summary-meta {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
    margin-top: 0.45rem;
}

.dashboard-empty-state {
    background: var(--color-surface-subtle);
    border: 1px dashed #c9d9e6;
    border-radius: 1rem;
    color: var(--color-text-muted);
    padding: 1rem 1.1rem;
}

.dashboard-activity-list,
.dashboard-library-list,
.dashboard-portfolio-list,
.dashboard-next-actions {
    display: grid;
    gap: 0.9rem;
}

.dashboard-activity-item,
.dashboard-next-action {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1.05rem;
    box-shadow: 0 12px 24px rgba(15, 76, 129, 0.05);
    padding: 1rem 1.05rem;
}

.dashboard-activity-topline,
.dashboard-portfolio-item {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.dashboard-activity-actor,
.dashboard-library-title,
.dashboard-portfolio-title,
.dashboard-next-action-title {
    color: var(--color-text-primary);
    font-weight: 700;
}

.dashboard-activity-time,
.dashboard-portfolio-time {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    white-space: nowrap;
}

.dashboard-activity-copy,
.dashboard-next-action-copy {
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-top: 0.35rem;
}

.dashboard-library-item,
.dashboard-portfolio-item {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1.05rem;
    color: inherit;
    display: block;
    padding: 1rem 1.05rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dashboard-library-item:hover,
.dashboard-portfolio-item:hover {
    border-color: #bfd6e7;
    box-shadow: 0 1rem 2rem rgba(15, 76, 129, 0.12);
    transform: translateY(-3px);
}

.dashboard-library-meta,
.dashboard-portfolio-meta {
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.86rem;
    gap: 0.35rem;
    line-height: 1.45;
    margin-top: 0.2rem;
}

.dashboard-library-sections {
    display: grid;
    gap: 1.1rem;
}

.dashboard-library-accordion {
    display: grid;
    gap: 0.9rem;
}

.dashboard-library-accordion .accordion-item {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
}

.dashboard-library-toggle {
    background: #ffffff;
    color: var(--color-text-primary);
    font-weight: 700;
}

.dashboard-library-toggle:not(.collapsed) {
    background: var(--color-surface-subtle);
    color: var(--color-text-primary);
    box-shadow: none;
}

.dashboard-library-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(15, 76, 129, 0.1);
}

.dashboard-library-section-title {
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.help-article-shell {
    max-width: 1120px;
    margin: 0 auto;
}

.help-hub-hero {
    padding: 0.5rem 0 0.25rem;
}

.help-article-kicker,
.help-level-kicker,
.help-cluster-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-brand-teal);
}

.help-hub-title {
    max-width: 15ch;
    margin: 0.7rem 0 1rem;
    color: var(--color-text-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.help-hub-copy {
    max-width: 56rem;
    margin-bottom: 1.2rem;
    color: #42586b;
    font-size: 1.02rem;
    line-height: 1.8;
}

.help-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.help-topic-shell {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border-color: var(--color-border) !important;
}

.help-aside-title {
    margin-bottom: 0;
    color: var(--color-text-primary);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.help-topic-nav {
    gap: 0.55rem;
}

.help-topic-nav .nav-link {
    padding: 0.95rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    color: var(--color-text-primary);
    text-align: left;
    box-shadow: 0 10px 24px rgba(15, 76, 129, 0.04);
}

.help-topic-nav .nav-link.active {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, #e9f5fb 100%);
    border-color: rgba(37, 111, 143, 0.3);
    color: var(--color-text-primary);
    box-shadow: 0 14px 28px rgba(15, 76, 129, 0.08);
}

.help-topic-nav-title {
    display: block;
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.help-topic-nav-copy {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.help-topic-header {
    max-width: 54rem;
}

.help-subtopic-tabs {
    border-bottom: 1px solid var(--color-border);
    gap: 0.25rem;
}

.help-subtopic-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--color-text-secondary);
    font-weight: 600;
    padding-inline: 0;
    padding-right: 1.25rem;
    padding-left: 0;
}

.help-subtopic-tabs .nav-link.active {
    background: transparent;
    color: var(--color-text-primary);
    border-bottom-color: var(--color-brand-teal);
}

.help-section-kicker {
    margin-bottom: 0.75rem;
    color: var(--color-brand-teal);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-section-title {
    color: var(--color-text-primary);
    font-size: clamp(1.65rem, 3vw, 2.3rem);
    font-weight: 700;
    line-height: 1.08;
}

.help-prose-copy {
    max-width: 52rem;
    color: #3e5870;
    font-size: 1rem;
    line-height: 1.8;
}

.help-level-stack {
    display: grid;
    gap: 1.25rem;
    margin-top: 1.8rem;
}

.help-level-entry {
    padding: 1.35rem 1.45rem;
    border-left: 3px solid rgba(15, 76, 129, 0.26);
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, #ffffff 100%);
    border-radius: 0 1rem 1rem 0;
}

.help-level-entry-kicker {
    margin-bottom: 0.55rem;
    color: var(--color-brand-teal);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-level-entry-title {
    margin-bottom: 0.5rem;
    color: var(--color-text-primary);
    font-size: 1.3rem;
    font-weight: 700;
}

.help-level-entry-summary,
.help-level-entry-copy {
    color: #3e5870;
    line-height: 1.8;
}

.help-meta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    background: rgba(37, 111, 143, 0.08);
    color: var(--color-text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.help-reference-accordion {
    border: 1px solid var(--color-border);
    border-radius: 1.4rem;
    overflow: hidden;
    background: #fff;
}

.help-domain-accordion-item {
    border-color: rgba(18, 38, 63, 0.08);
}

.help-domain-stats,
.help-cluster-stats,
.help-label-header-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.help-domain-intro {
    padding: 1.1rem 1.2rem;
    border-left: 3px solid rgba(15, 76, 129, 0.24);
    border-radius: 1rem;
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    color: #2c4b63;
    line-height: 1.7;
}

.help-cluster-card {
    border-top: 1px solid rgba(18, 38, 63, 0.08);
    border-radius: 0;
    background: transparent;
    overflow: hidden;
}

.help-cluster-card-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(18, 38, 63, 0.08);
}

.help-label-accordion .accordion-item {
    border: 0;
    border-top: 1px solid rgba(18, 38, 63, 0.08);
    border-radius: 0;
}

.help-label-accordion .accordion-button {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: #fff;
    box-shadow: none;
}

.help-label-accordion .accordion-button:not(.collapsed) {
    background: var(--color-surface-subtle);
    color: inherit;
}

.help-label-header-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    text-align: left;
}

.help-label-title {
    font-weight: 700;
    color: var(--color-text-primary);
}

.help-label-subtitle {
    font-size: 0.92rem;
    color: var(--color-text-muted);
}

.help-detail-block {
    height: 100%;
    border: 1px solid #d7e7f2;
    border-radius: 1rem;
    padding: 1rem 1.05rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    box-shadow: 0 10px 24px rgba(15, 76, 129, 0.03);
}

.help-detail-title {
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-brand-teal);
}

.help-guidance-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.help-search-panel {
    max-width: 52rem;
}

.help-search-input {
    border-color: #cfe1ee;
    border-radius: 1rem;
    min-height: 3.35rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
}

.help-search-input:focus {
    border-color: #9ec0da;
    box-shadow: 0 0 0 0.2rem rgba(15, 76, 129, 0.12);
}

.help-search-meta {
    color: var(--color-text-secondary);
    font-size: 0.92rem;
}

.help-search-state {
    margin: 0.9rem 0 0.2rem;
    color: var(--color-text-secondary);
    font-size: 0.92rem;
}

.help-search-results {
    display: grid;
    gap: 1rem;
}

.help-search-tree {
    display: grid;
    gap: 1.25rem;
}

.help-tree-domain {
    position: relative;
}

.help-tree-domain-toggle {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0 0 0.55rem;
    text-align: left;
}

.help-tree-domain-copy {
    display: block;
    margin-top: 0.3rem;
    color: var(--color-text-secondary);
    font-size: 0.94rem;
    line-height: 1.5;
}

.help-tree-domain-title {
    color: var(--color-text-primary);
    font-size: 1.18rem;
}

.help-search-card-copy {
    min-width: 0;
}

.help-search-card-title {
    margin-bottom: 0.2rem;
    color: var(--color-text-primary);
    font-size: 1.12rem;
    font-weight: 700;
}

.help-search-card-parent {
    margin-bottom: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.help-search-card-summary {
    color: #42586b;
    line-height: 1.7;
}

.help-tree-domain-body {
    position: relative;
    margin-left: 1.1rem;
    padding: 0.35rem 0 0 1.75rem;
}

.help-tree-domain-body::before {
    content: "";
    position: absolute;
    left: 0.48rem;
    top: 0;
    bottom: 0.5rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(15, 76, 129, 0.35), rgba(42, 111, 151, 0.14));
}

.help-tree-cluster {
    position: relative;
    padding-bottom: 0.35rem;
}

.help-tree-cluster::before {
    content: "";
    position: absolute;
    left: -1.15rem;
    top: 1rem;
    width: 1rem;
    height: 1px;
    background: rgba(15, 76, 129, 0.34);
}

.help-tree-cluster-toggle,
.help-tree-label-toggle {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0.75rem 0;
    text-align: left;
    box-shadow: none;
}

.help-tree-cluster-toggle:hover,
.help-tree-label-toggle:hover {
    background: transparent;
}

.help-tree-cluster-title,
.help-tree-label-title,
.help-tree-domain-title,
.help-tree-detail-heading {
    display: block;
    color: var(--color-text-primary);
    font-weight: 700;
}

.help-tree-cluster-copy,
.help-tree-label-subtitle {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.help-tree-label-list {
    position: relative;
    margin-left: 1rem;
    padding: 0.2rem 0 0.1rem 1.45rem;
}

.help-tree-label-list::before {
    content: "";
    position: absolute;
    left: 0.48rem;
    top: 0;
    bottom: 0.4rem;
    width: 1px;
    background: linear-gradient(180deg, rgba(15, 76, 129, 0.3), rgba(42, 111, 151, 0.12));
}

.help-tree-label {
    position: relative;
    padding-bottom: 0.3rem;
}

.help-tree-label::before {
    content: "";
    position: absolute;
    left: -0.95rem;
    top: 0.95rem;
    width: 0.8rem;
    height: 1px;
    background: rgba(15, 76, 129, 0.32);
}

.help-tree-label-copy {
    min-width: 0;
}

.help-tree-label-body {
    padding: 0.55rem 0 0.5rem 0;
}

.help-tree-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.help-tree-detail-heading {
    margin-bottom: 0.55rem;
    font-size: 0.98rem;
}

.help-tree-detail-grid .help-detail-block {
    background: transparent;
    border: 1px solid rgba(15, 76, 129, 0.12);
    box-shadow: none;
}

.help-search-accordion {
    margin-top: 0.9rem;
}

.help-search-accordion .accordion-item,
.help-faq-accordion .accordion-item {
    border: 1px solid rgba(18, 38, 63, 0.08);
    border-radius: 0.9rem;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.help-search-accordion .accordion-button,
.help-faq-accordion .accordion-button {
    box-shadow: none;
    background: #fff;
    color: var(--color-text-primary);
    font-weight: 600;
}

.help-search-accordion .accordion-button:not(.collapsed),
.help-faq-accordion .accordion-button:not(.collapsed) {
    background: var(--color-surface-subtle);
    color: var(--color-text-primary);
}

.help-faq-question {
    text-align: left;
}

.help-home-shell {
    max-width: 1120px;
    margin: 0 auto;
}

.help-home-hero {
    max-width: 72rem;
}

.help-home-kicker,
.help-home-section-kicker {
    color: var(--color-brand-teal);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-home-title {
    max-width: 18ch;
    margin: 0 0 1rem;
    color: var(--color-text-primary);
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.help-home-copy,
.help-home-section-copy {
    max-width: 60rem;
    color: var(--color-text-secondary);
    font-size: 1rem;
    line-height: 1.75;
}

.help-home-search-card,
.help-home-panel,
.help-home-accordion .accordion-item {
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    background: #fff;
}

.help-home-section-title {
    color: var(--color-text-primary);
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 700;
    line-height: 1.1;
}

.help-search-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-search-hit {
    padding: 1rem 1.05rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: #fff;
}

.help-search-hit-type {
    margin-bottom: 0.35rem;
    color: var(--color-brand-teal);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-search-hit-title {
    margin-bottom: 0.25rem;
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.help-search-hit-parent {
    margin-bottom: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.help-search-hit-copy {
    color: var(--color-text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
}

.help-quick-grid,
.help-topic-card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.help-quick-card,
.help-topic-card {
    display: block;
    height: 100%;
    padding: 1.15rem 1.15rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.help-quick-card:hover,
.help-topic-card:hover {
    border-color: #bcd4e5;
    box-shadow: 0 14px 30px rgba(15, 76, 129, 0.08);
    transform: translateY(-1px);
}

.help-quick-title,
.help-topic-card-title {
    margin-bottom: 0.35rem;
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.help-quick-copy,
.help-topic-card-copy {
    color: var(--color-text-secondary);
    font-size: 0.94rem;
    line-height: 1.65;
}

.help-quick-link {
    margin-top: 0.9rem;
    color: var(--color-brand-teal);
    font-size: 0.88rem;
    font-weight: 700;
}

.help-home-accordion .accordion-item {
    overflow: hidden;
    margin-bottom: 0.9rem;
}

.help-home-accordion .accordion-button,
.help-categories-accordion .accordion-button {
    box-shadow: none;
    background: #fff;
    color: var(--color-text-primary);
    font-weight: 700;
}

.help-home-accordion .accordion-button:not(.collapsed),
.help-categories-accordion .accordion-button:not(.collapsed) {
    background: var(--color-surface-subtle);
    color: var(--color-text-primary);
}

.help-journey-grid {
    display: grid;
    gap: 0.9rem;
}

.help-journey-step {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    gap: 0.85rem;
    align-items: start;
}

.help-journey-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: #e9f5fb;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.help-journey-step-title,
.help-level-title,
.help-category-cluster-title {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.help-journey-step-copy,
.help-level-copy,
.help-category-cluster-copy,
.help-category-intro,
.help-bullet-item {
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.help-level-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.help-level-card {
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: #fff;
}

.help-category-intro {
    margin-bottom: 1rem;
}

.help-category-clusters {
    display: grid;
    gap: 1rem;
}

.help-category-cluster {
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.help-category-cluster:first-child {
    padding-top: 0;
    border-top: 0;
}

.help-category-label-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.75rem;
    margin-top: 0.75rem;
}

.help-category-label-name {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    font-weight: 600;
}

.help-bullet-stack {
    display: grid;
    gap: 0.9rem;
}

.help-bullet-item {
    padding-left: 1rem;
    position: relative;
}

.help-bullet-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 999px;
    background: var(--color-brand-teal);
}

.help-center-shell {
    display: grid;
    gap: 2rem;
    padding: 0.5rem 0 3rem;
}

.help-center-header,
.help-center-search-card,
.help-center-section,
.help-center-article-template,
.help-center-footer-note {
    border: 1px solid var(--color-border);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 18px 45px rgba(15, 76, 129, 0.06);
}

.help-center-header,
.help-center-search-card,
.help-center-section,
.help-center-footer-note {
    padding: 1.5rem;
}

.help-center-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    color: #355168;
    font-size: 0.95rem;
}

.help-center-status a,
.help-center-footer-note a {
    color: var(--mm-primary);
    font-weight: 600;
    text-decoration: none;
}

.help-center-status-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: #1f9d67;
    box-shadow: 0 0 0 0.25rem rgba(31, 157, 103, 0.14);
}

.help-center-kicker {
    margin-bottom: 0.8rem;
    color: var(--color-brand-teal);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-center-title {
    max-width: 14ch;
    margin: 0 0 1rem;
    color: var(--color-text-primary);
    font-size: clamp(2.25rem, 4vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.04em;
}

.help-center-copy,
.help-center-section-copy,
.help-center-search-copy,
.help-center-article-copy,
.help-center-article-template-copy,
.help-center-category-copy,
.help-center-taxonomy-copy,
.help-center-support-copy,
.help-center-step-copy {
    color: var(--color-text-secondary);
    line-height: 1.75;
}

.help-center-search-header,
.help-center-section-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.help-center-section-title {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.help-center-search-meta {
    color: var(--color-text-muted);
    font-size: 0.92rem;
}

.help-center-search-input {
    min-height: 4rem;
    border: 1px solid #cfdfea;
    border-radius: 1rem;
    padding-inline: 1.15rem;
    font-size: 1rem;
    box-shadow: none;
}

.help-center-search-input:focus {
    border-color: rgba(15, 76, 129, 0.45);
    box-shadow: 0 0 0 0.25rem rgba(15, 76, 129, 0.12);
}

.help-center-search-results {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.help-center-search-result {
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface-subtle);
}

.help-center-search-type {
    margin-bottom: 0.35rem;
    color: var(--color-brand-teal);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-center-search-title,
.help-center-article-title,
.help-center-category-title,
.help-center-context-title,
.help-center-taxonomy-title,
.help-center-support-title,
.help-center-article-template-title,
.help-center-related-title,
.help-center-feedback-title,
.help-center-step-title {
    color: var(--color-text-primary);
    font-weight: 700;
}

.help-center-search-title,
.help-center-article-template-title {
    margin: 0 0 0.5rem;
}

.help-center-search-parent {
    margin-bottom: 0.35rem;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

.help-center-tile-grid,
.help-center-context-grid,
.help-center-support-grid,
.help-center-taxonomy-grid {
    display: grid;
    gap: 1rem;
}

.help-center-two-column {
    display: grid;
    gap: 2rem;
}

.help-center-tile,
.help-center-support-card {
    display: grid;
    gap: 0.65rem;
    padding: 1.25rem;
    border: 1px solid #dfe8f1;
    border-radius: 1.25rem;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.help-center-tile:hover,
.help-center-support-card:hover {
    transform: translateY(-2px);
    border-color: #c8d9e8;
    box-shadow: 0 16px 32px rgba(15, 76, 129, 0.08);
}

.help-center-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(15, 76, 129, 0.12) 0%, rgba(42, 111, 151, 0.18) 100%);
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.help-center-tile-title,
.help-center-support-title {
    font-size: 1.03rem;
}

.help-center-tile-copy,
.help-center-tile-link,
.help-center-support-link,
.help-center-support-copy,
.help-center-article-copy,
.help-center-category-copy,
.help-center-taxonomy-copy {
    font-size: 0.95rem;
}

.help-center-tile-link,
.help-center-support-link {
    color: var(--mm-primary);
    font-weight: 600;
}

.help-center-article-list,
.help-center-category-list {
    display: grid;
    gap: 0.9rem;
}

.help-center-article-item,
.help-center-category-item,
.help-center-context-card,
.help-center-taxonomy-card {
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface-subtle);
}

.help-center-category-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
}

.help-center-context-list,
.help-center-taxonomy-list,
.help-center-related-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--color-text-secondary);
}

.help-center-context-list li,
.help-center-taxonomy-list li,
.help-center-related-list li {
    margin-bottom: 0.45rem;
}

.help-center-article-template {
    padding: 1.5rem;
}

.help-center-breadcrumbs {
    margin-bottom: 0.85rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.help-center-step-list {
    display: grid;
    gap: 0.9rem;
    margin: 1.5rem 0;
}

.help-center-step-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
}

.help-center-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: rgba(15, 76, 129, 0.1);
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.help-center-related-box {
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface-subtle);
}

.help-center-feedback {
    display: grid;
    gap: 0.9rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.help-center-feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.help-center-feedback-input {
    border-radius: 1rem;
}

.help-center-footer-note {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

@media (max-width: 991.98px) {
    .public-hero,
    .public-page-hero,
    .public-section {
        padding-block: 3rem;
    }

    .public-cta-section {
        padding-block: 3rem;
    }

    .public-cta-section-spaced {
        margin-top: 3rem;
    }

    .public-section-alt,
    .public-cta-section {
        padding-inline: 1.25rem;
    }

    .public-section-alt,
    .public-cta-section {
        padding-block: 3rem;
    }

    .customer-login-stage {
        padding-bottom: 0;
    }

    .public-board-stat-grid,
    .public-score-columns,
    .public-journey-grid,
    .public-difference-grid,
    .public-stats-strip,
    .public-app-window-body,
    .public-app-mini-grid,
    .public-app-metrics,
    .public-quick-grid,
    .public-topic-card-grid,
    .public-service-layer,
    .public-about-visual {
        grid-template-columns: 1fr;
    }

    .public-service-carousel,
    .public-service-carousel-inner,
    .public-service-carousel .carousel-item,
    .public-service-carousel-image {
        min-height: 18rem;
        height: auto;
    }

    .public-service-carousel .carousel-item {
        padding: 0.8rem 0.8rem 0;
    }

    .public-service-carousel-image {
        height: auto;
        max-height: 17rem;
        transform: scale(1.1);
    }

    .public-service-carousel-image.is-default {
        transform: scale(1.1) translateY(-0.2rem);
    }

    .public-service-carousel-image.is-shift-up,
    .public-service-carousel-image.is-shift-down-soft {
        transform: scale(1.1);
    }

    .public-service-carousel-nav {
        justify-content: center;
        text-align: center;
    }

    .customer-login-card,
    .customer-login-visual-shell {
        padding: 1.25rem;
    }

    .customer-login-visual {
        transform: scale(1.035) translateY(-0.45rem);
    }


    .public-highlight-row {
        grid-template-columns: 1fr;
    }

    .public-app-window-float {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-top: 1rem;
    }

    .public-app-scene {
        min-height: auto;
    }

    .public-app-window-body {
        min-height: auto;
    }

    .public-app-sidebar {
        display: none;
    }

    .help-cluster-card-header,
    .help-label-accordion .accordion-button {
        flex-direction: column;
        align-items: flex-start;
    }

    .help-guidance-grid {
        grid-template-columns: 1fr;
    }

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

    .help-search-results,
    .help-quick-grid,
    .help-topic-card-grid,
    .help-level-grid {
        grid-template-columns: 1fr;
    }

    .help-center-two-column {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) {
    .help-center-header,
    .help-center-search-card,
    .help-center-section,
    .help-center-footer-note {
        padding: 2rem;
    }

    .help-center-tile-grid,
    .help-center-context-grid,
    .help-center-support-grid,
    .help-center-taxonomy-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .help-center-header,
    .help-center-search-card,
    .help-center-section,
    .help-center-footer-note,
    .help-center-article-template {
        padding: 2.25rem;
    }

    .help-center-search-header,
    .help-center-section-head {
        flex-direction: row;
        align-items: end;
        justify-content: space-between;
    }

    .help-center-two-column {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    }

    .help-center-tile-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .help-center-context-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .help-center-support-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .help-center-taxonomy-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.dashboard-library-reason {
    color: var(--color-primary-hover);
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: 0.45rem;
}

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

.dashboard-workspace-stat {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
}

.dashboard-workspace-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dashboard-workspace-value {
    color: var(--color-text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin-top: 0.45rem;
}

.dashboard-workspace-value-money {
    font-size: 1.15rem;
}

@media (max-width: 991.98px) {
    .dashboard-hero-main {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .dashboard-hero-action-panel {
        min-width: 0;
    }

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

@media (max-width: 575.98px) {
    .dashboard-hero {
        border-radius: 22px;
        padding: 1.35rem;
    }

    .dashboard-summary-grid,
    .dashboard-workspace-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-activity-topline,
    .dashboard-portfolio-item {
        align-items: flex-start;
        flex-direction: column;
    }
}

.card,
.rounded-4 {
    border-radius: 1rem !important;
}

.btn-primary {
    background-color: var(--mm-primary);
    border-color: var(--mm-primary);
    box-shadow: 0 0.55rem 1.1rem rgba(15, 76, 129, 0.18);
    font-weight: 700;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #0c3d67;
    border-color: #0c3d67;
    box-shadow: 0 0.7rem 1.4rem rgba(15, 76, 129, 0.24);
    transform: translateY(-1px);
}

.badge.text-bg-primary {
    background-color: var(--mm-accent) !important;
    color: #1b1b1b !important;
}

.customer-subnav {
    position: sticky;
    top: 0;
    z-index: 1010;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(15, 76, 129, 0.08);
}

.customer-subnav-list .nav-link {
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--mm-primary);
    font-weight: 600;
    padding: 0.65rem 1rem;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.customer-subnav-list .nav-link.active,
.customer-subnav-list .nav-link:hover {
    background-color: var(--mm-primary);
    border-color: var(--mm-primary);
    color: #fff;
    transform: translateY(-1px);
}

.customer-subnav-capability-item {
    position: relative;
}

.customer-subnav-dropdown {
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: 0 1rem 2rem rgba(15, 76, 129, 0.12);
    min-width: 320px;
    padding: 0.5rem;
}

.customer-subnav-admin-dropdown,
.dropdown-menu-end.customer-subnav-dropdown {
    left: auto;
    max-width: min(320px, calc(100vw - 2rem));
    min-width: min(320px, calc(100vw - 2rem));
    right: 0;
}

.customer-subnav-dropdown .dropdown-item {
    border-radius: 0.8rem;
    padding: 0.7rem 0.85rem;
}

.customer-subnav-dropdown .dropdown-item.active,
.customer-subnav-dropdown .dropdown-item:active {
    background-color: var(--mm-primary);
    color: #fff;
}

.customer-subnav-dropdown .dropdown-item + .dropdown-item {
    margin-top: 0.15rem;
}

.portal-panel {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, #edf4fa 100%);
    border: 1px solid var(--mm-soft);
    border-radius: 1rem;
    padding: 1rem;
}

.portal-kicker {
    color: var(--mm-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.work-page-header {
    align-items: end;
    border-bottom: 1px solid var(--color-border);
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.25rem 0 1.25rem;
}

.work-page-header h1 {
    color: var(--color-text-primary);
    font-size: clamp(1.6rem, 2.5vw, 2.25rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0.25rem 0 0.35rem;
}

.work-page-header p {
    color: var(--color-text-secondary);
    font-size: 0.98rem;
    line-height: 1.55;
    margin: 0;
    max-width: 52rem;
}

.work-page-meta {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.work-page-meta span {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
    padding: 0.4rem 0.65rem;
    white-space: nowrap;
}

@media (max-width: 767.98px) {
    .work-page-header {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .work-page-meta {
        justify-content: flex-start;
    }
}

.capability-card {
    border-radius: 1rem;
    min-height: 150px;
    padding: 1.25rem;
    border: 1px solid transparent;
}

.capability-model-hero {
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, var(--color-primary) 55%, var(--color-secondary-accent) 130%);
}

.capability-overview-card {
    border: 1px solid rgba(15, 76, 129, 0.08);
}

.capability-summary-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capability-stepper {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capability-step {
    align-items: center;
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    display: flex;
    gap: 1rem;
    padding: 1rem 1.1rem;
}

.capability-step-index {
    align-items: center;
    background: var(--color-primary-hover);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.85rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    min-width: 2rem;
}

.capability-step-label {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.capability-step-value {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 0.2rem;
}

.capability-nav-panel,
.capability-column-panel {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.1rem;
    padding: 1.1rem;
}

.capability-panel-title {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.capability-panel-copy {
    color: var(--color-text-muted);
    font-size: 0.93rem;
    margin: 0.35rem 0 0.95rem;
}

.capability-nav-list,
.capability-card-stack,
.capability-level3-list,
.capability-domain-grid,
.capability-activity-grid {
    display: grid;
    gap: 0.85rem;
}

.capability-nav-item,
.capability-drill-card,
.capability-level3-item {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    color: inherit;
    display: block;
    padding: 1rem;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.capability-nav-item:hover,
.capability-drill-card:hover,
.capability-level3-item:hover {
    border-color: #b9d0e1;
    box-shadow: 0 0.75rem 1.5rem rgba(15, 76, 129, 0.1);
    transform: translateY(-2px);
}

.capability-nav-item.is-active,
.capability-drill-card.is-active,
.capability-level3-item.is-active {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-blue) 100%);
    border-color: #8db3cf;
    box-shadow: 0 0.65rem 1.35rem rgba(15, 76, 129, 0.12);
}

.capability-nav-item-top,
.capability-drill-card-top {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.capability-nav-id {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.capability-nav-name {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.35rem;
}

.capability-nav-copy {
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 0.92rem;
    line-height: 1.45;
    overflow: hidden;
}

.capability-drill-footer {
    display: flex;
    justify-content: flex-start;
}

.capability-detail-focus {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
}

.capability-domain-card {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.1rem;
    padding: 1.25rem;
}

.capability-section-header {
    align-items: end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.capability-inline-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.capability-inline-pill {
    background: #fff;
    border: 1px solid #d5e3ef;
    border-radius: 999px;
    color: var(--color-text-primary);
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.6rem 0.95rem;
    text-decoration: none;
}

.capability-inline-pill.is-active,
.capability-inline-pill:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}

.capability-hero-inline {
    align-items: center;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.capability-hero-chip {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    color: #fff;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.4rem 0.7rem;
    text-transform: uppercase;
}

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

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

.capability-activity-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
}

.capability-domain-accordion {
    display: grid;
    gap: 1rem;
}

.capability-domain-accordion-item {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.1rem;
    overflow: hidden;
}

.capability-domain-toggle {
    align-items: flex-start;
    background: transparent;
    gap: 1rem;
    padding: 1.25rem 1.35rem;
}

.capability-domain-toggle:not(.collapsed) {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, #f0f7fc 100%);
    box-shadow: none;
}

.capability-domain-toggle:focus {
    box-shadow: none;
}

.capability-domain-toggle-id {
    background: #e8f0f7;
    border-radius: 999px;
    color: var(--color-primary-hover);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.7rem;
    text-transform: uppercase;
}

.capability-domain-toggle-copy {
    display: block;
    max-width: calc(100% - 4rem);
}

.capability-domain-toggle-title {
    color: var(--color-text-primary);
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.capability-domain-toggle-description {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.94rem;
    line-height: 1.45;
    margin-top: 0.25rem;
}

.capability-domain-body {
    padding: 0 1.35rem 1.35rem;
}

.capability-l1-summary {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.capability-l1-summary-card,
.capability-l3-detail-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
}

.capability-l1-summary-label {
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.capability-l1-summary-value {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    margin-top: 0.45rem;
}

.capability-l1-summary-copy {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    font-weight: 500;
}

.capability-activity-card-link {
    box-shadow: 0 0.75rem 1.5rem rgba(15, 76, 129, 0.05);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.capability-activity-insights {
    display: grid;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.capability-activity-insight {
    display: grid;
    gap: 0.35rem;
}

.capability-activity-insight-label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.capability-activity-insight strong {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 800;
}

.capability-activity-top,
.capability-activity-footer,
.capability-role-title-row {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.capability-role-count,
.capability-activity-meta,
.capability-role-type {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 600;
}

.capability-activity-footer {
    margin-top: auto;
}

.capability-back-link {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
}

.capability-back-link:hover {
    color: #fff;
}

.capability-detail-hero-path {
    color: rgba(255, 255, 255, 0.72);
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: 0.84rem;
    font-weight: 600;
}

.capability-detail-section + .capability-detail-section {
    margin-top: 2rem;
}

.capability-mode-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.capability-mode-pill {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 800;
    min-height: 2.35rem;
    padding: 0.5rem 0.95rem;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.capability-mode-pill:hover,
.capability-mode-pill:focus {
    background: var(--color-surface-blue);
    border-color: #9ec3e4;
    box-shadow: 0 0 0 1px rgba(69, 129, 188, 0.12);
    color: var(--color-primary-hover);
}

.capability-mode-pill.is-active {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #ffffff;
}

.capability-boom-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr);
    align-items: start;
}

.capability-boom-tree-panel,
.capability-boom-detail-panel {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.1rem;
    max-height: calc(100vh - 2rem);
    padding: 1.1rem;
    position: sticky;
    top: 1rem;
}

.capability-boom-detail-panel {
    overflow: auto;
}

.capability-boom-model-list,
.capability-boom-tree,
.capability-boom-children,
.capability-boom-leaves {
    display: grid;
    gap: 0.2rem;
}

.capability-boom-tree {
    max-height: calc(100vh - 11rem);
    overflow-y: auto;
    padding-bottom: 0.15rem;
}

.capability-boom-model-link {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    color: var(--color-text-primary);
    display: grid;
    font-size: 0.92rem;
    font-weight: 700;
    gap: 0.18rem;
    padding: 0.85rem 0.9rem;
    text-decoration: none;
}

.capability-boom-model-link small {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.capability-boom-model-link.is-active,
.capability-boom-model-link:hover {
    background: var(--color-surface-blue);
    border-color: #9ec3e4;
    color: var(--color-primary-hover);
}

.capability-boom-side-actions {
    border-top: 1px solid var(--color-border);
    margin-top: 1rem;
    padding-top: 1rem;
}

.capability-boom-node {
    border-radius: 0.5rem;
    position: relative;
}

.capability-boom-node summary,
.capability-boom-leaf {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    color: var(--color-text-primary);
    cursor: pointer;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 2.4rem;
    overflow: hidden;
    padding: 0.38rem 0.55rem;
    text-decoration: none;
    white-space: nowrap;
}

.capability-boom-node summary:has(.capability-boom-count),
.capability-boom-leaf:has(.capability-boom-count) {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.capability-boom-node summary::marker {
    color: var(--color-text-muted);
}

.capability-boom-node[open] > summary {
    background: var(--color-surface-blue);
    border-color: var(--color-border);
}

.capability-boom-node-l1 > summary {
    font-weight: 800;
}

.capability-boom-node-l2 {
    margin-left: 0;
}

.capability-boom-node-l2 > summary {
    border-radius: 0.55rem;
}

.capability-boom-children {
    border-left: 1px solid #cfdeea;
    margin: 0.2rem 0 0.2rem 1.55rem;
    padding-left: 1rem;
}

.capability-boom-leaf {
    border-radius: 0.55rem;
    margin-left: 0;
}

.capability-boom-node summary:hover,
.capability-boom-node summary.is-active,
.capability-boom-leaf.is-active,
.capability-boom-leaf:hover {
    background: var(--color-surface-blue);
    border-color: var(--color-border);
}

.capability-boom-folder,
.capability-boom-file {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 0.95rem;
    flex: 0 0 auto;
}

.capability-boom-folder::before {
    background: #f7c95b;
    border: 1px solid #d8a82f;
    border-bottom: 0;
    border-radius: 0.2rem 0.2rem 0 0;
    content: "";
    height: 0.34rem;
    left: 0.08rem;
    position: absolute;
    top: 0.03rem;
    width: 0.7rem;
}

.capability-boom-folder::after {
    background: #ffd774;
    border: 1px solid #d8a82f;
    border-radius: 0.18rem;
    content: "";
    height: 0.7rem;
    left: 0;
    position: absolute;
    top: 0.25rem;
    width: 1.2rem;
}

.capability-boom-file::before {
    background: #ffffff;
    border: 1px solid #aebfce;
    border-radius: 0.14rem;
    content: "";
    height: 1rem;
    left: 0.18rem;
    position: absolute;
    top: 0;
    width: 0.82rem;
}

.capability-boom-file::after {
    border-color: #dfe8ef transparent transparent #dfe8ef;
    border-style: solid;
    border-width: 0.23rem;
    content: "";
    height: 0;
    position: absolute;
    right: 0.25rem;
    top: 0.01rem;
    width: 0;
}

.capability-boom-id {
    background: transparent;
    border-radius: 0;
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0;
    text-transform: uppercase;
    white-space: nowrap;
}

.capability-boom-title {
    font-size: 0.735rem;
    font-weight: 650;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.capability-boom-count {
    color: var(--color-text-muted);
    font-size: 0.595rem;
    font-weight: 700;
    white-space: nowrap;
}

.capability-boom-detail-kicker {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
}

.capability-boom-detail-title {
    color: var(--color-text-primary);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 0.85rem;
}

.capability-boom-detail-copy {
    color: var(--color-text-secondary);
    font-size: 0.98rem;
    line-height: 1.65;
    margin-bottom: 1rem;
}

.capability-boom-detail-extra {
    display: grid;
    gap: 0.85rem;
}

.job-role-detail-tabs {
    display: grid;
    gap: 0.85rem;
}

.job-role-detail-tab-input {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.job-role-detail-tab-list {
    background: var(--color-surface-blue);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    padding: 0.25rem;
}

.job-role-detail-tab {
    border-radius: 0.35rem;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.2;
    padding: 0.55rem 0.5rem;
    text-align: center;
}

.job-role-detail-tab:hover {
    color: var(--color-text-primary);
}

.job-role-detail-tab-panel {
    display: none;
}

.capability-context-filterbar {
    align-items: stretch;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(10rem, 1.2fr) repeat(2, minmax(8rem, 0.9fr)) auto;
    margin-bottom: 0.65rem;
    padding: 0.65rem;
}

.capability-context-filter-control {
    display: grid;
    gap: 0.25rem;
    grid-template-rows: 1rem 2.1rem;
    min-width: 0;
}

.capability-context-filter-control span {
    align-items: center;
    color: var(--color-text-muted);
    display: flex;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

.capability-context-filter-control input,
.capability-context-filter-control select {
    background: #ffffff;
    border: 1px solid #d2e1ec;
    border-radius: 0.4rem;
    color: var(--color-text-primary);
    font-size: 0.78rem;
    min-height: 2.1rem;
    padding: 0.35rem 0.45rem;
    width: 100%;
}

.capability-context-filter-control input:focus,
.capability-context-filter-control select:focus {
    border-color: #8ab7d6;
    box-shadow: 0 0 0 0.15rem rgba(15, 76, 129, 0.12);
    outline: none;
}

.capability-context-filter-count {
    align-self: end;
    background: #ffffff;
    border: 1px solid #d2e1ec;
    border-radius: 999px;
    color: var(--color-text-muted);
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 800;
    justify-content: center;
    min-height: 2.1rem;
    min-width: 4.4rem;
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
}

.job-role-detail-tab-input:nth-of-type(1):checked ~ .job-role-detail-tab-list .job-role-detail-tab:nth-child(1),
.job-role-detail-tab-input:nth-of-type(2):checked ~ .job-role-detail-tab-list .job-role-detail-tab:nth-child(2),
.job-role-detail-tab-input:nth-of-type(3):checked ~ .job-role-detail-tab-list .job-role-detail-tab:nth-child(3),
.job-role-detail-tab-input:nth-of-type(4):checked ~ .job-role-detail-tab-list .job-role-detail-tab:nth-child(4) {
    background: #ffffff;
    box-shadow: 0 0.35rem 0.9rem rgba(33, 66, 96, 0.08);
    color: var(--color-primary-hover);
}

.job-role-detail-tab-input:nth-of-type(1):checked ~ .job-role-detail-tab-panel-description,
.job-role-detail-tab-input:nth-of-type(2):checked ~ .job-role-detail-tab-panel-capabilities,
.job-role-detail-tab-input:nth-of-type(3):checked ~ .job-role-detail-tab-panel-usecases,
.job-role-detail-tab-input:nth-of-type(1):checked ~ .job-role-detail-tab-panel-1,
.job-role-detail-tab-input:nth-of-type(2):checked ~ .job-role-detail-tab-panel-2,
.job-role-detail-tab-input:nth-of-type(3):checked ~ .job-role-detail-tab-panel-3,
.job-role-detail-tab-input:nth-of-type(4):checked ~ .job-role-detail-tab-panel-4 {
    display: grid;
    gap: 0.85rem;
}

.ai-impact-panel {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 0.65rem;
    display: grid;
    gap: 0.85rem;
    padding: 0.85rem;
}

.ai-impact-top-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: minmax(0, 2fr) minmax(14rem, 1fr);
}

.ai-impact-hero {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.7rem;
}

.ai-impact-score-ring {
    align-items: center;
    background:
        radial-gradient(circle at center, #ffffff 0 57%, transparent 58%),
        conic-gradient(var(--color-primary-hover) 0 var(--impact-score), var(--color-border) var(--impact-score) 360deg);
    border-radius: 999px;
    display: grid;
    height: 5.4rem;
    justify-items: center;
    line-height: 1;
    place-content: center;
    width: 5.4rem;
}

.ai-impact-score-ring strong {
    color: var(--color-text-primary);
    font-size: 1.45rem;
}

.ai-impact-score-ring span {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
}

.ai-impact-level {
    color: var(--color-primary-hover);
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
}

.ai-impact-hero h4,
.ai-impact-grid h4,
.ai-impact-mix-card h4,
.ai-impact-full-section h4 {
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 800;
    margin: 0 0 0.25rem;
}

.ai-impact-hero p {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

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

.ai-impact-grid-wide {
    grid-template-columns: 1fr;
}

.ai-impact-grid section,
.ai-impact-mix-card,
.ai-impact-full-section {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.55rem;
    padding: 0.7rem;
}

.ai-impact-bar-row {
    align-items: center;
    display: grid;
    gap: 0.45rem;
    grid-template-columns: minmax(4.5rem, 0.9fr) minmax(0, 1fr) auto;
    margin-top: 0.45rem;
}

.ai-impact-capability-row {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    display: grid;
    gap: 0.45rem;
    margin-top: 0.45rem;
    padding: 0.55rem;
}

.ai-impact-capability-name {
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ai-impact-capability-meter {
    align-items: center;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.ai-impact-bar-row span {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-impact-bar-row strong,
.ai-impact-capability-meter strong {
    color: var(--color-text-primary);
    font-size: 0.76rem;
    white-space: nowrap;
}

.ai-impact-bar,
.ai-impact-mini-bar {
    background: #edf4f9;
    border-radius: 999px;
    height: 0.45rem;
    overflow: hidden;
}

.ai-impact-bar i,
.ai-impact-mini-bar i {
    background: linear-gradient(90deg, var(--color-primary-hover) 0%, var(--color-secondary-accent) 100%);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.ai-impact-change-list,
.ai-impact-skill-list {
    color: var(--color-text-secondary);
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding-left: 1rem;
}

.ai-impact-change-stack {
    display: grid;
    gap: 0.55rem;
}

.ai-impact-shift-grid,
.ai-impact-skill-buckets {
    display: grid;
    gap: 0.55rem;
}

.ai-impact-shift-card,
.ai-impact-skill-bucket {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    display: grid;
    gap: 0.45rem;
    padding: 0.6rem;
}

.ai-impact-shift-head,
.ai-impact-skill-bucket > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.ai-impact-shift-head span,
.ai-impact-skill-bucket span {
    color: var(--color-primary-hover);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ai-impact-shift-head strong,
.ai-impact-skill-bucket strong {
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.25;
}

.ai-impact-shift-bar {
    background: #edf4f9;
    border-radius: 999px;
    height: 0.45rem;
    overflow: hidden;
}

.ai-impact-shift-bar i {
    background: linear-gradient(90deg, var(--color-secondary-accent) 0%, var(--color-primary-hover) 100%);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.ai-impact-shift-card h5 {
    color: var(--color-text-primary);
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
}

.ai-impact-shift-card p,
.ai-impact-skill-bucket p {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 0;
}

.ai-impact-example-list {
    display: grid;
    gap: 0.25rem;
}

.ai-impact-example-list small {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.ai-impact-skill-bucket ul {
    color: var(--color-text-secondary);
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding-left: 1rem;
}

.ai-impact-skill-bucket li {
    font-size: 0.76rem;
    line-height: 1.35;
}

.ai-impact-change-list li strong {
    color: var(--color-text-primary);
    display: block;
    font-size: 0.82rem;
}

.ai-impact-change-list li span,
.ai-impact-skill-list li {
    font-size: 0.8rem;
    line-height: 1.4;
}

.ai-impact-transformational .ai-impact-score-ring {
    background:
        radial-gradient(circle at center, #ffffff 0 57%, transparent 58%),
        conic-gradient(#7048e8 0 var(--impact-score), var(--color-border) var(--impact-score) 360deg);
}

.ai-impact-high .ai-impact-score-ring {
    background:
        radial-gradient(circle at center, #ffffff 0 57%, transparent 58%),
        conic-gradient(#c2410c 0 var(--impact-score), var(--color-border) var(--impact-score) 360deg);
}

.capability-context-role-grid,
.job-role-usecase-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.capability-context-role-card,
.job-role-usecase-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    color: var(--color-text-primary);
    display: grid;
    gap: 0.35rem;
    padding: 0.7rem;
    text-decoration: none;
}

.capability-context-role-card {
    min-height: 7.5rem;
    position: relative;
}

.capability-context-role-card > span:not(.relationship-badge) {
    padding-right: 5.8rem;
}

.capability-context-role-card strong {
    font-size: 0.9rem;
    line-height: 1.25;
}

.capability-context-role-card span {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.capability-context-role-card p {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
    margin: 0;
}

.capability-context-detail-button {
    justify-self: start;
    margin-top: auto;
}

.job-role-usecase-detail-button {
    justify-self: start;
    margin-top: auto;
}

.job-role-usecase-card:hover {
    background: var(--color-surface-subtle);
    border-color: #b9d4e9;
    color: var(--color-primary-hover);
}

.job-role-usecase-card span {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.job-role-usecase-card strong {
    font-size: 0.9rem;
    line-height: 1.25;
}

.job-role-usecase-card small {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    line-height: 1.35;
}

.capability-boom-detail-section {
    border-top: 1px solid var(--color-border);
    padding-top: 0.85rem;
}

.capability-boom-detail-section h3 {
    color: var(--color-text-primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 0 0.55rem;
    text-transform: uppercase;
}

.capability-boom-detail-section p,
.capability-required-item p,
.capability-tree-level-detail p {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

.capability-detail-list {
    color: var(--color-text-secondary);
    display: grid;
    font-size: 0.9rem;
    gap: 0.35rem;
    line-height: 1.45;
    margin: 0;
    padding-left: 1.1rem;
}

.capability-required-list,
.capability-tree-levels {
    display: grid;
    gap: 0.65rem;
}

.capability-required-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.capability-required-item {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    display: grid;
    gap: 0.4rem;
    min-height: 7.25rem;
    padding: 0.65rem;
    position: relative;
}

.capability-required-head {
    display: block;
    padding-right: 5.8rem;
}

.capability-required-parent {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding-right: 5.8rem;
    text-transform: uppercase;
}

.job-card:has(.relationship-badge),
.relationship-card {
    position: relative;
}

.job-card:has(.relationship-badge) .job-card-title,
.relationship-card > .d-flex:first-child {
    padding-right: 5.8rem;
}

.relationship-badge {
    align-items: center;
    background: var(--color-surface-blue);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-primary-hover);
    display: inline-flex;
    font-size: 0.66rem;
    font-weight: 900;
    justify-content: center;
    letter-spacing: 0.04em;
    line-height: 1;
    min-width: 4.75rem;
    padding: 0.35rem 0.55rem;
    position: absolute;
    right: 0.65rem;
    text-transform: uppercase;
    top: 0.65rem;
    white-space: nowrap;
}

.relationship-badge-own {
    background: #e7f6ed;
    border-color: #b9dfc7;
    color: #17643a;
}

.relationship-badge-lead {
    background: #fff4d8;
    border-color: #f0d188;
    color: #8a5a00;
}

.relationship-badge-contribute {
    background: var(--color-surface-blue);
    border-color: #c7ddec;
    color: var(--color-primary-hover);
}

.capability-tree-level-table-block {
    display: grid;
    gap: 0.45rem;
}

.capability-tree-level-tabs {
    display: grid;
    gap: 0.65rem;
}

.capability-tree-level-tab-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.capability-tree-level-tab-list {
    align-items: center;
    background: var(--color-surface-blue);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    display: grid;
    gap: 0.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0.25rem;
}

.capability-tree-level-tab {
    border-radius: 0.35rem;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1.2;
    padding: 0.55rem 0.65rem;
    text-align: center;
}

.capability-tree-level-tab:hover {
    color: var(--color-text-primary);
}

.capability-tree-level-tab-input:checked + .capability-tree-level-tab-input + .capability-tree-level-tab-list .capability-tree-level-tab:first-child,
.capability-tree-level-tab-input:first-child:checked ~ .capability-tree-level-tab-list .capability-tree-level-tab:first-child {
    background: #ffffff;
    box-shadow: 0 0.35rem 0.9rem rgba(33, 66, 96, 0.08);
    color: var(--color-primary-hover);
}

.capability-tree-level-tab-input:nth-of-type(2):checked ~ .capability-tree-level-tab-list .capability-tree-level-tab:nth-child(2) {
    background: #ffffff;
    box-shadow: 0 0.35rem 0.9rem rgba(33, 66, 96, 0.08);
    color: var(--color-primary-hover);
}

.capability-tree-level-tab-panel {
    display: none;
}

.capability-tree-level-tab-input:first-child:checked ~ .capability-tree-level-tab-panel-ic,
.capability-tree-level-tab-input:nth-of-type(2):checked ~ .capability-tree-level-tab-panel-management {
    display: block;
}

.capability-tree-level-table {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-collapse: separate;
    border-radius: 0.5rem;
    border-spacing: 0;
    font-size: 0.86rem;
    overflow: hidden;
    table-layout: fixed;
    width: 100%;
}

.capability-tree-level-table th {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.65rem;
    text-transform: uppercase;
}

.capability-tree-level-table th:nth-child(1) {
    width: 5rem;
}

.capability-tree-level-table th:nth-child(2) {
    width: 32%;
}

.capability-tree-level-table td {
    border-top: 1px solid var(--color-border);
    padding: 0;
}

.capability-tree-level-accordion summary {
    align-items: start;
    cursor: pointer;
    display: grid;
    gap: 0.5rem;
    grid-template-columns: 4.35rem minmax(7rem, 0.42fr) minmax(0, 1fr);
    list-style: none;
    padding: 0.58rem 0.65rem;
}

.capability-tree-level-accordion summary::-webkit-details-marker {
    display: none;
}

.capability-tree-level-accordion summary::after {
    color: var(--color-text-muted);
    content: "+";
    font-weight: 800;
    position: absolute;
    right: 0.7rem;
}

.capability-tree-level-accordion[open] summary::after {
    content: "-";
}

.capability-tree-level-accordion {
    position: relative;
}

.capability-tree-level-grade {
    color: var(--color-primary-hover);
    font-weight: 800;
    white-space: nowrap;
}

.capability-tree-level-role {
    color: var(--color-text-primary);
    font-weight: 750;
    min-width: 0;
}

.capability-tree-level-scope {
    color: var(--color-text-muted);
    line-height: 1.4;
    min-width: 0;
    padding-right: 1.1rem;
}

.capability-tree-level-detail {
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: 0.45rem;
    padding: 0.65rem;
}

.capability-tree-level-detail strong {
    color: var(--color-text-primary);
    font-size: 0.78rem;
}

.capability-level3-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capability-level3-card {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
}

.capability-level3-card-modal {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.capability-level3-meta {
    color: var(--color-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    margin-top: auto;
}

.capability-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.95rem;
}

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

.capability-job-modal-content .modal-header,
.capability-job-modal-content .modal-footer {
    border-color: var(--color-border);
}

.capability-job-modal-summary {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capability-job-modal-tabs {
    border-bottom: 1px solid var(--color-border);
    gap: 0.5rem;
}

.capability-job-modal-tabs .nav-link {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.9rem 0.9rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.8rem 1rem;
}

.capability-job-modal-tabs .nav-link.active {
    background: var(--color-surface-subtle);
    border-color: var(--color-border) var(--color-border) var(--color-surface-subtle);
    color: var(--color-text-primary);
}

.capability-job-modal-tab-content {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-top: 0;
    border-radius: 0 1rem 1rem 1rem;
    padding: 1rem;
}

.capability-role-table-wrap {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 1.15rem;
    overflow: hidden;
}

.capability-role-table thead th {
    background: #eff5fa;
    border-bottom: 1px solid var(--color-border);
    color: #4d6276;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1rem 0.95rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.capability-role-table td {
    border-color: var(--color-border);
    padding: 1rem 0.95rem;
    vertical-align: top;
}

.capability-role-table-heading {
    color: var(--color-text-primary);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.35;
}

.capability-role-copy {
    color: #5e7184;
    font-size: 0.9rem;
    line-height: 1.5;
}

.capability-badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.capability-inline-badge {
    background: #e8f1f8;
    border: 1px solid #d2e0ec;
    border-radius: 999px;
    color: var(--color-text-primary);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.25;
    padding: 0.35rem 0.65rem;
}

.capability-inline-badge-soft {
    background: var(--color-surface-subtle);
}

.capability-mini-accordion .accordion-item {
    border: 0;
}

.capability-mini-toggle {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.85rem !important;
    color: var(--color-text-primary);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.75rem 0.9rem;
}

.capability-mini-toggle:not(.collapsed) {
    background: var(--color-surface-blue);
    box-shadow: none;
}

.capability-mini-toggle:focus {
    box-shadow: none;
}

.capability-level-profile + .capability-level-profile {
    border-top: 1px solid var(--color-border);
    margin-top: 1rem;
    padding-top: 1rem;
}

.capability-level-profile-title {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.capability-level-profile-block + .capability-level-profile-block {
    margin-top: 0.8rem;
}

.capability-list {
    color: #5e7184;
    margin: 0.45rem 0 0;
    padding-left: 1.15rem;
}

.capability-current-path {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem 1.1rem;
}

.capability-path-label {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
}

.capability-path-value {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

@media (max-width: 991.98px) {
    .capability-stepper {
        grid-template-columns: 1fr;
    }

    .capability-l1-summary,
    .capability-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .capability-domain-header {
        flex-direction: column;
    }

    .capability-section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .capability-activity-grid {
        grid-template-columns: 1fr;
    }

    .capability-level3-grid {
        grid-template-columns: 1fr;
    }

    .capability-linked-usecases-grid {
        grid-template-columns: 1fr;
    }

    .capability-boom-layout {
        grid-template-columns: 1fr;
    }

    .capability-boom-tree-panel,
    .capability-boom-detail-panel,
    .capability-boom-sidebar {
        max-height: none;
        overflow: visible;
        position: static;
    }

    .capability-boom-tree {
        max-height: none;
    }

    .capability-job-modal-summary {
        grid-template-columns: 1fr;
    }

    .capability-domain-toggle {
        gap: 0.75rem;
        padding: 1rem;
    }

    .capability-domain-body {
        padding: 0 1rem 1rem;
    }
}

@media (max-width: 767.98px) {
    .capability-l1-summary,
    .capability-summary-grid {
        grid-template-columns: 1fr;
    }

    .capability-boom-node summary,
    .capability-boom-leaf {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .capability-boom-node-l2,
    .capability-boom-leaf {
        margin-left: 0;
    }

    .capability-boom-count {
        display: none;
    }

    .capability-required-list {
        grid-template-columns: 1fr;
    }

    .capability-context-filterbar {
        grid-template-columns: 1fr;
    }

    .ai-impact-top-grid,
    .ai-impact-hero,
    .ai-impact-grid {
        grid-template-columns: 1fr;
    }

    .ai-impact-bar-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .job-role-detail-tab-list,
    .capability-context-role-grid,
    .job-role-usecase-grid {
        grid-template-columns: 1fr;
    }
}

.capability-high {
    background: #dff4e8;
    border-color: #94d3ad;
}

.capability-mid {
    background: var(--color-warning-soft);
    border-color: #f1c978;
}

.capability-low {
    background: var(--color-error-soft);
    border-color: #e7a1a1;
}

.usecase-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--color-primary-hover) 0%, #184e77 55%, var(--color-bright-blue) 100%);
    border-radius: 1.6rem;
    box-shadow: 0 22px 48px rgba(15, 76, 129, 0.18);
}

.usecase-hero::before {
    content: "";
    position: absolute;
    inset: auto auto -34% -10%;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
}

.usecase-hero::after {
    content: "";
    position: absolute;
    inset: -20% -8% auto auto;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0) 72%);
    pointer-events: none;
}

.usecase-overview-card {
    border: 1px solid rgba(15, 76, 129, 0.08);
    border-radius: 1.35rem !important;
    box-shadow: 0 18px 36px rgba(15, 76, 129, 0.12);
}

.use-case-link {
    color: inherit;
    display: block;
    height: 100%;
    text-decoration: none;
}

.use-case-link:hover .usecase-tile {
    box-shadow: 0 0.65rem 1.4rem rgba(15, 76, 129, 0.12);
    transform: translateY(-2px);
}

.usecase-tile {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.filter-panel {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.1rem;
    box-shadow: 0 10px 20px rgba(15, 76, 129, 0.05);
    height: 100%;
    padding: 1rem;
}

.detail-section + .detail-section {
    margin-top: 1.5rem;
}


.metric-card-shell,
.mini-note {
    border: 1px solid #e9ecef;
    border-radius: 0.9rem;
    background: #fff;
}

.metric-card-shell {
    overflow: hidden;
}

.mini-note {
    padding: 1rem;
    height: 100%;
}


.usecase-tile {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-primary-hover);
    border-radius: 1.2rem;
    box-shadow: 0 14px 28px rgba(15, 76, 129, 0.07);
    padding: 1.25rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.usecase-title {
    color: var(--color-text-primary);
    font-size: 1.1rem;
    line-height: 1.35;
    margin-bottom: 0;
}

.usecase-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(15, 76, 129, 0.35) 0%, rgba(15, 76, 129, 0.08) 100%);
    margin: 0.9rem 0 1rem;
}

.usecase-category-badge {
    display: inline-flex;
    align-items: center;
    border: 1px solid #c8dbe9;
    border-radius: 0.7rem;
    background: var(--color-surface-blue);
    color: #214560;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.34rem 0.62rem;
    text-transform: uppercase;
}

.use-case-link:hover .usecase-tile {
    border-color: #b8cfe0;
    box-shadow: 0 1rem 2rem rgba(15, 76, 129, 0.13);
    transform: translateY(-3px);
}

.usecase-detail-tile {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-left: 5px solid var(--color-primary-hover);
    border-radius: 1.1rem;
    padding: 1.25rem;
}

.detail-mini-stat {
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
}

.radar-wrap {
    position: relative;
    height: 320px;
    margin-top: 0.5rem;
}

.usecase-divider-soft {
    margin-top: 1.25rem;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.usecase-notes-title {
    color: var(--color-text-primary);
    font-size: 0.98rem;
}

.review-note-item + .review-note-item {
    border-top: 1px solid var(--color-border);
    margin-top: 0.85rem;
    padding-top: 0.85rem;
}

.review-score-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.review-score-item {
    align-items: center;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    display: flex;
    justify-content: space-between;
    padding: 0.7rem 0.85rem;
}

.review-score-name {
    color: #29435c;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    padding-right: 1rem;
}

.review-score-badge {
    align-items: center;
    background: var(--color-primary-hover);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 700;
    height: 2rem;
    justify-content: center;
    min-width: 2rem;
    padding: 0 0.7rem;
}

.review-score-accordion + .review-score-accordion {
    margin-top: 0.6rem;
}

.review-score-accordion-item {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    overflow: hidden;
}

.review-score-button {
    align-items: center;
    background: var(--color-surface-subtle);
    box-shadow: none;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
}

.review-score-button:not(.collapsed) {
    background: var(--color-surface-blue);
    box-shadow: none;
}

.review-score-button:focus {
    border-color: transparent;
    box-shadow: none;
}

.review-score-button::after {
    margin-left: 0.75rem;
}

.review-score-button .review-score-name {
    flex: 1 1 auto;
    padding-right: 0;
}

.review-score-button .review-score-badge {
    flex: 0 0 auto;
}

.review-score-rationale {
    background: #ffffff;
    border-top: 1px solid var(--color-border);
    color: #526375;
    font-size: 0.92rem;
    line-height: 1.5;
    padding: 0.95rem 1rem 1rem;
}


.review-score-button {
    min-height: 4rem;
}

.review-score-button .review-score-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.value-mechanism-badge {
    align-items: center;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    color: #254a67;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 0.42rem 0.72rem;
}

.metric-card-grid {
    display: grid;
    gap: 1rem;
}

.metric-benchmark-card {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
}

.metric-benchmark-title {
    color: var(--color-text-primary);
    font-size: 1rem;
    margin-top: 0.15rem;
}

.metric-benchmark-description {
    margin: 0.85rem 0 1rem;
}

.metric-scenario-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-scenario-item {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    padding: 0.85rem 0.8rem;
    text-align: center;
}

.metric-scenario-label {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.metric-scenario-value {
    color: var(--color-primary-hover);
    display: block;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 767.98px) {
    .metric-scenario-grid {
        grid-template-columns: 1fr;
    }

    .usecase-score-grid,
    .benchmark-grid,
    .value-analysis-grid-wide {
        grid-template-columns: 1fr;
    }
}

.usecase-tile,
.usecase-detail-tile,
.portfolio-summary-card,
.portfolio-linked-item,
.portfolio-modal-selected {
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
}

.portfolio-summary-card,
.portfolio-linked-item,
.portfolio-modal-selected {
    padding: 1rem;
}

.usecase-overview-card .btn,
.portfolio-linked-item .btn {
    border-radius: 999px;
}

.usecase-card-actions {
    margin-top: auto;
}

.usecase-score-grid,
.benchmark-grid,
.value-analysis-grid {
    display: grid;
    gap: 0.85rem;
}

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

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

.value-analysis-grid-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.usecase-score-pill {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.95rem;
    padding: 0.85rem 0.9rem;
}

.usecase-score-pill-high {
    background: #e5f5eb;
    border-color: #b9dfc5;
}

.usecase-score-pill-mid {
    background: #fff5e3;
    border-color: #f0d79a;
}

.usecase-score-pill-low {
    background: #fdecec;
    border-color: #e9b4b4;
}

.usecase-score-label {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.usecase-score-value {
    color: var(--color-text-primary);
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 0.2rem;
}

.benchmark-content-stack {
    display: grid;
    gap: 1.1rem;
}

.benchmark-range-flow {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.benchmark-range-highlight {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    color: var(--color-text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
    padding: 0.75rem 0.85rem;
}

.value-relevance-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    margin-bottom: 0;
    padding: 0.38rem 0.62rem;
    text-transform: uppercase;
    white-space: nowrap;
}

.value-relevance-badge-high {
    background: #dff4e8;
    color: #1f6b41;
}

.value-relevance-badge-mid {
    background: var(--color-warning-soft);
    color: #8a5a00;
}

.value-relevance-badge-low {
    background: var(--color-error-soft);
    color: #9d3c3c;
}

.value-card-facts {
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: 0.55rem;
    padding-top: 0.85rem;
}

.value-card-facts dt {
    color: var(--color-primary-hover);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin: 0;
    text-transform: uppercase;
}

.value-card-facts dd {
    color: #4c6172;
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

.usecase-detail-page .capability-description,
.usecase-detail-page .review-score-rationale,
.usecase-detail-page li {
    font-size: 1.02rem;
    line-height: 1.75;
}

.usecase-readable-text br + br {
    content: "";
    display: block;
    margin-top: 0.9rem;
}

.usecase-spacious-text {
    line-height: 1.95;
    padding-top: 0.35rem;
}

.usecase-spacious-text br + br {
    margin-top: 1.2rem;
}

.usecase-context-copy {
    display: grid;
    gap: 0.65rem;
}

.usecase-context-list {
    margin: 0;
}

.usecase-detail-page .section-title {
    color: var(--color-primary-hover);
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 0.95rem;
    text-transform: uppercase;
}

.usecase-detail-page .usecase-detail-tile > .capability-name,
.usecase-detail-page .metric-benchmark-card > .capability-name {
    color: #16324b;
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.usecase-detail-page .usecase-detail-tile > .capability-id,
.usecase-detail-page .metric-benchmark-card > .capability-id {
    color: var(--color-text-muted);
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 0.45rem;
    text-transform: uppercase;
}

.usecase-detail-page .metric-benchmark-card > .capability-name {
    font-size: 1.05rem;
}

.usecase-detail-page .usecase-notes-title {
    color: #16324b;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.portfolio-modal-selected {
    border-left: 5px solid var(--color-primary-hover);
}

.portfolio-helper-card {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.1rem;
    box-shadow: 0 10px 20px rgba(15, 76, 129, 0.05);
    padding: 1rem;
}

.favorites-empty-state {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.2rem;
    box-shadow: 0 14px 28px rgba(15, 76, 129, 0.07);
    padding: 1.35rem;
}

.favorites-card {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.2rem;
    box-shadow: 0 14px 28px rgba(15, 76, 129, 0.07);
    padding: 1.1rem;
}

.favorites-card-header {
    align-items: stretch !important;
}

.favorites-card-heading {
    max-width: min(34rem, 100%);
}

.favorites-card-title {
    font-weight: 700;
    margin: 0;
    text-wrap: balance;
}

.favorites-card .favorites-card-title {
    margin-bottom: 2.4rem;
}

.favorites-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.favorites-note {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    color: #4a6076;
    line-height: 1.55;
    padding: 0.85rem 0.95rem;
}

.favorites-tabs {
    border-bottom: 1px solid var(--color-border);
    gap: 0.35rem;
}

.favorites-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
}

.favorites-tabs .nav-link.active {
    background: var(--color-surface-blue);
    color: var(--color-primary-hover);
}

.favorites-tab-content {
    padding-top: 0.95rem;
}

.favorites-tab-panel {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
    padding: 0.95rem;
}

.portfolio-summary-card {
    height: 100%;
}

.portfolio-linked-item {
    height: 100%;
}

.portfolio-linked-item-expanded {
    padding: 1.25rem;
}

.portfolio-usecase-accordion {
    border-top: 1px solid var(--color-border);
    margin-top: 1rem;
}

.portfolio-linked-item-accordion {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: 0;
}

.portfolio-linked-toggle {
    align-items: flex-start;
    background: transparent;
    box-shadow: none;
    gap: 1rem;
    padding: 1.15rem 0;
}

.portfolio-linked-toggle:not(.collapsed) {
    background: transparent;
    box-shadow: none;
}

.portfolio-linked-toggle:focus {
    box-shadow: none;
}

.portfolio-linked-toggle::after {
    background-size: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    width: 1rem;
}

.portfolio-linked-toggle-main {
    display: block;
    text-align: left;
    width: 100%;
}

.portfolio-linked-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.portfolio-linked-head-main {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.portfolio-linked-title {
    color: var(--color-text-primary);
    display: block;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.portfolio-linked-context {
    color: var(--color-text-muted);
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 0.35rem;
    line-height: 1.35;
}

.portfolio-linked-status {
    display: flex;
    flex: 0 0 auto;
    gap: 0.9rem;
}

.portfolio-linked-status-item {
    display: grid;
    gap: 0.1rem;
    min-width: 4.5rem;
    text-align: right;
}

.portfolio-linked-status-label {
    color: var(--color-text-muted);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-linked-status-value {
    color: var(--color-text-primary);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
}

.portfolio-linked-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.portfolio-linked-body {
    padding: 0 0 1.25rem;
}

.portfolio-linked-tabbar {
    align-items: flex-end;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-top: 1rem;
}

.portfolio-linked-actionbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
    margin-bottom: 1rem;
    padding-bottom: 0.35rem;
}

.portfolio-linked-actionbar form {
    margin: 0;
}

.portfolio-linked-actionbar .portfolio-usecase-detail-link {
    margin-top: 0;
}

.portfolio-card-header {
    align-items: flex-start;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.portfolio-card-actionbar {
    justify-content: flex-end;
    padding-bottom: 0;
}

.portfolio-card-actionbar .btn {
    min-width: 9.5rem;
}

.portfolio-card-actionbar form,
.portfolio-card-actionbar form .btn {
    margin: 0;
}

.portfolio-card-tabbar {
    align-items: center;
    background: var(--color-surface-blue) !important;
    border: 1px solid rgba(221, 231, 247, 0.86) !important;
    border-radius: var(--radius-md) !important;
    border-top: 0;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0.25rem !important;
}

.portfolio-card-tabs {
    flex: 1 1 auto;
    min-width: 0;
}

.portfolio-card-tabs.nav-tabs {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.collapse {
    visibility: visible !important;
}

.portfolio-card-status {
    align-self: center;
    color: var(--color-text-muted);
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 650;
    padding: 0 0.7rem;
    text-align: right;
    white-space: nowrap;
}

.portfolio-usecase-tabs {
    flex: 1 1 auto;
    gap: 0.35rem;
}

.portfolio-usecase-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
}

.portfolio-usecase-tabs .nav-link.active {
    background: var(--color-surface-blue);
    color: var(--color-primary-hover);
}

.portfolio-usecase-tab-content {
    padding-top: 0.95rem;
}

.portfolio-usecase-tab-panel {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    padding: 0.95rem;
}

.portfolio-usecase-description {
    color: var(--color-text-secondary);
    font-size: 0.92rem;
    line-height: 1.65;
}

.portfolio-usecase-detail-link {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    color: var(--color-primary-hover);
    display: inline-flex;
    font-size: 0.82rem;
    font-weight: 800;
    margin-top: 0.95rem;
    min-height: 2.2rem;
    padding: 0.45rem 0.8rem;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.portfolio-usecase-detail-link:hover,
.portfolio-usecase-detail-link:focus {
    background: var(--color-surface-blue);
    border-color: #9ec3e4;
    box-shadow: 0 0 0 1px rgba(69, 129, 188, 0.12);
    color: var(--color-primary-hover);
}

.portfolio-top-tabs {
    border-bottom: 1px solid var(--color-border);
    gap: 0.45rem;
}

.portfolio-top-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    font-weight: 800;
    padding: 0.55rem 1rem;
}

.portfolio-top-tabs .nav-link.active {
    background: var(--color-primary-hover);
    color: #ffffff;
}

.portfolio-top-tab-content {
    padding-top: 0.15rem;
}

.portfolio-top-tab-panel {
    display: grid;
    gap: 0;
}

.portfolio-subnav-wrap {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 0.85rem 0.9rem;
}

.portfolio-subnav-label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 0.65rem;
    text-transform: uppercase;
}

.portfolio-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.portfolio-subnav-link {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    color: var(--color-text-primary);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 800;
    min-height: 2.3rem;
    padding: 0.5rem 0.9rem;
    text-decoration: none;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.portfolio-subnav-link:hover,
.portfolio-subnav-link:focus {
    background: var(--color-surface-blue);
    border-color: #9ec3e4;
    box-shadow: 0 0 0 1px rgba(69, 129, 188, 0.12);
    color: var(--color-primary-hover);
}

.portfolio-subnav-link.active {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: 0 0.35rem 0.85rem rgba(15, 76, 129, 0.18);
    color: #ffffff;
}

.portfolio-workspace-v2-analysis-menu {
    margin-top: 0.75rem;
}

.portfolio-workspace-v2-analysis-link {
    color: var(--color-text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.15rem 0;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3rem;
}

.portfolio-workspace-v2-analysis-link:hover,
.portfolio-workspace-v2-analysis-link:focus {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-decoration-color: currentColor;
}

.portfolio-workspace-v2-analysis-link.active {
    color: var(--color-primary-hover);
    font-weight: 800;
}

.portfolio-workspace-v2-analysis-divider {
    align-self: center;
    color: #9eb4c7;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1;
}

.portfolio-card-menu-groups {
    display: grid;
    gap: 0.65rem;
    justify-items: end;
    max-width: 52rem;
}

.portfolio-card-menu-label {
    align-items: center;
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    min-height: 2rem;
    text-transform: uppercase;
}

.portfolio-card-actionbar-v2 {
    background: #f0fbfc;
    border: 1px solid rgba(18, 179, 199, 0.28);
    border-radius: 0.85rem;
    padding: 0.55rem;
}

.portfolio-workspace-v2-header {
    border-left: 0.3rem solid var(--color-secondary-accent);
    padding-left: 1.25rem;
}

.portfolio-workspace-v2-badge {
    background: var(--color-secondary-accent);
    border-radius: 999px;
    color: #ffffff;
    display: inline-block;
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    margin-left: 0.35rem;
    padding: 0.18rem 0.45rem;
    vertical-align: middle;
}

.portfolio-workspace-v2-nav {
    background: linear-gradient(135deg, var(--color-surface-subtle), #eefbfc);
    border-color: rgba(18, 179, 199, 0.25);
}

.portfolio-workspace-v2-card {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    color: var(--color-text-primary);
    display: flex;
    gap: 1rem;
    min-height: 8.5rem;
    padding: 1.35rem;
    text-decoration: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.portfolio-workspace-v2-card:hover {
    border-color: var(--color-secondary-accent);
    box-shadow: 0 1rem 2.5rem rgba(7, 26, 61, 0.09);
    color: var(--color-text-primary);
    transform: translateY(-2px);
}

.portfolio-workspace-v2-card-number {
    color: var(--color-secondary-accent);
    font-size: 1.8rem;
    font-weight: 850;
}

.portfolio-workspace-v2-card-body { display: grid; flex: 1; gap: 0.35rem; }
.portfolio-workspace-v2-card-body strong { font-size: 1.05rem; }
.portfolio-workspace-v2-card-body small { color: var(--color-text-muted); line-height: 1.5; }

.portfolio-workspace-v2-definition { display: grid; gap: 0; margin: 1.25rem 0; }
.portfolio-workspace-v2-definition > div { border-bottom: 1px solid var(--color-border); display: grid; gap: 1rem; grid-template-columns: 8rem 1fr; padding: 0.85rem 0; }
.portfolio-workspace-v2-definition dt { color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; }
.portfolio-workspace-v2-definition dd { margin: 0; }

.portfolio-workspace-v2-empty {
    align-items: center;
    background: var(--color-surface-subtle);
    border: 1px dashed #c9dbe9;
    border-radius: 0.85rem;
    color: var(--color-text-muted);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    justify-content: center;
    min-height: 12rem;
    padding: 1.5rem;
    text-align: center;
}

.portfolio-workspace-v2-empty.compact { min-height: 7rem; }

.portfolio-health-card-candidate {
    background: #f0fbfc;
    border-color: rgba(18, 179, 199, 0.42);
    box-shadow: inset 0 0.2rem 0 var(--color-secondary-accent);
}

.portfolio-v2-usecase-title {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.45;
}

.portfolio-admin-fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.portfolio-v2-benefits-layout {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: minmax(14rem, 0.34fr) minmax(0, 0.66fr);
}

.portfolio-v2-benefits-list {
    align-content: start;
    border-right: 1px solid var(--color-border);
    display: grid;
    gap: 0.45rem;
    padding-right: 1.25rem;
}

.portfolio-v2-benefits-list-item {
    background: transparent;
    border: 0;
    border-radius: 0.7rem;
    color: var(--color-text-secondary);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.7rem 0.8rem;
    text-align: left;
}

.portfolio-v2-benefits-list-item:hover,
.portfolio-v2-benefits-list-item:focus,
.portfolio-v2-benefits-list-item.active {
    background: var(--color-surface-blue);
    color: var(--color-primary-hover);
}

.portfolio-v2-benefits-list-item.active {
    font-weight: 800;
}

.portfolio-v2-business-case-static-head {
    display: flex;
    width: 100%;
}

.portfolio-v2-business-case-static-head::after {
    display: none;
}

.portfolio-v2-benefits-selected-title {
    color: var(--color-text-primary);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.75rem;
}

.portfolio-v2-business-case-estimates-first {
    margin: 1rem 1rem 0;
}

.portfolio-v2-usecase-tabs {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 1rem;
}

.portfolio-v2-usecase-tabs button {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.45rem 0 0.6rem;
}

.portfolio-v2-usecase-tabs button:hover,
.portfolio-v2-usecase-tabs button.active {
    color: var(--color-text-primary);
}

.portfolio-v2-usecase-tabs button.active {
    font-weight: 800;
}

.portfolio-v2-usecase-details-card,
.portfolio-v2-data-tab-body {
    padding: 1rem;
}

[data-usecase-tab-panel="data"] > .portfolio-data-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
}

.portfolio-v2-usecase-details-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.portfolio-v2-usecase-details-grid dt,
.portfolio-v2-usecase-description span {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.portfolio-v2-usecase-details-grid dd {
    color: var(--color-text-primary);
    margin: 0.2rem 0 0;
}

.portfolio-v2-usecase-description {
    border-top: 1px solid var(--color-border);
    margin-top: 1rem;
    padding-top: 1rem;
}

.portfolio-v2-usecase-description p {
    margin: 0.35rem 0 0;
}

.portfolio-v2-benefit-summary-list {
    display: grid;
    gap: 0.75rem;
}

.portfolio-v2-benefit-summary-card {
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    padding: 1rem 1.1rem;
}

.portfolio-v2-benefit-summary-main h3 {
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.portfolio-v2-benefit-summary-main h3 a {
    color: inherit;
    text-decoration: none;
}

.portfolio-v2-benefit-summary-main h3 a:hover,
.portfolio-v2-benefit-summary-main h3 a:focus-visible {
    text-decoration: underline;
}

.portfolio-v2-data-origin-badge {
    background: #edf2f7;
    border-radius: 999px;
    color: var(--color-text-muted);
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    margin-left: 0.5rem;
    padding: 0.2rem 0.45rem;
    vertical-align: middle;
}

.portfolio-v2-data-origin-badge.is-organisation {
    background: #def7f3;
    color: #176b62;
}

.portfolio-v2-benefit-summary-main span,
.portfolio-v2-benefit-summary-value span {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.portfolio-v2-benefit-summary-value {
    display: grid;
    flex: 0 0 auto;
    gap: 0.15rem;
    text-align: right;
}

.portfolio-v2-benefit-summary-value strong {
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

.portfolio-v2-benefits-meta {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-v2-benefits-meta > div,
.portfolio-v2-benefits-formula {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    display: grid;
    gap: 0.25rem;
    padding: 0.8rem 0.9rem;
}

.portfolio-v2-benefits-meta span,
.portfolio-v2-benefits-formula span {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .portfolio-v2-benefits-layout,
    .portfolio-v2-benefits-meta {
        grid-template-columns: 1fr;
    }

    .portfolio-v2-benefits-list {
        border-bottom: 1px solid var(--color-border);
        border-right: 0;
        padding-bottom: 1rem;
        padding-right: 0;
    }

    .portfolio-v2-benefit-summary-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.65rem;
    }

    .portfolio-v2-benefit-summary-value {
        text-align: left;
    }
}

/* Interaction language: links, passive metadata, filter chips and actions. */
.object-title-link {
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.object-title-link:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.object-title-link:focus-visible,
.object-detail-link:focus-visible {
    border-radius: 0.2rem;
    outline: 3px solid rgba(18, 179, 199, 0.22);
    outline-offset: 3px;
}

.object-detail-link {
    color: var(--color-primary);
    display: inline-flex;
    font-size: 0.84rem;
    font-weight: 700;
    gap: 0.3rem;
    margin-bottom: 1rem;
    text-decoration: none;
}

.object-detail-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
    text-underline-offset: 0.16em;
}

span.pill-label,
.passive-badge {
    background: rgba(90, 106, 132, 0.08) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--color-text-secondary) !important;
    cursor: default;
}

.object-count-meta {
    color: var(--color-text-secondary);
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.3;
    white-space: nowrap;
}

button.usecase-library-chip,
a.usecase-library-chip,
.usecase-library-chip[role="button"] {
    cursor: pointer;
}

/* Informational dashboard metrics should not promise navigation. */
.dashboard-summary-card,
.dashboard-summary-card:hover {
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-sm) !important;
    cursor: default !important;
    transform: none !important;
}

/* Tabs are text navigation, visually separate from pills and action buttons. */
.nav-tabs,
.portfolio-top-tabs.nav-tabs,
.portfolio-usecase-tabs.nav-tabs,
.portfolio-profile-tabs.nav-tabs,
.portfolio-dimension-tabs.nav-tabs,
.portfolio-card-tabs.nav-tabs {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    gap: 1.15rem !important;
    padding: 0 !important;
}

.nav-tabs .nav-link,
.portfolio-top-tabs.nav-tabs .nav-link,
.portfolio-usecase-tabs.nav-tabs .nav-link,
.portfolio-profile-tabs.nav-tabs .nav-link,
.portfolio-dimension-tabs.nav-tabs .nav-link {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--color-text-muted) !important;
    min-height: 2.65rem;
    padding: 0.65rem 0.15rem !important;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus-visible {
    color: var(--color-text-primary) !important;
}

.nav-tabs .nav-link.active,
.portfolio-top-tabs.nav-tabs .nav-link.active,
.portfolio-usecase-tabs.nav-tabs .nav-link.active,
.portfolio-profile-tabs.nav-tabs .nav-link.active,
.portfolio-dimension-tabs.nav-tabs .nav-link.active {
    background: var(--color-surface-blue) !important;
    box-shadow: none !important;
    color: var(--color-primary) !important;
}

.portfolio-card-tabbar {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.job-role-detail-tab-list {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    gap: 1rem;
    padding: 0 !important;
}

.job-role-detail-tab {
    border-radius: 0 !important;
    min-height: 2.65rem;
    padding: 0.65rem 0.15rem !important;
}

.job-role-detail-tab-input:nth-of-type(1):checked ~ .job-role-detail-tab-list .job-role-detail-tab:nth-child(1),
.job-role-detail-tab-input:nth-of-type(2):checked ~ .job-role-detail-tab-list .job-role-detail-tab:nth-child(2),
.job-role-detail-tab-input:nth-of-type(3):checked ~ .job-role-detail-tab-list .job-role-detail-tab:nth-child(3),
.job-role-detail-tab-input:nth-of-type(4):checked ~ .job-role-detail-tab-list .job-role-detail-tab:nth-child(4) {
    background: var(--color-surface-blue) !important;
    box-shadow: none !important;
    color: var(--color-primary) !important;
}

.portfolio-v2-pipeline-tabs {
    border-bottom: 1px solid var(--color-border);
}

.portfolio-v2-pipeline-tabs button {
    border-radius: 0 !important;
    min-height: 2.65rem;
}

.portfolio-v2-pipeline-tabs button.active {
    background: var(--color-surface-blue);
    box-shadow: none;
    color: var(--color-primary);
}

.ai-readiness-manager-access > summary {
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
}

.usecase-library-loading {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.usecase-library-skeleton-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: 0.8rem;
    min-height: 18rem;
    padding: 1.25rem;
}

.usecase-library-skeleton-card > * {
    animation: metrominds-skeleton-pulse 1.25s ease-in-out infinite alternate;
    background: var(--color-surface-blue);
    border-radius: 0.35rem;
    display: block;
}

.usecase-library-skeleton-card i { height: 0.7rem; width: 36%; }
.usecase-library-skeleton-card b { height: 1.5rem; width: 88%; }
.usecase-library-skeleton-card span { height: 0.8rem; width: 100%; }
.usecase-library-skeleton-card span + span { width: 76%; }
.usecase-library-skeleton-card em { align-self: end; height: 2.25rem; width: 42%; }

@keyframes metrominds-skeleton-pulse {
    from { opacity: 0.48; }
    to { opacity: 1; }
}

.save-state-feedback {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    min-width: 4.5rem;
}

.save-state-feedback.is-saved { color: var(--color-success); }
.save-state-feedback.is-error { color: var(--color-error); }

.portfolio-v2-usecase-decision-actions {
    display: inline-flex;
    gap: 0.45rem;
}

@media (max-width: 900px) {
    .usecase-library-loading { grid-template-columns: 1fr; }
    .usecase-library-skeleton-card:nth-child(n + 2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .usecase-library-skeleton-card > * { animation: none; }
}

/* Comfortable touch targets without making metadata look interactive. */
.usecase-library-card-actions .btn,
.ai-readiness-card-actions .btn,
.portfolio-subnav-link,
.object-detail-link,
.card-more-actions > summary,
.ai-readiness-manager-access > summary {
    align-items: center;
    display: inline-flex;
    min-height: 40px;
}

.object-title-link {
    display: inline-block;
    padding-block: 0.12rem;
}

.card-more-actions {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding-top: 0.65rem;
}

.card-more-actions > summary {
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
}

.portfolio-access-context {
    align-items: center;
    background: var(--color-surface-blue);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem 1rem;
}

.portfolio-access-context strong {
    color: var(--color-text-primary);
    margin-right: 0.3rem;
}

.portfolio-nav-portfolio-link {
    font-weight: 700;
    max-width: 20rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-workspace-v2-nav > .portfolio-subnav {
    width: 100%;
}

.portfolio-workspace-v2-nav .portfolio-subnav-link-admin {
    margin-left: auto;
}

@media (max-width: 991.98px) {
    .portfolio-card-menu-groups { justify-items: stretch; max-width: none; width: 100%; }
}

.portfolio-top-tab-panel > [id] {
    scroll-margin-top: 1rem;
}

.portfolio-profile-tabs {
    border-bottom: 1px solid var(--color-border);
    gap: 0.35rem;
}

.portfolio-profile-tabs .nav-link {
    border: 0;
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.45rem 0.85rem;
}

.portfolio-profile-tabs .nav-link.active {
    background: var(--color-surface-blue);
    color: var(--color-primary-hover);
}

.portfolio-dimension-tabs {
    border-bottom: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.portfolio-dimension-tabs .nav-item {
    width: 100%;
}

.portfolio-dimension-tabs .nav-link {
    align-items: center;
    border: 0;
    border-radius: 999px;
    color: var(--color-text-muted);
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    text-align: left;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.4rem 0.8rem;
    width: 100%;
}

.portfolio-dimension-tabs .nav-link.active {
    background: var(--color-surface-blue);
    color: var(--color-primary-hover);
}

.portfolio-profile-tab-content {
    padding-top: 0.95rem;
}

.portfolio-profile-tab-panel {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.95rem;
    padding: 0.95rem;
}

.portfolio-correlation-grid {
    display: grid;
    gap: 1rem;
}

.portfolio-correlation-accordion {
    border-top: 1px solid var(--color-border);
    margin-top: 1rem;
}

.portfolio-correlation-card {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    padding: 0;
}

.portfolio-correlation-head {
    align-items: start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.portfolio-correlation-toggle {
    align-items: flex-start;
    background: transparent;
    box-shadow: none;
    gap: 1rem;
    padding: 1.1rem 0;
}

.portfolio-correlation-toggle:not(.collapsed) {
    background: transparent;
    box-shadow: none;
}

.portfolio-correlation-toggle:focus {
    box-shadow: none;
}

.portfolio-correlation-toggle::after {
    background-size: 1rem;
    height: 1rem;
    margin-top: 0.2rem;
    width: 1rem;
}

.portfolio-correlation-toggle-main {
    display: block;
    text-align: left;
    width: 100%;
}

.portfolio-correlation-title {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.4;
}

.portfolio-correlation-block + .portfolio-correlation-block {
    margin-top: 0.9rem;
}

.portfolio-correlation-capability {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    margin-top: 0.3rem;
}

.portfolio-correlation-risk {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.48rem 0.75rem;
    white-space: nowrap;
}

.portfolio-correlation-risk-high {
    background: #fbe4e7;
    color: #9b2434;
}

.portfolio-correlation-risk-moderate {
    background: #fff1d9;
    color: #9a5b00;
}

.portfolio-correlation-risk-low {
    background: #e5f5ec;
    color: #1f7a4c;
}

.portfolio-correlation-note {
    color: var(--color-text-muted);
    font-size: 0.84rem;
    margin-top: 0.55rem;
}

.portfolio-correlation-body {
    padding: 0 0 1.2rem;
}

.portfolio-correlation-table {
    table-layout: fixed;
    width: 100%;
}

.portfolio-correlation-col-usecase {
    width: 28%;
}

.portfolio-correlation-col-benchmark {
    width: 22%;
}

.portfolio-correlation-col-benefit {
    width: 14%;
}

.portfolio-correlation-col-weight {
    width: 10%;
}

.portfolio-correlation-col-mechanisms {
    width: 26%;
}

.portfolio-correlation-table thead th {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-correlation-table tbody td {
    color: var(--color-text-primary);
    font-size: 0.86rem;
    overflow-wrap: break-word;
    vertical-align: top;
}

.portfolio-correlation-usecase {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.4;
}

.portfolio-correlation-benefit {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.3;
}

.portfolio-correlation-benefit-base {
    color: var(--color-text-muted);
    font-size: 0.74rem;
    margin-top: 0.18rem;
}

.portfolio-correlation-weight-control {
    min-width: 74px;
}

.portfolio-correlation-weight-input {
    text-align: right;
}

.portfolio-correlation-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.portfolio-correlation-badge {
    background: #eef4f9;
    border: 1px solid #d8e4ef;
    border-radius: 999px;
    color: #31516d;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.42rem 0.68rem;
}

.portfolio-correlation-empty {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.portfolio-admin-title {
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.portfolio-note-panel {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
}

.portfolio-management-panel {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
}

.portfolio-management-form {
    display: grid;
    gap: 1rem;
}

.portfolio-management-section {
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
}

.portfolio-management-section-head {
    margin-bottom: 0.9rem;
}

.portfolio-management-section-title {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

.portfolio-management-section-copy {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.portfolio-management-grid {
    display: grid;
    gap: 0.9rem 1rem;
}

.portfolio-management-grid-decision {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portfolio-management-grid-scoring {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-management-grid-rationale {
    grid-template-columns: 1fr;
}

.portfolio-management-score-item {
    min-width: 0;
}

.portfolio-tab-inline-feedback {
    border-radius: 0.85rem;
    font-size: 0.78rem;
    padding: 0.55rem 0.75rem;
}

.portfolio-fit-panel {
    background: var(--color-surface-subtle) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: clamp(1.25rem, 2vw, 1.75rem) !important;
}

.portfolio-fit-panel .portfolio-admin-title {
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin-bottom: 0.45rem !important;
    text-transform: uppercase;
}

.portfolio-fit-panel > .text-muted {
    color: var(--color-text-secondary) !important;
    font-size: 0.94rem;
    line-height: 1.55;
    margin-bottom: 1.35rem !important;
    max-width: 760px;
}

.portfolio-fit-panel .portfolio-management-form {
    gap: 1.25rem;
}

.portfolio-fit-panel .portfolio-management-form fieldset {
    display: grid;
    gap: 1.15rem;
}

.portfolio-fit-panel .portfolio-management-section {
    align-items: start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    display: grid;
    gap: clamp(1.1rem, 2vw, 1.5rem);
    grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
    padding: clamp(1.15rem, 2vw, 1.45rem);
}

.portfolio-fit-panel .portfolio-management-section-head {
    border-right: 1px solid rgba(221, 231, 247, 0.86);
    margin-bottom: 0;
    min-height: 100%;
    padding-right: 1.1rem;
}

.portfolio-fit-panel .portfolio-management-section-title {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.portfolio-fit-panel .portfolio-management-section-copy {
    color: var(--color-text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

.portfolio-fit-panel .portfolio-management-grid {
    align-items: start;
    gap: 1rem;
}

.portfolio-fit-panel .portfolio-management-grid-rationale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-fit-panel .portfolio-management-grid > div {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.portfolio-fit-panel .form-label {
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0;
}

.portfolio-fit-panel .form-select,
.portfolio-fit-panel .form-control {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    border-radius: calc(var(--radius-md) - 2px);
    color: var(--color-text-primary);
    font-size: 0.9rem;
    min-height: 2.65rem;
}

.portfolio-fit-panel textarea.form-control {
    min-height: 7.5rem;
    resize: vertical;
}

.portfolio-fit-actions {
    border-top: 1px solid rgba(221, 231, 247, 0.86);
    display: flex;
    justify-content: flex-end;
    padding-top: 1.15rem;
}

.portfolio-fit-actions .btn {
    min-width: 11rem;
}

@media (max-width: 991.98px) {
    .portfolio-fit-panel .portfolio-management-section,
    .portfolio-fit-panel .portfolio-management-grid-rationale {
        grid-template-columns: 1fr;
    }

    .portfolio-fit-panel .portfolio-management-section-head {
        border-right: 0;
        border-bottom: 1px solid rgba(221, 231, 247, 0.86);
        padding-bottom: 0.9rem;
        padding-right: 0;
    }

    .portfolio-fit-actions,
    .portfolio-fit-actions .btn {
        width: 100%;
    }
}

.portfolio-data-inline-feedback {
    border-radius: 0.85rem;
    font-size: 0.78rem;
    margin-bottom: 0.85rem;
    padding: 0.55rem 0.75rem;
}

.portfolio-scoring-feedback {
    border-radius: 0.85rem;
    font-size: 0.78rem;
    margin-top: -0.15rem;
    padding: 0.55rem 0.75rem;
}

.portfolio-note-header {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.portfolio-note-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.portfolio-actions-item {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
}

.portfolio-actions-button {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    box-shadow: none;
    color: var(--color-text-primary);
    font-weight: 700;
}

.portfolio-actions-button:not(.collapsed) {
    background: var(--color-surface-blue);
    box-shadow: none;
}

.portfolio-actions-button:focus {
    box-shadow: none;
}

.portfolio-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portfolio-detail-status-badge {
    display: flex;
    justify-content: flex-end;
}

.portfolio-governance-summary {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.portfolio-health-strip {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portfolio-health-card,
.portfolio-overview-panel {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1.15rem;
    box-shadow: 0 14px 28px rgba(15, 76, 129, 0.06);
    padding: 1rem 1.05rem;
}

.portfolio-health-card {
    align-content: start;
    align-items: start;
    display: grid;
    grid-template-rows: minmax(2.1rem, auto) auto minmax(2.2rem, auto);
    justify-items: center;
    text-align: center;
}

.portfolio-health-label,
.portfolio-section-kicker {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.portfolio-health-value {
    color: var(--color-text-primary);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 0.35rem;
    overflow-wrap: anywhere;
}

.portfolio-health-meta {
    color: #7a8a99;
    font-size: 0.74rem;
    line-height: 1.35;
    margin-top: 0.35rem;
}

.portfolio-health-copy,
.portfolio-section-copy,
.portfolio-matrix-copy,
.portfolio-roadmap-copy,
.portfolio-roadmap-note,
.portfolio-mini-card-empty {
    color: #5f7285;
    font-size: 0.86rem;
    line-height: 1.55;
}

.portfolio-overview-grid {
    display: grid;
    gap: 1rem;
}

.portfolio-section-title {
    color: var(--color-text-primary);
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
}

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

.portfolio-roadmap-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portfolio-matrix-card,
.portfolio-roadmap-column {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1.1rem;
    box-shadow: 0 12px 24px rgba(15, 76, 129, 0.06);
    padding: 0.95rem;
}

.portfolio-matrix-card-scale_now {
    border-color: var(--color-border);
    box-shadow: none;
}

.portfolio-matrix-card-strategic_bets {
    border-color: var(--color-border);
    box-shadow: none;
}

.portfolio-matrix-card-quick_improvements {
    border-color: var(--color-border);
    box-shadow: none;
}

.portfolio-matrix-card-park_rethink {
    border-color: var(--color-border);
    box-shadow: none;
}

.portfolio-matrix-card-head,
.portfolio-roadmap-head {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.portfolio-matrix-title,
.portfolio-roadmap-title {
    color: var(--color-text-primary);
    font-size: 0.97rem;
    font-weight: 800;
    line-height: 1.3;
}

.portfolio-mini-card-list {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.9rem;
}

.portfolio-mini-usecase-card,
.portfolio-roadmap-card {
    background: #fdfefe;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    box-shadow: 0 8px 18px rgba(15, 76, 129, 0.05);
    cursor: grab;
    padding: 0.85rem 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.portfolio-mini-usecase-card:hover {
    border-color: #bfd6ea;
    box-shadow: 0 0.65rem 1.2rem rgba(15, 76, 129, 0.08);
    transform: translateY(-1px);
}

.portfolio-mini-usecase-card.is-dragging {
    cursor: grabbing;
    opacity: 0.6;
}

body.is-matrix-dragging .portfolio-matrix-dropzone .portfolio-mini-usecase-card {
    pointer-events: none;
}

body.is-matrix-dragging .portfolio-matrix-dropzone .portfolio-mini-usecase-card.is-dragging {
    pointer-events: auto;
}

.portfolio-matrix-dropzone {
    min-height: 5rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.portfolio-matrix-dropzone.is-drop-target {
    background: #f6fbff;
    border-radius: 1rem;
    box-shadow: inset 0 0 0 2px #c7ddef;
}

.portfolio-v2-analysis-matrix .portfolio-matrix-card-head {
    align-items: center;
}

.portfolio-v2-analysis-matrix .portfolio-matrix-card-head > .pill-label {
    justify-content: center;
    text-align: center;
}

.portfolio-score-chip {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.4rem 0.62rem;
    white-space: nowrap;
}

.portfolio-score-chip-good {
    background: #eaf6ee;
    border: 1px solid #cce4d3;
    color: #286642;
}

.portfolio-score-chip-warn {
    background: #fff6e4;
    border: 1px solid #efdcb3;
    color: var(--color-warning-strong);
}

.portfolio-score-chip-risk {
    background: #fbefef;
    border: 1px solid #ead9d9;
    color: #9c4949;
}

.portfolio-score-chip-neutral {
    background: var(--color-surface-blue);
    border: 1px solid #d6e5f1;
    color: var(--color-primary-hover);
}

.portfolio-roadmap-note {
    margin-top: 0.7rem;
}

.portfolio-heatmap-table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-border-color: var(--color-border);
    table-layout: fixed;
    width: 100%;
}

.portfolio-heatmap-col-usecase {
    width: 40%;
}

.portfolio-heatmap-col-score {
    width: 12%;
}

.portfolio-heatmap-table th:nth-child(2),
.portfolio-heatmap-table th:nth-child(3),
.portfolio-heatmap-table th:nth-child(4),
.portfolio-heatmap-table th:nth-child(5),
.portfolio-heatmap-table th:nth-child(6),
.portfolio-heatmap-table td:nth-child(2),
.portfolio-heatmap-table td:nth-child(3),
.portfolio-heatmap-table td:nth-child(4),
.portfolio-heatmap-table td:nth-child(5),
.portfolio-heatmap-table td:nth-child(6) {
    width: 12%;
}

.portfolio-heatmap-table th {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
}

.portfolio-heatmap-sort {
    align-items: center;
    background: transparent;
    border: 0;
    color: inherit;
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 700;
    gap: 0.35rem;
    justify-content: center;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 0;
    text-align: center;
    text-transform: none;
    width: 100%;
}

.portfolio-heatmap-sort:hover,
.portfolio-heatmap-sort.is-active {
    color: var(--color-text-primary);
}

.portfolio-heatmap-sort-indicator {
    color: #7e90a1;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
}

.portfolio-heatmap-table td,
.portfolio-heatmap-table th {
    background: transparent;
    border-bottom-color: var(--color-border);
    padding: 0.85rem 0.75rem;
    vertical-align: middle;
}

.portfolio-heatmap-table th:not(:first-child),
.portfolio-heatmap-table td:not(:first-child) {
    text-align: center;
}

.portfolio-heatmap-title {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}

.portfolio-heatmap-subtitle {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    margin-top: 0.2rem;
}

.portfolio-heatmap-score-cell {
    font-size: 0.95rem;
    font-weight: 800;
    padding: 0 !important;
    min-width: 4.25rem;
    text-align: center;
    vertical-align: middle;
}

.portfolio-heatmap-score-button {
    align-items: center;
    appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: inherit;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.4rem 0.2rem;
    width: 100%;
}

.portfolio-heatmap-score-button:hover,
.portfolio-heatmap-score-button:focus {
    box-shadow: inset 0 0 0 2px rgba(23, 50, 77, 0.12);
    outline: none;
}

.portfolio-heatmap-score-cell-good {
    background: #dff1e5 !important;
    color: #21593a;
}

.portfolio-heatmap-score-cell-mid {
    background: var(--color-warning-soft) !important;
    color: var(--color-warning-strong);
}

.portfolio-heatmap-score-cell-low {
    background: #f9dfdf !important;
    color: #934545;
}

.portfolio-heatmap-score-cell-risk-low {
    background: #e4f3e8 !important;
    color: #21593a;
}

.portfolio-heatmap-score-cell-risk-mid {
    background: var(--color-warning-soft) !important;
    color: var(--color-warning-strong);
}

.portfolio-heatmap-score-cell-risk-high {
    background: #f5d7d7 !important;
    color: #8c3f3f;
}

.portfolio-heatmap-score-cell-empty {
    background: var(--color-surface-blue) !important;
    color: var(--color-text-muted);
}

.portfolio-range-field {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    height: 100%;
    min-width: 0;
    padding: 0.8rem 0.85rem 0.75rem;
}

.portfolio-range-top {
    align-items: center;
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    margin-bottom: 0.55rem;
    min-width: 0;
}

.portfolio-range-value {
    background: var(--color-surface-blue);
    border: 1px solid #d0e3f5;
    border-radius: 999px;
    color: var(--color-primary-hover);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    flex: 0 0 auto;
    justify-content: center;
    min-width: 2rem;
    padding: 0.18rem 0.45rem;
}

.portfolio-range-top .form-label {
    font-size: 0.88rem;
    line-height: 1.25;
    min-width: 0;
}

.portfolio-range-input {
    margin-bottom: 0.35rem;
}

.portfolio-range-input::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #d96b6b 0%, var(--color-warning-border) 50%, #72b58a 100%);
    border-radius: 999px;
    height: 0.45rem;
}

.portfolio-range-input::-moz-range-track {
    background: linear-gradient(90deg, #d96b6b 0%, var(--color-warning-border) 50%, #72b58a 100%);
    border-radius: 999px;
    height: 0.45rem;
}

.portfolio-range-input[data-portfolio-range-type="risk"]::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, #72b58a 0%, var(--color-warning-border) 50%, #d96b6b 100%);
}

.portfolio-range-input[data-portfolio-range-type="risk"]::-moz-range-track {
    background: linear-gradient(90deg, #72b58a 0%, var(--color-warning-border) 50%, #d96b6b 100%);
}

.portfolio-range-input-neutral::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--color-border) 0%, #c7d5e2 100%);
}

.portfolio-range-input-neutral::-moz-range-track {
    background: linear-gradient(90deg, var(--color-border) 0%, #c7d5e2 100%);
}

.portfolio-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--color-text-primary);
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0.2rem 0.45rem rgba(23, 50, 77, 0.18);
    height: 1.1rem;
    margin-top: -0.34rem;
    width: 1.1rem;
}

.portfolio-range-input::-moz-range-thumb {
    background: var(--color-text-primary);
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0.2rem 0.45rem rgba(23, 50, 77, 0.18);
    height: 1.1rem;
    width: 1.1rem;
}

.portfolio-range-scale {
    color: var(--color-text-muted);
    display: flex;
    font-size: 0.73rem;
    font-weight: 700;
    justify-content: space-between;
    letter-spacing: 0.02em;
}

.portfolio-governance-stat {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 0.9rem 1rem;
}

.portfolio-governance-label {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-governance-value {
    color: var(--color-text-primary);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 0.35rem;
}

.portfolio-governance-value-text {
    font-size: 0.95rem;
}

.portfolio-insight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-end;
}

.portfolio-insight-btn {
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding: 0.5rem 0.82rem;
}

.portfolio-insight-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.portfolio-insight-btn-demand {
    background: var(--color-surface-blue);
    border-color: #cfe0ef;
    color: var(--color-text-primary);
}

.portfolio-insight-btn-demand:hover,
.portfolio-insight-btn-demand:focus {
    background: #deedf8;
    border-color: #bfd6ea;
    color: var(--color-text-primary);
}

.portfolio-insight-btn-capability {
    background: var(--color-success-soft);
    border-color: #cde6d8;
    color: #1f5a3d;
}

.portfolio-insight-btn-capability:hover,
.portfolio-insight-btn-capability:focus {
    background: #e0f2e8;
    border-color: #bddcc9;
    color: #1f5a3d;
}

.portfolio-insight-btn-readiness {
    background: #fff7e7;
    border-color: #f2dfae;
    color: #7b5a00;
}

.portfolio-insight-btn-readiness:hover,
.portfolio-insight-btn-readiness:focus {
    background: #ffefca;
    border-color: #ebd391;
    color: #7b5a00;
}

.portfolio-business-case-list {
    display: grid;
    gap: 0.75rem;
}

.portfolio-business-case-table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-border-color: var(--color-border);
}

.portfolio-business-case-cards {
    display: grid;
    gap: 1rem;
}

.portfolio-business-case-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
}

.portfolio-business-case-toggle {
    align-items: flex-start;
    background: transparent;
    box-shadow: none;
    gap: 1rem;
    padding: 1rem;
}

.portfolio-business-case-toggle:not(.collapsed) {
    background: transparent;
    box-shadow: none;
}

.portfolio-business-case-toggle:focus {
    box-shadow: none;
}

.portfolio-business-case-toggle::after {
    background-size: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    width: 1rem;
}

.portfolio-business-case-toggle-main {
    display: grid;
    gap: 0.3rem;
    text-align: left;
    width: 100%;
}

.portfolio-business-case-toggle-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.portfolio-business-case-toggle-benefits {
    display: flex;
    flex: 0 0 auto;
    gap: 0.75rem;
}

.portfolio-business-case-toggle-benefit {
    align-items: baseline;
    display: inline-flex;
    gap: 0.3rem;
    min-width: 0;
    text-align: right;
}

.portfolio-business-case-toggle-benefit-label {
    color: var(--color-text-muted);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-business-case-toggle-benefit-value {
    color: var(--color-text-primary);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.3;
}

.portfolio-business-case-body {
    padding: 0 1rem 1rem;
}

.portfolio-business-case-card-head {
    display: grid;
    gap: 0.3rem;
}

.portfolio-business-case-card-title {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
}

.portfolio-business-case-card-driver {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.portfolio-business-case-selector-block {
    margin-top: 0.9rem;
}

.portfolio-business-case-selection-panel {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.9rem;
    margin-top: 0.45rem;
    padding: 0.7rem 0.8rem;
}

.portfolio-business-case-radio-group {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portfolio-business-case-radio-card {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    height: 100%;
    min-width: 0;
    padding: 0;
}

.portfolio-business-case-radio-card.is-selected {
    background: transparent;
    box-shadow: none;
}

.portfolio-business-case-radio-topline {
    align-items: center;
    display: flex;
    gap: 0.5rem;
}

.portfolio-business-case-radio {
    flex: 0 0 auto;
    margin-top: 0;
}

.portfolio-business-case-radio-label {
    color: var(--color-text-primary);
    display: block;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.3;
}

.portfolio-business-case-radio-card.is-selected .portfolio-business-case-radio-label {
    color: var(--color-primary-hover);
    font-weight: 800;
}

.portfolio-business-case-inline-formula {
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    display: grid;
    gap: 0.18rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
}

.portfolio-business-case-inline-formula-label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-business-case-inline-formula-type {
    color: var(--color-primary-hover);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: normal;
    margin-left: 0.35rem;
    text-transform: none;
}

.portfolio-business-case-inline-formula-text {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.portfolio-business-case-inline-benchmark {
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: 0.45rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
}

.portfolio-business-case-inline-benchmark-row {
    align-items: start;
    display: flex;
    gap: 0.85rem;
    justify-content: space-between;
}

.portfolio-business-case-inline-benchmark-row-stack {
    display: grid;
    gap: 0.15rem;
    justify-content: initial;
}

.portfolio-business-case-inline-benchmark-label {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-business-case-inline-benchmark-value {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
}

.portfolio-business-case-inline-benchmark-actions {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: 0.6rem;
    justify-content: flex-end;
    margin-left: auto;
    min-width: 0;
    width: 100%;
}

.portfolio-business-case-data-link {
    align-items: center;
    background: var(--color-surface-blue);
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 999px;
    color: var(--color-primary);
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 750;
    justify-content: center;
    line-height: 1;
    min-height: 2rem;
    padding: 0.42rem 0.72rem;
    white-space: nowrap;
}

.portfolio-business-case-data-link:hover,
.portfolio-business-case-data-link:focus {
    background: #FFFFFF;
    border-color: rgba(30, 91, 255, 0.28);
    color: var(--color-primary-hover);
}

.portfolio-business-case-data-link:focus-visible {
    outline: 2px solid rgba(30, 91, 255, 0.28);
    outline-offset: 2px;
}

.portfolio-business-case-assumption-panel {
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: 0.65rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
}

.portfolio-business-case-expected-form {
    align-items: stretch;
    display: grid;
    gap: 0.55rem;
}

.portfolio-business-case-expected-form fieldset {
    align-items: stretch;
    border: 0;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr);
    margin: 0;
    min-width: 0;
    padding: 0;
}

.portfolio-business-case-expected-field {
    align-content: start;
    background: #FFFFFF;
    border-color: var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: none;
    display: grid;
    gap: 0.85rem;
    grid-column: 1;
    margin-bottom: 0;
    max-width: none;
    min-height: 8.75rem;
    padding: 1rem;
}

.portfolio-business-case-expected-field .portfolio-range-top {
    align-items: start;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 0;
}

.portfolio-business-case-expected-field .form-label {
    color: var(--color-text-primary);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
}

.portfolio-business-case-expected-field .portfolio-range-value {
    align-items: center;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 750;
    justify-content: center;
    line-height: 1;
    min-height: 2rem;
    min-width: 3.75rem;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
    width: auto;
}

.portfolio-business-case-expected-field .portfolio-range-input {
    margin: 0.1rem 0 0;
}

.portfolio-business-case-expected-field .portfolio-range-scale {
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 650;
    margin-top: -0.15rem;
}

.portfolio-business-case-expected-feedback {
    border-radius: 0.75rem;
    font-size: 0.76rem;
    margin-bottom: 0;
    padding: 0.45rem 0.65rem;
    grid-column: 1 / -1;
}

.portfolio-business-case-rationale-field {
    background: #FFFFFF;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: grid;
    gap: 0.35rem;
    grid-column: 2;
    height: 100%;
    min-height: 8.75rem;
    padding: 1rem;
}

.portfolio-business-case-rationale-input {
    border-radius: calc(var(--radius-md) - 2px);
    height: 100%;
    min-height: 5.7rem;
    resize: vertical;
}

@media (max-width: 991.98px) {
    .portfolio-linked-head {
        display: grid;
        gap: 0.65rem;
    }

    .portfolio-linked-status {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .portfolio-linked-status-item {
        min-width: 0;
        text-align: left;
    }

    .portfolio-business-case-toggle-head {
        display: grid;
        gap: 0.6rem;
    }

    .portfolio-business-case-toggle-benefits {
        justify-content: flex-start;
    }

    .portfolio-business-case-toggle-benefit {
        min-width: 0;
        text-align: left;
    }

    .portfolio-business-case-radio-group {
        grid-template-columns: 1fr;
    }

    .portfolio-business-case-expected-form {
        grid-template-columns: 1fr;
    }

    .portfolio-business-case-expected-form fieldset {
        grid-template-columns: 1fr;
    }

    .portfolio-business-case-expected-field {
        grid-column: 1;
        max-width: 100%;
    }

    .portfolio-business-case-rationale-field,
    .portfolio-business-case-expected-feedback {
        grid-column: 1;
    }
}

.portfolio-business-case-select {
    background-color: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    color: var(--color-text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    margin-top: 0.35rem;
    padding: 0.75rem 1rem;
}

.portfolio-business-case-formula-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.7rem;
}

.portfolio-business-case-meta-pill {
    background: #eef4f9;
    border: 1px solid #d8e4ef;
    border-radius: 999px;
    color: #31516d;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.38rem 0.65rem;
}

.portfolio-business-case-formula {
    background: linear-gradient(180deg, var(--color-surface-subtle) 0%, var(--color-surface-subtle) 100%);
    border: 1px solid var(--color-border);
    border-radius: 0.95rem;
    margin-top: 0.85rem;
    padding: 0.8rem 0.9rem;
}

.portfolio-business-case-formula-label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-business-case-formula-context {
    color: var(--color-primary-hover);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: normal;
    margin-left: 0.4rem;
    text-transform: none;
}

.portfolio-business-case-formula-text {
    color: var(--color-text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
    margin-top: 0.3rem;
}

.portfolio-business-case-estimate-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 0.85rem;
}

.portfolio-data-management-table {
    margin-top: 0.1rem;
    table-layout: fixed;
    width: 100%;
}

.portfolio-data-management-accordion {
    display: grid;
    gap: 0.85rem;
}

.portfolio-data-management-accordion .portfolio-data-card {
    margin: 0;
}

.portfolio-data-management-form .portfolio-business-case-selector-block {
    display: grid;
    gap: 0.65rem;
}

.portfolio-data-management-form .portfolio-business-case-formula-label {
    display: block;
    margin-bottom: 0;
    padding-bottom: 0.45rem;
}

.portfolio-data-management-return-row {
    align-items: center;
    display: flex;
    gap: 0.85rem;
    justify-content: flex-end;
    margin-bottom: 0.85rem;
}

.portfolio-data-management-driver {
    color: var(--color-primary) !important;
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    line-height: 1.2;
    margin-right: auto;
    min-width: 0;
    text-transform: uppercase;
}

.portfolio-data-management-col-field {
    width: 38%;
}

.portfolio-data-management-col-value {
    width: 34%;
}

.portfolio-data-management-col-source {
    width: 28%;
}

.portfolio-data-management-table thead th {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-data-management-table tbody td {
    color: var(--color-text-primary);
    font-size: 0.86rem;
    overflow-wrap: break-word;
    vertical-align: middle;
}

.portfolio-data-management-value {
    font-weight: 800;
    white-space: nowrap;
}

.portfolio-data-management-source {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.portfolio-data-management-source-label {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
}

.portfolio-business-case-estimate {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.95rem;
    padding: 0.8rem 0.9rem;
}

.portfolio-business-case-estimate-expected {
    background: linear-gradient(180deg, #f2f8fd 0%, var(--color-surface-blue) 100%);
    border-color: #c9ddef;
}

.portfolio-business-case-estimate-value {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
    margin-top: 0.35rem;
}

.portfolio-business-case-inputs {
    margin-top: 0.85rem;
}

.portfolio-business-case-input-list {
    color: var(--color-text-secondary);
    margin: 0.45rem 0 0;
    padding-left: 1.1rem;
}

.portfolio-business-case-input-list li + li {
    margin-top: 0.2rem;
}

.portfolio-business-case-table th,
.portfolio-business-case-table td {
    background: transparent;
    border-bottom-color: var(--color-border);
    padding: 0.9rem 0.8rem;
    vertical-align: top;
}

.portfolio-business-case-table th {
    color: var(--color-text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.portfolio-business-case-driver,
.portfolio-business-case-point {
    color: var(--color-text-primary);
    font-size: 0.94rem;
    font-weight: 700;
    line-height: 1.35;
}

.portfolio-business-case-improvement {
    color: var(--color-primary-hover);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
}

.portfolio-business-case-basis {
    color: var(--color-text-secondary);
    line-height: 1.55;
}

.portfolio-benchmark-point {
    background: #ffffff;
    border: 1px solid #e0ebf3;
    border-radius: 0.9rem;
    padding: 0.9rem 0.95rem;
}

.portfolio-benchmark-point-top {
    align-items: flex-start;
    display: flex;
    gap: 0.8rem;
    justify-content: space-between;
}

.portfolio-benchmark-point-title {
    color: var(--color-text-primary);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.35;
}

.portfolio-benchmark-point-value {
    background: var(--color-surface-blue);
    border: 1px solid #d6e5f1;
    border-radius: 999px;
    color: var(--color-primary-hover);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.45rem 0.7rem;
    white-space: nowrap;
}

.portfolio-benchmark-point-copy {
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-top: 0.55rem;
}

.portfolio-radar-card {
    padding-bottom: 1.5rem;
}

.portfolio-radar-wrap {
    min-height: 360px;
}

.portfolio-profile-selection-copy {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.portfolio-chart-selection-button {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-primary);
    display: inline-flex;
    gap: 0.45rem;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.5rem 0.8rem;
}

.portfolio-chart-selection-button::after {
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: 1rem;
    content: "";
    display: inline-flex;
    flex: 0 0 auto;
    height: 1rem;
    transform: rotate(0deg);
    transition: transform 0.2s ease;
    width: 1rem;
}

.portfolio-chart-selection-button[aria-expanded="true"]::after {
    transform: rotate(-180deg);
}

.portfolio-chart-selection-dropdown {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    max-height: 260px;
    overflow: auto;
    padding: 0.8rem;
}

.portfolio-chart-selection-title {
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.35;
}

.portfolio-profile-legend {
    display: grid;
    align-content: start;
    gap: 0.5rem;
}

.portfolio-dimension-layout {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.portfolio-profile-legend-item {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    cursor: pointer;
    display: grid;
    gap: 0.55rem;
    grid-template-columns: auto auto minmax(0, 1fr);
    margin: 0;
    padding: 0.55rem 0.65rem;
}

.portfolio-profile-legend-item:has(input:disabled) {
    background: var(--color-surface-subtle);
}

.portfolio-profile-legend-checkbox {
    margin: 0;
}

.portfolio-profile-legend-swatch {
    border-radius: 999px;
    display: inline-flex;
    height: 0.8rem;
    width: 0.8rem;
}

.portfolio-profile-legend-label {
    color: var(--color-text-primary);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.35;
}

.portfolio-dimension-tab-content {
    padding-top: 0;
}

.portfolio-dimension-content-card {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
}

.portfolio-dimension-content-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.portfolio-dimension-content-title {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.35;
}

.portfolio-dimension-content-copy {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
    margin-top: 0.25rem;
}

.portfolio-dimension-summary-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.portfolio-dimension-summary-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.95rem;
    padding: 0.8rem 0.9rem;
}

.portfolio-dimension-summary-label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.portfolio-dimension-summary-value {
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.35;
    margin-top: 0.35rem;
}

.portfolio-dimension-score-pill {
    align-items: center;
    background: var(--color-surface-blue);
    border-radius: 999px;
    color: var(--color-primary-hover);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.5rem 0.8rem;
    white-space: nowrap;
}

.portfolio-dimension-levels {
    display: grid;
    gap: 0.9rem;
}

.portfolio-dimension-level-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.95rem;
    overflow: hidden;
}

.portfolio-dimension-accordion .accordion-item + .accordion-item {
    margin-top: 0.9rem;
}

.portfolio-dimension-level-trigger .accordion-button {
    align-items: flex-start;
    background: #ffffff;
    box-shadow: none;
    gap: 0.85rem;
    padding: 0.95rem 1rem;
}

.portfolio-dimension-level-trigger .accordion-button:not(.collapsed) {
    background: var(--color-surface-subtle);
    color: inherit;
}

.portfolio-dimension-level-trigger .accordion-button::after {
    background-size: 1rem;
    height: 1rem;
    margin-left: 0.75rem;
    margin-top: 0.1rem;
    width: 1rem;
}

.portfolio-dimension-level-trigger-main {
    align-items: flex-start;
    display: flex;
    flex: 1 1 auto;
    gap: 0.85rem;
    min-width: 0;
}

.portfolio-dimension-level-badge {
    align-items: center;
    background: var(--color-text-primary);
    border-radius: 999px;
    color: #ffffff;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.38rem 0.65rem;
}

.portfolio-readiness-dimensions .portfolio-dimension-level-badge.is-satisfied {
    background: #2f8a59;
}

.portfolio-readiness-dimensions .portfolio-dimension-level-badge.is-partial {
    background: linear-gradient(90deg, #2f8a59 0 50%, var(--color-text-primary) 50% 100%);
}

.portfolio-dimension-level-meaning {
    color: var(--color-text-primary);
    font-size: 0.87rem;
    font-weight: 700;
    line-height: 1.45;
}

.portfolio-dimension-level-count {
    color: var(--color-text-muted);
    flex: 0 0 auto;
    font-size: 0.76rem;
    font-weight: 700;
    margin-right: 0.25rem;
    white-space: nowrap;
}

.portfolio-dimension-level-body {
    padding: 0 1rem 1rem;
}

.portfolio-dimension-condition-list {
    display: grid;
    gap: 0.75rem;
}

.portfolio-dimension-condition-item {
    border-top: 1px solid #edf3f8;
    padding-top: 0.75rem;
}

.portfolio-dimension-condition-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.portfolio-dimension-condition-text {
    color: var(--color-text-primary);
    font-size: 0.86rem;
    line-height: 1.55;
}

.portfolio-dimension-condition-top {
    align-items: flex-start;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.portfolio-dimension-condition-domain {
    background: var(--color-surface-blue);
    border-radius: 999px;
    color: var(--color-primary-hover);
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    line-height: 1;
    padding: 0.32rem 0.55rem;
    text-transform: uppercase;
}

.portfolio-dimension-condition-evidence {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-top: 0.45rem;
}

.portfolio-profile-comparison {
    display: grid;
    gap: 0.75rem;
}

.portfolio-profile-comparison-head,
.portfolio-profile-comparison-row {
    align-items: stretch;
    display: grid;
    gap: 0.85rem;
    grid-template-columns: minmax(140px, 180px) 1fr;
}

.portfolio-profile-comparison-body {
    display: grid;
    gap: 0.65rem;
}

.portfolio-profile-dimension-label {
    align-items: center;
    color: var(--color-text-primary);
    display: flex;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
    padding: 0.7rem 0;
}

.portfolio-profile-score-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-profile-score-card {
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.95rem;
    padding: 0.95rem 1rem;
}

.portfolio-profile-score-head {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
}

.portfolio-profile-score-title {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}

.portfolio-profile-score-cell {
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--color-border);
    border-radius: 0.95rem;
    display: flex;
    justify-content: center;
    min-height: 3.5rem;
    padding: 0.65rem;
}

.portfolio-note-list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.portfolio-note-nav {
    align-self: start;
}

.portfolio-note-nav-date {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.78rem;
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.portfolio-note-nav-title {
    color: var(--color-text-primary);
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
}

.portfolio-note-content {
    display: block;
    min-width: 0;
}

.portfolio-note-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    min-height: 100%;
    padding: 1rem 1rem 0.95rem;
}

.portfolio-note-edit-form {
    margin: 0;
}

.portfolio-note-card-textarea {
    color: var(--color-text-primary);
    line-height: 1.65;
    margin-bottom: 0.9rem;
    min-height: 11rem;
    resize: vertical;
}

.portfolio-note-card-textarea[readonly] {
    background: var(--color-surface-subtle);
    border-color: var(--color-border);
}

.portfolio-note-card-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    justify-content: space-between;
}

.portfolio-note-card-visibility {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.portfolio-note-radio {
    align-items: center;
    color: var(--color-text-secondary);
    display: inline-flex;
    font-size: 0.84rem;
    gap: 0.4rem;
    margin: 0;
}

.portfolio-note-radio input {
    margin: 0;
}

.portfolio-note-row {
    align-items: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.95rem 1rem;
}

.portfolio-note-row-main {
    flex: 1 1 auto;
    min-width: 0;
}

.portfolio-note-row-actions {
    align-items: center;
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem;
    justify-content: flex-start;
    width: auto;
}

.portfolio-note-row-actions form {
    display: flex !important;
    margin: 0;
    width: auto;
}

.portfolio-note-row-actions > * {
    flex: 0 0 auto;
}

.portfolio-note-row-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.portfolio-note-inline-feedback {
    border-radius: 0.85rem;
    font-size: 0.78rem;
    margin-top: 0.75rem;
    padding: 0.55rem 0.75rem;
}

.portfolio-note-preview {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--color-text-secondary);
    display: -webkit-box;
    line-height: 1.45;
    overflow: hidden;
    white-space: normal;
}

.portfolio-note-empty {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    margin-top: 1rem;
    padding: 1rem;
}

.portfolio-note-visibility {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portfolio-radio-option {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    display: inline-flex;
    gap: 0.4rem;
    margin: 0;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
}

.portfolio-radio-option .form-check-input {
    float: none;
    margin: 0;
    transform: scale(0.9);
}

.portfolio-radio-option .form-check-label {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
}

.pill-label {
    align-items: center;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: 0.7rem;
    color: var(--color-text-secondary);
    display: inline-flex;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    padding: 0.36rem 0.62rem;
}

.usecase-card-meta {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.4rem;
    overflow: hidden;
}

.usecase-card-meta .pill-label {
    flex: 0 1 auto;
    font-size: 0.68rem;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    padding: 0.3rem 0.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-modal-feedback {
    border-radius: 0.9rem;
}

@media (max-width: 767.98px) {
    .portfolio-card-header {
        grid-template-columns: 1fr;
    }

    .portfolio-card-actionbar {
        justify-content: flex-start;
    }

    .portfolio-card-actionbar,
    .portfolio-card-actionbar .btn,
    .portfolio-card-actionbar form {
        width: 100%;
    }

    .portfolio-linked-tabbar {
        align-items: stretch;
        flex-direction: column;
    }

    .portfolio-linked-actionbar {
        justify-content: flex-start;
    }

    .portfolio-governance-summary {
        grid-template-columns: 1fr 1fr;
    }

    .portfolio-matrix-grid,
    .portfolio-roadmap-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-health-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-insight-actions {
        justify-content: flex-start;
    }

    .portfolio-benchmark-point-top {
        flex-direction: column;
    }

    .portfolio-benchmark-point-value {
        white-space: normal;
    }

    .portfolio-radar-wrap {
        min-height: 300px;
    }

    .portfolio-profile-legend-item {
        align-items: flex-start;
        grid-template-columns: auto auto 1fr;
    }

    .portfolio-dimension-layout {
        grid-template-columns: 1fr;
    }

    .portfolio-dimension-summary-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-dimension-content-head,
    .portfolio-dimension-level-head,
    .portfolio-dimension-condition-top {
        flex-direction: column;
    }

    .portfolio-profile-comparison-head,
    .portfolio-profile-comparison-row {
        grid-template-columns: 1fr;
    }

    .portfolio-profile-dimension-label {
        padding: 0;
    }

    .portfolio-profile-score-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-profile-score-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .portfolio-management-grid-decision {
        grid-template-columns: 1fr;
    }

    .portfolio-note-header {
        flex-direction: column;
    }

    .portfolio-note-meta {
        justify-content: flex-start;
    }

    .portfolio-note-row {
        flex-direction: column;
    }

    .portfolio-note-row-actions {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .portfolio-note-card-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

}

@media (max-width: 575.98px) {
    .portfolio-note-layout {
        grid-template-columns: 1fr;
    }

    .portfolio-note-nav {
        overflow-x: auto;
        padding-bottom: 0.15rem;
        white-space: nowrap;
    }

    .portfolio-note-nav .nav-item {
        width: auto;
    }

    .portfolio-note-nav .nav-link {
        flex: 0 0 16rem;
    }
}

@media (max-width: 1199.98px) {
    .portfolio-governance-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .portfolio-health-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

.portfolio-management-grid-decision {
        grid-template-columns: 1fr 1fr;
    }
}

.admin-chart-wrap {
    border: 1px solid rgba(186, 205, 228, 0.9);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, rgba(248, 251, 255, 0.95), #ffffff 70%);
    padding: 1rem;
}

.admin-chart-svg {
    display: block;
    width: 100%;
    height: auto;
}

.admin-chart-empty {
    align-items: center;
    background: rgba(248, 251, 255, 0.95);
    border: 1px dashed rgba(171, 191, 216, 0.9);
    border-radius: 1rem;
    color: #6b7a90;
    display: flex;
    justify-content: center;
    min-height: 16rem;
    padding: 1.25rem;
    text-align: center;
}

.admin-contract-row {
    border: 1px solid rgba(186, 205, 228, 0.95);
    border-left-width: 0.45rem;
    border-radius: 1rem;
    padding: 1rem 1.1rem;
}

.admin-contract-row-success {
    background: rgba(240, 253, 248, 0.96);
    border-left-color: #10b981;
}

.admin-contract-row-warning {
    background: rgba(255, 249, 235, 0.96);
    border-left-color: var(--color-warning);
}

.admin-contract-row-danger {
    background: rgba(254, 242, 242, 0.96);
    border-left-color: #ef4444;
}

.admin-contract-row-neutral {
    background: rgba(248, 251, 255, 0.96);
    border-left-color: #94a3b8;
}

.admin-organizations-table th,
.admin-organizations-table td {
    vertical-align: middle;
    white-space: nowrap;
}

.admin-organizations-table tbody tr td {
    padding-bottom: 0.9rem;
    padding-top: 0.9rem;
}

.admin-inline-status {
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.55rem;
    text-transform: uppercase;
}

.admin-users-inline {
    font-size: 0.95rem;
}

.admin-users-metric {
    align-items: baseline;
    display: inline-flex;
    gap: 0.35rem;
}

.admin-contract-date {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.86rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
}

.admin-contract-date-success {
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-success-strong);
}

.admin-contract-date-warning {
    background: rgba(245, 158, 11, 0.16);
    color: var(--color-warning-strong);
}

.admin-contract-date-danger {
    background: rgba(239, 68, 68, 0.14);
    color: var(--color-error-strong);
}

.admin-contract-date-neutral {
    background: rgba(148, 163, 184, 0.14);
    color: var(--color-text-muted);
}

@media (max-width: 575.98px) {
    .portfolio-health-strip {
        grid-template-columns: 1fr;
    }
}

.hc-shell {
    max-width: 1240px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.hc-hero,
.hc-section,
.hc-footer-note,
.hc-sidebar,
.hc-article,
.hc-glossary-feature {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.06);
}

.hc-hero {
    padding: 2.5rem;
    display: grid;
    gap: 2rem;
    margin-bottom: 1.75rem;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
}

.hc-kicker,
.hc-section-kicker,
.hc-layer-kicker {
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.72rem;
    font-weight: 700;
    color: #4f6f9a;
}

.hc-title,
.hc-section-title,
.hc-article-title {
    color: #102748;
    letter-spacing: -0.03em;
}

.hc-title {
    margin: 0.6rem 0 0.9rem;
    font-size: clamp(2rem, 3vw, 3.2rem);
    line-height: 1.04;
    max-width: 12ch;
}

.hc-copy,
.hc-card-copy,
.hc-list-copy,
.hc-article-summary,
.hc-article-block p,
.hc-faq-short,
.hc-route-step-copy,
.hc-empty-copy,
.hc-search-hint,
.hc-list-category {
    color: #4f5f79;
    line-height: 1.65;
}

.hc-copy {
    max-width: 64ch;
    margin: 0;
    font-size: 1rem;
}

.hc-search {
    position: relative;
}

.hc-search-input-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    align-items: center;
}

.hc-search-input {
    min-height: 64px;
    border-radius: 18px;
    padding: 0.95rem 1.15rem;
    border: 1px solid rgba(59, 130, 246, 0.22);
    box-shadow: 0 18px 34px rgba(59, 130, 246, 0.08);
    font-size: 1rem;
}

.hc-search-submit {
    min-height: 64px;
    border-radius: 18px;
    padding-inline: 1.25rem;
}

.hc-search-hint {
    margin-top: 0.85rem;
    font-size: 0.92rem;
}

.hc-search-suggest {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    right: 0;
    z-index: 40;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.14);
    padding: 0.5rem;
}

.hc-search-suggest-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: start;
    padding: 0.8rem 0.9rem;
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
}

.hc-search-suggest-item:hover,
.hc-search-suggest-item.is-active {
    background: var(--color-surface-subtle);
}

.hc-search-suggest-item.is-active {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

.hc-search-suggest-item mark {
    background: #fff3bf;
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.hc-search-suggest-type,
.hc-type-badge,
.hc-list-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.73rem;
    font-weight: 700;
    color: var(--color-primary-hover);
    background: rgba(59, 130, 246, 0.1);
}

.hc-search-suggest-body {
    display: grid;
    gap: 0.1rem;
}

.hc-search-suggest-title,
.hc-card-title,
.hc-list-title,
.hc-sidebar-title,
.hc-feedback-title {
    color: var(--color-text-primary);
    font-weight: 700;
}

.hc-search-suggest-meta {
    color: #6a7b97;
    font-size: 0.88rem;
}

.hc-section,
.hc-sidebar,
.hc-glossary-feature,
.hc-article {
    padding: 1.6rem;
}

.hc-section + .hc-section,
.hc-split + .hc-section,
.hc-page-grid + .hc-section,
.hc-section + .hc-footer-note {
    margin-top: 1.5rem;
}

.hc-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.hc-section-title {
    margin: 0.32rem 0 0;
    font-size: 1.55rem;
}

.hc-card-grid,
.hc-glossary-grid {
    display: grid;
    gap: 1rem;
}

.hc-card-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hc-card-grid-3,
.hc-glossary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hc-action-card,
.hc-topic-card,
.hc-route-card,
.hc-mini-card,
.hc-glossary-card {
    display: block;
    padding: 1.2rem;
    border-radius: 20px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: linear-gradient(180deg, #ffffff 0%, var(--color-surface-subtle) 100%);
    text-decoration: none;
    color: inherit;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hc-action-card:hover,
.hc-topic-card:hover,
.hc-route-card:hover,
.hc-mini-card:hover,
.hc-glossary-card:hover,
.hc-list-item:hover,
.hc-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
    border-color: rgba(59, 130, 246, 0.25);
}

.hc-topic-top,
.hc-list-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.95rem;
}

.hc-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #1e40af;
    background: rgba(59, 130, 246, 0.11);
    font-size: 0.85rem;
    font-weight: 700;
}

.hc-card-title {
    font-size: 1.02rem;
    margin-bottom: 0.38rem;
}

.hc-step-preview,
.hc-list-category {
    margin-top: 0.7rem;
    font-size: 0.9rem;
}

.hc-split,
.hc-page-grid,
.hc-three-col,
.hc-layer-grid,
.hc-definition-grid {
    display: grid;
    gap: 1.5rem;
}

.hc-split {
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.95fr);
    margin: 1.5rem 0;
}

.hc-page-grid {
    grid-template-columns: 280px minmax(0, 1fr);
}

.hc-three-col,
.hc-layer-grid,
.hc-definition-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hc-sidebar {
    position: sticky;
    top: 7rem;
    align-self: start;
}

.hc-side-nav {
    display: grid;
    gap: 0.35rem;
    margin-top: 1rem;
}

.hc-side-link,
.hc-tab,
.hc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #294468;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    border-radius: 14px;
}

.hc-side-link {
    padding: 0.75rem 0.9rem;
}

.hc-side-link.is-active,
.hc-tab.is-active,
.hc-chip:hover {
    color: #0f4ed8;
    background: #f5faff;
    border-color: rgba(59, 130, 246, 0.22);
}

.hc-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1.2rem;
    color: #62738f;
    font-size: 0.92rem;
}

.hc-breadcrumbs a {
    color: #2f5ba9;
    text-decoration: none;
}

.hc-detail-block + .hc-detail-block,
.hc-article-block + .hc-article-block {
    margin-top: 1.5rem;
}

.hc-list {
    display: grid;
    gap: 0.85rem;
}

.hc-list-item {
    display: block;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hc-mini-stack,
.hc-route-steps {
    display: grid;
    gap: 0.95rem;
}

.hc-route-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.9rem;
    align-items: start;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.hc-route-step-number {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-primary-hover);
    font-weight: 700;
}

.hc-accordion .accordion-item {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
}

.hc-accordion .accordion-item + .accordion-item {
    margin-top: 0.8rem;
}

.hc-accordion .accordion-button {
    background: #fff;
    color: var(--color-text-primary);
    font-weight: 600;
    box-shadow: none;
    padding: 1rem 1.1rem;
}

.hc-accordion .accordion-button:not(.collapsed) {
    color: var(--color-text-primary);
    background: var(--color-surface-subtle);
}

.hc-faq-short {
    margin-bottom: 0.7rem;
    font-weight: 600;
}

.hc-tab-row,
.hc-chip-grid,
.hc-feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}

.hc-tab,
.hc-chip {
    padding: 0.62rem 0.95rem;
    font-size: 0.93rem;
}

.hc-inline-search {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.hc-inline-search-input {
    min-height: 52px;
    border-radius: 16px;
}

.hc-definition-grid {
    margin-top: 1rem;
}

.hc-article-title {
    font-size: clamp(1.9rem, 2.4vw, 2.6rem);
    margin: 0.7rem 0;
}

.hc-article-summary {
    font-size: 1.04rem;
    margin: 0 0 1.4rem;
    max-width: 70ch;
}

.hc-article-block h3 {
    font-size: 1.15rem;
    color: var(--color-text-primary);
    margin-bottom: 0.7rem;
}

.hc-step-list-numbered,
.hc-bullet-list {
    padding-left: 1.2rem;
    margin: 0;
    color: #4f5f79;
}

.hc-step-list-numbered li,
.hc-bullet-list li {
    margin-bottom: 0.55rem;
    line-height: 1.65;
}

.hc-feedback {
    margin-top: 1.8rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: var(--color-surface-subtle);
    border: 1px solid rgba(59, 130, 246, 0.12);
}

.hc-feedback-actions .btn.is-active {
    background: var(--color-primary-hover);
    color: #fff;
    border-color: var(--color-primary-hover);
}

.hc-feedback-response {
    margin-top: 0.8rem;
    color: #48617e;
    font-size: 0.93rem;
}

.hc-empty-state {
    padding: 1.3rem;
    border-radius: 18px;
    background: var(--color-surface-subtle);
    border: 1px dashed rgba(59, 130, 246, 0.2);
}

.hc-empty-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.35rem;
}

.hc-search-group + .hc-search-group {
    margin-top: 1.4rem;
}

.hc-search-group-title {
    margin-bottom: 0.8rem;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hc-footer-note {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    padding: 1.1rem 1.2rem;
    margin-top: 1.5rem;
    color: #51627b;
}

.hc-footer-note a {
    color: var(--color-primary-hover);
    text-decoration: none;
    font-weight: 600;
}

@media (max-width: 1199.98px) {
    .hc-card-grid-4,
    .hc-card-grid-3,
    .hc-glossary-grid,
    .hc-three-col,
    .hc-layer-grid,
    .hc-definition-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hc-split,
    .hc-page-grid {
        grid-template-columns: 1fr;
    }

    .hc-sidebar {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .hc-shell {
        padding: 1.25rem 0.9rem 3rem;
    }

    .hc-hero,
    .hc-section,
    .hc-footer-note,
    .hc-sidebar,
    .hc-article,
    .hc-glossary-feature {
        border-radius: 20px;
    }

    .hc-hero,
    .hc-section,
    .hc-sidebar,
    .hc-glossary-feature,
    .hc-article {
        padding: 1.2rem;
    }

    .hc-search-input-wrap,
    .hc-inline-search {
        grid-template-columns: 1fr;
        display: grid;
    }

    .hc-search-submit,
    .hc-inline-search .btn {
        width: 100%;
    }

    .hc-card-grid-4,
    .hc-card-grid-3,
    .hc-glossary-grid,
    .hc-three-col,
    .hc-layer-grid,
    .hc-definition-grid {
        grid-template-columns: 1fr;
    }

    .hc-title {
        max-width: none;
    }
}

.usecase-library-shell {
    display: grid;
    gap: 1.5rem;
}

.usecase-library-hero {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.12), transparent 30%),
        linear-gradient(135deg, #0f2b53 0%, #184e7a 55%, #1a6ca8 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 28px;
    box-shadow: 0 30px 65px rgba(15, 23, 42, 0.15);
    color: #fff;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    padding: 2rem;
}

.usecase-library-hero-copy h1 {
    font-size: clamp(2rem, 3vw, 3rem);
    letter-spacing: -0.03em;
    margin: 0.45rem 0 0.8rem;
}

.usecase-library-hero-copy p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.02rem;
    line-height: 1.65;
    margin-bottom: 1.25rem;
    max-width: 64ch;
}

.usecase-library-search .form-control {
    border: none;
    border-radius: 18px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
    min-height: 64px;
    padding-inline: 1.15rem;
}

.usecase-library-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.usecase-library-tab,
.usecase-library-view-button,
.usecase-library-chip,
.usecase-library-ghost-action {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    color: #163559;
    display: inline-flex;
    font-weight: 600;
    gap: 0.4rem;
    justify-content: center;
    transition: all 0.18s ease;
}

.usecase-library-tab,
.usecase-library-view-button {
    min-height: 44px;
    padding: 0.55rem 0.95rem;
}

.usecase-library-tab:hover,
.usecase-library-view-button:hover,
.usecase-library-chip:hover,
.usecase-library-ghost-action:hover {
    border-color: rgba(29, 78, 216, 0.25);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.06);
    transform: translateY(-1px);
}

.usecase-library-tab.is-active,
.usecase-library-view-button.is-active,
.usecase-library-chip {
    background: #eef5ff;
    border-color: rgba(29, 78, 216, 0.2);
    color: #1248bc;
}

.usecase-library-tab-count {
    background: rgba(29, 78, 216, 0.12);
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.78rem;
    min-width: 1.5rem;
    padding: 0.05rem 0.45rem;
}

.usecase-library-layout {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 320px minmax(0, 1fr);
}

.usecase-library-sidebar-inner,
.usecase-library-main,
.usecase-library-card,
.usecase-library-empty,
.usecase-library-detail {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.06);
}

.usecase-library-sidebar {
    align-self: start;
}

.usecase-library-sidebar-inner {
    padding: 1.25rem;
    position: sticky;
    top: 7rem;
}

.usecase-library-sidebar-head {
    align-items: start;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.usecase-library-sidebar-kicker {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.usecase-library-sidebar h2 {
    color: var(--color-text-primary);
    font-size: 1.1rem;
    margin: 0.35rem 0 0;
}

.usecase-library-filter-groups {
    display: grid;
    gap: 1rem;
}

.usecase-library-filter-group {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    padding-top: 1rem;
}

.usecase-library-filter-group:first-child {
    border-top: none;
    padding-top: 0;
}

.usecase-library-filter-title {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    display: flex;
    font-size: 0.95rem;
    font-weight: 700;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0;
    text-align: left;
    width: 100%;
}

.usecase-library-filter-title:hover {
    color: var(--color-primary-hover);
}

.usecase-library-filter-chevron {
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1;
}

.usecase-library-filter-options {
    display: grid;
    gap: 0.55rem;
    max-height: 240px;
    overflow: auto;
    padding-right: 0.25rem;
}

.usecase-library-filter-options[hidden],
.usecase-library-filter-options.is-collapsed {
    display: none !important;
}

.usecase-library-filter-more {
    display: grid;
    gap: 0.55rem;
}

.usecase-library-filter-more-toggle {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--color-primary-hover);
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 700;
    justify-content: flex-start;
    padding: 0.1rem 0;
}

.usecase-library-filter-more-toggle:hover {
    color: #123fb2;
    text-decoration: underline;
}

.usecase-library-check {
    align-items: start;
    color: #4a5c78;
    cursor: pointer;
    display: grid;
    gap: 0.65rem;
    grid-template-columns: auto 1fr;
    line-height: 1.45;
}

.usecase-library-check input {
    margin-top: 0.18rem;
}

.usecase-library-main {
    padding: 1.25rem;
}

.usecase-library-toolbar {
    align-items: start;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.usecase-library-toolbar-left {
    display: grid;
    gap: 0.8rem;
}

.usecase-library-toolbar-right {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.usecase-library-result-count {
    color: var(--color-text-primary);
    font-size: 1.05rem;
    font-weight: 700;
}

.usecase-library-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.usecase-library-chip {
    font-size: 0.9rem;
    padding: 0.45rem 0.8rem;
}

.usecase-library-view-toggle {
    background: var(--color-surface-subtle);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.2rem;
}

.usecase-library-results {
    display: grid;
    gap: 1.25rem;
}

.usecase-library-results[aria-busy="true"] {
    opacity: 0.55;
}

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

.usecase-library-page-gap {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0 0.2rem;
}

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

.usecase-library-group + .usecase-library-group {
    margin-top: 0.75rem;
}

.usecase-library-group-title {
    color: var(--color-text-primary);
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.85rem;
}

.usecase-library-card {
    display: grid;
    gap: 0.95rem;
    padding: 1.15rem;
}

.usecase-library-card-top {
    align-items: start;
    display: flex;
    gap: 0.9rem;
    justify-content: space-between;
}

.usecase-library-card-heading {
    display: grid;
    grid-template-rows: 1.1rem minmax(3rem, auto) auto;
    min-width: 0;
}

.usecase-library-card-label {
    color: #61718a;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.usecase-library-card-title {
    color: var(--color-text-primary);
    font-size: 1.18rem;
    line-height: 1.25;
    margin: 0.35rem 0 0;
}

.usecase-library-ghost-action {
    font-size: 0.84rem;
    padding: 0.45rem 0.7rem;
}

.usecase-library-card-copy,
.usecase-library-row-copy,
.usecase-library-matrix-copy,
.usecase-library-empty p,
.usecase-library-related-item span,
.usecase-library-detail p {
    color: #52637c;
    line-height: 1.6;
}

.usecase-library-card-copy {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
}

.usecase-library-card-meta,
.usecase-library-card-actions,
.usecase-library-detail-actions,
.usecase-library-related-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.usecase-library-card-meta-compact {
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.usecase-library-card-meta-compact .pill-label {
    border-radius: 0.45rem;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.1;
    padding: 0.24rem 0.42rem;
}

.usecase-library-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.usecase-library-card-actions .btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 2.25rem;
    width: 100%;
}

.usecase-library-card-actions .btn:first-child {
    grid-column: 1 / -1;
}

.usecase-library-metric-pill {
    align-items: center;
    background: var(--color-surface-subtle);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    color: #37506f;
    display: inline-flex;
    font-size: 0.82rem;
    gap: 0.45rem;
    padding: 0.35rem 0.65rem;
}

.usecase-library-metric-pill strong {
    color: var(--color-text-primary);
}

.usecase-library-metric-pill.is-high {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-success-strong);
}

.usecase-library-metric-pill.is-medium,
.usecase-library-metric-pill.is-mid {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning-strong);
}

.usecase-library-metric-pill.is-low {
    background: rgba(239, 68, 68, 0.1);
    color: var(--color-error-strong);
}

.usecase-library-metric-pill.is-priority {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-primary-hover);
}

.usecase-library-card-actions .btn.is-active,
.usecase-library-row-actions .btn.is-active {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: #fff;
}

.usecase-library-table-wrap {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    overflow: hidden;
}

.usecase-library-table {
    margin-bottom: 0;
}

.usecase-library-table thead th {
    background: var(--color-surface-subtle);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    color: var(--color-text-primary);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.usecase-library-row {
    cursor: pointer;
}

.usecase-library-row:hover {
    background: var(--color-surface-subtle);
}

.usecase-library-row-title {
    color: var(--color-text-primary);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.usecase-library-row-copy {
    font-size: 0.9rem;
    max-width: 38ch;
}

.usecase-library-row-actions {
    display: flex;
    gap: 0.45rem;
}

.usecase-library-matrix-empty {
    color: var(--color-text-muted);
    font-size: 0.92rem;
    padding: 0.6rem 0;
}

.usecase-library-empty {
    padding: 1.4rem;
}

.usecase-library-empty-title {
    color: var(--color-text-primary);
    font-size: 1.08rem;
    font-weight: 800;
    margin-bottom: 0.35rem;
}

.usecase-library-detail {
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    gap: 1rem;
}

.usecase-library-detail h3 {
    color: var(--color-text-primary);
    margin: 0;
}

.usecase-library-detail h4 {
    color: var(--color-text-primary);
    font-size: 0.98rem;
    font-weight: 800;
    margin-bottom: 0.45rem;
}

.usecase-library-detail-block {
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 1rem;
}

.usecase-library-detail-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.usecase-library-related-list {
    display: grid;
}

.usecase-library-related-item {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    color: inherit;
    display: grid;
    gap: 0.15rem;
    padding: 0.85rem 0.95rem;
    text-decoration: none;
}

.usecase-library-related-item strong {
    color: var(--color-text-primary);
}

.usecase-library-mobile-filters {
    display: none;
}

@media (max-width: 1199.98px) {
    .usecase-library-hero,
    .usecase-library-card-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .usecase-library-layout {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .usecase-library-mobile-filters {
        display: block;
    }

    .usecase-library-sidebar {
        display: block;
    }

    .usecase-library-sidebar-inner {
        margin-top: 1rem;
        position: static;
    }

    .usecase-library-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .usecase-library-hero {
        border-radius: 22px;
        padding: 1.35rem;
    }

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

    .usecase-library-main,
    .usecase-library-sidebar-inner,
    .usecase-library-card,
    .usecase-library-matrix-cell,
    .usecase-library-empty {
        border-radius: 20px;
        padding: 1rem;
    }

    .usecase-library-toolbar,
    .usecase-library-toolbar-right {
        align-items: stretch;
        flex-direction: column;
    }

    .usecase-library-view-toggle,
    .usecase-library-toolbar-right .form-select,
    .usecase-library-toolbar-right .btn {
        width: 100%;
    }

    .usecase-library-view-toggle {
        justify-content: space-between;
    }

    .usecase-library-card-actions,
    .usecase-library-row-actions {
        flex-direction: column;
    }
}

/* Use case library layout override: keep filters as a real left column outside Bootstrap semantics. */
.usecase-library-mobile-filters {
    display: none !important;
}

.usecase-library-layout {
    align-items: start;
    display: grid !important;
    gap: 1.5rem;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
}

.usecase-library-sidebar,
.usecase-library-sidebar.collapse,
.usecase-library-sidebar.collapse:not(.show) {
    display: block !important;
    grid-column: 1;
    min-width: 0;
}

.usecase-library-main {
    grid-column: 2;
    min-width: 0;
}

@media (max-width: 1040px) {
    .usecase-library-layout {
        gap: 1rem;
        grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) !important;
    }
}

@media (max-width: 760px) {
    .usecase-library-mobile-filters {
        display: none !important;
    }

    .usecase-library-layout,
    div.usecase-library-layout[style] {
        grid-template-columns: 1fr !important;
    }

    .usecase-library-sidebar,
    .usecase-library-sidebar.collapse,
    .usecase-library-sidebar.collapse:not(.show),
    .usecase-library-main {
        grid-column: 1;
    }

    .usecase-library-sidebar-inner {
        position: static;
    }
}

/* App Styleguide 2026
   Clean SaaS, blue-led semantic color system, subtle surface layering, workflow-first controls, accessibility-first.
   This layer intentionally overrides the earlier MetroMinds theme without requiring every PHP template to change. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

body {
    background: var(--color-bg) !important;
    color: var(--color-text-primary);
    font-family: var(--font-family);
    font-size: 16px;
    line-height: 1.45;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.container {
    width: min(100% - 48px, 1200px);
}

main.py-5 {
    padding-block: var(--space-xl) var(--space-2xl) !important;
}

h1,
.h1,
.display-6,
.public-hero-title,
.public-page-title,
.dashboard-hero-title,
.usecase-library-hero-copy h1 {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

h2,
.h2,
.portfolio-section-title,
.public-section-title {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

h3,
h4,
h5,
.h3,
.h4,
.h5,
.card-title,
.modal-title,
.usecase-library-card-title,
.capability-name,
.portfolio-linked-title {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

p,
.public-section-copy,
.public-page-copy,
.public-hero-copy,
.dashboard-hero-copy,
.portfolio-section-copy,
.capability-description,
.usecase-library-card-copy,
.usecase-readable-text,
.text-muted {
    color: var(--color-text-secondary) !important;
}

.small,
.portfolio-section-kicker,
.portal-kicker,
.public-kicker,
.capability-id,
.usecase-library-card-label,
.usecase-library-sidebar-kicker,
.portfolio-business-case-formula-label {
    color: var(--color-text-muted) !important;
    letter-spacing: 0.04em !important;
}

.app-topbar,
.navbar {
    background: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm) !important;
    color: var(--color-text-primary);
}

.navbar-brand {
    color: var(--color-text-primary) !important;
}

.navbar .nav-link,
.app-account-link {
    color: var(--color-text-secondary) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active,
.app-account-link:hover,
.app-account-link:focus {
    background: var(--color-surface-subtle) !important;
    color: var(--color-text-primary) !important;
}

.navbar-toggler {
    background: var(--color-surface-subtle);
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

.customer-subnav {
    background: rgba(255, 255, 255, 0.88) !important;
    border-bottom: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: blur(10px);
}

.customer-subnav .nav-link {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    min-height: 38px;
}

.customer-subnav .nav-link:hover,
.customer-subnav .nav-link:focus,
.customer-subnav .nav-link.active {
    background: var(--color-surface-subtle) !important;
    color: var(--color-primary) !important;
}

.dropdown-menu,
.customer-subnav-dropdown {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-md) !important;
}

.dropdown-item {
    color: var(--color-text-secondary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background: var(--color-surface-subtle) !important;
    color: var(--color-primary) !important;
}

.btn {
    border-radius: var(--radius-md) !important;
    font-weight: 500 !important;
    min-height: 42px;
    padding: 10px 16px;
    transition-duration: 140ms;
}

.btn-sm {
    min-height: 34px;
    padding: 7px 12px;
}

.btn-lg {
    min-height: 48px;
    padding: 12px 18px;
}

.btn-primary,
.btn-dark,
.usecase-library-card-actions .btn.is-active,
.usecase-library-row-actions .btn.is-active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-dark:hover,
.btn-dark:focus {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-light {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
    box-shadow: none !important;
}

.btn-outline-primary {
    background: var(--color-surface) !important;
    border-color: rgba(37, 99, 235, 0.28) !important;
    color: var(--color-primary) !important;
    box-shadow: none !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-secondary:hover,
.btn-outline-secondary:hover,
.btn-light:hover {
    background: var(--color-surface-subtle) !important;
    color: var(--color-primary) !important;
}

.btn-outline-light {
    background: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-primary) !important;
}

.btn-danger,
.btn-outline-danger:hover {
    background: var(--color-error) !important;
    border-color: var(--color-error) !important;
    color: #FFFFFF !important;
}

.btn-success,
.btn-outline-success:hover {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: #FFFFFF !important;
}

.btn-warning,
.btn-outline-warning:hover {
    background: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    color: #FFFFFF !important;
}

.form-control,
.form-select,
.public-form-input,
.portfolio-correlation-weight-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
select,
textarea {
    border-color: var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-primary) !important;
    min-height: 42px;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
.public-form-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14) !important;
}

.form-label,
label {
    color: var(--color-text-primary);
}

.card,
.dashboard-panel-card,
.dashboard-summary-card,
.capability-item,
.capability-overview-card,
.capability-l3-detail-card,
.capability-domain-accordion-item,
.capability-activity-card,
.filter-panel,
.public-contact-form-card,
.public-contact-side-card,
.metric-benchmark-card,
.relationship-card,
.portfolio-note-panel,
.portfolio-management-panel,
.portfolio-business-case-card,
.portfolio-usecase-tab-panel,
.portfolio-profile-tab-panel,
.usecase-library-sidebar-inner,
.usecase-library-main,
.usecase-library-card,
.usecase-library-empty,
.modal-content {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.public-home-hero-image-shell,
.public-about-hero-image-shell,
.public-decision-image-shell,
.usecase-hero,
.capability-model-hero,
.dashboard-hero,
.work-page-header,
.public-page-hero,
.usecase-library-hero {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--color-text-primary) !important;
}

.usecase-hero .text-white,
.usecase-hero .text-white-50,
.capability-model-hero .text-white,
.capability-model-hero .text-white-50,
.dashboard-hero .text-white,
.dashboard-hero .text-white-50,
.usecase-library-hero .text-white,
.usecase-library-hero-copy p {
    color: var(--color-text-secondary) !important;
}

.public-hero-title,
.public-page-title {
    max-width: 18ch;
    font-size: clamp(2rem, 4vw, 3.25rem) !important;
    line-height: 1.08 !important;
}

.public-kicker,
.portal-kicker,
.portfolio-section-kicker {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
}

.badge,
.pill-label,
.value-mechanism-badge,
.capability-inline-badge,
.portfolio-correlation-badge,
.usecase-library-chip,
.usecase-library-metric-pill,
.portfolio-business-case-meta-pill {
    background: var(--color-surface-subtle) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-full) !important;
    color: var(--color-text-secondary) !important;
    font-weight: 500 !important;
}

.alert,
.alert-light {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-primary) !important;
}

.alert-success {
    background: var(--color-success-soft) !important;
    border-color: rgba(22, 163, 74, 0.28) !important;
    color: var(--color-success-strong) !important;
}

.alert-warning {
    background: var(--color-warning-soft) !important;
    border-color: rgba(217, 119, 6, 0.3) !important;
    color: var(--color-warning-strong) !important;
}

.alert-danger {
    background: var(--color-error-soft) !important;
    border-color: rgba(220, 38, 38, 0.26) !important;
    color: var(--color-error-strong) !important;
}

.alert-info {
    background: #F0F9FF !important;
    border-color: rgba(2, 132, 199, 0.28) !important;
    color: var(--color-info-strong) !important;
}

.table,
.usecase-library-table,
.portfolio-correlation-table {
    background: var(--color-surface) !important;
    color: var(--color-text-primary);
}

.table th,
.usecase-library-table thead th,
.portfolio-correlation-table thead th {
    background: var(--color-surface-subtle) !important;
    color: var(--color-text-secondary) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
}

.table td,
.table th,
.usecase-library-table td,
.usecase-library-table th,
.portfolio-correlation-table td,
.portfolio-correlation-table th {
    border-color: var(--color-border) !important;
}

.modal {
    background: rgba(17, 24, 39, 0.48) !important;
}

.modal-content {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--color-border) !important;
}

.accordion-item {
    border-color: var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
}

.accordion-button {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
}

.accordion-button:not(.collapsed) {
    background: var(--color-surface-subtle) !important;
}

.usecase-library-layout {
    gap: var(--space-lg) !important;
}

.usecase-library-sidebar-inner {
    top: 6rem;
}

.usecase-library-filter-title {
    color: var(--color-text-primary) !important;
    font-weight: 600 !important;
}

.usecase-library-filter-options {
    max-height: 260px;
}

.usecase-library-check {
    color: var(--color-text-secondary) !important;
    font-size: 14px;
}

.usecase-library-card-grid {
    gap: var(--space-md) !important;
}

.usecase-library-card {
    gap: var(--space-md) !important;
    padding: var(--space-md) !important;
}

.usecase-library-card-title {
    font-size: 18px !important;
    line-height: 1.35 !important;
}

.usecase-library-toolbar {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-md);
}

.dashboard-summary-grid,
.capability-grid,
.portfolio-overview-grid {
    gap: var(--space-lg) !important;
}

.portfolio-correlation-risk-high,
.relationship-badge-critical,
.relationship-badge-high {
    background: var(--color-error-soft) !important;
    color: var(--color-error-strong) !important;
}

.portfolio-correlation-risk-moderate,
.relationship-badge-supporting,
.relationship-badge-medium {
    background: var(--color-warning-soft) !important;
    color: var(--color-warning-strong) !important;
}

.portfolio-correlation-risk-low,
.relationship-badge-core,
.relationship-badge-low {
    background: var(--color-success-soft) !important;
    color: var(--color-success-strong) !important;
}

footer {
    background: var(--color-surface) !important;
    border-top: 1px solid var(--color-border) !important;
    color: var(--color-text-muted) !important;
}

/* App top navigation: no Bootstrap dependency. */
.app-topbar {
    background: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm) !important;
    color: var(--color-text-primary);
    position: relative;
    z-index: 80;
}

.app-topbar-inner {
    display: flex !important;
    align-items: center;
    width: min(100% - 48px, 1200px);
    min-height: 68px;
    margin-inline: auto;
    gap: var(--space-lg);
}

.app-brand {
    align-items: center;
    color: var(--color-text-primary) !important;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.app-brand img {
    display: block;
    height: 92px;
    max-width: none;
    object-fit: contain;
    object-position: left center;
    width: 383px;
}

@media (max-width: 760px) {
    .app-brand img {
        height: 62px;
        width: 258px;
    }
}

.app-main-nav {
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
    gap: var(--space-lg);
    justify-content: space-between;
}

.app-main-nav-list {
    display: flex !important;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-main-nav-link {
    align-items: center;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary) !important;
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    min-height: 38px;
    padding: 8px 12px;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
    white-space: nowrap;
}

.app-main-nav-link:hover,
.app-main-nav-link:focus,
.app-main-nav-link.is-active {
    background: var(--color-surface-subtle);
    color: var(--color-primary) !important;
}

.app-topbar-actions {
    align-items: center;
    display: flex;
    gap: var(--space-sm);
}

.app-menu-toggle {
    align-items: center;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    display: none;
    height: 42px;
    justify-content: center;
    margin-left: auto;
    width: 42px;
}

.app-menu-toggle-icon {
    border-bottom: 2px solid currentColor;
    border-top: 2px solid currentColor;
    height: 14px;
    position: relative;
    width: 18px;
}

.app-menu-toggle-icon::before {
    border-top: 2px solid currentColor;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.app-account-link {
    color: var(--color-text-secondary) !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.app-account-link:hover,
.app-account-link:focus {
    color: var(--color-primary) !important;
}

@media (max-width: 760px) {
    .app-topbar-inner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--space-sm);
        min-height: 62px;
        padding-block: var(--space-sm);
        width: min(100% - 32px, 1200px);
    }

    .app-menu-toggle {
        display: inline-flex;
    }

    .app-main-nav {
        display: none !important;
        flex-basis: 100%;
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
    }

    .app-main-nav.is-open {
        display: grid !important;
    }

    .app-main-nav-list {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .app-main-nav-link {
        width: 100%;
    }

    .app-topbar-actions {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .app-topbar-actions .btn {
        width: 100%;
    }
}

/* App Styleguide 2026 update: blue-led semantic color system. */
body {
    background:
        radial-gradient(circle at 8% 0%, rgba(14, 165, 233, 0.08), transparent 28rem),
        linear-gradient(180deg, #FFFFFF 0%, var(--color-bg) 18rem) !important;
    color: var(--color-text-primary);
}

:focus-visible {
    outline-color: var(--color-primary) !important;
}

.app-topbar {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
}

.app-brand::before {
    content: none;
}

.app-main-nav-link:hover,
.app-main-nav-link:focus,
.app-main-nav-link.is-active,
.customer-subnav .nav-link:hover,
.customer-subnav .nav-link:focus,
.customer-subnav .nav-link.active {
    background: var(--color-surface-blue) !important;
    color: var(--color-primary) !important;
}

.btn-primary,
.btn-dark,
.usecase-library-card-actions .btn.is-active,
.usecase-library-row-actions .btn.is-active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-dark:hover,
.btn-dark:focus {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn-outline-primary {
    background: var(--color-surface-blue) !important;
    border-color: rgba(29, 78, 216, 0.24) !important;
    color: var(--color-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: #DBEAFE !important;
    border-color: rgba(29, 78, 216, 0.36) !important;
}

.btn-success,
.btn-outline-success:hover {
    background: var(--color-success) !important;
    border-color: var(--color-success) !important;
}

.btn-warning,
.btn-outline-warning:hover {
    background: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    color: #FFFFFF !important;
}

.btn-danger,
.btn-outline-danger:hover {
    background: var(--color-error) !important;
    border-color: var(--color-error) !important;
}

.btn-ai,
.ai-action-button,
[data-ai-action] {
    background: var(--color-ai-accent) !important;
    border-color: var(--color-ai-accent) !important;
    color: #FFFFFF !important;
}

.card,
.dashboard-panel-card,
.dashboard-summary-card,
.capability-item,
.capability-overview-card,
.capability-l3-detail-card,
.capability-domain-accordion-item,
.capability-activity-card,
.filter-panel,
.public-contact-form-card,
.public-contact-side-card,
.metric-benchmark-card,
.relationship-card,
.portfolio-note-panel,
.portfolio-management-panel,
.portfolio-business-case-card,
.portfolio-usecase-tab-panel,
.portfolio-profile-tab-panel,
.usecase-library-sidebar-inner,
.usecase-library-main,
.usecase-library-card,
.usecase-library-empty,
.modal-content {
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.dashboard-summary-card,
.metric-benchmark-card,
.usecase-library-card,
.portfolio-business-case-card,
.capability-activity-card {
    position: relative;
}

.dashboard-summary-card::before,
.metric-benchmark-card::before,
.usecase-library-card::before,
.portfolio-business-case-card::before,
.capability-activity-card::before {
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary-accent));
    border-radius: var(--radius-full);
    content: "";
    inset: var(--space-md) auto var(--space-md) 0;
    position: absolute;
    width: 3px;
}

.public-home-hero-image-shell,
.public-about-hero-image-shell,
.public-decision-image-shell,
.usecase-hero,
.capability-model-hero,
.dashboard-hero,
.work-page-header,
.public-page-hero,
.usecase-library-hero {
    background:
        linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.96)) !important;
    border-color: var(--color-border) !important;
}

.usecase-library-hero {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.16), transparent 18rem),
        linear-gradient(135deg, var(--color-surface-blue), #FFFFFF) !important;
}

.public-kicker,
.portal-kicker,
.portfolio-section-kicker,
.usecase-library-sidebar-kicker {
    color: var(--color-primary) !important;
}

.badge,
.pill-label,
.value-mechanism-badge,
.capability-inline-badge,
.portfolio-correlation-badge,
.usecase-library-chip,
.usecase-library-metric-pill,
.portfolio-business-case-meta-pill {
    background: var(--color-surface-blue) !important;
    border-color: rgba(29, 78, 216, 0.18) !important;
    color: var(--color-primary) !important;
}

.alert-info,
.info-card {
    background: var(--color-surface-cyan) !important;
    border-color: rgba(14, 165, 233, 0.24) !important;
    color: var(--color-info-strong) !important;
}

.alert-success,
.portfolio-correlation-risk-low,
.relationship-badge-core,
.relationship-badge-low,
.usecase-library-metric-pill.is-high {
    background: #F0FDFA !important;
    border-color: rgba(20, 184, 166, 0.28) !important;
    color: #0F766E !important;
}

.alert-warning,
.portfolio-correlation-risk-moderate,
.relationship-badge-supporting,
.relationship-badge-medium,
.usecase-library-metric-pill.is-medium,
.usecase-library-metric-pill.is-mid {
    background: var(--color-warning-soft) !important;
    border-color: rgba(245, 158, 11, 0.32) !important;
    color: var(--color-warning-strong) !important;
}

.alert-danger,
.portfolio-correlation-risk-high,
.relationship-badge-critical,
.relationship-badge-high,
.usecase-library-metric-pill.is-low {
    background: var(--color-error-soft) !important;
    border-color: rgba(239, 68, 68, 0.28) !important;
    color: var(--color-error-strong) !important;
}

.ai-insight-card,
.ai-impact-panel,
.dashboard-next-action-card,
.capability-context-role-card:has(.relationship-badge-automation),
.portfolio-business-case-card:has([data-business-case-improvement]) {
    background: var(--color-surface-violet) !important;
    border-color: rgba(124, 58, 237, 0.22) !important;
}

.ai-impact-level,
.ai-impact-score-ring,
.portfolio-business-case-meta-pill[data-ai],
.usecase-library-metric-pill.is-priority {
    background: var(--color-surface-violet) !important;
    border-color: rgba(124, 58, 237, 0.22) !important;
    color: var(--color-ai-accent) !important;
}

.table tbody tr:nth-child(even),
.usecase-library-table tbody tr:nth-child(even),
.portfolio-correlation-table tbody tr:nth-child(even) {
    background: rgba(248, 250, 252, 0.72);
}

.table tbody tr:hover,
.usecase-library-table tbody tr:hover,
.portfolio-correlation-table tbody tr:hover {
    background: var(--color-surface-blue) !important;
}

.form-control:focus,
.form-select:focus,
.public-form-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14) !important;
}

.usecase-library-filter-title:hover,
.usecase-library-filter-more-toggle,
.portfolio-usecase-detail-link,
.capability-context-detail-button,
.job-role-usecase-detail-button {
    color: var(--color-primary) !important;
}

.usecase-library-sidebar-inner {
    border-top: 4px solid var(--color-primary) !important;
}

.usecase-library-main {
    border-top: 4px solid var(--color-secondary-accent) !important;
}

.customer-subnav {
    border-top: 1px solid rgba(29, 78, 216, 0.08);
}

.bg-light {
    background: var(--color-bg) !important;
}

/* App Styleguide 2026 modern minimal */
body,
.bg-light {
    background: var(--color-bg) !important;
    color: var(--color-text-primary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.dashboard-hero-title,
.usecase-library-hero-copy h1,
.public-page-title,
.public-section-title {
    color: var(--color-text-primary);
    font-weight: 650;
    letter-spacing: 0;
}

p,
.text-muted,
.dashboard-hero-copy,
.dashboard-summary-meta,
.usecase-library-card-copy,
.usecase-library-row-copy,
.usecase-library-matrix-copy,
.usecase-library-detail p {
    color: var(--color-text-secondary) !important;
}

.btn,
button,
.form-control,
.form-select,
.card,
.modal-content {
    border-radius: var(--radius-md) !important;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:first-child:active,
.usecase-library-card-actions .btn:first-child,
.public-contact-submit {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 8px 18px rgba(30, 91, 255, 0.18) !important;
}

.btn-primary:hover,
.usecase-library-card-actions .btn:first-child:hover,
.public-contact-submit:hover {
    background: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.btn-outline-primary,
.btn-outline-light,
.usecase-library-ghost-action {
    background: #FFFFFF !important;
    border-color: rgba(30, 91, 255, 0.22) !important;
    color: var(--color-primary) !important;
}

.btn-outline-primary:hover,
.btn-outline-light:hover,
.usecase-library-ghost-action:hover {
    background: var(--color-surface-blue) !important;
    border-color: rgba(30, 91, 255, 0.34) !important;
    color: var(--color-primary-hover) !important;
}

.app-topbar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid rgba(220, 229, 245, 0.86) !important;
    box-shadow: 0 8px 24px rgba(11, 31, 94, 0.05) !important;
}

.app-brand,
.app-main-nav-link,
.app-account-link {
    color: var(--color-text-primary) !important;
}

.app-main-nav-link:hover,
.app-main-nav-link.active,
.customer-subnav .nav-link:hover,
.customer-subnav .nav-link.active {
    background: var(--color-surface-blue) !important;
    color: var(--color-primary) !important;
}

.app-topbar-actions .btn {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #FFFFFF !important;
}

.card,
.dashboard-panel-card,
.dashboard-summary-card,
.capability-item,
.capability-overview-card,
.capability-l3-detail-card,
.capability-domain-accordion-item,
.capability-activity-card,
.filter-panel,
.public-contact-form-card,
.public-contact-side-card,
.metric-benchmark-card,
.relationship-card,
.portfolio-note-panel,
.portfolio-management-panel,
.portfolio-business-case-card,
.portfolio-usecase-tab-panel,
.portfolio-profile-tab-panel,
.usecase-library-sidebar-inner,
.usecase-library-main,
.usecase-library-card,
.usecase-library-empty,
.modal-content {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.dashboard-summary-card::before,
.metric-benchmark-card::before,
.usecase-library-card::before,
.portfolio-business-case-card::before,
.capability-activity-card::before {
    content: none !important;
    display: none !important;
}

.dashboard-hero,
.usecase-library-hero {
    background:
        linear-gradient(135deg, rgba(11, 31, 94, 0.96), rgba(30, 91, 255, 0.94)) !important;
    border: 0 !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    color: #FFFFFF !important;
    overflow: hidden;
}

.dashboard-hero {
    min-height: clamp(360px, 40vh, 520px);
    padding: clamp(2rem, 5vw, 4rem) !important;
}

.dashboard-hero-title,
.dashboard-hero-copy,
.dashboard-hero-subtle,
.dashboard-hero .text-white,
.dashboard-hero .text-white-50,
.usecase-library-hero-copy h1,
.usecase-library-hero-copy p,
.usecase-library-hero .text-white,
.usecase-library-hero .text-white-50 {
    color: #FFFFFF !important;
}

.dashboard-hero-copy,
.usecase-library-hero-copy p {
    opacity: 0.82;
    max-width: 64ch;
}

.dashboard-hero-action-panel {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: none !important;
    backdrop-filter: blur(14px);
}

.dashboard-hero-action-title {
    color: #FFFFFF !important;
}

.dashboard-summary-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin-bottom: 32px !important;
}

.dashboard-summary-grid .dashboard-summary-card:nth-child(n + 4) {
    display: none !important;
}

.dashboard-summary-card {
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
}

.dashboard-summary-label {
    color: var(--color-primary) !important;
    font-size: 0.78rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.02em !important;
}

.dashboard-summary-value {
    color: var(--color-text-primary) !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 650 !important;
}

.dashboard-panel-card,
.dashboard-next-action-card,
.ai-insight-card,
.ai-impact-panel {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.ai-insight-card,
.ai-impact-panel,
.dashboard-next-action-card,
.capability-context-role-card:has(.relationship-badge-automation),
.portfolio-business-case-card:has([data-business-case-improvement]) {
    background: #FFFFFF !important;
    border-color: var(--color-border) !important;
}

.usecase-library-shell {
    gap: 32px !important;
}

.usecase-library-hero {
    min-height: clamp(320px, 38vh, 480px);
    padding: clamp(2rem, 5vw, 4rem) !important;
}

.usecase-library-search {
    max-width: 760px;
}

.usecase-library-search .form-control {
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px rgba(11, 31, 94, 0.16) !important;
    color: var(--color-text-primary) !important;
    font-size: 1rem !important;
    min-height: 58px;
    padding-left: 1.25rem !important;
}

.usecase-library-layout,
div.usecase-library-layout[style] {
    display: grid !important;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

.usecase-library-sidebar,
.usecase-library-sidebar.collapse,
.usecase-library-sidebar.collapse:not(.show) {
    display: block !important;
    width: auto !important;
}

.usecase-library-sidebar-inner {
    border-top: 0 !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
}

.usecase-library-sidebar h2 {
    color: var(--color-text-primary) !important;
    font-size: 1.05rem !important;
    font-weight: 650 !important;
}

.usecase-library-sidebar-kicker {
    color: var(--color-primary) !important;
    letter-spacing: 0.08em !important;
}

.usecase-library-filter-group {
    border-color: rgba(220, 229, 245, 0.9) !important;
    padding-block: 18px !important;
}

.usecase-library-filter-title {
    color: var(--color-text-primary) !important;
    font-weight: 650 !important;
}

.usecase-library-check {
    color: var(--color-text-secondary) !important;
    min-height: 32px;
}

.usecase-library-main {
    border-top: 0 !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
}

.usecase-library-toolbar {
    gap: 18px !important;
    margin-bottom: 24px !important;
}

.usecase-library-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.usecase-library-card {
    border-radius: var(--radius-lg) !important;
    min-height: 280px;
    padding: 24px !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.usecase-library-card:hover {
    border-color: rgba(30, 91, 255, 0.34) !important;
    box-shadow: var(--shadow-md) !important;
    transform: translateY(-2px);
}

.usecase-library-card-title {
    color: var(--color-text-primary) !important;
    font-size: 1.15rem !important;
    font-weight: 650 !important;
}

.badge,
.pill-label,
.value-mechanism-badge,
.capability-inline-badge,
.portfolio-correlation-badge,
.usecase-library-chip,
.usecase-library-metric-pill,
.portfolio-business-case-meta-pill {
    background: var(--color-surface-blue) !important;
    border-color: rgba(30, 91, 255, 0.16) !important;
    color: var(--color-primary) !important;
}

.alert-success,
.portfolio-correlation-risk-low,
.relationship-badge-core,
.relationship-badge-low,
.usecase-library-metric-pill.is-high {
    background: var(--color-success-soft) !important;
    border-color: rgba(22, 163, 74, 0.22) !important;
    color: var(--color-success) !important;
}

.alert-warning,
.portfolio-correlation-risk-moderate,
.relationship-badge-supporting,
.relationship-badge-medium,
.usecase-library-metric-pill.is-medium,
.usecase-library-metric-pill.is-mid {
    background: var(--color-warning-soft) !important;
    border-color: rgba(245, 158, 11, 0.26) !important;
    color: var(--color-warning-strong) !important;
}

.alert-danger,
.portfolio-correlation-risk-high,
.relationship-badge-critical,
.relationship-badge-high,
.usecase-library-metric-pill.is-low {
    background: var(--color-error-soft) !important;
    border-color: rgba(220, 38, 38, 0.24) !important;
    color: var(--color-error) !important;
}

.ai-impact-level,
.ai-impact-score-ring,
.portfolio-business-case-meta-pill[data-ai],
.usecase-library-metric-pill.is-priority {
    background: var(--color-surface-violet) !important;
    border-color: rgba(124, 58, 237, 0.18) !important;
    color: var(--color-ai-accent) !important;
}

.public-home-hero-image-shell,
.public-about-hero-image-shell,
.public-decision-image-shell,
.usecase-hero,
.capability-model-hero,
.work-page-header,
.public-page-hero {
    background: linear-gradient(135deg, var(--color-surface-blue), #FFFFFF) !important;
    border-color: var(--color-border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.table,
.usecase-library-table,
.portfolio-correlation-table {
    border-color: var(--color-border) !important;
}

.table thead th,
.usecase-library-table thead th,
.portfolio-correlation-table thead th {
    background: #FFFFFF !important;
    color: var(--color-text-primary) !important;
    font-weight: 650 !important;
}

.table tbody tr:nth-child(even),
.usecase-library-table tbody tr:nth-child(even),
.portfolio-correlation-table tbody tr:nth-child(even) {
    background: rgba(246, 249, 255, 0.72) !important;
}

.form-control:focus,
.form-select:focus,
.public-form-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(30, 91, 255, 0.14) !important;
}

@media (max-width: 991.98px) {
    .dashboard-summary-grid,
    .usecase-library-card-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 760px) {
    .dashboard-hero,
    .usecase-library-hero {
        border-radius: 0 !important;
        margin-left: calc(var(--space-md, 1rem) * -1);
        margin-right: calc(var(--space-md, 1rem) * -1);
        min-height: auto;
    }

    .usecase-library-layout,
    div.usecase-library-layout[style] {
        grid-template-columns: 1fr !important;
    }

    .usecase-library-sidebar,
    .usecase-library-sidebar.collapse,
    .usecase-library-sidebar.collapse:not(.show),
    .usecase-library-main {
        width: 100% !important;
    }
}

/* App Styleguide 2026 premium modern update */
body,
.bg-light {
    background:
        radial-gradient(circle at 14% -10%, rgba(79, 140, 255, 0.13), transparent 28rem),
        linear-gradient(180deg, var(--color-bg) 0%, #FFFFFF 42%, var(--color-bg) 100%) !important;
}

.container,
.container-fluid {
    --bs-gutter-x: clamp(1.5rem, 3vw, 3rem);
}

main,
.public-section,
.usecase-library-shell,
.dashboard-page,
.work-page-shell {
    row-gap: clamp(2.5rem, 5vw, 3.5rem);
}

h1,
.dashboard-hero-title,
.usecase-library-hero-copy h1 {
    font-size: clamp(2rem, 4vw, 2.5rem) !important;
    line-height: 1.06 !important;
    font-weight: 650 !important;
}

h2,
.public-section-title,
.dashboard-panel-title,
.usecase-library-group-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
    line-height: 1.18 !important;
    font-weight: 650 !important;
}

p,
.dashboard-hero-copy,
.usecase-library-hero-copy p,
.usecase-library-card-copy,
.dashboard-summary-meta {
    line-height: 1.68 !important;
}

.app-topbar {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(221, 231, 247, 0.84) !important;
}

.app-topbar-inner {
    min-height: 74px;
}

.app-brand {
    font-weight: 650 !important;
    letter-spacing: 0 !important;
}

.app-main-nav-list {
    gap: 0.25rem !important;
}

.app-main-nav-link,
.customer-subnav .nav-link {
    border-radius: 999px !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
}

.customer-subnav {
    background: rgba(255, 255, 255, 0.88) !important;
    border-color: rgba(221, 231, 247, 0.86) !important;
}

.card,
.dashboard-panel-card,
.dashboard-summary-card,
.dashboard-next-action-card,
.capability-item,
.capability-overview-card,
.capability-l3-detail-card,
.capability-domain-accordion-item,
.capability-activity-card,
.filter-panel,
.public-contact-form-card,
.public-contact-side-card,
.metric-benchmark-card,
.relationship-card,
.portfolio-note-panel,
.portfolio-management-panel,
.portfolio-business-case-card,
.portfolio-usecase-tab-panel,
.portfolio-profile-tab-panel,
.usecase-library-sidebar-inner,
.usecase-library-main,
.usecase-library-card,
.usecase-library-empty,
.modal-content {
    border-color: rgba(221, 231, 247, 0.94) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.dashboard-hero,
.usecase-library-hero {
    background:
        radial-gradient(circle at 88% 18%, rgba(18, 179, 199, 0.30), transparent 16rem),
        radial-gradient(circle at 16% 8%, rgba(79, 140, 255, 0.28), transparent 18rem),
        linear-gradient(135deg, var(--color-text-primary) 0%, #123B99 48%, var(--color-primary) 100%) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dashboard-hero {
    min-height: clamp(380px, 42vh, 540px);
}

.dashboard-hero-main {
    gap: clamp(1.5rem, 4vw, 3rem) !important;
}

.dashboard-hero-action-panel {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 18px 44px rgba(7, 26, 61, 0.12) !important;
}

.dashboard-hero-action-panel .btn:not(.btn-primary),
.dashboard-hero .btn-outline-light {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: var(--color-primary) !important;
}

.dashboard-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(1.5rem, 2vw, 2rem) !important;
    margin-top: -3rem !important;
    position: relative;
    z-index: 2;
}

.dashboard-summary-card {
    min-height: 168px;
    padding: 28px !important;
}

.dashboard-summary-card:hover,
.dashboard-panel-card:hover,
.usecase-library-card:hover,
.portfolio-business-case-card:hover {
    border-color: rgba(30, 91, 255, 0.26) !important;
    box-shadow: var(--shadow-md) !important;
}

.dashboard-summary-label,
.usecase-library-card-label,
.capability-required-parent,
.portfolio-section-kicker,
.public-kicker,
.portal-kicker,
.usecase-library-sidebar-kicker {
    color: var(--color-primary) !important;
    font-size: 0.76rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
}

.dashboard-summary-value {
    color: var(--color-text-primary) !important;
}

.dashboard-panel-card,
.dashboard-next-action-card,
.ai-insight-card,
.ai-impact-panel {
    padding: clamp(1.25rem, 2vw, 1.75rem) !important;
}

.ai-insight-card,
.ai-recommendation-card,
.dashboard-next-action-card:has([data-ai-action]),
.portfolio-business-case-card:has([data-business-case-improvement]) {
    background:
        linear-gradient(180deg, rgba(245, 243, 255, 0.82), #FFFFFF) !important;
    border-left: 3px solid rgba(124, 58, 237, 0.52) !important;
}

.usecase-library-hero {
    min-height: clamp(360px, 42vh, 520px);
}

.usecase-library-hero-copy {
    max-width: 760px;
}

.usecase-library-search {
    margin-top: 1.5rem;
    max-width: 860px;
    position: relative;
    z-index: 3;
}

.usecase-library-search .form-control {
    border-radius: 20px !important;
    box-shadow: 0 22px 54px rgba(7, 26, 61, 0.20) !important;
    font-size: 1.05rem !important;
    min-height: 68px;
    padding-inline: 1.5rem !important;
}

.usecase-library-layout,
div.usecase-library-layout[style] {
    grid-template-columns: minmax(230px, 276px) minmax(0, 1fr) !important;
    gap: clamp(1.5rem, 2vw, 2rem) !important;
}

.usecase-library-sidebar-inner {
    padding: 22px !important;
    position: sticky;
    top: 96px;
}

.usecase-library-sidebar-head {
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
}

.usecase-library-filter-groups {
    gap: 0 !important;
}

.usecase-library-filter-group {
    padding-block: 14px !important;
}

.usecase-library-filter-options {
    gap: 0.35rem !important;
}

.usecase-library-check {
    border-radius: 999px;
    font-size: 0.86rem !important;
    min-height: 30px;
    padding: 0.25rem 0.45rem;
}

.usecase-library-check:hover {
    background: var(--color-surface-blue);
    color: var(--color-primary) !important;
}

.usecase-library-main {
    padding: clamp(1.25rem, 2vw, 1.75rem) !important;
}

.usecase-library-toolbar {
    align-items: center !important;
    border-bottom: 1px solid rgba(221, 231, 247, 0.8);
    padding-bottom: 1rem;
}

.usecase-library-selected-chips {
    gap: 0.5rem !important;
}

.usecase-library-chip {
    border-radius: 999px !important;
    font-size: 0.78rem !important;
}

.usecase-library-card-grid {
    gap: clamp(1.5rem, 2vw, 2rem) !important;
}

.usecase-library-card {
    min-height: 308px;
    padding: 28px !important;
}

.usecase-library-card {
    display: flex !important;
    flex-direction: column;
    gap: 1rem;
}

.usecase-library-card-copy {
    flex: 0 0 auto;
    line-height: 1.58 !important;
    max-height: calc(1.58em * 6);
    overflow: hidden;
}

.usecase-library-card-value {
    margin-top: 0 !important;
}

.usecase-library-card-title {
    font-size: clamp(1.15rem, 1.5vw, 1.32rem) !important;
    line-height: 1.2 !important;
}

.usecase-library-card-meta,
.usecase-library-card-actions,
.usecase-library-detail-actions,
.usecase-library-related-list {
    gap: 0.65rem !important;
}

.usecase-library-metric-pill,
.pill-label,
.badge {
    border-radius: 999px !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    padding: 0.42rem 0.7rem !important;
}

.usecase-library-card-actions {
    margin-top: auto;
}

.usecase-library-card-actions .btn:first-child {
    flex: 0 0 auto !important;
    min-width: 148px;
}

.usecase-library-table-wrap,
.table-responsive {
    border-radius: var(--radius-lg) !important;
}

.table,
.usecase-library-table,
.portfolio-correlation-table {
    box-shadow: none !important;
}

.table td,
.table th,
.usecase-library-table td,
.usecase-library-table th,
.portfolio-correlation-table td,
.portfolio-correlation-table th {
    border-color: rgba(221, 231, 247, 0.75) !important;
    padding-block: 0.9rem !important;
}

.btn {
    min-height: 42px;
    padding-inline: 1rem !important;
}

.btn-sm {
    min-height: 34px;
    padding-inline: 0.8rem !important;
}

.btn-danger,
.btn-outline-danger:hover {
    background: var(--color-error) !important;
    border-color: var(--color-error) !important;
}

.alert-info,
.info-card {
    background: var(--color-surface-cyan) !important;
    border-color: rgba(18, 179, 199, 0.24) !important;
    color: var(--color-info-strong) !important;
}

.public-home-hero-image-shell,
.public-about-hero-image-shell,
.public-decision-image-shell,
.usecase-hero,
.capability-model-hero,
.work-page-header,
.public-page-hero {
    background:
        radial-gradient(circle at 80% 10%, rgba(79, 140, 255, 0.18), transparent 16rem),
        linear-gradient(135deg, #FFFFFF 0%, var(--color-surface-blue) 100%) !important;
    border-radius: var(--radius-xl) !important;
}

@media (max-width: 991.98px) {
    .dashboard-summary-grid {
        margin-top: 0 !important;
    }

    .usecase-library-sidebar-inner {
        position: static;
        top: auto;
    }
}

@media (max-width: 760px) {
    .app-topbar-inner {
        min-height: 64px;
    }

    .dashboard-hero,
    .usecase-library-hero {
        border-radius: 0 !important;
        min-height: auto;
    }

    .usecase-library-search .form-control {
        min-height: 58px;
    }

    .usecase-library-layout,
    div.usecase-library-layout[style] {
        grid-template-columns: 1fr !important;
    }

    .usecase-library-sidebar,
    .usecase-library-sidebar.collapse,
    .usecase-library-sidebar.collapse:not(.show),
    .usecase-library-main {
        width: 100% !important;
    }
}

/* Public first blocks: keep the premium surface, remove visible framing. */
.public-page-hero,
.public-page-hero .public-about-hero-image-shell,
.public-page-hero .public-service-carousel,
.public-page-hero .public-service-carousel-inner,
.public-page-hero .public-service-carousel-image-frame {
    border: 0 !important;
    border-color: transparent !important;
}

.public-page-hero {
    background: transparent !important;
    box-shadow: none !important;
}

section.public-section:first-of-type .public-contact-form-card,
section.public-section:first-of-type .public-contact-side-card {
    border: 0 !important;
    border-color: transparent !important;
}

/* Public CTA: match the premium dashboard hero language. */
.public-cta-section {
    background:
        radial-gradient(circle at 88% 18%, rgba(18, 179, 199, 0.30), transparent 16rem),
        radial-gradient(circle at 16% 8%, rgba(79, 140, 255, 0.28), transparent 18rem),
        linear-gradient(135deg, var(--color-text-primary) 0%, #123B99 48%, var(--color-primary) 100%) !important;
    border: 0 !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    color: #FFFFFF !important;
    overflow: hidden;
    position: relative;
}

.public-cta-section .public-kicker,
.public-cta-section .public-cta-title,
.public-cta-section .public-cta-copy {
    color: #FFFFFF !important;
}

.public-cta-section .public-cta-copy {
    opacity: 0.82;
}

.public-cta-section .btn-light,
.public-cta-section .btn-outline-light {
    background: rgba(255, 255, 255, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: var(--color-primary) !important;
}

.public-cta-section .btn-light:hover,
.public-cta-section .btn-outline-light:hover {
    background: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: var(--color-primary-hover) !important;
}

/* Work pages start open: no framed hero/card treatment on the first header block. */
.work-page-header {
    background: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.capability-model-work-header {
    align-items: start;
}

.capability-model-work-header .work-page-meta {
    align-self: start;
    padding-top: 0.375rem;
}

.usecase-detail-header,
.usecase-detail-header > div,
.usecase-detail-header h2,
.usecase-detail-header p {
    text-align: left !important;
}

.usecase-hero {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.92), rgba(255, 255, 255, 0.96)) !important;
    border-color: var(--color-border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--color-text-primary) !important;
}

.usecase-hero::before,
.usecase-hero::after {
    display: none !important;
}

.usecase-hero .display-6 {
    color: var(--color-text-primary) !important;
    letter-spacing: 0 !important;
}

.usecase-hero .lead,
.usecase-hero .text-white-50 {
    color: var(--color-text-secondary) !important;
}

.usecase-hero .portal-kicker {
    color: var(--color-primary) !important;
}

.usecase-hero .capability-hero-inline {
    color: var(--color-text-primary) !important;
}

.usecase-hero .capability-hero-inline strong {
    color: var(--color-text-primary) !important;
}

.usecase-hero .capability-hero-chip {
    background: var(--color-surface-blue) !important;
    border-color: rgba(14, 165, 233, 0.20) !important;
    color: var(--color-primary) !important;
}

.usecase-overview-card {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
}

.usecase-overview-card .value-mechanism-badge {
    background: var(--color-surface-blue);
    border-color: rgba(14, 165, 233, 0.16);
    color: var(--color-primary);
}

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

.usecase-hero-actions .btn {
    min-height: 2.65rem;
    width: 100%;
}

.usecase-hero-back-action {
    grid-column: 1 / -1;
}

.usecase-detail-page .portfolio-dimension-tabs {
    background: #FFFFFF !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0.5rem !important;
    gap: 0.25rem !important;
    padding: 0.25rem !important;
}

.usecase-detail-page .portfolio-dimension-tabs .nav-link {
    border-radius: 0.35rem !important;
    color: var(--color-primary-hover) !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    padding: 0.55rem 0.5rem !important;
}

.usecase-detail-page .portfolio-dimension-tabs .nav-link.active {
    background: var(--color-surface-blue) !important;
    color: var(--color-primary-hover) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.usecase-detail-page .nav-tabs,
.usecase-detail-page .portfolio-profile-tabs,
.usecase-detail-page .portfolio-profile-tabs .nav-link,
.usecase-detail-page .portfolio-profile-tabs .nav-link.active {
    border-bottom: 0 !important;
}

.usecase-detail-page .portfolio-profile-tabs {
    background: #FFFFFF !important;
    border: 0 !important;
    border-radius: 0.5rem !important;
    padding: 0.25rem !important;
}

.usecase-detail-page .portfolio-profile-tabs .nav-link.active {
    background: var(--color-surface-blue) !important;
    color: var(--color-primary-hover) !important;
    box-shadow: none !important;
}

.usecase-detail-page .portfolio-profile-tabs .nav-link {
    color: var(--color-primary-hover) !important;
}

.usecase-dimension-rationale {
    background: #FFFFFF;
    border: 1px solid rgba(221, 231, 247, 0.94);
    border-radius: var(--radius-md);
    margin-top: 1rem;
    padding: 1rem;
}

.usecase-dimension-section-label,
.usecase-dimension-explanation summary {
    color: var(--color-text-primary);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.usecase-dimension-section-label {
    margin-bottom: 0.5rem;
}

.usecase-dimension-explanation {
    background: var(--color-surface-subtle);
    border: 1px solid rgba(221, 231, 247, 0.80);
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
}

.usecase-dimension-explanation summary {
    cursor: pointer;
}

.usecase-dimension-explanation .capability-description {
    margin-top: 0.75rem;
}

.usecase-detail-page .usecase-dimension-rationale .usecase-readable-text,
.usecase-detail-page .usecase-dimension-explanation .usecase-readable-text {
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    line-height: 1.55;
}

@media (min-width: 761px) {
    .usecase-library-sidebar {
        align-self: start !important;
        position: sticky !important;
        top: 96px !important;
        z-index: 4;
    }

    .usecase-library-sidebar-inner {
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        position: static !important;
    }
}

@media (max-width: 760px) {
    .usecase-library-sidebar {
        position: static !important;
        top: auto !important;
    }

    .usecase-library-sidebar-inner {
        max-height: none !important;
        overflow: visible !important;
    }
}

.favorites-card-grid {
    align-items: stretch;
}

.favorites-card.usecase-library-card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    display: grid;
    gap: 0.95rem;
    min-height: 308px;
    padding: 28px !important;
}

.favorites-card.usecase-library-card::before {
    content: none !important;
    display: none !important;
}

.favorites-card .usecase-library-card-actions form {
    margin: 0;
    min-width: 0;
}

.favorites-card .usecase-library-card-actions form,
.favorites-card .usecase-library-card-actions form .btn {
    width: 100%;
}

.favorites-card-tabs {
    display: grid;
    gap: 1rem;
}

.favorites-card-tabs .job-role-detail-tab-list {
    background: var(--color-surface-blue) !important;
    border-color: rgba(221, 231, 247, 0.86) !important;
}

.favorites-card-tabs .job-role-detail-tab-panel-1,
.favorites-card-tabs .job-role-detail-tab-panel-2 {
    min-width: 0;
}

.favorites-card-tabs .job-role-detail-tab-panel-1 {
    align-content: start;
}

.capability-linked-card.usecase-library-card {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    display: grid;
    gap: 0.95rem;
    min-height: 0;
    padding: 24px !important;
}

.capability-linked-card.usecase-library-card::before {
    content: none !important;
    display: none !important;
}

.capability-linked-card .usecase-library-card-heading {
    grid-template-rows: 1.1rem auto auto;
}

.capability-linked-card .usecase-library-card-title {
    font-size: 1.08rem !important;
    line-height: 1.22 !important;
}

.capability-linked-card .usecase-library-card-copy {
    -webkit-line-clamp: 5;
}

.capability-linked-card .usecase-library-card-actions {
    margin-top: auto;
}

.capability-linked-card .usecase-library-card-actions .btn:first-child {
    grid-column: 1 / -1;
}

.capability-linked-card .usecase-library-card-actions > .btn:only-child,
.capability-linked-card .usecase-library-card-actions > a:only-child {
    grid-column: 1 / -1;
    width: 100%;
}

.capability-linked-card .relationship-badge {
    position: static;
}

.ai-impact-panel {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-left-width: 1px !important;
    border-left-color: var(--color-border) !important;
    box-shadow: var(--shadow-sm) !important;
}

.ai-impact-panel .ai-impact-hero,
.ai-impact-panel .ai-impact-mix-card,
.ai-impact-panel .ai-impact-full-section,
.ai-impact-panel .ai-impact-grid section {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
}

.ai-impact-panel .ai-impact-level {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--color-primary) !important;
}

.ai-impact-panel .ai-impact-score-ring {
    background:
        radial-gradient(circle at center, var(--color-surface) 0 57%, transparent 58%),
        conic-gradient(var(--color-primary) 0 var(--impact-score), var(--color-border) var(--impact-score) 360deg) !important;
    color: var(--color-primary) !important;
}

.portfolio-linked-tabbar {
    border-bottom: 0 !important;
}

.portfolio-top-tabs.nav-tabs,
.portfolio-usecase-tabs.nav-tabs,
.portfolio-profile-tabs.nav-tabs,
.portfolio-dimension-tabs.nav-tabs {
    background: var(--color-surface-blue) !important;
    border: 1px solid rgba(221, 231, 247, 0.86) !important;
    border-bottom: 1px solid rgba(221, 231, 247, 0.86) !important;
    border-radius: var(--radius-md) !important;
    gap: 0.25rem !important;
    padding: 0.25rem !important;
}

.portfolio-top-tabs.nav-tabs .nav-link,
.portfolio-usecase-tabs.nav-tabs .nav-link,
.portfolio-profile-tabs.nav-tabs .nav-link,
.portfolio-dimension-tabs.nav-tabs .nav-link {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 0 !important;
    border-radius: calc(var(--radius-md) - 2px) !important;
    color: var(--color-text-muted) !important;
    font-weight: 650 !important;
}

.portfolio-top-tabs.nav-tabs .nav-link.active,
.portfolio-usecase-tabs.nav-tabs .nav-link.active,
.portfolio-profile-tabs.nav-tabs .nav-link.active,
.portfolio-dimension-tabs.nav-tabs .nav-link.active {
    background: var(--color-surface) !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: var(--shadow-sm) !important;
    color: var(--color-primary) !important;
}

.portfolio-card-tabbar {
    background: var(--color-surface-blue) !important;
    border: 1px solid rgba(221, 231, 247, 0.86) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.25rem !important;
}

.portfolio-card-tabs.nav-tabs {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.portfolio-business-case-card,
.portfolio-business-case-card:has([data-business-case-improvement]),
.portfolio-data-card,
.portfolio-correlation-card,
.portfolio-dimension-level-card {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    border-left-color: var(--color-border) !important;
    border-left-width: 1px !important;
}

.portfolio-business-case-card::before,
.portfolio-data-card::before,
.portfolio-correlation-card::before,
.portfolio-dimension-level-card::before {
    content: none !important;
    display: none !important;
}

[data-usecase-tab-panel="data"] > .portfolio-data-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.portfolio-dimension-tabs.nav-tabs {
    background: var(--color-surface) !important;
}

.portfolio-dimension-tabs.nav-tabs .nav-link.active {
    background: var(--color-surface-blue) !important;
    box-shadow: none !important;
}

.portfolio-note-panel,
.portfolio-note-card,
.portfolio-note-row,
.portfolio-note-empty {
    background: var(--color-surface) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
}

.portfolio-note-nav-date,
.portfolio-note-radio,
.portfolio-note-preview,
.portfolio-radio-option .form-check-label {
    color: var(--color-text-secondary) !important;
}

.portfolio-note-nav-title {
    color: var(--color-text-primary) !important;
}

.favorite-modal-content {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

.favorite-modal-header {
    align-items: flex-start;
    background: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border) !important;
    gap: 1rem;
    padding: 1.25rem 1.4rem 1.1rem !important;
}

.favorite-modal-header .modal-title {
    color: var(--color-text-primary);
    font-size: 1.08rem;
    font-weight: 750;
}

.favorite-modal-header .text-muted {
    color: var(--color-text-secondary) !important;
    font-size: 0.9rem;
    line-height: 1.5;
}

.favorite-modal-body {
    padding: 1.35rem 1.4rem 1.25rem !important;
}

.favorite-modal-form {
    display: grid;
    gap: 1.1rem;
}

.favorite-modal-selected {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: 0;
    padding: 1rem;
}

.favorite-modal-selected .capability-id {
    color: var(--color-primary);
}

.favorite-modal-selected .capability-name {
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.35;
}

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

.favorite-modal-field {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.favorite-modal-field-wide {
    grid-column: 1 / -1;
}

.favorite-modal-field .form-label {
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
}

.favorite-modal-field .form-select,
.favorite-modal-field .form-control {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    border-radius: calc(var(--radius-md) - 2px);
    color: var(--color-text-primary);
    font-size: 0.9rem;
    min-height: 2.65rem;
}

.favorite-modal-field textarea.form-control {
    min-height: 7rem;
    resize: vertical;
}

.favorite-modal-footer {
    border-top: 1px solid var(--color-border) !important;
    gap: 0.65rem;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 1rem 0 0 !important;
}

@media (max-width: 640px) {
    .favorite-modal-grid {
        grid-template-columns: 1fr;
    }

.favorite-modal-footer .btn {
        width: 100%;
    }
}

.portfolio-add-modal-content {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

.portfolio-add-modal-header {
    align-items: flex-start;
    background: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border) !important;
    gap: 1rem;
    padding: 1.25rem 1.4rem 1.1rem !important;
}

.portfolio-add-modal-header .modal-title {
    color: var(--color-text-primary);
    font-size: 1.08rem;
    font-weight: 750;
}

.portfolio-add-modal-header .text-muted {
    color: var(--color-text-secondary) !important;
    font-size: 0.9rem;
    line-height: 1.5;
}

.portfolio-add-modal-body {
    padding: 1.35rem 1.4rem 1.25rem !important;
}

.portfolio-add-modal-form {
    display: grid;
    gap: 1.1rem;
}

.portfolio-add-selected,
.portfolio-add-section,
.portfolio-add-empty {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 1rem !important;
}

.portfolio-add-selected {
    border-left: 1px solid var(--color-border) !important;
}

.portfolio-add-selected .capability-id,
.portfolio-add-section-title {
    color: var(--color-primary) !important;
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.portfolio-add-selected .capability-name {
    color: var(--color-text-primary);
    font-size: 1rem;
    line-height: 1.35;
}

.portfolio-add-section {
    display: grid;
    gap: 1rem;
}

.portfolio-add-section-head {
    display: grid;
    gap: 0.35rem;
}

.portfolio-add-section-copy {
    color: var(--color-text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

.portfolio-add-grid {
    display: grid;
    gap: 0.9rem;
}

.portfolio-add-grid-decision {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portfolio-add-grid-scores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-add-grid-rationale {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-add-field {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.portfolio-add-field .form-label,
.portfolio-add-grid-scores .form-label {
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
}

.portfolio-add-field .form-select,
.portfolio-add-field .form-control {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    border-radius: calc(var(--radius-md) - 2px);
    color: var(--color-text-primary);
    font-size: 0.9rem;
    min-height: 2.65rem;
}

.portfolio-add-grid-scores .portfolio-range-field {
    background: var(--color-surface-subtle);
    border-color: var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
}

.portfolio-add-field textarea.form-control {
    min-height: 7rem;
    resize: vertical;
}

.portfolio-add-modal-footer {
    border-top: 1px solid var(--color-border) !important;
    gap: 0.65rem;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 1rem 0 0 !important;
}

@media (max-width: 760px) {
    .portfolio-add-grid-decision,
    .portfolio-add-grid-scores,
    .portfolio-add-grid-rationale {
        grid-template-columns: 1fr;
    }

    .portfolio-add-modal-footer .btn {
        width: 100%;
    }
}

.create-portfolio-modal-content {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}

#createPortfolioModal,
#addUseCaseToPortfolioModal {
    z-index: 20000 !important;
}

#createPortfolioModal {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#createPortfolioModal .modal-dialog {
    max-height: calc(100dvh - 2rem);
}

#createPortfolioModal .create-portfolio-modal-content {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 2rem);
}

#createPortfolioModal .create-portfolio-modal-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.create-portfolio-modal-header {
    align-items: flex-start;
    background: var(--color-surface-subtle);
    border-bottom: 1px solid var(--color-border) !important;
    gap: 1rem;
    padding: 1.25rem 1.4rem 1.1rem !important;
}

.create-portfolio-modal-header .modal-title {
    color: var(--color-text-primary);
    font-size: 1.08rem;
    font-weight: 750;
}

.create-portfolio-modal-header .text-muted {
    color: var(--color-text-secondary) !important;
    font-size: 0.9rem;
    line-height: 1.5;
}

.create-portfolio-modal-body {
    padding: 1.35rem 1.4rem 1.25rem !important;
}

.create-portfolio-modal-form {
    display: grid;
    gap: 1.1rem;
}

.create-portfolio-steps {
    margin-bottom: 0 !important;
}

.create-portfolio-step {
    min-height: 0;
}

.create-portfolio-step[data-portfolio-step="1"] {
    display: grid;
    gap: 1rem;
}

.create-portfolio-step[data-portfolio-step="2"] .create-portfolio-section {
    min-height: min(28rem, 52vh);
}

.create-portfolio-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: grid;
    gap: 1rem;
    padding: 1rem;
}

.create-portfolio-section-head {
    display: grid;
    gap: 0.35rem;
}

.create-portfolio-section-title {
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.create-portfolio-section-copy {
    color: var(--color-text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
}

.create-portfolio-grid {
    display: grid;
    gap: 0.9rem;
}

.create-portfolio-grid-setup {
    grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
}

.create-portfolio-field {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.create-portfolio-field .form-label {
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0;
}

.create-portfolio-field .form-select,
.create-portfolio-field .form-control {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    border-radius: calc(var(--radius-md) - 2px);
    color: var(--color-text-primary);
    font-size: 0.9rem;
    min-height: 2.65rem;
}

.create-portfolio-field textarea.form-control {
    min-height: 6.5rem;
    resize: vertical;
}

.create-portfolio-member-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.create-portfolio-member-picker .form-label {
    margin-bottom: 0.4rem;
}

.create-portfolio-member-picker .form-select,
.create-portfolio-member-picker .btn {
    min-height: 2.65rem;
}

.create-portfolio-selected-members-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.2rem;
}

.create-portfolio-selected-members-head span {
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 700;
}

.create-portfolio-selected-members-head strong {
    color: var(--color-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.create-portfolio-selected-members {
    display: grid;
    max-height: min(21rem, 40vh);
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: calc(var(--radius-md) - 2px);
    background: var(--color-surface);
    scrollbar-gutter: stable;
}

.create-portfolio-selected-members > .text-muted {
    padding: 1rem;
}

.create-portfolio-selected-member {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--color-border);
}

.create-portfolio-selected-member:last-child {
    border-bottom: 0;
}

.create-portfolio-selected-member strong,
.create-portfolio-selected-member small {
    display: block;
}

.create-portfolio-selected-member strong {
    color: var(--color-text-primary);
    font-size: 0.84rem;
}

.create-portfolio-selected-member small {
    margin-top: 0.15rem;
    color: var(--color-text-secondary);
    font-size: 0.72rem;
}

.create-portfolio-modal-footer {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    background: #fff !important;
    box-shadow: 0 -8px 20px rgba(15, 35, 55, 0.06);
    border-top: 1px solid var(--color-border) !important;
    gap: 0.65rem;
    justify-content: flex-end;
    margin: 0 !important;
    padding: 1rem 1.4rem !important;
}

.create-portfolio-step-actions {
    display: flex;
    gap: 0.65rem;
}

@media (max-width: 760px) {
    #createPortfolioModal {
        padding: 0.5rem;
    }

    #createPortfolioModal .modal-dialog,
    #createPortfolioModal .create-portfolio-modal-content {
        max-height: calc(100dvh - 1rem);
    }

    .create-portfolio-grid-setup {
        grid-template-columns: 1fr;
    }

    .create-portfolio-member-picker {
        grid-template-columns: 1fr;
    }

    .create-portfolio-member-picker .btn {
        width: 100%;
    }

    .create-portfolio-modal-footer,
    .create-portfolio-step-actions {
        width: 100%;
    }

    .create-portfolio-modal-footer .btn,
    .create-portfolio-step-actions .btn {
        flex: 1 1 0;
        width: 100%;
    }
}

.client-admin-grid {
    display: grid;
    gap: clamp(1.25rem, 2vw, 1.75rem);
}

.client-admin-grid-organization {
    grid-template-columns: minmax(280px, 0.88fr) minmax(0, 1.12fr);
}

.client-admin-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.25rem, 2vw, 1.75rem);
}

.client-admin-panel-wide {
    display: grid;
    gap: 1.25rem;
}

.client-admin-panel-head {
    display: grid;
    gap: 0.4rem;
    margin-bottom: 1.1rem;
}

.client-admin-panel-head h2 {
    color: var(--color-text-primary);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    font-weight: 750;
    letter-spacing: 0;
    line-height: 1.25;
    margin: 0;
}

.client-admin-panel-head p {
    color: var(--color-text-secondary);
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0;
    max-width: 720px;
}

.client-admin-panel-head-row {
    align-items: end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.client-admin-detail-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.client-admin-detail-list div {
    border-top: 1px solid rgba(221, 231, 247, 0.82);
    display: grid;
    gap: 0.35rem;
    padding: 0.95rem 0;
}

.client-admin-detail-list div:first-child {
    border-top: 0;
    padding-top: 0;
}

.client-admin-detail-list div:last-child {
    padding-bottom: 0;
}

.client-admin-detail-list dt,
.client-admin-field .form-label,
.client-admin-field-readonly .form-label {
    color: var(--color-text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.client-admin-detail-list dd {
    color: var(--color-text-secondary);
    font-size: 0.96rem;
    font-weight: 550;
    line-height: 1.45;
    margin: 0;
}

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

.client-admin-form-section {
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 1.6vw, 1.25rem);
}

.client-admin-form-section .client-admin-panel-head {
    margin-bottom: 0;
}

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

.client-admin-field {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.client-admin-field .form-control,
.client-admin-field .form-select {
    background-color: var(--color-surface);
    font-size: 0.92rem;
    min-height: 2.75rem;
}

.client-admin-field .form-text {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin-top: 0;
}

.client-admin-field-readonly {
    align-content: start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.8rem 0.9rem;
}

.client-admin-field-readonly span:last-child {
    color: var(--color-text-secondary);
    font-size: 0.94rem;
    font-weight: 550;
}

.client-admin-security-section {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.client-admin-security-section .client-admin-panel-head {
    max-width: 720px;
}

.client-admin-actions {
    align-items: center;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding-top: 0.15rem;
}

.client-admin-actions-end {
    justify-content: flex-end;
}

.client-admin-actions-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
}

.client-admin-notice {
    align-items: center;
    background: var(--color-surface-blue);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 0.95rem 1rem;
}

.client-admin-muted {
    color: var(--color-text-muted);
    font-size: 0.86rem;
    font-weight: 650;
}

.client-admin-table-wrap {
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.client-admin-table {
    color: var(--color-text-secondary);
}

.client-admin-table thead th {
    background: var(--color-surface-subtle);
    color: var(--color-text-primary);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.client-admin-table tbody td {
    background: var(--color-surface);
    font-size: 0.9rem;
    vertical-align: middle;
}

.client-admin-table-title {
    color: var(--color-text-primary);
    font-weight: 700;
}

.client-admin-status {
    background: var(--color-surface-blue);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 999px;
    color: var(--color-primary);
    display: inline-flex;
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.2;
    padding: 0.38rem 0.65rem;
}

.usecase-library-card-value {
    background: var(--color-surface-blue);
    border-radius: var(--radius-sm);
    clear: both;
    display: block;
    flex: 0 0 auto;
    isolation: isolate;
    margin: 0.1rem 0 1rem;
    overflow: hidden;
    padding: 0.85rem 0.95rem;
    position: relative;
    width: 100%;
}

.usecase-library-card-value-label {
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.usecase-library-card-value p {
    color: var(--color-text-secondary);
    display: block;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
    overflow-wrap: anywhere;
    position: relative;
    word-break: normal;
}

@media (max-width: 900px) {
    .client-admin-grid-organization,
    .client-admin-form-grid {
        grid-template-columns: 1fr;
    }

    .client-admin-panel-head-row,
    .client-admin-security-section,
    .client-admin-actions,
    .client-admin-notice {
        align-items: stretch;
        flex-direction: column;
    }

    .client-admin-panel-head-row .btn,
    .client-admin-security-section .btn,
    .client-admin-actions .btn,
    .client-admin-notice .btn,
    .client-admin-actions-right {
        width: 100%;
    }
}
#aiReadinessModal { --readiness-domain-color: var(--domain-color-1); z-index: 2000 !important; }
#aiReadinessModal .modal-dialog { width: min(100%, 76rem); height: min(50rem, calc(100vh - 2rem)); max-height: calc(100vh - 2rem); }
.ai-readiness-modal { position: relative; z-index: 1; display: grid; grid-template-rows: auto .3rem minmax(0, 1fr) auto; width: 100%; height: 100%; max-height: none; border-radius: 1.25rem; overflow: hidden; }
.ai-readiness-modal .modal-body { min-width: 0; min-height: 0; padding: 1.25rem 1.5rem !important; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.ai-readiness-modal .modal-body > .d-flex { margin-bottom: .75rem !important; }
.ai-readiness-modal .modal-footer { position: relative; z-index: 2; flex: 0 0 auto; min-height: 4rem; padding: .65rem 1.25rem; background: #fff; }
.ai-readiness-modal .modal-footer .btn { min-width: 8rem; justify-content: center; }
.ai-readiness-modal-header { flex: 0 0 auto; padding: .85rem 1.25rem; background: var(--readiness-domain-color); color: #fff; transition: background .2s ease; }
.ai-readiness-modal-header .modal-title { color: #fff !important; }
.ai-readiness-modal-header .btn-close { background: rgba(255,255,255,.94); color: var(--color-text-primary); }
.ai-readiness-header-actions { display: flex; align-items: center; gap: 1rem; }
.ai-readiness-header-progress { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.ai-readiness-header-progress .text-muted { color: rgba(255,255,255,.82) !important; font-size: .68rem; }
.ai-readiness-content-step { display: block; margin-bottom: .25rem; color: var(--readiness-domain-color) !important; white-space: nowrap; }
.ai-readiness-domain { color: rgba(255,255,255,.84); font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ai-readiness-progress { height: .3rem; background: #e1eaf1; }
.ai-readiness-progress-bar { height: 100%; width: 0; background: var(--readiness-domain-color); transition: width .25s ease, background .2s ease; }
.ai-readiness-capability { color: var(--color-text-primary); font-size: 1.4rem; margin-bottom: .75rem; }
.ai-readiness-evaluation-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; min-width: 0; }
.ai-readiness-context-column { display: grid; min-width: 0; gap: .65rem; }
.ai-readiness-assessment-column { min-width: 0; margin: 0; padding: .75rem .85rem; border: 1px solid var(--color-border); border-radius: .65rem; background: var(--color-surface-subtle); }
.ai-readiness-assessment-title { margin: 0 0 .65rem; color: var(--readiness-domain-color); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-readiness-block-label { margin-bottom: .25rem; color: var(--readiness-domain-color); font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-readiness-context-block { margin: 0; padding: .75rem .85rem; border: 1px solid var(--color-border); border-radius: .65rem; background: var(--color-surface-subtle); color: #304a60; font-size: .87rem; line-height: 1.42; }
.ai-readiness-context-block .ai-readiness-block-label { margin: 0 0 .4rem; line-height: 1; }
.ai-readiness-context-block p { margin: 0; }
.ai-readiness-situation p + p { margin-top: .35rem; }
.ai-readiness-question { background: var(--color-surface-subtle); }
.ai-readiness-question p { margin: 0; color: var(--color-text-primary); font-size: .98rem; font-weight: 750; line-height: 1.4 !important; }
.ai-readiness-why { border-color: #cfe9df; background: var(--color-success-soft); color: #426052; }
.ai-readiness-why .ai-readiness-block-label { color: #28745a; }
.ai-readiness-why p { margin: 0; }
.ai-readiness-options { display: grid; grid-template-columns: 1fr; gap: .3rem; }
.ai-readiness-option { display: grid; grid-template-columns: 1.7rem 8.75rem minmax(0, 1fr); gap: .65rem; align-items: center; min-height: 0; padding: .45rem .65rem; border: 1px solid #d8e1e8; border-radius: .55rem; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.ai-readiness-option:hover { border-color: var(--readiness-domain-color); }
.ai-readiness-option.is-selected { border-color: var(--readiness-domain-color); background: color-mix(in srgb, var(--readiness-domain-color) 8%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--readiness-domain-color) 18%, transparent); }
.ai-readiness-option input { position: absolute; opacity: 0; pointer-events: none; }
.ai-readiness-option-score { display: grid; flex: 0 0 1.7rem; width: 1.7rem; height: 1.7rem; place-items: center; border-radius: 50%; background: #e7eff4; color: var(--color-text-primary); font-size: .82rem; font-weight: 800; }
.ai-readiness-option.is-selected .ai-readiness-option-score { background: var(--readiness-domain-color); color: #fff; }
.ai-readiness-option strong, .ai-readiness-option small { display: block; }
.ai-readiness-option strong { color: var(--color-text-primary); font-size: .78rem; line-height: 1.2; }
.ai-readiness-option small { color: #526a7c; font-size: .73rem; line-height: 1.25; }
.ai-readiness-complete-mark { display: grid; width: 4rem; height: 4rem; margin: 0 auto 1.25rem; place-items: center; border-radius: 50%; background: #37a582; color: #fff; font-size: 2rem; font-weight: 800; }
@media (max-width: 900px) { .ai-readiness-evaluation-grid { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { #aiReadinessModal { padding: .5rem; } #aiReadinessModal .modal-dialog { height: calc(100vh - 1rem); max-height: calc(100vh - 1rem); } .ai-readiness-modal { height: 100%; max-height: none; } .ai-readiness-modal .modal-body { padding: 1rem !important; } .ai-readiness-modal .modal-footer { min-height: 3.75rem; padding: .55rem .75rem; } .ai-readiness-modal .modal-footer .btn { min-width: 7rem; } .ai-readiness-option { grid-template-columns: 1.7rem minmax(0, 1fr); gap: .35rem .6rem; } .ai-readiness-option small { grid-column: 2; } .ai-readiness-capability { font-size: 1.2rem; } }

.ai-readiness-guest-body { min-height: 100vh; margin: 0; background: #f3f7fb; color: #102947; }
.ai-readiness-guest-header { display: flex; align-items: center; justify-content: space-between; height: 74px; min-height: 74px; overflow: hidden; padding: 0 max(1.5rem, calc((100vw - 1200px) / 2)); background: var(--color-text-primary); color: rgba(255,255,255,.72); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.ai-readiness-guest-header .app-brand { display: inline-flex; align-items: center; height: 70px; margin: 0; padding: 0; border-radius: 0; background: transparent; color: #fff; text-decoration: none; text-transform: none; }
.ai-readiness-guest-header .app-brand img { display: block; width: 320px; height: 70px; max-width: none; object-fit: contain; object-position: left center; }
.ai-readiness-guest-main { width: min(1180px, calc(100% - 2rem)); min-height: calc(100vh - 9rem); margin: 0 auto; padding: 3.5rem 0; }
.ai-readiness-guest-hero { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 3rem; align-items: center; margin-bottom: 1.5rem; padding: 3rem; border-radius: 1.5rem; background: linear-gradient(130deg, #fff 0%, var(--color-surface-subtle) 62%, #eaf3ff 100%); border: 1px solid #dce7f3; box-shadow: 0 20px 60px rgba(15,42,74,.08); }
.ai-readiness-guest-hero h1 { max-width: 48rem; margin: .55rem 0 1rem; color: var(--color-text-primary); font-size: clamp(2rem, 4vw, 3.35rem); line-height: 1.05; }
.ai-readiness-guest-hero > div > p { max-width: 45rem; margin: 0; color: #52677e; font-size: 1.05rem; line-height: 1.65; }
.ai-readiness-guest-meta { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin-top: 1.5rem; color: #687b8e; font-size: .88rem; }
.ai-readiness-guest-meta strong { color: #173b63; }
.ai-readiness-guest-progress-card { padding: 1.65rem; border-radius: 1rem; background: var(--color-text-primary); color: #fff; box-shadow: 0 18px 35px rgba(10,37,71,.18); }
.ai-readiness-guest-progress-card > span { display: block; color: #a9c1da; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-readiness-guest-progress-value, .ai-readiness-guest-score { margin: .45rem 0; font-size: 3.1rem; font-weight: 800; line-height: 1; }
.ai-readiness-guest-progress-value small, .ai-readiness-guest-score small { margin-left: .25rem; color: #a9c1da; font-size: 1.1rem; }
.ai-readiness-guest-progress-card p { margin: .75rem 0 1.25rem; color: #c6d6e6; font-size: .88rem; }
.ai-readiness-guest-progress-card .btn { width: 100%; justify-content: center; }
.ai-readiness-guest-progress-track { height: .45rem; margin: .9rem 0; overflow: hidden; border-radius: 10rem; background: rgba(255,255,255,.16); }
.ai-readiness-guest-progress-track i { display: block; height: 100%; border-radius: inherit; background: #4f8cff; }
.ai-readiness-guest-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.ai-readiness-guest-card { padding: 2rem; border: 1px solid #dce7f3; border-radius: 1.15rem; background: #fff; box-shadow: 0 10px 30px rgba(15,42,74,.05); }
.ai-readiness-guest-card h1, .ai-readiness-guest-card h2 { margin: .4rem 0 .8rem; color: var(--color-text-primary); }
.ai-readiness-guest-card p { color: #607489; line-height: 1.6; }
.ai-readiness-guest-checks { display: grid; gap: .7rem; margin: 1.25rem 0 0; padding: 0; list-style: none; color: #344e69; }
.ai-readiness-guest-checks li { position: relative; padding-left: 1.65rem; }
.ai-readiness-guest-checks li::before { position: absolute; left: 0; top: .05rem; content: "✓"; color: var(--color-primary); font-weight: 900; }
.ai-readiness-guest-scope { display: flex; flex-wrap: wrap; gap: .55rem; }
.ai-readiness-guest-scope span { padding: .5rem .7rem; border-radius: .55rem; background: #eef5ff; color: #24578d; font-size: .82rem; font-weight: 700; }
.ai-readiness-guest-privacy { margin: 1.35rem 0 0; padding-top: 1.2rem; border-top: 1px solid #e7edf4; font-size: .88rem; }
.ai-readiness-guest-state { max-width: 40rem; margin: 8vh auto; text-align: center; }
.ai-readiness-guest-footer { padding: 1.5rem; color: #75879a; font-size: .78rem; text-align: center; }
@media (max-width: 850px) {
    .ai-readiness-guest-hero { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem; }
    .ai-readiness-guest-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .ai-readiness-guest-header { padding: 0 1rem; }
    .ai-readiness-guest-header .app-brand { height: 60px; padding: 0; }
    .ai-readiness-guest-header .app-brand img { width: 250px; height: 60px; }
    .ai-readiness-guest-header > span { display: none; }
    .ai-readiness-guest-main { width: min(100% - 1rem, 1180px); padding: 1rem 0; }
    .ai-readiness-guest-hero, .ai-readiness-guest-card { padding: 1.25rem; border-radius: .9rem; }
}

.ai-model-shell { margin-top: 1.25rem; padding: 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-sm); overflow: hidden; }
.ai-model-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; margin-bottom: 1.5rem; }
.ai-model-heading h2 { margin: .2rem 0 .25rem; color: var(--color-text-primary); font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -.03em; }
.ai-model-heading p { margin: 0; color: var(--color-text-secondary); }
.ai-model-total { flex: 0 0 19rem; text-align: center; }
.ai-model-total > span { display: block; color: var(--color-text-primary); font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ai-model-total > strong { display: block; margin: .2rem 0 .45rem; color: var(--color-text-primary); font-size: 2rem; line-height: 1; }
.ai-model-total > strong small { font-size: 1rem; }
.ai-model-total-scale { position: relative; height: .48rem; border-radius: 999px; background: linear-gradient(90deg, var(--color-score-1) 0 20%, var(--color-score-2) 20% 40%, var(--color-score-3) 40% 60%, var(--color-score-4) 60% 80%, var(--color-score-5) 80%); }
.ai-model-total-scale i { position: absolute; top: -.2rem; width: 0; height: 0; transform: translateX(-50%); border-right: .38rem solid transparent; border-left: .38rem solid transparent; border-top: .7rem solid var(--color-text-primary); }
.ai-model-scale-labels { display: flex; justify-content: space-between; margin-top: .25rem; color: var(--color-text-muted); font-size: .65rem; }
.ai-model-domains { overflow-x: auto; border-radius: .65rem; }
.ai-model-domain { --domain-color: var(--domain-color-1); --domain-soft: var(--color-success-soft); display: grid; grid-template-columns: 15rem 5rem minmax(48rem, 1fr); min-width: 68rem; border: 1px solid color-mix(in srgb, var(--domain-color) 30%, var(--color-border)); border-bottom: 0; background: linear-gradient(90deg, var(--domain-soft), #fff 46%); }
.ai-model-domain:first-child { border-radius: .65rem .65rem 0 0; }
.ai-model-domain:last-child { border-bottom: 1px solid color-mix(in srgb, var(--domain-color) 30%, var(--color-border)); border-radius: 0 0 .65rem .65rem; }
.ai-model-shell.no-scores .ai-model-domain { grid-template-columns: 15rem minmax(48rem, 1fr); min-width: 63rem; }
.ai-model-domain-2 { --domain-color: var(--domain-color-2); --domain-soft: #eff6fd; }
.ai-model-domain-3 { --domain-color: var(--domain-color-3); --domain-soft: var(--color-surface-violet); }
.ai-model-domain-4 { --domain-color: var(--domain-color-4); --domain-soft: #edf9fa; }
.ai-model-domain-5 { --domain-color: var(--domain-color-5); --domain-soft: var(--color-warning-soft); }
.ai-model-domain-6 { --domain-color: var(--domain-color-6); --domain-soft: var(--color-warning-soft); }
.ai-model-domain-card { display: flex; align-items: center; gap: .8rem; min-height: 6.2rem; padding: .9rem 1rem; background: var(--domain-color); color: #fff; }
.ai-model-domain-number { flex: 0 0 2.1rem; font-size: 2rem; font-weight: 300; text-align: center; }
.ai-model-domain-card h3 { margin: 0 0 .25rem; color: #fff; font-size: .88rem; letter-spacing: .02em; text-transform: uppercase; }
.ai-model-domain-card p { margin: 0; color: rgba(255,255,255,.9); font-size: .7rem; line-height: 1.4 !important; }
.ai-model-domain-average { display: grid; place-items: center; color: var(--domain-color); font-size: 1.45rem; font-weight: 800; background: color-mix(in srgb, var(--domain-color) 12%, #fff); }
.ai-model-capabilities { display: grid; grid-template-columns: repeat(7, minmax(6.8rem, 1fr)); align-items: stretch; gap: .4rem; padding: .45rem; border-top: 3px solid var(--domain-color); }
.ai-model-capability { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; min-width: 0; min-height: 5.25rem; padding: .65rem; border: 0; border-radius: 0; background: color-mix(in srgb, var(--domain-color) 7%, #fff); text-align: left; }
.ai-model-capability-heading { display: flex; gap: .35rem; align-items: flex-start; min-width: 0; }
.ai-model-capability-heading > span { flex: 0 0 auto; color: var(--domain-color); font-size: .64rem; font-weight: 900; line-height: 1.35; }
.ai-model-capability-heading > strong { min-width: 0; color: var(--color-text-primary); font-size: .7rem; line-height: 1.3; overflow-wrap: normal; word-break: normal; }
.ai-model-capability .ai-model-score { align-self: flex-end; margin-top: .45rem; }
.ai-model-capability:is(button) { width: 100%; appearance: none; border: 0; border-radius: 0; color: inherit; font: inherit; cursor: pointer; box-shadow: none; }
.ai-model-capability:is(button):hover, .ai-model-capability:is(button):focus-visible { border: 0; background: color-mix(in srgb, var(--domain-color) 14%, #fff); box-shadow: none; outline: none; }
.ai-model-score { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border-radius: 50%; background: #aeb8c3; color: #fff; font-size: .75rem; font-style: normal; font-weight: 800; }
.ai-model-score-0, .ai-model-score-1 { background: var(--color-score-1); }
.ai-model-score-2 { background: var(--color-score-2); }
.ai-model-score-3 { background: var(--color-score-3); }
.ai-model-score-4 { background: var(--color-score-4); }
.ai-model-score-5 { background: var(--color-score-5); }
@media (max-width: 900px) { .ai-model-heading { flex-direction: column; } .ai-model-total { width: 100%; max-width: 22rem; flex-basis: auto; } .ai-model-shell { padding: 1rem; } }

#aiReadinessDimensionsModal { z-index: 2000 !important; }
#aiReadinessDimensionsModal .modal-dialog { width: min(100%, 76rem); height: min(48rem, calc(100vh - 2rem)); max-height: calc(100vh - 2rem); }
.ai-dimensions-modal { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; max-height: none; overflow: hidden; }
.ai-dimensions-modal .modal-header { flex: 0 0 auto; padding: .85rem 1.25rem; }
.ai-dimensions-modal .modal-body { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; padding: 1rem 1.25rem; overflow: hidden; }
.ai-dimensions-tabs { gap: .35rem; margin-bottom: 1rem; padding: .3rem; border: 0; border-radius: .75rem; background: var(--color-surface-subtle); }
.ai-dimensions-tabs .nav-link { flex: 1 1 0; justify-content: center; margin: 0; padding: .65rem .8rem; border: 0; border-radius: .55rem; color: var(--color-text-secondary); font-size: .82rem; font-weight: 700; }
.ai-dimensions-tabs .nav-link.active { background: #fff; color: var(--color-text-primary); box-shadow: var(--shadow-sm); }
.ai-dimensions-tab-content { min-height: 0; overflow: hidden; }
.ai-dimensions-tab-content > .tab-pane.active { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; min-height: 0; }
.ai-dimensions-view-summary { display: flex; align-items: baseline; justify-content: flex-end; gap: .45rem; margin-bottom: .5rem; color: var(--color-text-secondary); font-size: .72rem; font-weight: 700; text-transform: uppercase; }
.ai-dimensions-view-summary strong { color: var(--color-text-primary); font-size: 1.35rem; }
.ai-dimensions-view-summary strong small { font-size: .75rem; }
.ai-dimensions-view-layout { display: grid; grid-template-columns: minmax(22rem, .9fr) minmax(0, 1.1fr); gap: 1rem; align-items: stretch; min-height: 0; }
.ai-dimensions-chart-wrap { position: relative; min-height: 0; padding: .5rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: #fff; }
.ai-dimensions-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.ai-dimensions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: .4rem; min-height: 0; }
.ai-dimension-card { display: flex; align-items: center; justify-content: space-between; gap: .65rem; min-height: 0; padding: .5rem .65rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.ai-dimension-card { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ai-dimension-card:hover, .ai-dimension-card:focus-visible { border-color: #7ba8bb; background: #fff; box-shadow: 0 0 0 2px rgba(37,111,143,.1); outline: none; }
.ai-dimension-card > div { min-width: 0; }
.ai-dimension-card strong, .ai-dimension-card small { display: block; }
.ai-dimension-card strong { color: var(--color-text-primary); font-size: .78rem; line-height: 1.2; }
.ai-dimension-card small { margin-top: .12rem; color: var(--color-text-muted); font-size: .65rem; line-height: 1.2; }
.ai-dimension-card .ai-model-score { flex: 0 0 1.85rem; width: 1.85rem; height: 1.85rem; }
.ai-condition-detail { grid-row: 1 / -1; min-height: 0; padding-right: .25rem; overflow-y: auto; scrollbar-gutter: stable; }
.ai-condition-detail-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; position: sticky; top: 0; z-index: 2; padding: .25rem 0 .75rem; background: #fff; }
.ai-condition-detail-header h3 { margin: .1rem 0 0; color: var(--color-text-primary); font-size: 1.2rem; }
.ai-condition-detail-score { text-align: right; }
.ai-condition-detail-score span { display: block; color: var(--color-text-muted); font-size: .64rem; font-weight: 700; text-transform: uppercase; }
.ai-condition-detail-score strong { color: var(--color-text-primary); font-size: 1.35rem; }
.ai-condition-detail-intro { margin: 0 0 .75rem; padding: .65rem .75rem; border-radius: .55rem; background: #f4f8fa; color: var(--color-text-secondary); font-size: .78rem; }
.ai-condition-level + .ai-condition-level { margin-top: .8rem; }
.ai-condition-level-title { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; color: var(--color-text-primary); font-size: .75rem; }
.ai-condition-level-title span { color: var(--color-text-muted); }
.ai-condition-list { display: grid; gap: .35rem; }
.ai-condition-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 10rem; gap: .7rem; align-items: center; padding: .55rem .65rem; border: 1px solid var(--color-border); border-radius: .55rem; background: #fff; }
.ai-condition-row.is-satisfied { border-color: #cde5d6; background: var(--color-success-soft); }
.ai-condition-row.is-open { border-color: #ead8d3; background: #fff8f6; }
.ai-condition-row.is-overridden { box-shadow: inset 3px 0 0 var(--domain-color-3); }
.ai-condition-state { padding: .25rem .35rem; border-radius: 999px; background: var(--color-score-1); color: #fff; font-size: .62rem; font-weight: 800; text-align: center; }
.ai-condition-row.is-satisfied .ai-condition-state { background: var(--color-score-5); }
.ai-condition-copy strong, .ai-condition-copy small { display: block; }
.ai-condition-copy strong { color: var(--color-text-primary); font-size: .76rem; line-height: 1.3; }
.ai-condition-copy small { margin-top: .15rem; color: var(--color-text-secondary); font-size: .66rem; line-height: 1.3; }
.ai-condition-control span { display: block; margin-bottom: .2rem; color: var(--color-text-muted); font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.ai-condition-control select { width: 100%; min-height: 2rem; padding: .3rem .45rem; border: 1px solid var(--color-border); border-radius: .45rem; background: #fff; color: var(--color-text-primary); font-size: .7rem; }
@media (max-width: 900px) { #aiReadinessDimensionsModal .modal-dialog { height: calc(100vh - 2rem); } .ai-dimensions-modal .modal-body { display: block; overflow-y: auto; } .ai-dimensions-tab-content { overflow: visible; } .ai-dimensions-tab-content > .tab-pane.active { display: block; height: auto; } .ai-dimensions-view-layout { grid-template-columns: 1fr; } .ai-dimensions-chart-wrap { min-height: 23rem; } .ai-dimensions-grid { margin-top: .75rem; } }
@media (max-width: 700px) { #aiReadinessDimensionsModal { padding: .5rem; } #aiReadinessDimensionsModal .modal-dialog { height: calc(100vh - 1rem); max-height: calc(100vh - 1rem); } .ai-dimensions-tabs { flex-direction: column; } .ai-dimensions-tabs .nav-link { width: 100%; } .ai-dimensions-grid { grid-template-columns: 1fr; } .ai-dimensions-chart-wrap { min-height: 20rem; } .ai-condition-detail-header { grid-template-columns: 1fr auto; } .ai-condition-detail-header .btn { grid-column: 1 / -1; justify-self: start; } .ai-condition-row { grid-template-columns: 3rem minmax(0, 1fr); } .ai-condition-control { grid-column: 2; } }

#aiCapabilityDetailModal { z-index: 2000 !important; }
#aiCapabilityDetailModal .modal-dialog { width: min(100%, 70rem); height: min(46rem, calc(100vh - 2rem)); }
.ai-capability-detail-modal { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; overflow: hidden; }
.ai-capability-detail-header { padding: .9rem 1.25rem; background: var(--readiness-domain-color); color: #fff; }
.ai-capability-detail-header > div > span { color: rgba(255,255,255,.82); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ai-capability-detail-header .modal-title { color: #fff !important; }
.ai-capability-detail-header .btn-close { background: rgba(255,255,255,.94); color: var(--color-text-primary); }
.ai-capability-detail-modal .modal-body { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; padding: 1rem 1.25rem; overflow: hidden; }
.ai-capability-tabs { gap: .35rem; margin-bottom: 1rem; padding: .3rem; border: 0; border-radius: .75rem; background: var(--color-surface-subtle); }
.ai-capability-tabs .nav-link { flex: 1 1 0; justify-content: center; margin: 0; padding: .65rem; border: 0; border-radius: .55rem; color: var(--color-text-secondary); font-size: .82rem; font-weight: 700; }
.ai-capability-tabs .nav-link.active { background: #fff; color: var(--color-text-primary); box-shadow: var(--shadow-sm); }
.ai-capability-tab-content { min-height: 0; overflow: hidden; }
.ai-capability-tab-content > .tab-pane.active { height: 100%; overflow-y: auto; scrollbar-gutter: stable; }
.ai-capability-dilemma-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(17rem, .6fr); gap: 1rem; }
.ai-capability-detail-block { padding: .8rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-subtle); }
.ai-capability-detail-block + .ai-capability-detail-block { margin-top: .65rem; }
.ai-capability-detail-block > span, .ai-capability-selected-answer > span { display: block; margin-bottom: .4rem; color: var(--readiness-domain-color); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.ai-capability-detail-block p { margin: 0; color: var(--color-text-secondary); font-size: .86rem; line-height: 1.5 !important; }
.ai-capability-detail-block p + p { margin-top: .45rem; }
.ai-capability-detail-block:nth-child(2) p { color: var(--color-text-primary); font-size: .98rem; font-weight: 700; }
.ai-capability-why { border-color: #cfe9df; background: var(--color-success-soft); }
.ai-capability-selected-answer { align-self: start; padding: 1rem; border: 1px solid color-mix(in srgb, var(--readiness-domain-color) 28%, var(--color-border)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--readiness-domain-color) 7%, #fff); }
.ai-capability-selected-answer > strong { display: block; color: var(--readiness-domain-color); font-size: 2rem; }
.ai-capability-selected-answer h3 { margin: .5rem 0 .25rem; color: var(--color-text-primary); font-size: 1rem; }
.ai-capability-selected-answer p { margin: 0; color: var(--color-text-secondary); font-size: .8rem; line-height: 1.45 !important; }
.ai-capability-conditions-summary { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .75rem; color: var(--color-text-muted); font-size: .75rem; }
.ai-capability-conditions-summary strong { color: var(--color-text-primary); font-size: 1.2rem; }
.ai-capability-condition-group + .ai-capability-condition-group { margin-top: 1rem; }
.ai-capability-condition-group h3 { margin: 0 0 .4rem; color: var(--color-text-primary); font-size: .78rem; }
.ai-capability-condition-group > div { display: grid; gap: .35rem; }
.ai-capability-condition { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .65rem; align-items: center; padding: .55rem .65rem; border: 1px solid var(--color-border); border-radius: .55rem; background: #fff; }
.ai-capability-condition.is-satisfied { border-color: #cde5d6; background: var(--color-success-soft); }
.ai-capability-condition.is-open { border-color: #ead8d3; background: #fff8f6; }
.ai-capability-condition > span { padding: .25rem; border-radius: 999px; background: var(--color-score-1); color: #fff; font-size: .62rem; font-weight: 800; text-align: center; }
.ai-capability-condition.is-satisfied > span { background: var(--color-score-5); }
.ai-capability-condition strong, .ai-capability-condition small { display: block; }
.ai-capability-condition strong { color: var(--color-text-primary); font-size: .76rem; line-height: 1.3; }
.ai-capability-condition small { margin-top: .15rem; color: var(--color-text-muted); font-size: .66rem; line-height: 1.3; }
@media (max-width: 700px) { #aiCapabilityDetailModal { padding: .5rem; } #aiCapabilityDetailModal .modal-dialog { height: calc(100vh - 1rem); } .ai-capability-detail-modal .modal-body { padding: .8rem; } .ai-capability-dilemma-grid { grid-template-columns: 1fr; } }

/* Final stacking override: creation modal must cover the sticky client navigation. */
body > .modal-backdrop {
    z-index: 19990 !important;
}

#newReadinessScoreModal {
    z-index: 20000 !important;
}

#readinessParticipantsModal {
    z-index: 20000 !important;
}

.ai-readiness-create-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}
.ai-readiness-create-steps span {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .8rem;
    border: 1px solid var(--color-border);
    border-radius: .7rem;
    color: var(--color-text-muted);
    font-size: .78rem;
    font-weight: 700;
}
.ai-readiness-create-steps i {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #e9eef5;
    font-style: normal;
}
.ai-readiness-create-steps span.is-active {
    border-color: #9bc1e5;
    background: #eef6fd;
    color: #174f7e;
}
.ai-readiness-create-steps span.is-active i { background: var(--color-primary); color: #fff; }
.ai-readiness-invite-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.ai-readiness-invite-heading p { margin: .25rem 0 1rem; color: var(--color-text-muted); font-size: .84rem; }
.ai-readiness-invite-list { display: grid; gap: .55rem; }
.ai-readiness-invite-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: .55rem; align-items: center; }
.ai-readiness-invite-note { margin: 1rem 0 0; color: var(--color-text-muted); font-size: .76rem; }
.ai-readiness-create-footer > div, .ai-readiness-card-actions { display: flex; gap: .5rem; }
.ai-readiness-card-value-wrap { text-align: right; }
.ai-readiness-card-value-wrap small { display: block; margin-top: .15rem; color: var(--color-text-muted); font-size: .68rem; }
.ai-readiness-participant-list { display: grid; gap: .65rem; }
.ai-readiness-participant-row {
    display: grid;
    grid-template-columns: minmax(10rem, 1.2fr) minmax(9rem, 1fr) 4rem auto;
    gap: .8rem;
    align-items: center;
    padding: .85rem;
    border: 1px solid var(--color-border);
    border-radius: .8rem;
    background: #fff;
}
.ai-readiness-participant-person strong, .ai-readiness-participant-person small { display: block; }
.ai-readiness-participant-person strong { color: var(--color-text-primary); font-size: .85rem; }
.ai-readiness-participant-person small { color: var(--color-text-muted); font-size: .7rem; }
.ai-readiness-participant-progress > span { display: block; margin-bottom: .25rem; color: #425a75; font-size: .68rem; font-weight: 700; text-transform: capitalize; }
.ai-readiness-participant-progress > div { height: .3rem; overflow: hidden; border-radius: 99px; background: #e9eef5; }
.ai-readiness-participant-progress i { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); }
.ai-readiness-participant-progress small { color: var(--color-text-muted); font-size: .64rem; }
.ai-readiness-participant-score { display: flex; align-items: baseline; gap: .15rem; color: var(--color-info-strong); }
.ai-readiness-participant-score strong { font-size: 1.15rem; }
.ai-readiness-participant-score span, .ai-readiness-owner-label { color: var(--color-text-muted); font-size: .65rem; }
.ai-readiness-participant-add { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.ai-readiness-participant-add h3 { margin: 0 0 .55rem; color: var(--color-text-primary); font-size: .88rem; }
.ai-readiness-participant-add > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: .55rem; }
@media(max-width:700px){
    .ai-readiness-invite-row,.ai-readiness-participant-add>div{grid-template-columns:1fr}
    .ai-readiness-participant-row{grid-template-columns:1fr auto}
    .ai-readiness-participant-progress{grid-column:1/-1}
}
.ai-model-total-participants { display: block; margin-top: .15rem; color: var(--color-text-muted); font-size: .7rem; font-weight: 600; }

/* Participants modal: structured management layout. */
#readinessParticipantsModal .modal-dialog { width: min(100%, 58rem); }
#readinessParticipantsModal .modal-content { overflow: hidden; }
#readinessParticipantsModal .modal-body { padding: 1.25rem; background: #f7f9fc; }
.ai-readiness-participant-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem;
    margin-bottom: 1rem;
}
.ai-readiness-participant-summary > div {
    padding: .8rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: .75rem;
    background: #fff;
}
.ai-readiness-participant-summary strong,
.ai-readiness-participant-summary span { display: block; }
.ai-readiness-participant-summary strong { color: var(--color-text-primary); font-size: 1.25rem; }
.ai-readiness-participant-summary span { color: var(--color-text-muted); font-size: .68rem; }
.ai-readiness-participant-list { gap: .75rem; }
.ai-readiness-participant-row {
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: .85rem;
    box-shadow: 0 3px 12px rgba(20, 43, 70, .04);
}
.ai-readiness-participant-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--color-border);
}
.ai-readiness-participant-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.ai-readiness-participant-badges span {
    padding: .25rem .5rem;
    border-radius: 999px;
    background: var(--color-surface-blue);
    color: var(--color-info-strong);
    font-size: .63rem;
    font-weight: 800;
    text-transform: capitalize;
}
.ai-readiness-participant-badges .is-owner { background: #edf0f5; color: #53647a; }
.ai-readiness-participant-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem;
    gap: 1.25rem;
    align-items: center;
    padding: .9rem 1rem;
}
.ai-readiness-progress-label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.ai-readiness-progress-label span { color: var(--color-text-muted); font-size: .68rem; font-weight: 700; }
.ai-readiness-progress-label strong { color: #344e6b; font-size: .72rem; }
.ai-readiness-participant-progress > div:not(.ai-readiness-progress-label) { height: .4rem; }
.ai-readiness-participant-score {
    display: block;
    padding-left: 1rem;
    border-left: 1px solid var(--color-border);
}
.ai-readiness-participant-score > span { display: block; color: var(--color-text-muted); font-size: .63rem; font-weight: 700; }
.ai-readiness-participant-score > div { display: flex; align-items: baseline; gap: .15rem; margin-top: .1rem; }
.ai-readiness-participant-score strong { color: var(--color-info-strong); font-size: 1.35rem; }
.ai-readiness-participant-score small { color: var(--color-text-muted); font-size: .65rem; }
.ai-readiness-participant-card-footer {
    display: flex;
    justify-content: flex-end;
    padding: .55rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}
.ai-readiness-participant-add {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: .85rem;
    background: #fff;
}
@media(max-width:600px){
    .ai-readiness-participant-summary{grid-template-columns:1fr}
    .ai-readiness-participant-card-body{grid-template-columns:1fr}
    .ai-readiness-participant-score{padding:0;border-left:0}
}

/* Participants modal compact alignment. */
#readinessParticipantsModal .modal-dialog { width: min(100%, 50rem); }
#readinessParticipantsModal .modal-body { padding: 1rem; }
.ai-readiness-participant-summary {
    display: flex;
    gap: 0;
    margin-bottom: .75rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: .7rem;
    background: #fff;
}
.ai-readiness-participant-summary > div {
    flex: 1;
    padding: .55rem .8rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.ai-readiness-participant-summary > div + div { border-left: 1px solid var(--color-border); }
.ai-readiness-participant-summary strong { display: inline; margin-right: .3rem; font-size: .95rem; }
.ai-readiness-participant-summary span { display: inline; font-size: .65rem; }
.ai-readiness-participant-list { gap: .45rem; }
.ai-readiness-participant-row {
    display: grid;
    grid-template-columns: minmax(9rem,1.35fr) minmax(5.5rem,.7fr) minmax(8rem,1fr) 4.5rem 7.5rem;
    gap: .65rem;
    align-items: center;
    padding: .65rem .75rem;
    overflow: visible;
    border-radius: .65rem;
    box-shadow: none;
}
.ai-readiness-participant-card-head,
.ai-readiness-participant-card-body,
.ai-readiness-participant-card-footer { display: contents; }
.ai-readiness-participant-person { grid-column: 1; }
.ai-readiness-participant-badges { grid-column: 2; justify-content: flex-start; }
.ai-readiness-participant-progress { grid-column: 3; }
.ai-readiness-progress-label { margin-bottom: .22rem; }
.ai-readiness-progress-label span { display: none; }
.ai-readiness-progress-label strong { font-size: .66rem; font-weight: 600; }
.ai-readiness-participant-score {
    grid-column: 4;
    padding: 0;
    border: 0;
}
.ai-readiness-participant-score > span { display: none; }
.ai-readiness-participant-score > div { margin: 0; }
.ai-readiness-participant-score strong { font-size: 1rem; }
.ai-readiness-participant-card-footer { padding: 0; border: 0; background: transparent; }
.ai-readiness-participant-actions {
    grid-column: 5;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .3rem;
}
.ai-readiness-participant-card-footer .btn {
    width: 100%;
    max-width: 100%;
    padding: .35rem .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .65rem;
}
.ai-readiness-participant-card-footer .ai-readiness-owner-label {
    grid-column: 5;
    justify-self: end;
    padding: .3rem .55rem;
    border-radius: 999px;
    background: #edf0f5;
    color: #53647a;
    font-size: .63rem;
    font-weight: 800;
}
.ai-readiness-participant-add {
    margin-top: .85rem;
    padding: .75rem;
    border-radius: .7rem;
}
.ai-readiness-participant-add h3 { margin-bottom: .4rem; }
@media(max-width:760px){
    .ai-readiness-participant-row{grid-template-columns:1fr auto}
    .ai-readiness-participant-person{grid-column:1}
    .ai-readiness-participant-badges{grid-column:2}
    .ai-readiness-participant-progress{grid-column:1/-1}
    .ai-readiness-participant-score{grid-column:1}
    .ai-readiness-participant-actions{grid-column:2;align-self:start}
    .ai-readiness-participant-card-footer .ai-readiness-owner-label{grid-column:2}
}

/* The V2 use-case Data tab is content, not a card. */
[data-usecase-tab-panel="data"] > .portfolio-data-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

[data-usecase-tab-panel="data"] .portfolio-data-management-form fieldset {
    border: 0 !important;
    margin: 0;
    min-width: 0;
    padding: 0;
}

.customer-subnav-list {
    position: relative;
}

.customer-subnav-usecase-menu {
    position: static;
}

.customer-subnav-usecase-menu .customer-subnav-mega-menu {
    inset: calc(100% + 0.35rem) 0 auto 0 !important;
    max-width: none;
    min-width: 0;
    transform: none !important;
    width: 100%;
}

.usecase-nav-mega-menu {
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(30, 91, 255, 0.12);
    border-radius: 1rem;
    box-shadow: 0 1.25rem 3rem rgba(10, 37, 71, 0.16);
}

.usecase-nav-mega-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(30, 91, 255, 0.12);
    background: linear-gradient(100deg, #f3f7ff 0%, var(--color-surface-subtle) 58%, #eefbfc 100%);
}

.usecase-nav-mega-intro div,
.usecase-nav-mega-intro strong,
.usecase-nav-mega-intro small {
    display: block;
}

.usecase-nav-mega-intro strong { color: var(--color-text-primary); font-size: 1rem; }
.usecase-nav-mega-intro small { margin-top: 0.15rem; color: var(--color-text-secondary); font-size: 0.76rem; }
.usecase-nav-mega-intro > a { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--color-primary); font-size: 0.78rem; font-weight: 750; text-decoration: none; }
.usecase-nav-mega-intro > a:hover { color: var(--color-primary-dark); }

.usecase-nav-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    align-items: stretch;
    justify-items: stretch;
    gap: 0;
    padding: 1rem;
}

.usecase-nav-mega-grid section { display: grid; width: 100%; align-content: start; gap: 0.28rem; min-width: 0; max-width: none; padding: 0.35rem 1rem 0.55rem; border-right: 1px solid var(--color-border); }
.usecase-nav-mega-grid section:last-child { border-right: 0; }
.usecase-nav-mega-grid h6 { margin: 0 0 0.55rem; color: var(--color-text-muted); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.usecase-nav-mega-grid a { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; min-width: 0; padding: 0.5rem 0.58rem; border-radius: 0.58rem; color: var(--color-text-primary); font-size: 0.78rem; text-decoration: none; transition: background-color 0.16s ease, color 0.16s ease, transform 0.16s ease; }
.usecase-nav-mega-grid a:hover { background: var(--color-surface-subtle); color: var(--color-primary); transform: translateX(2px); }
.usecase-nav-mega-grid a > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usecase-nav-mega-grid a strong,
.usecase-nav-mega-grid a small { display: block; }
.usecase-nav-mega-grid a small { margin-top: 0.12rem; overflow: hidden; color: var(--color-text-muted); font-size: 0.65rem; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.usecase-nav-mega-grid a b { flex: 0 0 auto; color: var(--color-primary); font-size: 0.82rem; font-weight: 700; opacity: 0; transition: opacity 0.16s ease; }
.usecase-nav-mega-grid a:hover b { opacity: 1; }
.usecase-nav-mega-grid .usecase-nav-mega-feature { margin-bottom: 0.25rem; padding: 0.68rem 0.7rem; border: 1px solid rgba(30, 91, 255, 0.12); background: var(--color-bg); }
.usecase-nav-mega-grid .usecase-nav-mega-feature b { opacity: 1; }
.usecase-nav-mega-section-organisation .usecase-nav-mega-feature { border-color: rgba(18, 179, 199, 0.2); background: rgba(18, 179, 199, 0.07); }
.usecase-nav-mega-section-ai .usecase-nav-mega-feature { border-color: rgba(124, 58, 237, 0.16); background: rgba(124, 58, 237, 0.055); }
.usecase-nav-mega-grid .usecase-nav-mega-more { margin-top: 0.22rem; color: var(--color-primary); font-weight: 750; }
.usecase-nav-mega-grid .usecase-nav-mega-more b { opacity: 1; }
.usecase-nav-mega-section-value a > span { overflow: visible; text-overflow: clip; white-space: normal; }
.usecase-nav-mega-section-business a > span,
.usecase-nav-mega-section-business a small { overflow: visible; text-overflow: clip; white-space: normal; }
.module-nav-mega-copy { margin: 0.65rem 0 0; padding: 0 0.58rem; color: var(--color-text-muted); font-family: Georgia, 'Times New Roman', serif; font-size: 0.74rem; font-style: italic; font-weight: 400; line-height: 1.55; letter-spacing: 0; }
.module-nav-status { flex: 0 0 auto; padding: 0.22rem 0.42rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-subtle); color: var(--color-text-muted); font-size: 0.58rem; font-style: normal; font-weight: 750; line-height: 1; white-space: nowrap; }
.module-nav-status.is-complete { border-color: rgba(22, 163, 74, 0.2); background: rgba(22, 163, 74, 0.08); color: #16733a; }
.module-nav-status.is-progress { border-color: rgba(30, 91, 255, 0.18); background: rgba(30, 91, 255, 0.07); color: var(--color-primary); }
.module-nav-action-column .usecase-nav-mega-feature { border-color: rgba(18, 179, 199, 0.22); background: rgba(18, 179, 199, 0.075); }
.module-nav-action-column .usecase-nav-mega-feature strong { color: #0b6f7b; }
.portfolio-insights-header { align-items: flex-end; }
.portfolio-insights-nav { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.5rem; padding: .25rem 0; border-bottom: 1px solid var(--color-border); background: #fff; }
.portfolio-insights-nav a { padding: .7rem 0 .6rem; border-bottom: 2px solid transparent; color: var(--color-text-secondary); font-size: .8rem; font-weight: 700; text-decoration: none; }
.portfolio-insights-nav a:hover { border-bottom-color: var(--color-primary); color: var(--color-primary); }
.portfolio-insights-models { display: grid; gap: 1.5rem; }
.portfolio-insight-model { display: grid; grid-template-columns: minmax(18rem, .72fr) minmax(30rem, 1.28fr); scroll-margin-top: 5rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: 1rem; background: #fff; box-shadow: 0 .55rem 1.6rem rgba(10,37,71,.055); }
.portfolio-insight-model-copy { padding: 1.7rem; }
.portfolio-insight-model-copy h2 { margin: .35rem 0 .75rem; color: var(--color-text-primary); font-size: clamp(1.35rem,2vw,1.8rem); }
.portfolio-insight-model-copy p { color: var(--color-text-secondary); font-size: .86rem; line-height: 1.65; }
.portfolio-insight-model-copy ul { display: grid; gap: .5rem; margin: 1rem 0 0; padding-left: 1.05rem; color: var(--color-text-secondary); font-size: .76rem; line-height: 1.5; }
.portfolio-insight-illustration { min-width: 0; padding: 1.35rem; border-left: 1px solid var(--color-border); background: var(--color-surface-subtle); }
.portfolio-insight-benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; align-content: center; }
.portfolio-insight-benefit-summary { padding: .9rem; border: 1px solid var(--color-border); border-radius: .7rem; background: #fff; }
.portfolio-insight-benefit-summary.is-primary { border-color: rgba(18,179,199,.35); background: rgba(18,179,199,.08); }
.portfolio-insight-benefit-summary span { display: block; color: var(--color-text-muted); font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.portfolio-insight-benefit-summary strong { display: block; margin-top: .3rem; color: var(--color-text-primary); font-size: .84rem; }
.portfolio-insight-benefit-row { grid-column: 1/-1; display: grid; grid-template-columns: 7rem 1fr 7.5rem; gap: .7rem; align-items: center; padding: .65rem .8rem; border: 1px solid var(--color-border); border-radius: .6rem; background: #fff; font-size: .68rem; }
.portfolio-insight-benefit-row b { color: var(--color-text-primary); }
.portfolio-insight-benefit-row span { color: var(--color-text-muted); text-align: right; }
.portfolio-insight-benefit-row i { position: relative; height: .38rem; border-radius: 99px; background: #e5ebef; }
.portfolio-insight-benefit-row i::after { position: absolute; top: 0; right: calc(100% - var(--high)); bottom: 0; left: var(--low); border-radius: inherit; background: linear-gradient(90deg,var(--color-secondary-accent),var(--color-primary)); content: ''; }
.portfolio-insight-analysis { display: grid; grid-template-columns: .9fr 1.1fr; gap: 1rem; align-items: center; }
.portfolio-insight-heatmap { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); overflow: hidden; border: 1px solid var(--color-border); border-radius: .65rem; background: #fff; }
.portfolio-insight-heatmap > * { display: grid; min-height: 2.5rem; place-items: center; margin: 0; border-right: 1px solid #fff; border-bottom: 1px solid #fff; color: var(--color-text-primary); font-size: .65rem; font-style: normal; }
.portfolio-insight-heatmap .is-heading { min-height: 2rem; background: #edf2f5; color: var(--color-text-muted); font-size: .56rem; font-weight: 800; }
.portfolio-insight-heatmap .tone-2 { background: #e9f4ef; }.portfolio-insight-heatmap .tone-3 { background: #bce0d1; }.portfolio-insight-heatmap .tone-4 { background: #70bea1; }.portfolio-insight-heatmap .tone-5 { background: #278a67; color: #fff; }
.portfolio-insight-matrix { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 16rem; margin: 0 0 1.3rem 1.3rem; border: 1px solid var(--color-border); background: #fff; }
.portfolio-insight-matrix .quadrant { display: grid; place-items: center; border: 1px solid #fff; color: #6a7888; font-size: .62rem; }.portfolio-insight-matrix .q1{background:#fff4df}.portfolio-insight-matrix .q2{background:#e8f6ee}.portfolio-insight-matrix .q3{background:#f2f4f6}.portfolio-insight-matrix .q4{background:#e8f5f8}
.portfolio-insight-matrix .axis-y,.portfolio-insight-matrix .axis-x { position: absolute; color: var(--color-text-muted); font-size: .58rem; font-weight: 800; text-transform: uppercase; }.portfolio-insight-matrix .axis-y{top:50%;left:-3.2rem;transform:rotate(-90deg)}.portfolio-insight-matrix .axis-x{right:0;bottom:-1.2rem;left:0;text-align:center}
.portfolio-insight-matrix .dot { position: absolute; display: grid; width: 1.45rem; height: 1.45rem; place-items: center; border: 2px solid #fff; border-radius: 50%; background:var(--color-primary);color:#fff;font-size:.58rem;box-shadow:0 .2rem .5rem rgba(10,37,71,.2)}.portfolio-insight-matrix .d1{top:18%;right:23%}.portfolio-insight-matrix .d2{right:38%;bottom:18%}.portfolio-insight-matrix .d3{top:37%;left:19%}
.portfolio-insight-impact { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: center; }
.portfolio-insight-tree { overflow: hidden; border: 1px solid var(--color-border); border-radius: .65rem; background: #fff; }
.portfolio-insight-tree header,.portfolio-insight-tree > div { display:grid;grid-template-columns:1fr 5.5rem;gap:.7rem;align-items:center;padding:.65rem .75rem;border-bottom:1px solid var(--color-border)}.portfolio-insight-tree > div:last-child{border-bottom:0}
.portfolio-insight-tree header { background:#edf2f5;color:var(--color-text-muted);font-size:.56rem;font-weight:800;text-transform:uppercase}.portfolio-insight-tree b{color:var(--color-text-primary);font-size:.65rem}.portfolio-insight-tree .level-2 b{padding-left:.65rem}.portfolio-insight-tree .level-3 b{padding-left:1.3rem}
.portfolio-insight-tree i{height:.35rem;border-radius:99px;background:#e5ebef}.portfolio-insight-tree em{display:block;height:100%;border-radius:inherit;background:var(--color-secondary-accent)}.portfolio-insight-tree.workforce em{background:#7c3aed}
.portfolio-insight-readiness { display:grid;place-items:center}.portfolio-insight-readiness svg{width:min(100%,34rem);height:auto}.radar-grid polygon,.radar-grid line{fill:none;stroke:#d8e1e7;stroke-width:1}.radar-readiness{fill:rgba(18,179,199,.16);stroke:var(--color-secondary-accent);stroke-width:3}.radar-portfolio{fill:rgba(30,91,255,.08);stroke:var(--color-primary);stroke-width:3}.radar-labels text{fill:var(--color-text-muted);font-size:10px;text-anchor:middle}.portfolio-insight-legend{display:flex;gap:1.2rem;color:var(--color-text-secondary);font-size:.68rem}.portfolio-insight-legend span::before{display:inline-block;width:.65rem;height:.2rem;margin-right:.35rem;vertical-align:middle;content:''}.portfolio-insight-legend .is-readiness::before{background:var(--color-secondary-accent)}.portfolio-insight-legend .is-portfolio::before{background:var(--color-primary)}
@media (max-width: 900px){.portfolio-insight-model{grid-template-columns:1fr}.portfolio-insight-illustration{border-top:1px solid var(--color-border);border-left:0}}
@media (max-width: 620px){.portfolio-insight-analysis,.portfolio-insight-impact{grid-template-columns:1fr}.portfolio-insight-benefits{grid-template-columns:1fr}.portfolio-insight-benefit-summary,.portfolio-insight-benefit-row{grid-column:1}.portfolio-insight-benefit-row{grid-template-columns:5rem 1fr}.portfolio-insight-benefit-row span{grid-column:1/-1;text-align:left}}
.ai-framework-page-header { align-items: flex-end; }
.ai-framework-tabs { display: flex; flex-wrap: wrap; gap: 1.4rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); }
.ai-framework-tabs a { padding: 0.75rem 0 0.65rem; border-bottom: 2px solid transparent; color: var(--color-text-secondary); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.ai-framework-tabs a:hover,
.ai-framework-tabs a.is-active { border-bottom-color: var(--color-primary); color: var(--color-primary); }
.ai-framework-intro-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr); gap: 1.5rem; align-items: stretch; margin-bottom: 1.5rem; }
.ai-framework-explanation,
.ai-framework-domain-visual,
.ai-framework-capability-visual,
.ai-framework-dimension-visual { min-width: 0; padding: 1.7rem; border: 1px solid var(--color-border); border-radius: 1rem; background: #fff; box-shadow: 0 0.55rem 1.6rem rgba(10, 37, 71, 0.055); }
.ai-framework-explanation h2 { margin: 0.35rem 0 0.75rem; color: var(--color-text-primary); font-size: clamp(1.35rem, 2vw, 1.8rem); }
.ai-framework-explanation p { margin: 0 0 0.75rem; color: var(--color-text-secondary); font-size: 0.88rem; line-height: 1.65; }
.ai-framework-explanation-wide { margin-bottom: 1.5rem; }
.ai-framework-model-shell { margin-top: 0; }
.ai-framework-domain-visual { display: grid; align-content: center; min-height: 23rem; background: linear-gradient(145deg, #f9fbff, #f3f7fa); }
.ai-framework-domain-model-heading { margin-bottom: 1rem; }
.ai-framework-domain-model-heading span { display: block; color: var(--color-text-muted); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ai-framework-domain-model-heading strong { display: block; margin-top: .2rem; color: var(--color-text-primary); font-size: 1rem; }
.ai-framework-domain-model { display: grid; gap: .38rem; }
.ai-framework-domain-layer { --domain-color: var(--domain-color-1); --domain-soft: var(--color-success-soft); display: grid; grid-template-columns: 2rem minmax(8rem, 11rem) 1fr; align-items: center; min-height: 2.8rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--domain-color) 30%, var(--color-border)); background: var(--domain-soft); }
.ai-framework-domain-layer.ai-model-domain-2 { --domain-color: var(--color-primary); --domain-soft: #eff6fd; }
.ai-framework-domain-layer.ai-model-domain-3 { --domain-color: var(--domain-color-3); --domain-soft: var(--color-surface-violet); }
.ai-framework-domain-layer.ai-model-domain-4 { --domain-color: #2d929d; --domain-soft: #edf9fa; }
.ai-framework-domain-layer.ai-model-domain-5 { --domain-color: #e6841c; --domain-soft: var(--color-warning-soft); }
.ai-framework-domain-layer.ai-model-domain-6 { --domain-color: #d6a40b; --domain-soft: var(--color-warning-soft); }
.ai-framework-domain-layer > span { display: grid; align-self: stretch; place-items: center; background: var(--domain-color); color: #fff; font-size: .72rem; font-weight: 800; }
.ai-framework-domain-layer > strong { padding: 0 .75rem; color: var(--domain-color); font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; }
.ai-framework-domain-layer > i { height: .32rem; margin-right: .75rem; background: linear-gradient(90deg, color-mix(in srgb, var(--domain-color) 55%, #fff), color-mix(in srgb, var(--domain-color) 8%, #fff)); }
.ai-framework-domain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ai-framework-domain-grid article { padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 0.9rem; background: #fff; }
.ai-framework-domain-grid article > div { color: var(--color-primary); font-size: 0.66rem; font-weight: 750; text-transform: uppercase; }
.ai-framework-domain-grid article > div span { margin-right: 0.22rem; font-size: 1rem; }
.ai-framework-domain-grid h2 { margin: 0.42rem 0 0.45rem; color: var(--color-text-primary); font-size: 1.05rem; }
.ai-framework-domain-grid p { margin: 0; color: var(--color-text-secondary); font-size: 0.76rem; line-height: 1.55; }
.ai-framework-capability-visual { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 0.8rem; align-items: center; background: linear-gradient(135deg, var(--color-surface-subtle), #f0fbfb); }
.ai-framework-capability-visual > div { display: grid; align-content: center; min-height: 11rem; padding: 1rem; border: 1px solid rgba(30, 91, 255, 0.14); border-radius: 0.85rem; background: #fff; }
.ai-framework-capability-visual > div span { color: var(--color-primary); font-size: 0.65rem; font-weight: 800; }
.ai-framework-capability-visual > div strong { margin: 0.28rem 0; color: var(--color-text-primary); font-size: 0.86rem; }
.ai-framework-capability-visual > div small { color: var(--color-text-secondary); font-size: 0.68rem; line-height: 1.45; }
.ai-framework-capability-visual > i { color: var(--color-primary); font-style: normal; font-weight: 800; }
.ai-framework-capability-groups { display: grid; gap: 1rem; }
.ai-framework-capability-groups article { padding: 1.2rem; border: 1px solid var(--color-border); border-radius: 0.9rem; background: #fff; }
.ai-framework-capability-groups header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.ai-framework-capability-groups header span { color: var(--color-primary); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }
.ai-framework-capability-groups header h2 { margin: 0.15rem 0 0; color: var(--color-text-primary); font-size: 1rem; }
.ai-framework-capability-groups header small { max-width: 34rem; color: var(--color-text-secondary); font-size: 0.7rem; line-height: 1.5; text-align: right; }
.ai-framework-capability-groups article > div { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.ai-framework-capability-groups article > div span { padding: 0.42rem 0.62rem; border: 1px solid #dce7f1; border-radius: 999px; background: var(--color-surface-subtle); color: #34536d; font-size: 0.67rem; font-weight: 650; }
.ai-framework-dimension-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; background: linear-gradient(135deg, var(--color-surface-subtle), #f1fbfb); }
.ai-framework-dimension-rings { position: relative; display: grid; width: 13rem; height: 13rem; place-items: center; margin: auto; border: 1px solid rgba(30, 91, 255, 0.16); border-radius: 50%; }
.ai-framework-dimension-rings::before,
.ai-framework-dimension-rings::after { position: absolute; border: 1px solid rgba(30, 91, 255, 0.18); border-radius: 50%; content: ''; }
.ai-framework-dimension-rings::before { inset: 1.6rem; }
.ai-framework-dimension-rings::after { inset: 3.2rem; background: #fff; box-shadow: 0 0.5rem 1.4rem rgba(10, 37, 71, 0.08); }
.ai-framework-dimension-rings span { z-index: 2; color: var(--color-primary); font-size: 0.78rem; font-weight: 800; }
.ai-framework-levels { display: grid; gap: 0.42rem; }
.ai-framework-levels span { display: flex; align-items: center; gap: 0.55rem; padding: 0.42rem 0.55rem; border: 1px solid var(--color-border); border-radius: 0.55rem; background: #fff; color: var(--color-text-secondary); font-size: 0.68rem; }
.ai-framework-levels b { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.58rem; }
.ai-framework-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 1rem; border: 1px solid var(--color-border); border-radius: 0.9rem; background: #fff; }
.ai-framework-stat-strip div { padding: 1.1rem; border-right: 1px solid var(--color-border); text-align: center; }
.ai-framework-stat-strip div:last-child { border-right: 0; }
.ai-framework-stat-strip strong,
.ai-framework-stat-strip span { display: block; }
.ai-framework-stat-strip strong { color: var(--color-primary); font-size: 1.35rem; }
.ai-framework-stat-strip span { color: var(--color-text-muted); font-size: 0.67rem; }
.ai-framework-view-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.ai-framework-view-grid article { padding: 1.15rem; border: 1px solid var(--color-border); border-radius: 0.9rem; background: #fff; }
.ai-framework-view-grid header { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.8rem; }
.ai-framework-view-grid header span { color: var(--color-text-primary); font-size: 0.82rem; font-weight: 750; }
.ai-framework-view-grid header strong { color: var(--color-primary); font-size: 0.65rem; white-space: nowrap; }
.ai-framework-view-grid article > div { display: grid; gap: 0.35rem; }
.ai-framework-view-grid article > div span { padding: 0.42rem 0.5rem; border-radius: 0.45rem; background: var(--color-surface-subtle); color: var(--color-text-secondary); font-size: 0.68rem; }
.ai-framework-radar-shell { padding: 1rem; border: 1px solid var(--color-border); border-radius: 1rem; background: #fff; box-shadow: var(--shadow-sm); }
.ai-framework-radar-shell .ai-dimensions-tabs { margin-bottom: 1rem; }
.ai-framework-radar-content > .tab-pane.active { display: block; }
.ai-framework-radar-shell .ai-dimensions-view-layout { min-height: 31rem; }
.ai-framework-radar-wrap { display: grid; grid-template-rows: 28rem auto; min-height: 0; padding: 0.8rem; }
.ai-framework-radar-canvas { position: relative; width: 100%; height: 28rem; min-width: 0; min-height: 0; overflow: hidden; }
.ai-framework-radar-canvas canvas { width: 100% !important; height: 100% !important; }
.ai-framework-radar-wrap small { padding-top: 0.35rem; color: var(--color-text-muted); font-size: 0.62rem; text-align: center; }
.ai-framework-radar-shell .ai-dimensions-grid { grid-auto-rows: auto; align-content: start; }
.ai-framework-radar-shell .ai-dimension-card { cursor: default; }
.ai-framework-radar-shell .ai-dimension-card:hover { border-color: var(--color-border); background: var(--color-surface-subtle); box-shadow: none; }
.usecase-library-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.usecase-library-hero-filter-link { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.55rem; padding: 0.3rem 0; border: 0; background: transparent; color: #fff; font-size: 0.92rem; font-weight: 750; text-decoration: none; white-space: nowrap; }
.usecase-library-hero-filter-link:hover,
.usecase-library-hero-filter-link:focus-visible { color: #bfeff5; outline: none; }
.usecase-library-hero-filter-link span:last-child { transition: transform 0.16s ease; }
.usecase-library-hero-filter-link:hover span:last-child { transform: translateX(2px); }
.usecase-nav-mega-empty { padding: 0.42rem 0.5rem; color: var(--color-text-muted); font-size: 0.75rem; }

.ai-domain-detail-panel { min-height: min(42rem, calc(100vh - 2rem)); }
.ai-domain-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.ai-domain-detail-heading h3 { margin: 0; }
.ai-domain-detail-heading a { color: var(--color-primary); font-size: 0.75rem; font-weight: 700; text-decoration: none; }
.ai-domain-detail-heading a:hover { text-decoration: underline; }
.ai-domain-label-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.ai-domain-label-summary > button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0.65rem; border: 1px solid var(--color-border); border-radius: 0.55rem; background: #fff; color: inherit; text-align: left; transition: border-color 0.16s ease, background-color 0.16s ease; }
.ai-domain-label-summary > button:hover,
.ai-domain-label-summary > button:focus-visible { border-color: var(--color-primary); background: var(--color-primary-soft); outline: none; }
.ai-domain-label-summary span { min-width: 0; overflow: hidden; color: var(--color-text-primary); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.ai-domain-label-summary strong { color: var(--color-text-muted); font-size: 0.68rem; }
.ai-domain-usecase-list { display: grid; gap: 0.45rem; }
.ai-domain-usecase-list a { display: grid; gap: 0.15rem; padding: 0.7rem 0.75rem; border: 1px solid var(--color-border); border-radius: 0.6rem; background: #fff; text-decoration: none; }
.ai-domain-usecase-list a:hover { border-color: #9bc1e5; background: var(--color-surface-subtle); }
.ai-domain-usecase-list strong { color: var(--color-text-primary); font-size: 0.78rem; line-height: 1.35; }
.ai-domain-usecase-list small { color: var(--color-text-muted); font-size: 0.66rem; }

.usecase-library-layout-modal {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
}
.usecase-library-layout-modal .usecase-library-main {
    grid-column: 1 / -1;
    width: 100%;
}
.usecase-library-layout-modal .usecase-library-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.usecase-library-layout-modal .usecase-library-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem 1.5rem !important;
    align-items: end !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0 1rem !important;
    border-bottom: 1px solid var(--color-border) !important;
}
.usecase-library-toolbar-summary { display: grid; gap: 0.2rem; min-width: 0; }
.usecase-library-toolbar-summary > span { color: var(--color-text-muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.usecase-library-toolbar-summary .usecase-library-result-count { color: var(--color-text-primary); font-size: 1rem; font-weight: 700; }
.usecase-library-layout-modal .usecase-library-toolbar-right { display: flex; align-items: end; gap: 0.65rem; }
.usecase-library-filter-button { min-height: 2.65rem; padding-inline: 1rem; white-space: nowrap; }
.usecase-library-sort-control { display: flex; align-items: center; gap: 0.7rem; margin: 0; padding: 0.32rem 0.38rem 0.32rem 0.72rem; border: 1px solid var(--color-border); border-radius: 0.7rem; background: #fff; box-shadow: 0 0.2rem 0.75rem rgba(10, 37, 71, 0.045); }
.usecase-library-sort-control > span { flex: 0 0 auto; color: var(--color-text-muted); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.02em; white-space: nowrap; }
.usecase-library-sort-control .form-select { min-width: 11.5rem; min-height: 2.15rem; padding-top: 0.28rem; padding-bottom: 0.28rem; border: 0; border-radius: 0.48rem; background-color: var(--color-surface-subtle); color: var(--color-text-primary); font-size: 0.78rem; font-weight: 650; box-shadow: none; }
.usecase-library-sort-control .form-select:focus { background-color: #f1f6ff; box-shadow: 0 0 0 2px rgba(30, 91, 255, 0.14); }
.usecase-library-card .usecase-library-card-meta-compact .pill-label { font-size: 0.68rem !important; line-height: 1.1 !important; padding: 0.3rem 0.52rem !important; }
.usecase-library-layout-modal .usecase-library-selected-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.45rem !important; padding-top: 0.1rem; }
.usecase-library-layout-modal .usecase-library-selected-chips:empty { display: none; }
.usecase-library-match-reasons { display: grid; gap: 0.4rem; padding: 0.7rem 0.8rem; border-radius: 0.6rem; background: #f3f8ff; }
.usecase-library-match-reasons > span { color: var(--color-text-muted); font-size: 0.63rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.usecase-library-match-reasons > div { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.usecase-library-match-reasons small { padding: 0.28rem 0.48rem; border: 1px solid #cfe0f2; border-radius: 999px; background: #fff; color: #285b86; font-size: 0.65rem; }

#useCaseFilterModal { z-index: 20000 !important; }
#useCaseFilterModal .modal-dialog { width: min(100%, 74rem); max-height: calc(100dvh - 2rem); }
.usecase-filter-modal-content { display: flex; flex-direction: column; max-height: calc(100dvh - 2rem); overflow: hidden; }
.usecase-filter-modal-body { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 0; padding: 0 !important; overflow: hidden; }
.usecase-filter-modal-nav { min-height: 0; padding: 1rem; overflow-y: auto; border-right: 1px solid var(--color-border); background: var(--color-surface-subtle); }
.usecase-filter-modal-nav-label { margin: 0 0 0.55rem 0.45rem; color: var(--color-text-muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.usecase-filter-modal-nav button { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.62rem 0.7rem; border: 0; border-radius: 0.55rem; background: transparent; color: var(--color-text-secondary); font-size: 0.78rem; font-weight: 650; text-align: left; }
.usecase-filter-modal-nav button:hover { background: #fff; color: var(--color-text-primary); }
.usecase-filter-modal-nav button.is-active { background: #eaf3ff; color: var(--color-primary); }
.usecase-filter-modal-nav button i { display: grid; place-items: center; min-width: 1.25rem; height: 1.25rem; border-radius: 999px; background: #fff; font-size: 0.65rem; font-style: normal; }
.usecase-filter-modal-panel { min-width: 0; min-height: 0; padding: 1.2rem 1.35rem; overflow-y: auto; scrollbar-gutter: stable; }
.usecase-filter-context-panel { display: grid; gap: 0.75rem; margin-bottom: 1rem; }
.usecase-filter-context-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0.9rem; border: 1px solid #cfe0f2; border-radius: 0.7rem; background: var(--color-surface-subtle); }
.usecase-filter-context-row strong, .usecase-filter-context-row small { display: block; }
.usecase-filter-context-row strong { color: var(--color-text-primary); font-size: 0.82rem; }
.usecase-filter-context-row small { margin-top: 0.15rem; color: var(--color-text-secondary); font-size: 0.7rem; }
.usecase-filter-portfolio-context { display: grid; gap: 0.65rem; padding: 0.9rem; border: 1px solid var(--color-border); border-radius: 0.7rem; }
.usecase-filter-context-heading strong, .usecase-filter-context-heading small { display: block; }
.usecase-filter-context-heading strong { color: var(--color-text-primary); font-size: 0.82rem; }
.usecase-filter-context-heading small { margin-top: 0.15rem; color: var(--color-text-muted); font-size: 0.7rem; }
.usecase-filter-context-characteristics { display: flex; flex-wrap: wrap; gap: 0.45rem; max-height: 9rem; overflow-y: auto; }
.usecase-filter-context-characteristics button { display: grid; gap: 0.08rem; padding: 0.45rem 0.6rem; border: 1px solid var(--color-border); border-radius: 0.55rem; background: #fff; color: var(--color-text-primary); text-align: left; }
.usecase-filter-context-characteristics button small { color: var(--color-text-muted); font-size: 0.58rem; text-transform: uppercase; }
.usecase-filter-context-characteristics button span { font-size: 0.7rem; font-weight: 650; }
.usecase-filter-context-characteristics button.is-selected { border-color: #77aee0; background: #eaf4ff; color: #174f7e; }
.usecase-filter-modal-panel .usecase-library-filter-group { border: 0; padding: 0; }
.usecase-filter-modal-panel .usecase-library-filter-title { pointer-events: none; font-size: 1rem; }
.usecase-filter-modal-panel .usecase-library-filter-chevron { display: none; }
.usecase-filter-modal-panel .usecase-library-filter-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: max-content; align-items: start; gap: 0.35rem 1rem; max-height: none; }
.usecase-filter-modal-panel .usecase-library-check { align-self: start; height: auto; min-height: 0; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: 0.5rem; background: #fff; }
.usecase-filter-modal-footer { flex: 0 0 auto; background: #fff !important; }

@media (max-width: 900px) {
    .usecase-nav-mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .usecase-nav-mega-grid section:nth-child(2n) { border-right: 0; }
    .ai-framework-intro-grid { grid-template-columns: 1fr; }
    .ai-framework-domain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ai-framework-view-grid { grid-template-columns: 1fr; }
    .usecase-filter-modal-body { grid-template-columns: 1fr; overflow-y: auto; }
    .usecase-filter-modal-nav { display: flex; gap: 0.35rem; padding: 0.75rem; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--color-border); }
    .usecase-filter-modal-nav-label { display: none; }
    .usecase-filter-modal-nav button { flex: 0 0 auto; width: auto; white-space: nowrap; }
    .usecase-filter-modal-panel { overflow: visible; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .usecase-library-layout-modal .usecase-library-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 620px) {
    .usecase-nav-mega-grid { grid-template-columns: 1fr; }
    .usecase-nav-mega-grid section { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .usecase-nav-mega-grid section:last-child { border-bottom: 0; }
    .usecase-nav-mega-intro { align-items: flex-start; flex-direction: column; }
    #useCaseFilterModal { padding: 0.5rem; }
    #useCaseFilterModal .modal-dialog, .usecase-filter-modal-content { max-height: calc(100dvh - 1rem); }
    .usecase-filter-modal-panel .usecase-library-filter-options { grid-template-columns: 1fr; }
    .usecase-filter-context-row { align-items: flex-start; flex-direction: column; }
    .usecase-filter-context-row .btn { width: 100%; }
    .ai-framework-domain-grid,
    .ai-framework-stat-strip { grid-template-columns: 1fr; }
    .ai-framework-stat-strip div { border-right: 0; border-bottom: 1px solid var(--color-border); }
    .ai-framework-stat-strip div:last-child { border-bottom: 0; }
    .ai-framework-capability-visual { grid-template-columns: 1fr; }
    .ai-framework-capability-visual > i { text-align: center; transform: rotate(90deg); }
    .ai-framework-dimension-visual { grid-template-columns: 1fr; }
    .ai-framework-domain-visual { min-height: 0; }
    .ai-framework-domain-layer { grid-template-columns: 2rem 8rem 1fr; }
    .ai-framework-capability-groups header { flex-direction: column; }
    .ai-framework-capability-groups header small { text-align: left; }
}

@media (max-width: 767.98px) {
    .ai-domain-label-summary { grid-template-columns: 1fr; }
    .usecase-library-hero { grid-template-columns: 1fr; }
    .usecase-library-hero-filter-link { justify-self: end; }
    .usecase-library-layout-modal .usecase-library-card-grid { grid-template-columns: 1fr !important; }
    .usecase-library-layout-modal .usecase-library-toolbar { grid-template-columns: 1fr; align-items: stretch !important; }
    .usecase-library-layout-modal .usecase-library-toolbar-right { align-items: stretch; flex-direction: column; }
    .usecase-library-sort-control .form-select, .usecase-library-filter-button { width: 100%; }
    .usecase-library-layout-modal .usecase-library-selected-chips { grid-column: 1; }
}

.portfolio-v2-impact-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.portfolio-v2-impact-grid-single {
    grid-template-columns: minmax(0, 1fr);
}

.portfolio-v2-impact-section {
    min-width: 0;
}

.portfolio-v2-impact-list {
    display: grid;
    gap: 0.65rem;
}

.portfolio-v2-impact-list article {
    align-items: start;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.8rem;
    display: grid;
    gap: 0.2rem 0.75rem;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.85rem 0.9rem;
}

.portfolio-v2-impact-list strong,
.portfolio-v2-impact-list span {
    display: block;
}

.portfolio-v2-impact-list strong {
    color: var(--color-text-primary);
    font-size: 0.9rem;
}

.portfolio-v2-impact-list div > span,
.portfolio-v2-impact-list p {
    color: var(--color-text-muted);
    font-size: 0.74rem;
}

.portfolio-v2-impact-list p {
    grid-column: 1 / -1;
    margin: 0.35rem 0 0;
}

@media (max-width: 840px) {
    .portfolio-v2-impact-grid {
        grid-template-columns: 1fr;
    }
}

.portfolio-v2-capability-matrix th,
.portfolio-v2-capability-matrix td {
    min-width: 8rem;
    text-align: center;
    vertical-align: middle;
}

.portfolio-v2-capability-matrix th:first-child {
    min-width: 15rem;
    text-align: left;
}

.portfolio-v2-capability-matrix tbody th span,
.portfolio-v2-role-impact-table td span {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
}

.portfolio-v2-impact-bubble {
    align-items: center;
    background: rgba(18, 179, 199, 0.2);
    border: 0;
    border-radius: 50%;
    color: var(--color-primary-hover);
    display: inline-flex;
    font-weight: 800;
    height: var(--impact-bubble-size);
    justify-content: center;
    transition: transform 0.16s ease, background 0.16s ease;
    width: var(--impact-bubble-size);
}

.portfolio-v2-impact-bubble:hover,
.portfolio-v2-impact-bubble:focus-visible {
    background: rgba(18, 179, 199, 0.34);
    transform: scale(1.06);
}

.portfolio-v2-impact-selection {
    background: #f4f9fc;
    border-radius: 0.7rem;
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    padding: 0.7rem 0.85rem;
}

.portfolio-v2-impact-footnote {
    color: var(--color-text-muted);
    font-size: 0.74rem;
}

.portfolio-v2-capability-explorer {
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.75fr);
    overflow: hidden;
}

.portfolio-v2-capability-tree {
    min-width: 0;
    padding: 1rem;
}

.portfolio-v2-capability-tree-head,
.portfolio-v2-capability-select {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(15rem, 1.45fr) minmax(7rem, 0.7fr) 4rem 8.5rem;
}

.portfolio-v2-capability-tree-head {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    padding: 0 0.7rem 0.5rem 2.2rem;
}

.portfolio-v2-capability-tree-head span:nth-child(n + 3) {
    text-align: right;
}

.portfolio-v2-capability-node-row {
    align-items: center;
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
}

.portfolio-v2-capability-toggle,
.portfolio-v2-capability-toggle-spacer {
    align-items: center;
    display: inline-flex;
    height: 1.8rem;
    justify-content: center;
    width: 1.6rem;
}

.portfolio-v2-capability-toggle {
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    padding: 0;
}

.portfolio-v2-capability-toggle span {
    display: block;
    font-size: 1.1rem;
    transform: rotate(0deg);
    transition: transform 0.16s ease;
}

.portfolio-v2-capability-toggle[aria-expanded="true"] span {
    transform: rotate(90deg);
}

.portfolio-v2-capability-select {
    background: #fff;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    color: var(--color-text-primary);
    font: inherit;
    padding: 0.55rem 0.65rem;
    text-align: left;
    width: 100%;
}

.portfolio-v2-capability-select:hover,
.portfolio-v2-capability-select:focus-visible,
.portfolio-v2-capability-select.is-active {
    border-color: var(--color-secondary-accent);
}

.portfolio-v2-capability-node.level-1 > .portfolio-v2-capability-node-row .portfolio-v2-capability-select {
    background: #eef5f8;
    font-weight: 600;
}

.portfolio-v2-capability-node.level-2 > .portfolio-v2-capability-node-row .portfolio-v2-capability-select {
    background: var(--color-surface-subtle);
}

.portfolio-v2-capability-children .portfolio-v2-capability-node-row {
    padding-left: 0.9rem;
}

.portfolio-v2-capability-children .portfolio-v2-capability-children .portfolio-v2-capability-node-row {
    padding-left: 1.8rem;
}

.portfolio-v2-capability-name {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    min-width: 0;
}

.portfolio-v2-capability-name i {
    background: var(--color-border);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 0.45rem;
    width: 0.45rem;
}

.has-impact > .portfolio-v2-capability-node-row .portfolio-v2-capability-name i {
    background: var(--color-secondary-accent);
}

.portfolio-v2-capability-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-v2-capability-name small {
    color: #7a8c9c;
    font-size: 0.65rem;
    font-weight: 400;
}

.portfolio-v2-capability-impact-bar {
    background: #eaf1f5;
    border-radius: 999px;
    height: 0.42rem;
    overflow: hidden;
}

.portfolio-v2-capability-impact-bar i {
    background: var(--color-secondary-accent);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.portfolio-v2-capability-select > span:nth-child(3),
.portfolio-v2-capability-select > strong {
    font-size: 0.73rem;
    text-align: right;
    white-space: nowrap;
}

.portfolio-v2-capability-select > strong {
    font-weight: 600;
}

.portfolio-v2-capability-detail {
    background: var(--color-surface-subtle);
    border-left: 1px solid var(--color-border);
    min-width: 0;
    padding: 1rem;
}

.portfolio-v2-capability-detail-empty {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.portfolio-v2-capability-detail-kicker {
    color: #0f7f8d;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-v2-capability-detail h4 {
    color: var(--color-text-primary);
    font-size: 1rem;
    margin: 0.2rem 0 0;
}

.portfolio-v2-capability-detail-facts {
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0.9rem 0;
}

.portfolio-v2-capability-detail-facts div {
    background: #fff;
    border-radius: 0.55rem;
    padding: 0.65rem;
}

.portfolio-v2-capability-detail-facts span,
.portfolio-v2-capability-detail-section > span {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.67rem;
}

.portfolio-v2-capability-detail-facts strong {
    color: var(--color-text-primary);
    display: block;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

.portfolio-v2-capability-detail-section {
    border-top: 1px solid var(--color-border);
    margin-top: 0.8rem;
    padding-top: 0.8rem;
}

.portfolio-v2-capability-detail-section h5 {
    color: var(--color-text-primary);
    font-size: 0.8rem;
    margin: 0 0 0.4rem;
}

.portfolio-v2-capability-detail-section p {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    margin: 0;
}

.portfolio-v2-capability-dimensions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.portfolio-v2-capability-dimensions > span {
    background: rgba(18, 179, 199, 0.12);
    border-radius: 999px;
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    padding: 0.28rem 0.5rem;
}

.portfolio-v2-capability-use-cases {
    display: grid;
    gap: 0.4rem;
}

.portfolio-v2-capability-use-cases article {
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.55rem 0.6rem;
}

.portfolio-v2-capability-use-cases strong,
.portfolio-v2-capability-use-cases span {
    display: block;
}

.portfolio-v2-workforce-explorer {
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.75fr);
    overflow: hidden;
}

.portfolio-v2-workforce-tree {
    min-width: 0;
    padding: 1rem;
}

.portfolio-v2-workforce-tree-head,
.portfolio-v2-workforce-family-summary,
.portfolio-v2-workforce-role {
    align-items: center;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: minmax(14rem, 1.35fr) minmax(7rem, 0.7fr) 4rem 8.5rem;
}

.portfolio-v2-workforce-tree-head {
    color: var(--color-text-muted);
    font-size: 0.68rem;
    padding: 0 0.7rem 0.5rem 2.2rem;
}

.portfolio-v2-workforce-tree-head span:nth-child(n + 3) { text-align: right; }

.portfolio-v2-workforce-family-row {
    align-items: center;
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
}

.portfolio-v2-workforce-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    display: inline-flex;
    height: 1.8rem;
    justify-content: center;
    padding: 0;
    width: 1.6rem;
}

.portfolio-v2-workforce-toggle span {
    display: block;
    font-size: 1.1rem;
    transition: transform 0.16s ease;
}

.portfolio-v2-workforce-toggle[aria-expanded="true"] span { transform: rotate(90deg); }

.portfolio-v2-workforce-family-summary,
.portfolio-v2-workforce-role {
    border: 1px solid transparent;
    border-radius: 0.55rem;
    color: var(--color-text-primary);
    padding: 0.55rem 0.65rem;
    text-align: left;
}

.portfolio-v2-workforce-family-summary { background: #eef5f8; }

.portfolio-v2-workforce-role {
    background: #fff;
    font: inherit;
    margin-left: 2.5rem;
    width: calc(100% - 2.5rem);
}

.portfolio-v2-workforce-role.has-impact:hover,
.portfolio-v2-workforce-role.has-impact:focus-visible,
.portfolio-v2-workforce-role.is-active { border-color: var(--color-secondary-accent); }

.portfolio-v2-workforce-role:disabled { opacity: 0.58; }

.portfolio-v2-workforce-name {
    align-items: center;
    display: flex;
    gap: 0.45rem;
    min-width: 0;
}

.portfolio-v2-workforce-name i {
    background: var(--color-border);
    border-radius: 50%;
    flex: 0 0 auto;
    height: 0.45rem;
    width: 0.45rem;
}

.has-impact > .portfolio-v2-workforce-family-row .portfolio-v2-workforce-name i,
.portfolio-v2-workforce-role.has-impact .portfolio-v2-workforce-name i { background: var(--color-secondary-accent); }

.portfolio-v2-workforce-name > span,
.portfolio-v2-workforce-name > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portfolio-v2-workforce-name small {
    color: #7a8c9c;
    font-size: 0.65rem;
    font-weight: 400;
}

.portfolio-v2-workforce-impact-bar {
    background: #eaf1f5;
    border-radius: 999px;
    height: 0.42rem;
    overflow: hidden;
}

.portfolio-v2-workforce-impact-bar i {
    background: var(--color-secondary-accent);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.portfolio-v2-workforce-family-summary > span:nth-child(3),
.portfolio-v2-workforce-family-summary > strong,
.portfolio-v2-workforce-role > span:nth-child(3),
.portfolio-v2-workforce-role > strong {
    font-size: 0.72rem;
    text-align: right;
}

.portfolio-v2-workforce-detail {
    background: var(--color-surface-subtle);
    border-left: 1px solid var(--color-border);
    min-width: 0;
    padding: 1rem;
}

.portfolio-v2-workforce-detail h4 {
    color: var(--color-text-primary);
    font-size: 1rem;
    margin: 0.2rem 0 0;
}

.portfolio-v2-workforce-detail-section {
    border-top: 1px solid var(--color-border);
    margin-top: 0.8rem;
    padding-top: 0.8rem;
}

.portfolio-v2-workforce-detail-section h5 {
    color: var(--color-text-primary);
    font-size: 0.8rem;
    margin: 0 0 0.4rem;
}

.portfolio-v2-workforce-detail-section p,
.portfolio-v2-workforce-detail-section li {
    color: var(--color-text-secondary);
    font-size: 0.72rem;
}

.portfolio-v2-workforce-detail-section ul {
    margin: 0;
    padding-left: 1rem;
}

.portfolio-v2-workforce-usecases {
    display: grid;
    gap: 0.4rem;
}

.portfolio-v2-workforce-usecases article {
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.55rem 0.6rem;
}

.portfolio-v2-workforce-usecases strong,
.portfolio-v2-workforce-usecases span { display: block; }
.portfolio-v2-workforce-usecases strong { color: var(--color-text-primary); font-size: 0.73rem; }
.portfolio-v2-workforce-usecases span { color: var(--color-text-muted); font-size: 0.66rem; margin-top: 0.12rem; }

.portfolio-v2-readiness-link-form {
    align-items: end;
    display: grid;
    gap: 0.7rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.portfolio-v2-readiness-link-form label {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    grid-column: 1 / -1;
}

.portfolio-v2-readiness-new {
    border-top: 1px solid var(--color-border);
    margin-top: 1.25rem;
    padding-top: 1.25rem;
}

.portfolio-v2-readiness-controls .portfolio-v2-readiness-link-form label {
    margin: 0;
}

.portfolio-v2-readiness-controls .portfolio-v2-readiness-link-form .btn {
    justify-self: start;
}

.portfolio-v2-readiness-controls .form-select,
.portfolio-v2-readiness-controls .btn-primary {
    min-height: 44px;
}

.portfolio-v2-readiness-controls .btn-primary {
    width: 190px;
    justify-content: center;
}

.portfolio-v2-readiness-create-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.portfolio-v2-readiness-create-intro .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

.portfolio-v2-readiness-create-intro p {
    min-width: 0;
    flex: 1 1 auto;
}

.portfolio-v2-readiness-existing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.portfolio-v2-readiness-existing-row > p {
    min-width: 0;
    flex: 1 1 auto;
}

.portfolio-v2-readiness-existing-row .portfolio-v2-readiness-link-form {
    width: 190px;
    flex: 0 0 190px;
    grid-template-columns: 1fr;
}

.portfolio-v2-readiness-selected-scope {
    color: #64788b;
    font-size: 0.75rem;
}

.portfolio-v2-readiness-selected-scope > small {
    display: block;
    margin-bottom: 0.35rem;
}

.portfolio-v2-readiness-selected-scope > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.portfolio-v2-readiness-selected-scope span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.45rem;
    border: 0;
    border-radius: 0.4rem;
    background: #edf3f7;
    color: #49647d;
    font-weight: 600;
    line-height: 1.25;
}

.portfolio-v2-readiness-link-page .ai-readiness-guest-scope span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    background: #edf3f7;
    color: #49647d;
    font-weight: 600;
}

.portfolio-v2-readiness-selected-scope span::before,
.portfolio-v2-readiness-link-page .ai-readiness-guest-scope span::before {
    width: 0.38rem;
    height: 0.38rem;
    flex: 0 0 0.38rem;
    border-radius: 50%;
    background: var(--color-secondary-accent);
    content: "";
}

.portfolio-readiness-radar-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.portfolio-readiness-radar-card {
    min-width: 0;
}

.portfolio-readiness-radar-card .portfolio-radar-wrap {
    height: 520px;
}

.portfolio-readiness-radar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 1.25rem;
    align-items: start;
}

.portfolio-readiness-radar-selection {
    padding: 0.85rem;
    border-radius: 0.65rem;
    background: #f6f8fa;
}

.portfolio-readiness-radar-selection > small {
    display: block;
    margin-bottom: 0.65rem;
    color: #667b8e;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.portfolio-readiness-radar-legend {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    width: max-content;
    max-width: 100%;
    margin-bottom: 0;
}

.portfolio-readiness-radar-legend .portfolio-profile-legend-item {
    width: 100%;
    font-size: 0.72rem;
    line-height: 1.25;
}

.portfolio-readiness-radar-legend.is-scrollable {
    max-height: 15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.35rem;
    scrollbar-gutter: stable;
}

.portfolio-readiness-radar-tab-content {
    padding-top: 1rem;
}

.portfolio-readiness-dimension-scores {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.portfolio-readiness-dimension-scores .is-readiness {
    background: #e8f6f4;
    color: #176d68;
}

.portfolio-readiness-condition-labels {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.portfolio-readiness-condition-main {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: flex-start;
    gap: 0.55rem;
}

.portfolio-readiness-condition-dot {
    width: 0.62rem;
    height: 0.62rem;
    flex: 0 0 0.62rem;
    margin-top: 0.35rem;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}

.portfolio-readiness-condition-dot.is-satisfied {
    background: #2f9b61;
}

.portfolio-readiness-condition-dot.is-not-satisfied {
    background: #d34b4b;
}

@media (max-width: 850px) {
    .portfolio-readiness-radar-layout { grid-template-columns: minmax(0, 1fr); }
    .portfolio-readiness-radar-selection { width: min(100%, 320px); }
}

@media (max-width: 760px) {
    .portfolio-v2-readiness-existing-row {
        align-items: stretch;
        flex-direction: column;
    }

    .portfolio-v2-readiness-existing-row .portfolio-v2-readiness-link-form {
        width: 190px;
        flex-basis: auto;
    }
}

@media (max-width: 560px) {
    .portfolio-v2-readiness-link-form { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
    .portfolio-v2-workforce-explorer { grid-template-columns: 1fr; }
    .portfolio-v2-workforce-detail { border-left: 0; border-top: 1px solid var(--color-border); }
}

.portfolio-status-tabs .nav-link span {
    display: inline-flex;
    min-width: 1.35rem;
    height: 1.35rem;
    margin-left: 0.3rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #edf2f6;
    color: #607487;
    font-size: 0.7rem;
    font-weight: 700;
}

.portfolio-status-tabs .nav-link.active span {
    background: #dfeaff;
    color: #1e5b9a;
}

@media (max-width: 680px) {
    .portfolio-v2-workforce-tree { overflow-x: auto; }
    .portfolio-v2-workforce-tree-head,
    .portfolio-v2-workforce-family-summary,
    .portfolio-v2-workforce-role { min-width: 38rem; }
}

.portfolio-v2-capability-use-cases strong {
    color: var(--color-text-primary);
    font-size: 0.74rem;
}

.portfolio-v2-capability-use-cases span {
    color: var(--color-text-muted);
    font-size: 0.66rem;
    margin-top: 0.12rem;
}

@media (max-width: 960px) {
    .portfolio-v2-capability-explorer { grid-template-columns: 1fr; }
    .portfolio-v2-capability-detail { border-left: 0; border-top: 1px solid var(--color-border); }
}

@media (max-width: 680px) {
    .portfolio-v2-capability-tree { overflow-x: auto; }
    .portfolio-v2-capability-tree-head,
    .portfolio-v2-capability-select { min-width: 38rem; }
}

.portfolio-v2-role-impact-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.portfolio-v2-role-impact-legend span {
    align-items: center;
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: 0.72rem;
    gap: 0.35rem;
}

.portfolio-v2-role-impact-legend i {
    border-radius: 50%;
    display: inline-block;
    height: 0.55rem;
    width: 0.55rem;
}

.portfolio-v2-role-scatter-wrap {
    min-width: 0;
}

.portfolio-v2-role-scatter {
    display: block;
    height: auto;
    overflow: visible;
    width: 100%;
}

.portfolio-v2-role-scatter .scatter-grid {
    stroke: var(--color-border);
    stroke-width: 1;
}

.portfolio-v2-role-scatter .scatter-axis {
    stroke: #9bb0c2;
    stroke-width: 1.2;
}

.portfolio-v2-role-scatter .scatter-axis-label,
.portfolio-v2-role-scatter .scatter-axis-title,
.portfolio-v2-role-point text {
    fill: var(--color-text-muted);
    font-family: inherit;
    font-size: 12px;
}

.portfolio-v2-role-scatter .scatter-axis-title {
    fill: var(--color-text-secondary);
    font-weight: 700;
}

.portfolio-v2-role-point {
    cursor: pointer;
}

.portfolio-v2-role-point circle {
    opacity: 0.78;
    stroke: #fff;
    stroke-width: 2;
    transition: opacity 0.16s ease, stroke 0.16s ease;
}

.portfolio-v2-role-point:hover circle,
.portfolio-v2-role-point:focus circle {
    opacity: 1;
    stroke: var(--color-text-primary);
}

.category-automation { background: #2166a5; fill: #2166a5; }
.category-augmentation { background: var(--color-secondary-accent); fill: var(--color-secondary-accent); }
.category-insight { background: #4f83cc; fill: #4f83cc; }
.category-governance { background: #6854c7; fill: #6854c7; }

.portfolio-v2-role-impact-table th,
.portfolio-v2-role-impact-table td {
    font-size: 0.8rem;
}

.portfolio-v2-workforce-capability-list {
    display: grid;
    gap: 0.85rem;
}

.portfolio-v2-workforce-capability-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.85rem;
    padding: 1rem;
}

.portfolio-v2-workforce-role-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}

.portfolio-v2-workforce-role-head h4 {
    color: var(--color-text-primary);
    font-size: 0.92rem;
    margin: 0;
}

.portfolio-v2-workforce-role-head > div > span,
.portfolio-v2-workforce-role-meta span {
    color: var(--color-text-muted);
    font-size: 0.72rem;
}

.portfolio-v2-workforce-role-meta {
    display: flex;
    flex: 0 0 auto;
    gap: 0.85rem;
}

.portfolio-v2-workforce-capability-bars {
    display: grid;
    gap: 0.65rem;
}

.portfolio-v2-workforce-capability-label {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.portfolio-v2-workforce-capability-label span,
.portfolio-v2-workforce-capability-label strong {
    color: var(--color-text-secondary);
    font-size: 0.75rem;
}

.portfolio-v2-workforce-capability-track {
    background: #eaf2f8;
    border-radius: 999px;
    height: 0.42rem;
    overflow: hidden;
}

.portfolio-v2-workforce-capability-track i {
    background: var(--color-secondary-accent);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.portfolio-correlation-save-feedback {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.68rem;
    min-height: 1rem;
    padding-top: 0.2rem;
}

.portfolio-correlation-save-feedback.is-saved {
    color: #29724a;
}

.portfolio-correlation-save-feedback.is-error {
    color: #b42318;
}

.portfolio-v2-usecase-health {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.portfolio-v2-benefits-health-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
}

.portfolio-v2-pipeline-tabs {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.portfolio-v2-pipeline-tabs button {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--color-text-muted);
    display: inline-flex;
    gap: 0.45rem;
    padding: 0.35rem 0;
}

.portfolio-v2-pipeline-tabs button.active,
.portfolio-v2-pipeline-tabs button:hover,
.portfolio-v2-pipeline-tabs button:focus-visible {
    color: var(--color-text-primary);
}

.portfolio-v2-pipeline-tabs button.active > span {
    font-weight: 800;
}

.portfolio-v2-pipeline-tabs small {
    color: inherit;
    font-size: 0.72rem;
}

.portfolio-v2-pipeline-tabs em {
    color: #b54708;
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 700;
}

.portfolio-v2-usecase-accordion {
    display: grid;
    gap: 0.6rem;
}

.portfolio-v2-usecase-row {
    border: 1px solid var(--color-border);
    border-radius: 0.8rem !important;
    overflow: hidden;
}

.portfolio-v2-usecase-toggle {
    align-items: center;
    background: #fff !important;
    box-shadow: none !important;
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(15rem, 1.6fr) minmax(9rem, 0.8fr) minmax(9rem, 0.8fr) auto;
    padding: 0.85rem 1rem;
}

.portfolio-v2-usecase-toggle::after {
    grid-column: 4;
    grid-row: 1;
}

.portfolio-v2-usecase-row-title {
    color: var(--color-text-primary);
    font-size: 0.88rem;
    font-weight: 600;
}

.portfolio-v2-usecase-row-label,
.portfolio-v2-usecase-row-industry {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

.portfolio-v2-usecase-body {
    border-top: 1px solid #e4edf5;
    padding: 1rem;
}

.portfolio-v2-usecase-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 2fr) minmax(12rem, 1fr);
    margin: 0;
}

.portfolio-v2-usecase-detail-grid dt {
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.portfolio-v2-usecase-detail-grid dd {
    color: var(--color-text-secondary);
    font-size: 0.82rem;
    margin: 0.3rem 0 0;
}

.portfolio-v2-usecase-status-form {
    align-items: end;
    border-top: 1px solid #e4edf5;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: 12rem minmax(16rem, 1fr) auto;
    margin-top: 1rem;
    padding-top: 1rem;
}

.portfolio-v2-usecase-status-field {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.portfolio-v2-usecase-status-field label {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
}

.portfolio-v2-usecase-status-field .form-control,
.portfolio-v2-usecase-status-field .form-select,
.portfolio-v2-usecase-status-action .btn {
    height: 2.5rem;
    min-height: 2.5rem;
}

.portfolio-v2-usecase-status-action {
    align-items: end;
    display: flex;
}

@media (max-width: 820px) {
    .portfolio-v2-usecase-health {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-v2-benefits-health-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .portfolio-v2-usecase-toggle {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .portfolio-v2-usecase-row-label,
    .portfolio-v2-usecase-row-industry {
        grid-column: 1;
    }

    .portfolio-v2-usecase-toggle::after {
        grid-column: 2;
        grid-row: 1 / span 3;
    }

    .portfolio-v2-usecase-detail-grid,
    .portfolio-v2-usecase-status-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .portfolio-v2-benefits-health-strip {
        grid-template-columns: 1fr;
    }
}

.portfolio-v2-role-impact-detail {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
}

.portfolio-v2-role-impact-detail section {
    background: var(--color-surface-subtle);
    border-radius: 0.8rem;
    padding: 0.9rem;
}

.portfolio-v2-role-impact-detail section:last-child {
    grid-column: 1 / -1;
}

.portfolio-v2-role-impact-detail h4 {
    color: var(--color-text-primary);
    font-size: 0.86rem;
    margin: 0 0 0.7rem;
}

.portfolio-v2-role-capability-list {
    display: grid;
    gap: 0.5rem;
}

.portfolio-v2-role-capability-list > div {
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    padding-bottom: 0.45rem;
}

.portfolio-v2-role-capability-list span,
.portfolio-v2-role-capability-list strong,
.portfolio-v2-role-shift-grid,
.portfolio-v2-role-skills-grid {
    font-size: 0.76rem;
}

.portfolio-v2-role-shift-grid,
.portfolio-v2-role-skills-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portfolio-v2-role-shift-grid article,
.portfolio-v2-role-skills-grid article {
    background: #fff;
    border-radius: 0.65rem;
    padding: 0.7rem;
}

.portfolio-v2-role-shift-grid article > div {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.portfolio-v2-role-shift-grid span {
    color: var(--color-primary-hover);
    font-weight: 700;
}

.portfolio-v2-role-shift-grid p {
    color: var(--color-text-secondary);
    margin: 0.45rem 0 0;
}

.portfolio-v2-role-skills-grid ul {
    color: var(--color-text-secondary);
    margin: 0.5rem 0 0;
    padding-left: 1rem;
}

@media (max-width: 720px) {
    .portfolio-v2-role-scatter {
        min-width: 680px;
    }

    .portfolio-v2-role-scatter-wrap {
        overflow-x: auto;
    }

    .portfolio-v2-role-impact-detail,
    .portfolio-v2-role-shift-grid,
    .portfolio-v2-role-skills-grid {
        grid-template-columns: 1fr;
    }

    .portfolio-v2-role-impact-detail section:last-child {
        grid-column: auto;
    }
}

/* ============================================================
   Merkaccenten — het logo-palet (teal #087F8C, cyaan #12B3C7)
   zichtbaar in de UI. Bewust als laatste blok: wint de cascade.
   ============================================================ */

/* 1. Kickers & sectielabels in logo-teal */
.public-kicker,
.portal-kicker,
.portfolio-section-kicker,
.public-app-panel-kicker,
.public-contact-card-kicker,
.usecase-library-sidebar-kicker,
.hc-kicker {
    color: var(--color-brand-teal) !important;
}

/* Op donkere vlakken worden kickers licht mint: logo-palet, maar leesbaar */
.public-cta-section .public-kicker,
.usecase-hero .portal-kicker,
.usecase-library-hero .portal-kicker {
    color: #9FE8F0 !important;
}

/* 2. Positieve statussen & voortgang in het logo-palet */
.ai-readiness-status.is-complete {
    background: var(--color-surface-cyan);
    color: var(--color-brand-teal);
}

.module-nav-status.is-complete {
    border-color: rgba(8, 127, 140, 0.24);
    background: var(--color-surface-cyan);
    color: var(--color-brand-teal);
}

.ai-readiness-card-progress i {
    background: var(--color-secondary-accent);
}

/* 3. Secundaire (outline-)knoppen met teal-accent; primair blijft blauw */
.btn-outline-primary {
    border-color: rgba(8, 127, 140, 0.34) !important;
    color: var(--color-brand-teal) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--color-surface-cyan) !important;
    border-color: var(--color-brand-teal) !important;
    color: var(--color-brand-teal) !important;
}

/* ============================================================
   MetroMinds brand pilot — Dashboard, Library & Portfolio
   Ink structures, blue acts, cyan interacts, teal explains.
   ============================================================ */

/* Hero surfaces carry the same ink → blue → cyan/teal rhythm as the mark. */
.dashboard-hero,
.usecase-library-hero {
    background:
        radial-gradient(circle at 88% 18%, rgba(18, 179, 199, 0.42), transparent 15rem),
        radial-gradient(circle at 72% 115%, rgba(8, 127, 140, 0.52), transparent 24rem),
        linear-gradient(132deg, var(--color-text-primary) 0%, #123B99 50%, var(--color-primary) 82%, var(--color-brand-teal) 135%) !important;
    isolation: isolate;
    position: relative;
}

.dashboard-hero::before,
.usecase-library-hero::before {
    background:
        radial-gradient(circle, var(--color-primary) 0 5px, transparent 6px) 0 0 / 42px 42px,
        radial-gradient(circle, var(--color-secondary-accent) 0 4px, transparent 5px) 21px 21px / 42px 42px;
    content: "";
    height: 132px;
    opacity: 0.16;
    pointer-events: none;
    position: absolute;
    right: 2rem;
    top: 1.5rem;
    transform: rotate(-8deg);
    width: 190px;
    z-index: -1;
}

.dashboard-hero .portfolio-section-kicker,
.usecase-library-hero .portal-kicker {
    color: #A9EDF2 !important;
}

/* Active navigation: a restrained cyan surface with blue action and teal edge. */
.customer-subnav .nav-link:hover,
.customer-subnav .nav-link:focus {
    background: rgba(18, 179, 199, 0.06) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--color-primary) !important;
}

.customer-subnav .nav-link.active {
    background: rgba(18, 179, 199, 0.08) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--color-primary) !important;
}

/* Cyan identifies interaction without competing with blue primary actions. */
:focus-visible {
    outline-color: var(--color-secondary-accent) !important;
}

.form-control:focus,
.form-select:focus,
.public-form-input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-secondary-accent) !important;
    box-shadow: 0 0 0 3px rgba(18, 179, 199, 0.18) !important;
}

.usecase-library-filter-title:hover,
.usecase-library-filter-more-toggle:hover,
.usecase-library-hero-filter-link:hover,
.portfolio-workspace-v2-breadcrumb a:hover {
    color: var(--color-primary) !important;
}

.usecase-library-check:hover {
    background: var(--color-surface-cyan) !important;
    color: var(--color-primary) !important;
}

.usecase-library-check:has(input:checked),
.usecase-library-chip {
    background: var(--color-surface-cyan) !important;
    border-color: rgba(18, 179, 199, 0.34) !important;
    color: var(--color-primary) !important;
}

/* A narrow node-colour rail gives white cards a brand signature. */
.dashboard-summary-card,
.usecase-library-card,
.portfolio-workspace-v2-card,
.portfolio-overview-panel {
    overflow: hidden;
    position: relative;
}

.dashboard-summary-card::before,
.usecase-library-card::before,
.portfolio-workspace-v2-card::before {
    content: none !important;
    display: none !important;
}

.dashboard-summary-grid .dashboard-summary-card:nth-child(2) .dashboard-summary-label {
    color: #0B7785 !important;
}

.dashboard-summary-grid .dashboard-summary-card:nth-child(3) .dashboard-summary-label,
.usecase-library-card-label {
    color: var(--color-primary) !important;
}

.usecase-library-card:hover,
.dashboard-panel-card:hover,
.dashboard-summary-card:hover,
.portfolio-workspace-v2-card:hover {
    border-color: rgba(18, 179, 199, 0.38) !important;
}

/* Portfolio workspace uses teal for insight and cyan for active context. */
.portfolio-workspace-v2-header {
    background:
        radial-gradient(circle at 90% 10%, rgba(18, 179, 199, 0.16), transparent 14rem),
        linear-gradient(135deg, #FFFFFF 0%, var(--color-surface-cyan) 100%) !important;
    border-left-color: var(--color-brand-teal) !important;
}

.portfolio-workspace-v2-nav {
    background: linear-gradient(135deg, #FFFFFF, var(--color-surface-cyan)) !important;
    border-color: rgba(18, 179, 199, 0.3) !important;
}

.portfolio-subnav-link:hover,
.portfolio-subnav-link:focus {
    background: var(--color-surface-cyan) !important;
    border-color: rgba(18, 179, 199, 0.42) !important;
    color: var(--color-brand-teal) !important;
}

.portfolio-subnav-link.active {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0.35rem 0.85rem rgba(7, 26, 61, 0.1) !important;
}

.portfolio-workspace-v2-analysis-link:hover,
.portfolio-workspace-v2-analysis-link:focus,
.portfolio-workspace-v2-analysis-link.active {
    color: var(--color-brand-teal) !important;
}

.portfolio-workspace-v2-analysis-divider,
.portfolio-workspace-v2-card-number {
    color: var(--color-secondary-accent) !important;
}

@media (max-width: 760px) {
    .dashboard-hero::before,
    .usecase-library-hero::before {
        opacity: 0.1;
        right: -3rem;
    }
}

/* Library pilot — quiet brand cues rather than decorative framing. */
.usecase-library-hero {
    background:
        radial-gradient(circle at 86% 18%, rgba(18, 179, 199, 0.2), transparent 17rem),
        radial-gradient(circle at 74% 118%, rgba(8, 127, 140, 0.24), transparent 25rem),
        linear-gradient(132deg, var(--color-text-primary) 0%, #14377F 56%, #2459C8 100%) !important;
}

.usecase-library-hero::before {
    background:
        radial-gradient(circle at 22px 22px, var(--color-primary) 0 5px, transparent 6px),
        radial-gradient(circle at 56px 43px, var(--color-secondary-accent) 0 5px, transparent 6px),
        radial-gradient(circle at 35px 74px, var(--color-brand-teal) 0 5px, transparent 6px) !important;
    content: "" !important;
    display: block !important;
    height: 96px;
    opacity: 0.42;
    right: clamp(1.25rem, 4vw, 3rem);
    top: clamp(1.25rem, 4vw, 2.5rem);
    transform: none;
    width: 88px;
}

.usecase-library-hero .portal-kicker {
    align-items: center;
    color: #FFFFFF !important;
    display: inline-flex;
    gap: 0.55rem;
}

.usecase-library-hero .portal-kicker::before {
    background: var(--color-secondary-accent);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(18, 179, 199, 0.12);
    content: "";
    display: block;
    height: 6px;
    width: 6px;
}

.customer-subnav .nav-link[href*="/client/use-cases.php"].active {
    background: rgba(18, 179, 199, 0.045) !important;
    color: var(--color-primary) !important;
}

.usecase-library-hero-filter-link:hover,
.usecase-library-hero-filter-link:focus {
    color: #B6F0F4 !important;
    text-decoration: none;
}

.usecase-library-card {
    border-color: rgba(221, 231, 247, 0.9) !important;
}

.usecase-library-card:hover {
    border-color: rgba(18, 179, 199, 0.24) !important;
    box-shadow: 0 14px 32px rgba(7, 26, 61, 0.07) !important;
}

@media (max-width: 760px) {
    .usecase-library-hero::before {
        opacity: 0.24;
        right: 0.5rem;
        top: 0.75rem;
    }
}

/* Library workspace layout — aligned with the other authenticated modules. */
.usecase-library-page-header {
    display: grid;
    gap: 0.35rem;
    padding: 0.25rem 0 0.5rem;
}

.usecase-library-page-header .portal-kicker {
    color: var(--color-brand-teal) !important;
}

.usecase-library-page-header h1 {
    color: var(--color-text-primary) !important;
    font-size: clamp(2rem, 4vw, 2.5rem) !important;
    font-weight: 650 !important;
    line-height: 1.08 !important;
    margin: 0.15rem 0 0.2rem;
}

.usecase-library-page-header p {
    color: var(--color-text-secondary) !important;
    line-height: 1.6 !important;
    margin: 0;
    max-width: 64ch;
}

.usecase-library-layout-modal {
    margin-top: 0 !important;
}

.usecase-library-layout-modal .usecase-library-main {
    padding: clamp(1.15rem, 2vw, 1.5rem) !important;
}

.usecase-library-tools-row {
    align-items: center;
    display: grid;
    gap: 0.85rem;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
}

.usecase-library-tools-row .usecase-library-search {
    margin: 0;
    max-width: none;
    width: 100%;
}

.usecase-library-tools-row .usecase-library-search .form-control {
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
    min-height: 48px;
    padding-inline: 1rem !important;
}

.usecase-library-tools-row .usecase-library-search .form-control:focus {
    border-color: var(--color-secondary-accent) !important;
    box-shadow: 0 0 0 3px rgba(18, 179, 199, 0.14) !important;
}

.usecase-library-advanced-filter {
    background: #FFFFFF !important;
    border-color: rgba(30, 91, 255, 0.24) !important;
    color: var(--color-primary) !important;
    min-height: 48px;
    white-space: nowrap;
}

.usecase-library-advanced-filter:hover,
.usecase-library-advanced-filter:focus {
    background: var(--color-surface-blue) !important;
    border-color: rgba(30, 91, 255, 0.36) !important;
    color: var(--color-primary-hover) !important;
}

.usecase-library-layout-modal .usecase-library-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
}

.usecase-library-layout-modal .usecase-library-selected-chips {
    grid-column: 1 / -1;
}

@media (max-width: 760px) {
    .usecase-library-page-header {
        padding-inline: 0;
    }

    .usecase-library-tools-row,
    .usecase-library-layout-modal .usecase-library-toolbar {
        grid-template-columns: 1fr !important;
    }

    .usecase-library-advanced-filter {
        width: 100%;
    }

    .usecase-library-layout-modal .usecase-library-toolbar-right {
        justify-self: stretch;
    }

    .usecase-library-layout-modal .usecase-library-sort-control {
        width: 100%;
    }
}