/* Shared presentation. Business modules own permissions and lifecycle state. */
:root { --ux-brand: #018acd; --ux-brand-dark: #0078b5; --ux-ink: #202b32; --ux-muted: #71808a; --ux-line: #e0e7ec; --ux-bg: #f7f9fa; color: var(--ux-ink); background: var(--ux-bg); }
html { scroll-padding-top: 88px; }
body { padding: 0; background: var(--ux-bg); font-size: 14px; line-height: 1.55; }
a { color: var(--ux-brand-dark); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid #68b9e1; outline-offset: 3px; }
button { border: 1px solid var(--ux-brand); border-radius: 8px; padding: 10px 14px; background: var(--ux-brand); font-size: 13px; font-weight: 650; }
button:hover { background: var(--ux-brand-dark); }
button:disabled { cursor: not-allowed; }
button.secondary { background: #fff; border-color: #afd6e9; color: var(--ux-brand-dark); }
button.secondary:hover { background: #e9f6fc; }
input:not([type=checkbox]):not([type=radio]), select, textarea { border: 1px solid #cddae2; border-radius: 8px; background: #fff; color: var(--ux-ink); padding: 10px 12px; }
body input:is([type=checkbox], [type=radio]) { accent-color: var(--ux-brand); }
h1, h2, h3, h4 { color: var(--ux-ink); letter-spacing: -.03em; line-height: 1.3; }
h2 { font-size: 22px; } h3 { font-size: 18px; }
p { overflow-wrap: anywhere; }
.eyebrow { color: var(--ux-muted); font-size: 10px; letter-spacing: .12em; }
.ux-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #172b37; font-size: 17px; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.ux-brand img { object-fit: contain; flex: none; }
.ux-primary, .ux-secondary { display: inline-flex; justify-content: center; align-items: center; padding: 12px 17px; border: 1px solid #afd6e9; border-radius: 8px; font-size: 13px; font-weight: 750; text-decoration: none; }
.ux-primary { background: var(--ux-brand); color: #fff; border-color: var(--ux-brand); box-shadow: 0 8px 20px #018acd20; }
.ux-primary:hover { background: var(--ux-brand-dark); }
.ux-secondary { color: var(--ux-brand-dark); background: #fff; }
.ux-skip { position: fixed; top: 12px; left: 16px; z-index: 200; padding: 12px; background: #fff; clip-path: inset(100%); }
.ux-skip:focus { clip-path: none; }
.ux-landing { background: #fff; }
.ux-landing-header { max-width: 1440px; margin: auto; padding: 20px 40px; display: flex; gap: 24px; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f3; }
.ux-landing-header nav { display: flex; gap: 30px; }
.ux-landing-header nav a { font-size: 12px; color: #687883; text-decoration: none; font-weight: 650; }
.ux-hero { max-width: 1440px; margin: auto; padding: 90px 40px 100px; display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 70px; }
.ux-hero .eyebrow { color: var(--ux-brand-dark); }
.ux-hero h1 { font-size: clamp(40px, 4.3vw, 62px); letter-spacing: -.055em; line-height: 1.1; }
.ux-hero-copy { color: #637985; font-size: 16px; line-height: 1.8; margin: 24px 0; }
.ux-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ux-hero-foot { margin-top: 30px; color: var(--ux-muted); font-size: 11px; }
.ux-preview { margin: 0; border: 1px solid #d9e7ec; border-radius: 14px; background: white; box-shadow: -20px -20px 0 #edf8fc, 0 20px 45px #24557112; min-width: 0; }
.ux-preview-bar { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--ux-line); font-size: 11px; }
.ux-preview-bar > span:last-child { margin-left: auto; color: #618793; font-size: 10px; }
.ux-symbol { background: #39a4bd; border-radius: 4px; color: #fff; padding: 0 5px; font-weight: 800; }
.ux-preview-body { padding: 28px 24px; }
.ux-preview-body h2 { margin: 6px 0 20px; }
.ux-preview-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ux-preview-metrics > div { padding: 14px 12px; background: #fff2f4; border: 1px solid #f6dce0; border-radius: 9px; }
.ux-preview-metrics > div:nth-child(2) { background: #fff9e9; border-color: #f5e8c9; }
.ux-preview-metrics > div:nth-child(3) { background: #fff5f6; border-color: #f6dce0; }
.ux-preview-metrics span, .ux-preview-metrics small { display: block; font-size: 10px; color: #71808a; }
.ux-preview-metrics strong { display: block; font-size: 20px; margin: 9px 0; }
.ux-preview-metrics > div:nth-child(odd) strong { color: #b6424e; }
.ux-preview-metrics > div:nth-child(2) strong { color: #986512; }
.ux-preview-table { margin-top: 20px; border: 1px solid var(--ux-line); border-radius: 8px; overflow: hidden; }
.ux-preview-row { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, .8fr) minmax(0, .7fr); gap: 9px; padding: 12px; border-top: 1px solid var(--ux-line); font-size: 11px; overflow-wrap: anywhere; }
.ux-preview-row:first-child { border-top: 0; background: #f7fafb; color: var(--ux-muted); font-size: 10px; }
.ux-preview figcaption { border-top: 1px solid var(--ux-line); padding: 12px 24px; color: #607985; background: #f7fbfd; font-size: 11px; border-radius: 0 0 14px 14px; }
.ux-steps { padding: 65px 40px; background: #f6fafb; text-align: center; }
.ux-steps > h2, .ux-features > h2 { font-size: clamp(28px, 3vw, 38px); margin: 10px 0 30px; }
.ux-steps ol { max-width: 1280px; margin: auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; text-align: left; }
.ux-steps li { background: white; border: 1px solid var(--ux-line); border-radius: 10px; padding: 22px; }
.ux-steps li span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #e4f5fa; color: var(--ux-brand-dark); font-size: 11px; font-weight: 750; margin-bottom: 16px; }
.ux-steps li p, .ux-features p { color: var(--ux-muted); font-size: 13px; }
.ux-features { max-width: 1360px; padding: 70px 40px; margin: auto; }
.ux-features > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ux-features article { border: 1px solid var(--ux-line); border-radius: 12px; padding: 24px; }
#crpt-connect { width: min(860px, calc(100% - 40px)); margin: 55px auto; }
.shell { border-radius: 14px; box-shadow: none; border-color: var(--ux-line); }
.ux-auth-heading { padding: 32px 36px; }
.ux-auth-heading h1 { font-size: 30px; }
.ux-auth-heading .lead { font-size: 14px; }
.step { padding: 26px 36px; gap: 16px; }
.step h2 { font-size: 19px; }
.step-number { background: #e9f6fc; color: var(--ux-brand-dark); border-radius: 50%; font-size: 13px; }
.step-copy { font-size: 13px; color: var(--ux-muted); }
.certificate-card { border-radius: 10px; padding: 15px; }
.certificate-card:has(input:checked) { background: #f0f9fd; border-color: var(--ux-brand); box-shadow: 0 0 0 1px #b2deef; }
.certificate-meta { font-size: 12px; }
.certificate-state, .status { border-radius: 9px; font-size: 13px; }
.security-note { font-size: 12px; }
.ux-sidebar, .ux-topbar { display: none; }
body:has(#connection-success:not([hidden])) .ux-landing,
body:has(#connection-success:not([hidden])) .ux-auth-heading { display: none; }
body:has(#connection-success:not([hidden])) #crpt-connect { width: auto; max-width: 1460px; margin: 0 0 0 250px; padding: 30px 38px 70px; }
body:has(#connection-success:not([hidden])) .shell { border: 0; border-radius: 0; background: transparent; overflow: visible; }
body:has(#connection-success:not([hidden])) .security-note { margin-top: 35px; padding: 18px 0; background: transparent; color: #88949d; }
body:has(#connection-success:not([hidden])) .ux-sidebar { display: flex; }
body:has(#connection-success:not([hidden])) .ux-topbar { display: flex; }
.ux-sidebar { position: fixed; inset: 0 auto 0 0; width: 250px; background: #fff; border-right: 1px solid var(--ux-line); padding: 26px 13px 18px; flex-direction: column; gap: 30px; z-index: 30; overflow-y: auto; }
.ux-sidebar .ux-brand { font-size: 15px; padding: 0 8px; }
.ux-sidebar nav { display: grid; gap: 4px; }
.ux-nav-label { color: #929da5; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; margin: 16px 13px 8px; }
.ux-sidebar nav button { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: 1px solid transparent; text-align: left; color: #3d505f; font-size: 13px; border-radius: 8px; padding: 12px 13px; }
.ux-sidebar nav button > span { color: #7f929e; font-size: 19px; width: 20px; flex: none; margin: 0; }
.ux-sidebar nav button strong { font-size: 13px; font-weight: 600; }
.ux-sidebar nav button:hover { background: #f0f7fa; }
.ux-sidebar .balance-modes { display: grid; gap: 4px; margin: 0; }
.ux-sidebar .balance-modes button { background: transparent; color: #3d505f; box-shadow: none; border-color: transparent; }
.ux-sidebar nav button[aria-current=page] { background: #389fbc; color: #fff; box-shadow: 0 5px 12px #2481a21a; border-color: #318daa; }
.ux-sidebar nav button[aria-current=page] > span { color: white; }
.ux-sidebar-foot { margin-top: auto; padding: 18px 8px 0; border-top: 1px solid var(--ux-line); }
.ux-sidebar-foot button { font-size: 12px; color: #536976; border: 0; text-align: left; }
.ux-sidebar-foot small { display: block; margin: 20px 10px 0; font-size: 10px; color: #98a5ae; }
.ux-topbar { position: sticky; top: 0; z-index: 20; margin-left: 250px; min-height: 70px; background: #fff; border-bottom: 1px solid var(--ux-line); padding: 12px 38px; justify-content: space-between; align-items: center; gap: 16px; }
.ux-breadcrumb { font-size: 12px; color: #82919b; }
.ux-breadcrumb strong { font-weight: 600; color: #354c5c; }
.ux-identity { text-align: right; min-width: 0; max-width: 45%; font-size: 12px; }
.ux-identity strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-identity span { color: #16856a; display: block; font-size: 10px; }
#ux-menu-toggle, .ux-menu-close { display: none; }
.ux-menu-backdrop { position: fixed; inset: 0; z-index: 25; border: 0; border-radius: 0; background: #18344877; }
#connection-success.success { padding: 0; border: 0; }
.ux-organization { background: #fff; border: 1px solid var(--ux-line); border-radius: 12px; padding: 17px 22px; margin-bottom: 26px; }
.ux-organization > summary { color: #536b79; cursor: pointer; font-size: 13px; font-weight: 650; }
.ux-organization .success-mark { margin-top: 18px; width: 36px; height: 36px; border-radius: 10px; font-size: 20px; }
.ux-organization h2 { font-size: 22px; }
.ux-organization .participant-check { margin-top: 20px; padding-top: 18px; }
.ux-workspace-heading { margin: 0 0 26px; }
.ux-workspace-heading h1 { font-size: 30px; margin: 5px 0 9px; }
.ux-workspace-heading > p:last-child { margin: 0; color: var(--ux-muted); font-size: 13px; }
#cis-search.participant-check, #osu.participant-check { margin-top: 0; padding-top: 0; border-top: 0; }
#cis-search-heading, #osu-heading { font-size: 21px; margin: 0 0 8px; }
.km-panel, .osu-withdrawal, .ux-card { background: #fff; border: 1px solid var(--ux-line); border-radius: 14px; padding: 22px; }
.km-panel h3, .km-panel h4 { margin-top: 0; font-size: 18px; }
.km-panel > p { color: var(--ux-muted); font-size: 12px; }
#km-progress:empty { display: none; }
#km-progress { border: 1px solid #dae8ee; background: #f0f8fc; margin: 16px 0; padding: 16px 20px; }
#km-groups { border: 1px solid var(--ux-line); border-radius: 10px; overflow: hidden; }
#km-groups:empty { display: none; }
.km-group { padding: 16px 18px; margin: 0; border: 0; border-top: 1px solid var(--ux-line); border-radius: 0; }
.km-group:first-child { border-top: 0; }
.km-group-selected { background: #f5fbfd; }
.km-group input[type=checkbox] { accent-color: var(--ux-brand); width: 17px; height: 17px; }
.km-group-info { font-size: 12px; margin: 10px 0; gap: 8px 24px; }
.km-phase { font-size: 11px; font-weight: 650; }
.km-metric { border: 1px solid #e6eaed; background: #f7f9fa; border-radius: 10px; padding: 14px 15px; font-size: 13px; }
.km-metric::before { content: ''; display: block; height: 3px; width: 22px; background: #a3afb6; border-radius: 3px; margin-bottom: 12px; }
.km-metric > span, .km-metric > strong, .km-metric > small { display: block; }
.km-metric > strong { font-size: 25px; margin: 7px 0; color: var(--ux-ink); font-variant-numeric: tabular-nums; }
.km-metric > small { font-size: 10px; color: var(--ux-muted); }
.km-metric-expired, .km-metric-introduced_gt_24_months { background: #fff0f3; border-color: #f6d8df; color: #9f3546; }
.km-metric-expiring_soon, .km-metric-introduced_gt_12_months { background: #fff8e5; border-color: #f2e6c1; color: #8e651f; }
.km-metric-expired::before, .km-metric-introduced_gt_24_months::before { background: #ce4b66; }
.km-metric-expiring_soon::before, .km-metric-introduced_gt_12_months::before { background: #dea635; }
.km-table-scroll, .osu-rows { border: 1px solid var(--ux-line); border-radius: 10px; background: #fff; }
.km-table-scroll th, .osu-rows th { background: #f7fafb; color: #758793; font-size: 11px; font-weight: 600; }
.km-table-scroll td, .osu-rows td { font-size: 12px; padding: 13px 14px; }
.km-tabs button { border-color: #d5e3eb; background: #fff; color: #607683; }
.km-tabs button[aria-pressed=true] { background: #e9f6fc; color: var(--ux-brand-dark); border-color: #80c4e5; }
.km-warning, .km-volume-warning, .km-writeoff-info { font-size: 12px; line-height: 1.6; }
.km-writeoff-action-grid button { font-size: 12px; }
#km-writeoff-calculation { background: #f8fbfc; border: 1px solid var(--ux-line); padding: 20px; border-radius: 12px; }
#km-writeoff-calculation input, #km-writeoff-calculation select { padding: 10px 12px; }
#km-writeoff-calculation label { font-size: 12px; color: #586f7d; }
#km-writeoff .km-writeoff-summary { background: #edf5f9; }
.osu-active-card { border-color: var(--ux-line); border-radius: 12px; padding: 22px; }
.osu-document-status { font-size: 11px; background: #eaf4f9; color: #437080; }
.osu-archive-card { padding: 15px 0; font-size: 12px; }
.osu-archive-card > summary { flex-wrap: wrap; gap: 8px; }
.osu-metric { background: #fff; border-color: var(--ux-line); border-radius: 10px; font-size: 12px; }
.osu-metric strong { font-size: 25px; margin-top: 8px; }
.osu-groups button { font-size: 12px; }
.osu-groups button[aria-pressed=false] { background: #fff; border-color: #d6e3eb; color: #647c8c; }
.osu-rows input { font-variant-numeric: tabular-nums; }
.osu-dialog { width: min(680px, 100%); }
.ux-future h1 { font-size: 30px; margin: 0 0 26px; }
.ux-development { min-height: 230px; display: grid; place-items: center; text-align: center; background: linear-gradient(145deg, #fff, #f5fafc); }
.ux-card.ux-development p { color: #607985; font-size: 17px; }
.ux-card h3 { margin: 14px 0 10px; }
.ux-card p { color: var(--ux-muted); font-size: 13px; }
body[data-ux-future=true] :is(#cis-search, #osu, #ux-organization, .ux-workspace-heading) { display: none !important; }
@media(min-width: 1500px) { body:has(#connection-success:not([hidden])) #crpt-connect { margin-right: auto; } }
@media(min-width: 1101px) {
    .km-group { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(240px, 2fr) auto; align-items: center; gap: 8px 20px; }
    .km-group-info { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
    .km-group-info > span:first-child { grid-column: 1 / -1; font-size: 11px; }
    .km-group > p:not(.km-phase), .km-group > button { grid-column: 1 / -1; margin: 4px 0; font-size: 11px; }
}
@media(max-width: 1100px) {
    .ux-hero { gap: 35px; padding: 65px 30px; }
    .ux-preview-metrics { grid-template-columns: 1fr; }
    .ux-preview-metrics > div { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; }
    .ux-preview-metrics strong { margin: 0; font-size: 16px; }
    .ux-preview-metrics small { display: none; }
    body:has(#connection-success:not([hidden])) #crpt-connect { padding: 25px 24px 55px; }
    .ux-topbar { padding-inline: 24px; }
}
@media(max-width: 900px) {
    .ux-hero { grid-template-columns: 1fr; gap: 45px; }
    .ux-hero h1 { max-width: 650px; }
    .ux-preview { margin-left: 20px; }
    .ux-preview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ux-preview-metrics > div { display: block; padding: 14px; }
    .ux-preview-metrics strong { margin-top: 8px; }
    .ux-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ux-features > div { grid-template-columns: 1fr; }
    .ux-landing-header nav { display: none; }
    body:has(#connection-success:not([hidden])) #crpt-connect { margin: 0; }
    body:has(#connection-success:not([hidden])) .ux-sidebar { display: none; width: 270px; }
    body.ux-menu-open:has(#connection-success:not([hidden])) .ux-sidebar { display: flex; }
    body.ux-menu-open { overflow: hidden; }
    .ux-topbar { margin-left: 0; min-height: 64px; }
    #ux-menu-toggle, .ux-menu-close { display: block; }
    .ux-menu-close { padding: 7px 10px; font-size: 12px; }
}
@media(max-width: 580px) {
    html { scroll-padding-top: 82px; }
    .ux-landing-header { padding: 17px; gap: 12px; }
    .ux-brand { font-size: 15px; gap: 6px; }
    .ux-landing-header .ux-brand img { width: 37px; height: 23px; }
    .ux-landing-header .ux-primary { font-size: 11px; padding: 9px; }
    .ux-hero { padding: 45px 18px; }
    .ux-hero h1 { font-size: 38px; }
    .ux-hero-copy { font-size: 14px; }
    .ux-hero-actions { display: grid; }
    .ux-preview { margin-left: 10px; box-shadow: -10px -10px 0 #edf8fc; }
    .ux-preview-bar { padding: 12px; flex-wrap: wrap; }
    .ux-preview-bar > span:last-child { width: 100%; margin-left: 0; }
    .ux-preview-body { padding: 16px 12px; }
    .ux-preview-body h2 { font-size: 20px; }
    .ux-preview-metrics { gap: 5px; }
    .ux-preview-metrics > div { padding: 10px 7px; }
    .ux-preview-metrics strong { font-size: 13px; }
    .ux-preview-metrics span { font-size: 9px; }
    .ux-steps, .ux-features { padding: 45px 18px; }
    .ux-steps ol { grid-template-columns: 1fr; }
    #crpt-connect { width: calc(100% - 28px); margin: 30px auto; }
    .ux-auth-heading, .step { padding: 23px 18px; }
    .ux-auth-heading h1 { font-size: 27px; }
    .step { grid-template-columns: 1fr; }
    .certificate-card { gap: 8px; padding: 12px; }
    .certificate-content { overflow-wrap: anywhere; }
    .ux-topbar { padding: 10px 16px; gap: 12px; }
    .ux-breadcrumb { display: none; }
    .ux-identity { max-width: calc(100% - 60px); }
    body:has(#connection-success:not([hidden])) #crpt-connect { padding: 22px 16px 45px; }
    .ux-workspace-heading h1, .ux-future h1 { font-size: 27px; }
    .ux-organization { padding: 14px 16px; }
    .ux-organization .participant-card { padding: 14px; }
    .km-panel, .osu-withdrawal, .ux-card { padding: 16px; }
    .km-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .km-metric { font-size: 12px; padding: 12px; overflow-wrap: anywhere; }
    .km-group { padding: 14px 12px; }
    .km-group-info { gap: 6px; }
    .km-actions { align-items: stretch; }
    .km-actions button { width: 100%; }
    #km-writeoff-calculation, .osu-active-card { padding: 14px; }
    .osu-submission-meta { overflow-wrap: anywhere; }
    .ux-card .actions { display: grid; }
    dialog { max-width: calc(100% - 24px); }
}
@media(prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
@media(max-width: 360px) {
    .ux-landing-header { flex-wrap: wrap; }
    .ux-landing-header .ux-primary { margin-left: auto; }
    .ux-hero h1 { font-size: 32px; }
    .ux-hero { grid-template-columns: minmax(0, 1fr); }
    .ux-preview-metrics { grid-template-columns: 1fr; }
    .ux-preview-metrics > div { display: flex; justify-content: space-between; align-items: center; }
    .ux-preview-metrics strong { margin: 0; }
}

/* Approved six-feature composition. */
.landing-features{max-width:1490px;padding-top:98px;padding-bottom:94px}
.landing-features .landing-section-head{max-width:760px;margin:0 auto 48px;text-align:center}
.landing-features .landing-section-head p{max-width:600px;margin:auto}
.feature-composition{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,1.05fr) minmax(0,1fr);gap:clamp(14px,2.3vw,34px);align-items:center}
.feature-side{display:grid;gap:18px}
.feature-side-left .feature-card:nth-child(2){transform:translateX(-28px)}
.feature-side-right .feature-card:nth-child(2){transform:translateX(28px)}
.feature-card{display:flex;align-items:flex-start;gap:16px;min-height:130px;padding:22px 21px;background:#fff;border:1px solid #c9e6f2;border-radius:9px;box-shadow:0 6px 22px #22587709}
.feature-number{flex:none;font-size:13px;line-height:1.5;font-weight:850;color:#018acd;font-variant-numeric:tabular-nums}
.feature-card h3{margin:0 0 7px;font-size:15px;line-height:1.3;letter-spacing:-.02em;color:#23333b}
.feature-card p{font-size:12px;line-height:1.55;color:#64747c}
.feature-center{position:relative;display:grid;place-items:center;min-height:500px;isolation:isolate}
.feature-orbit{position:absolute;border-radius:50%;z-index:-1}
.feature-orbit-outer{width:min(100%,465px);aspect-ratio:1;background:#eaf8fd;border:1px solid #d6eef8}
.feature-orbit-inner{width:min(78%,360px);aspect-ratio:1;border:1px solid #bde3f2}
.feature-journey{width:min(100%,350px);background:#fff;border:1px solid #d7e7ee;border-radius:14px;box-shadow:0 20px 45px #1c5a771d;overflow:hidden}
.feature-journey-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #edf2f4;color:#40545f;font-size:11px;font-weight:800}
.feature-journey-head i{width:7px;height:7px;border-radius:50%;background:#39a685;margin-left:auto}
.feature-journey-logo{width:22px;height:22px;display:grid;place-items:center;border-radius:6px;background:#018acd;color:#fff;font-weight:850}
.feature-journey-title{padding:20px 20px 13px;color:#243740;font-size:17px;font-weight:850;letter-spacing:-.04em}
.feature-journey-row{display:flex;align-items:center;gap:10px;margin:0 13px 8px;padding:12px 11px;background:#f8fbfd;border:1px solid #e9f1f5;border-radius:8px}
.feature-journey-row:last-child{margin-bottom:15px}
.feature-journey-icon{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:7px;background:#e6f5fb;color:#018acd;font-size:10px;font-weight:850}
.feature-journey-row div{min-width:0;flex:1}
.feature-journey-row strong,.feature-journey-row small{display:block;white-space:nowrap}
.feature-journey-row strong{font-size:11px;color:#30434c}
.feature-journey-row small{margin-top:2px;font-size:9px;color:#81919a}
.feature-journey-signal{width:8px;height:8px;border-radius:50%;background:#cb5c68}
.feature-journey-signal.amber{background:#e3ad4a}
.feature-journey-check{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#e3f6ee;color:#208864;font-size:12px}
.feature-center-tag{position:absolute;bottom:23px;background:#fff;border:1px solid #d0e7f1;border-radius:99px;color:#257da5;font-size:11px;font-weight:800;padding:8px 14px;box-shadow:0 8px 18px #22587710}
.feature-future{text-align:center;margin-top:25px;font-size:11px;color:#83929a}
@media(max-width:1120px){.feature-composition{grid-template-columns:minmax(0,1fr) minmax(270px,.9fr) minmax(0,1fr);gap:12px}.feature-card{padding:16px 14px;gap:10px;min-height:143px}.feature-center{min-height:450px}.feature-side-left .feature-card:nth-child(2),.feature-side-right .feature-card:nth-child(2){transform:none}}
@media(max-width:900px){.feature-composition{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.feature-center{grid-column:1/-1;grid-row:1;min-height:430px}.feature-side{align-self:stretch}.feature-card{min-height:145px}.feature-future{margin-top:28px}}
@media(max-width:600px){.landing-features{padding-top:65px;padding-bottom:60px}.landing-features .landing-section-head{margin-bottom:18px}.feature-composition{grid-template-columns:1fr;gap:12px}.feature-center{grid-column:1;min-height:410px}.feature-side{gap:12px}.feature-card{min-height:0;padding:17px 18px}.feature-card h3{font-size:14px}.feature-center-tag{bottom:6px}}

/* Match the approved typography, compact controls and content proportions. */
body { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; line-height: 1.5; }
.ux-sidebar { width: 218px; padding: 24px 12px; gap: 27px; }
.ux-sidebar .ux-brand { font-size: 14px; padding-inline: 2px; gap: 4px; }
.ux-sidebar nav button { padding: 11px 14px; gap: 9px; font-weight: 600; }
.ux-sidebar .balance-modes button { padding-left: 33px; font-weight: 500; }
.ux-topbar { margin-left: 218px; min-height: 68px; padding-inline: 32px; }
body:has(#connection-success:not([hidden])) #crpt-connect { margin-left: 218px; max-width: 1320px; padding: 32px 39px 76px; }
.ux-workspace-heading h1 { font-size: 29px; letter-spacing: -.045em; }
.km-panel h3, .osu-withdrawal > h3 { font-size: 20px; }
.km-metric { min-height: 110px; font-size: 11px; padding: 13px 15px; }
.km-metric > span { font-weight: 600; }
.km-metric > strong { font-size: 22px; margin: 3px 0; }
.km-metric::before { margin-bottom: 10px; }
.km-metric-disconnected { background: #fff0f1; border-color: #f4dadd; color: #a63b4b; }
.km-metric-disconnected::before { background: #c44957; }
.km-metric-expired { background: #ffe9ec; border-color: #f3c9ce; }
.km-open-gtin { white-space: nowrap; background: #eef3f6; color: #294351; border: 0; font-size: 11px; padding: 8px 10px; }
.km-open-gtin:hover { background: #e2edf2; color: #087eaf; }
#km-summary .km-table-scroll { margin: 20px -22px -22px; border-radius: 0 0 14px 14px; border-inline: 0; border-bottom: 0; }
#km-summary table { min-width: 960px; }
#km-summary .km-table-scroll td { font-size: 11px; padding: 14px 12px; }
#km-summary .km-table-scroll th { font-size: 11px; padding: 12px; }
.osu-choices { border: 0; padding: 0; margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.osu-choices legend { font-size: 11px; color: #75828a; padding-bottom: 10px; }
.osu-withdrawal .osu-choice { margin: 0; padding: 15px; border: 1px solid #dce6eb; border-radius: 9px; flex-direction: row; align-items: start; gap: 10px; cursor: pointer; }
.osu-choice:has(:checked) { background: #edf8fc; border-color: #7fc6e5; }
.osu-choice input { margin: 3px 0 0; flex: none; }
.osu-choice strong, .osu-choice small { display: block; }
.osu-choice strong { font-size: 12px; color: #294351; }
.osu-choice small { font-size: 11px; color: #74838c; margin-top: 5px; }
.osu-selection-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid #edf0f1; padding-top: 12px; }
.osu-withdrawal .osu-selection-actions button { margin: 0; }
#osu-withdrawal > div > p, #osu-withdrawal > p { font-size: 12px; color: #667780; }
#osu-withdrawal > div:nth-of-type(2):not(:empty) { border-top: 1px solid #e5ecef; padding-top: 18px; margin-top: 20px; }
.osu-draft-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.osu-draft-fields .osu-basis-name { display:block; grid-column: 1 / -1; }
.osu-draft-fields .osu-basis-name > label { display:flex; }
.osu-draft-fields .osu-dynamic-fields:empty { display: none; }
.osu-draft-fields label { font-size: 11px; font-weight: 600; }
.osu-draft-fields input, .osu-draft-fields select { width: 100%; font-size: 12px; }
.osu-active-card button:not(.primary):not(.km-document-primary) { background: #eef3f6; border-color: #eef3f6; color: #294351; }
.osu-active-card button.primary, .osu-active-card button.km-document-primary { background: var(--ux-brand); border-color: var(--ux-brand); color: white; }
.osu-metric { padding: 12px 14px; font-size: 11px; }
.osu-metric strong { font-size: 22px; margin-top: 3px; }
.ux-hero { max-width: 1420px; min-height: 660px; padding: 76px 40px 88px; }
.ux-hero h1 { font-size: clamp(42px,4.2vw,62px); margin: 18px 0 22px; }
.ux-hero-copy { line-height: 1.65; }
.ux-steps { padding: 30px 34px 40px; background: #fff; }
.ux-steps ol { gap: 0; border: 1px solid #e4ecee; border-radius: 16px; overflow: hidden; }
.ux-steps li { display: grid; grid-template-columns: 24px 1fr; column-gap: 10px; border: 0; border-left: 1px solid #e4ecee; border-radius: 0; padding: 22px; background: #f9fbfb; }
.ux-steps li:first-child { border-left: 0; }
.ux-steps li span { grid-row: 1/3; background: transparent; width: auto; height: auto; display: block; margin: 0; }
.ux-steps li strong { font-size: 13px; }.ux-steps li p { font-size: 11px; margin: 4px 0 0; }
.landing-section { margin: auto; padding-inline: 34px; }
.landing-section-head h2 { font-size: clamp(30px,3.1vw,43px); letter-spacing: -.055em; line-height: 1.2; margin: 10px 0 13px; }
.landing-section-head p { font-size: 15px; line-height: 1.7; color: #62727a; }
.auth-kicker { font-size: 10px; color: #66737b; letter-spacing: .12em; font-weight: 700; text-transform: uppercase; }
.feature-card p { margin: 0; }.feature-card { min-width: 0; }.feature-journey-head i { background: #018acd; }
@media(max-width: 1050px) { .ux-hero { grid-template-columns: 1fr; min-height: 0; padding: 64px 34px 70px; gap: 32px; } }
@media(max-width: 900px) {
  .ux-topbar { margin-left: 0; }
  body:has(#connection-success:not([hidden])) #crpt-connect { margin-left: 0; padding: 22px 16px 55px; }
}
@media(max-width: 760px) {
  .ux-hero { padding: 44px 17px 55px; gap: 28px; }.ux-hero h1 { font-size: clamp(37px,9vw,50px); }
  .ux-steps { padding: 20px 17px 35px; }.ux-steps ol { grid-template-columns: 1fr; }.ux-steps li { border-left: 0; border-top: 1px solid #e4ecee; padding: 15px 18px; }
  .landing-section { padding-inline: 17px; }.ux-topbar { padding-inline: 16px; }
  .osu-draft-fields { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width: 580px) {
  .ux-workspace-heading h1 { font-size: 26px; }
  .ux-preview-body h2 { font-size: 16px; }.ux-preview-body { padding: 12px; }.ux-preview-metrics strong { font-size: 19px; }
  #km-summary .km-table-scroll { margin: 18px -16px -16px; }
  .km-metrics { grid-template-columns: 1fr; }.km-metric { min-height: 104px; }
  .osu-choices, .osu-draft-fields { grid-template-columns: 1fr; }
  .osu-selection-actions { flex-direction: column; }.osu-selection-actions button { width: 100%; }
  .osu-summary { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }.osu-metric { padding: 10px; }.osu-metric strong { font-size: 19px; }
  .osu-rows table { min-width: 900px; }.osu-rows .osu-weight-auto { white-space: nowrap; }
}

/* Final reference overrides (the approved HTML ends with a 252px sidebar). */
.ux-sidebar { width:252px; padding:23px 13px 18px; gap:26px; }
.ux-sidebar .ux-brand { font-size:15px; gap:9px; padding:0 7px; }
.ux-sidebar nav { gap:3px; }
.ux-sidebar nav button { font-size:14px; font-weight:650; padding:11px 12px; gap:12px; min-height:44px; line-height:1.25; }
.ux-sidebar nav button > span { width:22px; height:22px; display:grid; place-items:center; }
.ux-sidebar .balance-modes button { padding-left:24px; }
.ux-sidebar nav button strong { font-size:14px; font-weight:650; }
.ux-sidebar nav button[data-ux-go=diagnostics] { margin-top:8px; }
.ux-topbar { margin-left:252px; }
body:has(#connection-success:not([hidden])) #crpt-connect { margin-left:252px; }
body[data-ux-view=osu] #ux-organization { display:none; }
.ux-osu-tabs { display:flex; gap:5px; border-bottom:1px solid var(--ux-line); margin:3px 0 27px; overflow-x:auto; }
.ux-osu-tabs button { border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:#6c7f89; padding:12px 16px; white-space:nowrap; font-size:13px; font-weight:700; }
.ux-osu-tabs button[aria-current=location] { color:var(--ux-brand); border-bottom-color:var(--ux-brand); }
.ux-osu-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:14px; }
.ux-osu-heading #osu-heading { font-size:19px; margin-bottom:4px; }.ux-osu-heading p { margin:0; font-size:12px; }
.ux-osu-heading button { flex:none; font-size:12px; padding:9px 13px; }
.ux-osu-balance-panel { background:#fff; border:1px solid var(--ux-line); border-radius:14px; overflow:hidden; }
.ux-osu-balance-panel #osu-status { background:#f5fafb; padding:13px 20px; margin:0; color:#397280; border-radius:0; }
.ux-osu-balance-panel .osu-groups { padding:19px 20px; margin:0; gap:7px; }
.ux-osu-balance-panel .osu-groups button { font-size:11px; padding:9px 12px; }
.ux-osu-balance-panel .osu-groups button[aria-pressed=true] { background:#e9f6fc; color:#018acd; border-color:#afd6e9; }
.ux-osu-balance-panel .osu-summary { margin:0; padding:0 20px 20px; gap:9px; }
.ux-osu-balance-panel #osu-filter { border-top:1px solid var(--ux-line); display:flex; justify-content:flex-end; align-items:center; padding:12px 20px; font-size:11px; }
.ux-osu-balance-panel #osu-filter[hidden] { display:none; }
.ux-osu-balance-panel .osu-rows { margin:0; border:0; border-radius:0; }
.ux-osu-balance-panel .osu-scroll-hint, .ux-osu-balance-panel .osu-pages { margin:0; padding:12px 20px; font-size:11px; }
.osu-document-title { display:inline-block; margin:0 16px 16px 0; font-size:16px; }
.osu-document-fields { margin-block:18px; }
.osu-document-fields dt { color:#74828b; font-size:11px; }
.osu-document-fields dd { margin:6px 0 0; font-size:13px; }
@media(max-width:900px) { .ux-topbar { margin-left:0; } body:has(#connection-success:not([hidden])) #crpt-connect { margin-left:0; } }
@media(max-width:580px) {
  .ux-osu-heading { align-items:start; flex-direction:column; }
  .ux-osu-tabs button { padding:10px; font-size:11px; }
  .ux-osu-balance-panel .osu-summary { padding:0 14px 14px; }
  .ux-osu-balance-panel .osu-groups { padding:14px; }
  .ux-osu-balance-panel #osu-filter { padding:10px; }
  .osu-document-title { display:block; }
}

.ux-sidebar nav button > span svg { width:21px; height:21px; display:block; }

.osu-document-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 24px; }
.osu-document-fields > div { display:block; padding:0; border:0; }
.osu-document-fields dt { font-weight:600; }.osu-document-fields dd { margin:6px 0 0; }
.osu-choice strong { font-size:14px; }.osu-choice small { font-size:12px; }
.osu-choices legend { font-weight:750; text-transform:uppercase; letter-spacing:.08em; }
.osu-withdrawal .osu-choice { padding:17px; }
#km-summary .km-metric > span { color:#26343c; }
@media(max-width:580px) {
  #km-summary { padding:24px; } #km-summary h3 { font-size:22px; line-height:1.5; }
  #km-summary > p { font-size:14px; line-height:1.5; }
  #km-summary .km-metric { font-size:13px; min-height:110px; }
  #km-summary .km-table-scroll { margin:18px -24px -24px; }
  .osu-document-fields { grid-template-columns:1fr; }
  .ux-preview-bar { padding:10px; flex-wrap:nowrap; }
  .ux-preview-bar > span:last-child { width:auto; margin-left:auto; font-size:8px; }
  .ux-preview-row { font-size:9px; padding:8px; }.ux-preview-row:first-child { font-size:9px; }
  .ux-landing-header .ux-brand img { width:60px; height:30px; }
}

/* Document headers and facts share the approved card hierarchy. */
:is(#km-writeoff,.inventory-linked-documents) .km-document-heading, .osu-document-heading {
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:nowrap;
  gap:12px; margin:0 0 19px;
}
.osu-document-heading .osu-document-title { margin:0; display:block; font-size:17px; }
:is(#km-writeoff,.inventory-linked-documents) .km-document-heading .osu-document-status, .osu-document-heading .osu-document-status {
  margin:0; flex:0 1 auto; max-width:60%; text-align:right; line-height:1.5;
}
.success .osu-document-metrics { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; max-width:460px; margin:18px 0; }
.success .osu-document-metrics > div, .success .osu-document-fields > div { display:block; min-width:0; }
.success .osu-document-metrics dt { font-size:12px; color:#74828b; }
.success .osu-document-metrics dd { margin:4px 0 0; font-size:26px; line-height:1.2; font-weight:750; color:#29353b; }
.success .osu-document-fields { margin:18px 0; gap:16px 24px; }
.success .osu-document-fields dd { margin:4px 0 0; font-size:13px; }
.osu-document-composition { border-top:1px solid #edf0f2; padding-top:13px; margin:16px 0; font-size:12px; }
.osu-document-composition > summary { cursor:pointer; color:#305d71; font-weight:700; list-style:none; }
.osu-document-composition > summary::-webkit-details-marker { display:none; }
.osu-document-composition ul { padding-left:20px; overflow-wrap:anywhere; }
.osu-document-composition li { padding:6px 0; }
@media(max-width:600px) {
  :is(#km-writeoff,.inventory-linked-documents) .km-document-heading, .osu-document-heading { flex-direction:column; gap:8px; }
  :is(#km-writeoff,.inventory-linked-documents) .km-document-heading .osu-document-status, .osu-document-heading .osu-document-status { max-width:100%; text-align:left; }
}

/* Approved landing document illustration, static and labelled. */
.landing-product-copy p,.landing-entry-copy p{font-size:15px;line-height:1.7;color:#62727a}
.landing-product{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:70px;align-items:center;padding-top:75px;padding-bottom:105px}
.landing-product-copy h2{max-width:430px}
.landing-product-copy p{max-width:470px}
.product-stage{padding:45px 25px 22px;border-radius:22px;background:linear-gradient(145deg,#eef8f9,#f9fcfc);position:relative}
.product-stage-card{background:white;border:1px solid #d9e7e9;border-radius:12px;box-shadow:0 16px 34px #2d626d1a;padding:22px 23px}
.stage-head{display:flex;justify-content:space-between;gap:15px;align-items:start}
.stage-head small,.stage-head strong{display:block}
.stage-head small{font-size:10px;color:#839198}
.stage-head strong{font-size:17px;margin-top:3px}
.stage-head>span{color:#267f8a;background:#e8f5f6;border-radius:20px;padding:7px 9px;font-size:10px;font-weight:750;white-space:nowrap}
.stage-facts{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:24px 0}
.stage-facts small,.stage-facts strong{display:block}
.stage-facts small{font-size:10px;color:#859098}
.stage-facts strong{font-size:13px;margin-top:4px}
.stage-progress{border-top:1px solid #edf1f2;padding-top:14px}
.stage-progress>div{display:flex;justify-content:space-between;font-size:11px;color:#667780}
.stage-progress>b{color:#2a3b42}
.stage-progress>span{display:block;background:#e8edf0;border-radius:6px;height:6px;overflow:hidden;margin-top:9px}
.stage-progress>span i{display:block;width:6%;height:100%;background:#3e9fbe}
.stage-action{margin-top:20px;background:#eaf6f7;border-radius:8px;padding:10px 12px;color:#287f9b;font-size:11px;font-weight:750;display:flex;justify-content:space-between}
.stage-note{font-size:10px;color:#87989f;text-align:right;margin:12px 4px 0}
.landing-product .product-stage{background:#f0f8fa;border:1px solid #dcebf0;border-radius:16px}
.landing-product .product-stage-card{box-shadow:0 8px 24px #356d7c16}

/* Live-data alignment: one active navigation item, visible organization context. */
.ux-sidebar .balance-modes button[aria-pressed]:not([aria-current=page]) { background:transparent; color:#3d505f; border-color:transparent; box-shadow:none; }
.landing-product { max-width:1350px; padding-block:70px; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
.stage-head { flex-direction:row; }.stage-facts { grid-template-columns:1fr 1fr; }
.product-stage { margin:0; min-width:0; }
.product-stage figcaption { color:#74838b; font-size:11px; margin-top:16px; }
body:not(:has(#connection-success:not([hidden]))) #crpt-connect { width:min(1280px,calc(100% - 68px)); margin:60px auto; }
body:not(:has(#connection-success:not([hidden]))) .shell { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); column-gap:60px; background:transparent; border:0; overflow:visible; }
.ux-auth-heading { grid-row:1 / 5; padding:30px 0; }
.ux-auth-heading h1 { font-size:clamp(30px,3.1vw,43px); line-height:1.2; margin:20px 0; }
.ux-auth-back { display:inline-block; margin-bottom:20px; font-size:12px; }
.ux-auth-copy { color:#62727a; font-size:15px; line-height:1.7; }
.ux-auth-security { margin-top:30px; color:#456b68; font-size:12px; padding-left:16px; border-left:3px solid #6abba9; }
.ux-auth-security p { margin:8px 0; }
body:not(:has(#connection-success:not([hidden]))) :is(#connection-steps,#connection-restore,#connection-status,.security-note) { grid-column:2; }
#connection-steps { border:1px solid var(--ux-line); border-radius:12px; overflow:hidden; }
#connection-steps .step { display:block; padding:24px; }
#connection-steps .step-number { display:none; }
#connection-steps .step + .step { border-top:1px solid var(--ux-line); }
#connection-steps .certificate-card { font-size:13px; }
body:not(:has(#connection-success:not([hidden]))) .security-note { padding:18px 0; margin-top:16px; }
.ux-home { margin-bottom:32px; }
.ux-home-heading { margin-bottom:25px; }
.ux-home-heading h1 { font-size:29px; line-height:1.25; max-width:930px; }
.ux-home-heading > p { color:#71808a; max-width:940px; margin:12px 0 0; }
.ux-home-cards { display:grid; grid-template-columns:1.65fr 1fr; gap:18px; align-items:start; }
.ux-home-cards > .participant-check { margin:0; padding:22px; background:white; border:1px solid var(--ux-line); border-radius:12px; min-width:0; }
.ux-home-cards h3 { font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:#798a94; margin:0 0 16px; }
.ux-home-cards #participant-card { margin:0; padding:0; border:0; }
.ux-home-cards #participant-card h4 { font-size:20px; }
.ux-home-cards .participant-card dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin:18px 0; }
.ux-home-cards .participant-card dl > div { display:block; }
.ux-home-cards dt { font-size:11px; font-weight:400; }
.ux-home-cards dd { font-size:13px; font-weight:650; margin-top:5px; }
.ux-home-cards #organization-mods-list { max-height:260px; overflow:auto; }
.ux-home-cards #organization-mods-list .participant-card { padding:14px 0; border:0; border-top:1px solid var(--ux-line); border-radius:0; margin:0; }
.ux-home-cards #organization-mods-list p { margin:5px 0; font-size:12px; }
.ux-home-cards .status { padding:10px; margin:12px 0; font-size:12px; }
.ux-home-cards #participant-check:has(#participant-card:not([hidden])) > .step-copy { display:none; }
.ux-home-cards #participant-card > dl { grid-template-columns:repeat(3,minmax(0,1fr)); }
.ux-home-cards #participant-card > dl > div:last-child dd { color:#178564; }
.ux-home-cards #participant-card > details { font-size:12px; color:#537280; cursor:pointer; }
.ux-home-cards .ux-mods-title { font-size:20px; margin:0 0 12px; }
#connection-steps .step + .step { border-top:0; padding-top:0; }
#connection-steps #connect-heading { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.ux-auth-heading #connection-auth-intro { display:none; }
body[data-ux-view=km] .ux-workspace-heading { display:none; }
.ux-connection-details { margin-top:15px; border-top:1px solid var(--ux-line); padding-top:12px; font-size:12px; }
.ux-connection-details summary { cursor:pointer; color:#537280; }
.ux-connection-details dl { margin:12px 0; }
.ux-workspace-heading:has(+ .ux-future) { margin-top:24px; }
#km-groups .km-group { display:grid; grid-template-columns:minmax(170px,1.3fr) minmax(240px,1.6fr) minmax(105px,.7fr) auto; gap:8px 18px; align-items:center; padding:16px; }
.km-group-name { min-width:0; }
.km-group-name strong,.km-group-name small { display:block; }
.km-group-name strong { font-size:13px; }
.km-group-name small { color:#84939c; font-size:10px; margin-top:3px; }
#km-groups .km-group-info { display:grid; grid-template-columns:1fr 1fr; gap:5px 15px; margin:0; font-size:11px; }
#km-groups .km-group-info > span:first-child { grid-column:1/-1; font-size:10px; color:#748b8d; }
#km-groups .km-group-updated { grid-column:1/3; color:#7b8b95; font-size:10px; margin:0; }
#km-groups .km-group-open { grid-column:4; grid-row:1; margin:0; font-size:11px; padding:8px 10px; }
#km-groups .km-group > .km-phase { grid-column:3; grid-row:1; justify-self:start; font-size:10px; }
#km-groups .km-group > p:not(.km-phase):not(.km-group-updated),#km-groups .km-group > button:not(.km-group-open) { grid-column:1/-1; margin:0; font-size:11px; }
.km-load-heading { display:flex; align-items:start; justify-content:space-between; gap:14px; }
.km-load-heading h3 { margin:0; }
#km-load-progress #km-progress { background:transparent; padding:0; margin:12px 0; border:0; color:#607984; font-size:12px; }
#km-load-bar { display:block; width:100%; height:9px; border:0; border-radius:8px; overflow:hidden; background:#e9eef1; accent-color:#389fbc; }
#km-load-bar::-webkit-progress-bar { background:#e9eef1; }
#km-load-bar::-webkit-progress-value { background:#389fbc; }
#km-load-count { font-size:11px; color:#7b8d98; margin:12px 0 0; }
#km-products:not(:empty) { border:1px solid var(--ux-line); border-radius:14px; padding:24px; background:#fff; margin:20px 0; }
#km-products > h3 { margin:0 0 8px; font-size:20px; }
#km-products > p { font-size:12px; color:#74838b; }
.km-detail-metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:20px 0; }
.km-detail-metrics button { text-align:left; color:var(--ux-ink); white-space:normal; }
.km-detail-metrics button[aria-pressed=true] { outline:2px solid #7db6ce; outline-offset:1px; }
.km-other-states { border:1px solid var(--ux-line); border-radius:9px; padding:13px 15px; margin:18px 0; }
.km-other-states summary { cursor:pointer; font-weight:650; font-size:12px; }
.km-metric-expired strong,.km-metric-introduced_gt_24_months strong,.km-metric-disconnected strong { color:#a63b4b; }
.km-metric-expiring_soon strong,.km-metric-introduced_gt_12_months strong { color:#946916; }
#km-products .km-table-scroll td:first-child { min-width:250px; }
#km-products .km-table-scroll td { font-size:12px; }
#km-summary .km-table-scroll th:nth-child(4),#km-products .km-table-scroll th:is(:nth-child(4),:nth-child(6)) { color:#a94350; }
#km-products .km-table-scroll th:is(:nth-child(5),:nth-child(7)) { color:#986c20; }
@media(max-width:1100px) {
  .ux-home-cards { grid-template-columns:1fr; }
  #km-groups .km-group { grid-template-columns:minmax(130px,1fr) minmax(160px,1fr) auto; gap:10px; }
  #km-groups .km-group > .km-phase { grid-column:3; }
  #km-groups .km-group-open { grid-column:3; grid-row:2; }
  .km-detail-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:760px) {
  body:not(:has(#connection-success:not([hidden]))) #crpt-connect { width:calc(100% - 34px); margin:35px auto; }
  body:not(:has(#connection-success:not([hidden]))) .shell { display:block; }
  .ux-auth-heading { padding:0 0 25px; }.ux-auth-heading h1 { font-size:32px; }
  .landing-product { grid-template-columns:1fr; gap:30px; padding:50px 17px; }
  .ux-home-heading h1 { font-size:25px; }
  .ux-home-cards > .participant-check { padding:18px; }
  .ux-home-cards #participant-card > dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #km-groups .km-group { grid-template-columns:minmax(0,1fr) auto; padding:14px; }
  #km-groups .km-group-info { grid-row:2; grid-column:1/-1; }
  #km-groups .km-group > .km-phase { grid-column:2; grid-row:1; max-width:95px; }
  #km-groups .km-group-updated { grid-column:1; grid-row:3; }
  #km-groups .km-group-open { grid-column:2; grid-row:3; }
  .km-detail-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #km-products:not(:empty) { padding:18px; }.km-load-heading { flex-wrap:wrap; }
  .stage-head { flex-direction:column; }.stage-facts { grid-template-columns:1fr; }
}

/* Group selection uses the same compact column rhythm as the reference. */
@media(min-width:721px) and (max-width:900px) {
  body:has(#connection-success:not([hidden])) .ux-sidebar { display:flex; width:252px; }
  body:has(#connection-success:not([hidden])) #crpt-connect { margin-left:252px; padding:25px 24px 55px; }
  .ux-topbar { margin-left:252px; padding-inline:24px; }
  #ux-menu-toggle,.ux-menu-close { display:none; }
}
.km-group-panel > .km-actions:first-child { justify-content:flex-end; margin-top:0; }
#km-summary h3 { font-size:22px; }
#km-summary > p { font-size:14px; }
#km-summary .km-metric { font-size:13px; }
.km-detail-metrics .km-metric { font-size:12px; font-weight:400; padding:14px 15px; }
.km-detail-metrics .km-metric > span { font-weight:400; }
.km-detail-metrics .km-metric > strong { color:var(--ux-ink); font-size:24px; margin-top:6px; }
.km-detail-metrics .km-metric::before { display:none; }
.km-detail-metrics .km-metric:hover { background:#f7f9fa; color:var(--ux-ink); border-color:#b5cbd6; }
.km-detail-metrics .km-metric-expired:hover { background:#ffe9ec; border-color:#f3c9ce; }
.km-detail-metrics .km-metric-introduced_gt_24_months:hover { background:#fff0f3; border-color:#f6d8df; }
.km-detail-metrics .km-metric-expiring_soon:hover,.km-detail-metrics .km-metric-introduced_gt_12_months:hover { background:#fff8e5; border-color:#f2e6c1; }
#km-products .km-products-heading { border-top:1px solid var(--ux-line); margin:24px 0 8px; padding-top:22px; font-size:18px; }
.km-back-summary { color:var(--ux-brand); background:white; border-color:#afd6e9; font-size:12px; }
.km-group-columns { display:grid; grid-template-columns:minmax(160px,1.5fr) .7fr .7fr 1fr .8fr 1fr auto; gap:12px; padding:12px 16px; font-size:10px; color:#7b8b94; background:#f8fafb; border:1px solid var(--ux-line); border-bottom:0; border-radius:10px 10px 0 0; }
.km-group-panel #km-groups { border-radius:0 0 10px 10px; }
#km-groups .km-group { grid-template-columns:minmax(160px,1.5fr) .7fr .7fr 1fr .8fr 1fr auto; gap:12px; }
#km-groups .km-group > label { grid-column:1; grid-row:1; }
#km-groups .km-group-info { display:contents; }
#km-groups .km-group-info > span:nth-child(1) { grid-column:6; grid-row:1; font-size:10px; color:#408578; }
#km-groups .km-group-info > span:nth-child(2) { grid-column:2; grid-row:1; }
#km-groups .km-group-info > span:nth-child(3) { grid-column:3; grid-row:1; }
#km-groups .km-group-count small,#km-groups .km-group-count strong { display:block; }
#km-groups .km-group-count small { color:#81929c; font-size:9px; line-height:1.4; }
#km-groups .km-group-count strong { color:#29414d; font-size:13px; margin-top:3px; }
#km-groups .km-group-updated { grid-column:4; grid-row:1; font-size:10px; }
#km-groups .km-group > .km-phase { grid-column:5; grid-row:1; }
#km-groups .km-group-open { grid-column:7; grid-row:1; }
@media(max-width:1100px) {
  .km-group-columns { display:none; }.km-group-panel #km-groups { border-radius:10px; }
  #km-groups .km-group { grid-template-columns:minmax(0,1.5fr) 1fr 1fr; gap:12px; }
  #km-groups .km-group > label { grid-column:1/3; grid-row:1; }
  #km-groups .km-group > .km-phase { grid-column:3; grid-row:1; }
  #km-groups .km-group-info > span:nth-child(2) { grid-column:1; grid-row:2; }
  #km-groups .km-group-info > span:nth-child(3) { grid-column:2; grid-row:2; }
  #km-groups .km-group-info > span:nth-child(1) { grid-column:1/3; grid-row:3; }
  #km-groups .km-group-updated { grid-column:1/3; grid-row:4; }
  #km-groups .km-group-open { grid-column:3; grid-row:3/5; }
}