:root {
    --eam-primary: #7c3aed;
    --eam-ink: #0f172a;
    --eam-muted: #64748b;
    --eam-line: #e7e5eb;
    --eam-soft: #f7f7fb;
    --eam-side: 280px
}

* {
    box-sizing: border-box
}

html,
body {
    height: 100%
}

body.eam-page {
    margin: 0;
    color: var(--eam-ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: #f6f7fb;
    font-size: 14px
}

.eam-shell {
    display: grid;
    grid-template-columns: var(--eam-side) minmax(0, 1fr);
    height: 100dvh;
    overflow: hidden
}

.eam-sidebar {
    display: flex;
    min-height: 0;
    flex-direction: column;
    background: #fff;
    border-right: 1px solid var(--eam-line)
}

.eam-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0eef3
}

.eam-brand>span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: #fff;
    background: var(--eam-primary);
    border-radius: 13px
}

.eam-brand div {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column
}

.eam-brand strong {
    font-size: .82rem
}

.eam-brand small {
    color: var(--eam-muted);
    font-size: .66rem
}

.eam-brand button {
    display: none;
    border: 0;
    background: none
}

.eam-nav {
    flex: 1;
    min-height: 0;
    padding: 12px 10px;
    overflow: auto;
    scrollbar-width: none
}

.eam-nav::-webkit-scrollbar {
    display: none
}

.eam-nav-label {
    display: block;
    padding: 4px 10px 7px;
    color: #94a3b8;
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.eam-nav-item,
.eam-nav-sub {
    display: flex;
    color: #475569;
    text-decoration: none
}

.eam-nav-item {
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: .76rem;
    font-weight: 700
}

.eam-nav-item>i {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    color: var(--eam-primary);
    background: #f5f3ff;
    border-radius: 9px
}

.eam-nav-item:hover,
.eam-nav-item.is-active,
.eam-nav-sub:hover,
.eam-nav-sub.is-active {
    color: var(--eam-primary);
    background: #f5f3ff
}

.eam-nav-group {
    margin-top: 5px
}

.eam-nav-group summary {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 6px 9px;
    cursor: pointer;
    border-radius: 11px;
    list-style: none;
    color: #334155;
    font-size: .74rem;
    font-weight: 750
}

.eam-nav-group summary::-webkit-details-marker {
    display: none
}

.eam-nav-group summary>i {
    font-size: .62rem;
    transition: .2s
}

.eam-nav-group[open] summary>i {
    transform: rotate(180deg)
}

.eam-nav-group-icon {
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    color: var(--eam-group);
    background: color-mix(in srgb, var(--eam-group) 9%, white);
    border: 1px solid color-mix(in srgb, var(--eam-group) 13%, white);
    border-radius: 9px
}

.eam-nav-group>div {
    margin: 2px 0 7px 23px;
    padding-left: 15px;
    border-left: 1px solid #e9e5ef
}

.eam-nav-sub {
    align-items: center;
    min-height: 31px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: .69rem;
    font-weight: 600
}

.eam-sidebar-foot {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 11px 16px;
    color: #475569;
    border-top: 1px solid var(--eam-line);
    font-size: .68rem
}

.eam-sidebar-foot i {
    color: var(--eam-primary)
}

.eam-sidebar-foot small {
    color: #94a3b8
}

.eam-main {
    min-width: 0;
    overflow: auto
}

.eam-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 8px 24px;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--eam-line);
    backdrop-filter: blur(14px)
}

.eam-topbar>div {
    display: flex;
    align-items: center
}

.eam-menu {
    display: none;
    border: 0;
    background: none;
    font-size: 1.2rem
}

.eam-crumb {
    color: #64748b;
    font-size: .7rem;
    font-weight: 650
}

.eam-crumb i {
    margin: 0 5px;
    font-size: .55rem
}

.eam-search {
    position: relative;
    display: flex;
    align-items: center;
    width: min(310px, 40vw);
    height: 36px;
    padding: 0 11px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 11px
}

.eam-search>i {
    color: #94a3b8
}

.eam-search input {
    width: 100%;
    padding-left: 8px;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: .72rem
}

.eam-search>div {
    position: absolute;
    top: 42px;
    right: 0;
    display: none;
    width: 100%;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--eam-line);
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .12)
}

.eam-search>div.show {
    display: block
}

.eam-search>div a,
.eam-search>div span {
    display: flex;
    gap: 8px;
    padding: 8px;
    color: #475569;
    text-decoration: none;
    border-radius: 8px;
    font-size: .7rem
}

.eam-search>div a:hover {
    background: #f5f3ff;
    color: var(--eam-primary)
}

.eam-content {
    width: min(1440px, 100%);
    margin: auto;
    padding: 20px 24px 40px
}

.eam-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .7fr);
    gap: 28px;
    padding: 34px;
    background: linear-gradient(135deg, #fff 55%, #f5f3ff);
    border: 1px solid var(--eam-line);
    border-radius: 24px;
    box-shadow: 0 16px 36px rgba(15, 23, 42, .045)
}

.eam-kicker,
.eam-section-head span,
.eam-panel-title span,
.eam-module-hero>div>span,
.eam-impact span {
    color: var(--eam-primary);
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase
}

.eam-hero h1,
.eam-module-hero h1 {
    margin: 10px 0 8px;
    font-size: clamp(1.65rem, 3vw, 2.5rem);
    letter-spacing: -.04em
}

.eam-hero>div>p,
.eam-module-hero p {
    max-width: 720px;
    color: var(--eam-muted);
    font-size: .88rem;
    line-height: 1.7
}

.eam-hero-actions {
    display: flex;
    gap: 8px;
    margin-top: 20px
}

.btn {
    padding: 9px 13px;
    border-radius: 10px;
    font-size: .72rem;
    font-weight: 750
}

.btn-primary {
    background: var(--eam-primary);
    border-color: var(--eam-primary)
}

.eam-hero-note {
    align-self: stretch;
    padding: 22px;
    background: #fff;
    border: 1px solid #e9e5ef;
    border-radius: 18px
}

.eam-hero-note span {
    color: #64748b;
    font-size: .65rem;
    text-transform: uppercase
}

.eam-hero-note strong {
    display: block;
    margin: 9px 0;
    font-size: 1.05rem
}

.eam-hero-note p {
    margin: 0;
    color: var(--eam-muted);
    font-size: .74rem;
    line-height: 1.6
}

.eam-section {
    margin-top: 22px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--eam-line);
    border-radius: 20px
}

.eam-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px
}

.eam-section-head h2,
.eam-panel h2,
.eam-impact h2 {
    margin: 4px 0 0;
    font-size: 1.05rem
}

.eam-section-head>p {
    max-width: 520px;
    margin: 0;
    color: var(--eam-muted);
    font-size: .72rem;
    line-height: 1.5
}

.eam-flow {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 9px
}

.eam-flow-step {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 160px;
    flex-direction: column;
    padding: 16px;
    color: var(--eam-ink);
    text-decoration: none;
    background: #fcfcfd;
    border: 1px solid var(--eam-line);
    border-radius: 16px;
    transition: .18s
}

.eam-flow-step:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--flow) 35%, white);
    box-shadow: 0 12px 28px rgba(15, 23, 42, .07)
}

.eam-flow-step>span {
    position: absolute;
    top: 11px;
    right: 11px;
    color: #94a3b8;
    font-size: .65rem
}

.eam-flow-step>i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin-bottom: 16px;
    color: var(--flow);
    background: color-mix(in srgb, var(--flow) 9%, white);
    border-radius: 11px
}

.eam-flow-step strong {
    font-size: .76rem
}

.eam-flow-step small {
    margin-top: 6px;
    color: var(--eam-muted);
    font-size: .64rem;
    line-height: 1.45
}

.eam-rail {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 11px 14px;
    color: #4338ca;
    background: #eef2ff;
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    font-size: .7rem
}

.eam-rail span {
    color: #64748b
}

.eam-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--eam-line);
    border: 1px solid var(--eam-line);
    border-radius: 16px;
    overflow: hidden
}

.eam-steps article {
    display: flex;
    gap: 12px;
    padding: 17px;
    background: #fff
}

.eam-steps b {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    color: var(--eam-primary);
    background: #f5f3ff;
    border-radius: 8px;
    font-size: .65rem
}

.eam-steps strong {
    font-size: .73rem
}

.eam-steps p {
    margin: 4px 0 0;
    color: var(--eam-muted);
    font-size: .65rem;
    line-height: 1.4
}

.eam-module-hero {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--eam-line);
    border-radius: 20px
}

.eam-module-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    color: var(--module);
    font-size: 1.35rem;
    background: color-mix(in srgb, var(--module) 9%, white);
    border: 1px solid color-mix(in srgb, var(--module) 15%, white);
    border-radius: 18px
}

.eam-module-hero h1 {
    margin: 4px 0;
    font-size: 1.55rem
}

.eam-module-hero p {
    margin: 0
}

.eam-process {
    display: flex;
    align-items: stretch;
    gap: 8px
}

.eam-process>div {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #eef0f4;
    border-radius: 12px
}

.eam-process span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #fff;
    background: var(--eam-primary);
    border-radius: 8px;
    font-size: .62rem
}

.eam-process strong {
    font-size: .68rem
}

.eam-process i {
    margin-left: auto;
    color: #94a3b8
}

.eam-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px
}

.eam-panel {
    padding: 22px;
    background: #fff;
    border: 1px solid var(--eam-line);
    border-radius: 18px
}

.eam-panel-title {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px
}

.eam-panel-title>i {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--eam-primary);
    background: #f5f3ff;
    border-radius: 11px
}

.eam-term-list {
    display: grid;
    gap: 0
}

.eam-term-list>div {
    padding: 12px 0;
    border-top: 1px solid #f0eef3
}

.eam-term-list strong {
    font-size: .73rem
}

.eam-term-list p {
    margin: 3px 0 0;
    color: var(--eam-muted);
    font-size: .69rem;
    line-height: 1.5
}

.eam-checks {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none
}

.eam-checks li {
    display: flex;
    gap: 9px;
    color: #475569;
    font-size: .7rem;
    line-height: 1.5
}

.eam-checks i {
    color: #a78bfa
}

.eam-impact {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 30px;
    margin-top: 16px;
    padding: 24px;
    color: #fff;
    background: #1e1730;
    border-radius: 20px
}

.eam-impact p {
    display: flex;
    gap: 9px;
    margin: 0 0 10px;
    color: #ddd6fe;
    font-size: .72rem
}

.eam-impact i {
    color: #a78bfa
}

.eam-guidance {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 15px 18px;
    color: #155e75;
    background: #ecfeff;
    border: 1px solid #cffafe;
    border-radius: 14px
}

.eam-guidance p {
    margin: 3px 0 0;
    color: #477385;
    font-size: .69rem
}

.eam-backdrop {
    display: none
}

@media(max-width:1100px) {
    .eam-flow {
        grid-template-columns: repeat(3, 1fr)
    }

    .eam-process {
        display: grid;
        grid-template-columns: repeat(2, 1fr)
    }

    .eam-process i {
        display: none
    }
}

@media(max-width:767.98px) {
    .eam-shell {
        display: block
    }

    .eam-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        width: min(290px, 86vw);
        transform: translateX(-105%);
        transition: .2s
    }

    .eam-menu-open .eam-sidebar {
        transform: none
    }

    .eam-menu-open .eam-backdrop {
        position: fixed;
        inset: 0;
        z-index: 20;
        display: block;
        background: rgba(15, 23, 42, .35);
        border: 0
    }

    .eam-brand button,
    .eam-menu {
        display: block
    }

    .eam-topbar {
        padding: 8px 12px
    }

    .eam-menu {
        margin-right: 7px
    }

    .eam-search {
        width: 44px
    }

    .eam-search input {
        display: none
    }

    .eam-search:focus-within {
        position: absolute;
        right: 10px;
        width: calc(100% - 20px);
        background: #fff
    }

    .eam-search:focus-within input {
        display: block
    }

    .eam-content {
        padding: 12px
    }

    .eam-hero {
        grid-template-columns: 1fr;
        padding: 22px
    }

    .eam-section {
        padding: 18px
    }

    .eam-section-head {
        align-items: start;
        flex-direction: column
    }

    .eam-flow {
        grid-template-columns: 1fr 1fr
    }

    .eam-steps,
    .eam-grid {
        grid-template-columns: 1fr
    }

    .eam-process {
        grid-template-columns: 1fr
    }

    .eam-impact {
        grid-template-columns: 1fr
    }

    .eam-module-hero {
        align-items: flex-start
    }

    .eam-rail {
        align-items: flex-start;
        flex-wrap: wrap
    }
}

@media(max-width:430px) {
    .eam-flow {
        grid-template-columns: 1fr
    }

    .eam-flow-step {
        min-height: auto
    }

    .eam-hero-actions {
        align-items: stretch;
        flex-direction: column
    }

    .eam-crumb {
        max-width: 210px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }
}

/* Operational playbook components */
.eam-module-heading {
    min-width: 0;
    flex: 1
}

.eam-module-owner {
    display: flex;
    min-width: 230px;
    flex-direction: column;
    gap: 6px;
    padding: 13px 15px;
    background: #faf9fc;
    border: 1px solid #ece9f0;
    border-radius: 14px
}

.eam-module-owner>span,
.eam-purpose-strip span,
.eam-records>span,
.eam-handoff span {
    color: #7c6f8f;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase
}

.eam-module-owner strong {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #372d47;
    font-size: .72rem
}

.eam-module-owner i {
    color: var(--eam-primary)
}

.eam-purpose-strip {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 1px;
    margin-top: 12px;
    overflow: hidden;
    background: var(--eam-line);
    border: 1px solid var(--eam-line);
    border-radius: 16px
}

.eam-purpose-strip>div {
    display: flex;
    min-height: 86px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 15px 18px;
    background: #fff
}

.eam-purpose-strip strong {
    color: #334155;
    font-size: .73rem;
    font-weight: 650;
    line-height: 1.55
}

.eam-workflow {
    display: grid;
    grid-template-columns: minmax(135px, 1fr) 24px minmax(135px, 1fr) 24px minmax(135px, 1fr) 24px minmax(135px, 1fr) 24px minmax(135px, 1fr);
    align-items: stretch
}

.eam-workflow article {
    position: relative;
    min-width: 0;
    padding: 15px;
    background: #fbfbfd;
    border: 1px solid #e8e6ec;
    border-radius: 15px
}

.eam-workflow article.is-decision {
    background: #f5f3ff;
    border-color: #ddd6fe
}

.eam-workflow article>i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 14px;
    color: var(--eam-primary);
    background: #f1edff;
    border-radius: 10px
}

.eam-workflow article>span {
    display: block;
    color: #7c3aed;
    font-size: .57rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase
}

.eam-workflow article p {
    margin: 5px 0 0;
    color: #526074;
    font-size: .65rem;
    line-height: 1.5
}

.eam-workflow-index {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #a6adba;
    font-size: .6rem;
    font-weight: 800
}

.eam-workflow-arrow {
    align-self: center;
    color: #a8a0b3;
    text-align: center
}

.eam-io-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 16px
}

.eam-io-panel {
    border-top: 3px solid #7c3aed
}

.eam-io-panel.is-output {
    border-top-color: #059669
}

.eam-io-panel.is-output .eam-panel-title>i {
    color: #047857;
    background: #ecfdf5
}

.eam-structured-list,
.eam-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none
}

.eam-structured-list li,
.eam-metrics li {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    min-height: 44px;
    padding: 10px;
    color: #475569;
    background: #fafafa;
    border: 1px solid #f0eef3;
    border-radius: 10px;
    font-size: .68rem;
    line-height: 1.45
}

.eam-structured-list i {
    color: #7c3aed
}

.is-output .eam-structured-list i {
    color: #059669
}

.eam-decision-list {
    display: grid;
    gap: 12px
}

.eam-decision-list>article {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 16px;
    padding: 14px;
    background: #fbfbfd;
    border: 1px solid #ece9f0;
    border-radius: 14px
}

.eam-decision-question {
    display: flex;
    align-items: flex-start;
    gap: 10px
}

.eam-decision-question b {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    color: #fff;
    background: #7c3aed;
    border-radius: 8px;
    font-size: .62rem
}

.eam-decision-question span {
    display: block;
    color: #8b7f98;
    font-size: .56rem;
    font-weight: 800;
    text-transform: uppercase
}

.eam-decision-question strong {
    display: block;
    margin-top: 4px;
    color: #30283c;
    font-size: .71rem;
    line-height: 1.45
}

.eam-decision-branches {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
}

.eam-decision-branches>div {
    padding: 10px 11px;
    border-radius: 10px
}

.eam-decision-branches span {
    display: block;
    font-size: .55rem;
    font-weight: 900;
    letter-spacing: .08em
}

.eam-decision-branches p {
    margin: 4px 0 0;
    color: #526074;
    font-size: .65rem;
    line-height: 1.45
}

.eam-decision-branches .is-yes {
    background: #ecfdf5;
    border: 1px solid #d1fae5
}

.eam-decision-branches .is-yes span {
    color: #047857
}

.eam-decision-branches .is-no {
    background: #fff7ed;
    border: 1px solid #ffedd5
}

.eam-decision-branches .is-no span {
    color: #c2410c
}

.eam-lifecycle {
    display: flex;
    align-items: center;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 3px
}

.eam-lifecycle>div {
    display: flex;
    min-width: max-content;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e9edf2;
    border-radius: 11px
}

.eam-lifecycle>div span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #7c3aed;
    background: #ede9fe;
    border-radius: 7px;
    font-size: .58rem;
    font-weight: 850
}

.eam-lifecycle strong {
    font-size: .65rem
}

.eam-lifecycle>i {
    color: #a8a0b3;
    font-size: .65rem
}

.eam-records {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0eef3
}

.eam-records>div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px
}

.eam-records code {
    padding: 4px 7px;
    color: #5b21b6;
    background: #f5f3ff;
    border: 1px solid #ede9fe;
    border-radius: 7px;
    font-size: .6rem
}

.eam-records small {
    display: block;
    margin-top: 7px;
    color: #94a3b8;
    font-size: .6rem
}

.eam-metrics li {
    min-height: 38px
}

.eam-metrics i {
    color: #059669
}

.eam-check-title {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #f0eef3
}

.eam-handoff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px
}

.eam-handoff>div {
    display: grid;
    grid-template-columns: 36px 1fr;
    column-gap: 10px;
    padding: 15px 16px;
    background: #f5f3ff;
    border: 1px solid #e9e2ff;
    border-radius: 15px
}

.eam-handoff>div>i {
    grid-row: 1/3;
    align-self: center;
    color: #7c3aed;
    font-size: 1rem
}

.eam-handoff strong {
    margin-top: 4px;
    color: #443652;
    font-size: .68rem;
    line-height: 1.5
}

.eam-handoff .is-risk {
    background: #fff8ed;
    border-color: #ffead0
}

.eam-handoff .is-risk>i {
    color: #d97706
}

.eam-business-flow {
    display: grid;
    grid-template-columns: minmax(145px, 1fr) 22px minmax(145px, 1fr) 22px minmax(130px, .75fr) minmax(145px, 1fr) 22px minmax(145px, 1fr) 22px minmax(145px, 1fr) 22px minmax(145px, 1fr);
    align-items: center;
    gap: 6px
}

.eam-business-flow>i {
    color: #a8a0b3;
    text-align: center
}

.eam-bf-node,
.eam-bf-decision {
    display: flex;
    min-height: 145px;
    flex-direction: column;
    padding: 14px;
    background: #fbfbfd;
    border: 1px solid #e8e6ec;
    border-radius: 14px
}

.eam-bf-node>i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 13px;
    color: #7c3aed;
    background: #f1edff;
    border-radius: 9px
}

.eam-bf-node span,
.eam-bf-decision span {
    color: #7c3aed;
    font-size: .55rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase
}

.eam-bf-node strong,
.eam-bf-decision strong {
    margin-top: 4px;
    font-size: .69rem;
    line-height: 1.35
}

.eam-bf-node small,
.eam-bf-decision small {
    margin-top: 6px;
    color: #64748b;
    font-size: .61rem;
    line-height: 1.45
}

.eam-bf-decision {
    min-height: 105px;
    justify-content: center;
    background: #fff7ed;
    border-color: #ffedd5
}

.eam-bf-decision span {
    color: #c2410c
}

.eam-bf-decision.is-yes {
    background: #ecfdf5;
    border-color: #d1fae5
}

.eam-bf-decision.is-yes span {
    color: #047857
}

@media(max-width:1250px) {
    .eam-workflow {
        grid-template-columns: 1fr 20px 1fr 20px 1fr
    }

    .eam-workflow article:nth-of-type(n+4) {
        margin-top: 10px
    }

    .eam-workflow-arrow:nth-of-type(n+4) {
        display: none
    }
}

@media(max-width:900px) {
    .eam-module-owner {
        width: 100%;
        min-width: 0
    }

    .eam-module-hero {
        flex-wrap: wrap
    }

    .eam-workflow {
        display: grid;
        grid-template-columns: 1fr
    }

    .eam-workflow-arrow {
        transform: rotate(90deg);
        padding: 2px
    }

    .eam-workflow article:nth-of-type(n+4) {
        margin-top: 0
    }

    .eam-workflow-arrow:nth-of-type(n+4) {
        display: block
    }

    .eam-decision-list>article {
        grid-template-columns: 1fr
    }

    .eam-purpose-strip,
    .eam-io-grid,
    .eam-handoff {
        grid-template-columns: 1fr
    }
}

@media(max-width:560px) {

    .eam-structured-list,
    .eam-metrics,
    .eam-decision-branches {
        grid-template-columns: 1fr
    }

    .eam-module-icon {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
        border-radius: 14px
    }

    .eam-purpose-strip>div {
        min-height: auto
    }

    .eam-handoff>div {
        grid-template-columns: 28px 1fr
    }
}

@media(max-width:1100px) {
    .eam-business-flow {
        display: grid;
        grid-template-columns: 1fr
    }

    .eam-business-flow>i {
        transform: rotate(90deg)
    }

    .eam-bf-node,
    .eam-bf-decision {
        min-height: auto
    }
}

/* System Flow & Data Map */
.eam-flow-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(260px, .6fr);
    gap: 24px;
    padding: 28px;
    background: linear-gradient(135deg, #fff 58%, #f4f0ff);
    border: 1px solid var(--eam-line);
    border-radius: 22px;
    box-shadow: 0 14px 34px rgba(34, 24, 58, .045)
}

.eam-flow-hero h1 {
    margin: 9px 0 8px;
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    letter-spacing: -.04em
}

.eam-flow-hero p {
    max-width: 780px;
    margin: 0;
    color: var(--eam-muted);
    font-size: .8rem;
    line-height: 1.7
}

.eam-flow-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-content: center
}

.eam-flow-legend span {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px;
    color: #475569;
    background: rgba(255, 255, 255, .88);
    border: 1px solid #e9e5ef;
    border-radius: 12px;
    font-size: .65rem;
    font-weight: 700
}

.eam-flow-legend i {
    color: var(--eam-primary);
    font-size: .85rem
}

.eam-flow-tabs {
    position: sticky;
    top: 70px;
    z-index: 8;
    display: flex;
    gap: 5px;
    margin: 14px 0;
    padding: 6px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--eam-line);
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04);
    backdrop-filter: blur(12px)
}

.eam-flow-tabs button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    flex: 1;
    padding: 7px 10px;
    color: #64748b;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-size: .67rem;
    font-weight: 750
}

.eam-flow-tabs button:hover {
    color: #5b21b6;
    background: #faf8ff
}

.eam-flow-tabs button.is-active {
    color: #fff;
    background: var(--eam-primary);
    box-shadow: 0 7px 16px rgba(124, 58, 237, .18)
}

.eam-flow-view {
    display: none;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--eam-line);
    border-radius: 20px
}

.eam-flow-view.is-active {
    display: block
}

.eam-simple-map {
    display: grid;
    grid-template-columns: 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr;
    align-items: stretch
}

.eam-simple-map>i {
    align-self: center;
    color: #b5adbf;
    text-align: center
}

.eam-simple-map article {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 210px;
    flex-direction: column;
    padding: 15px;
    background: #fcfcfd;
    border: 1px solid #ebe8ef;
    border-top: 3px solid var(--node);
    border-radius: 15px
}

.eam-simple-map article>b {
    position: absolute;
    top: 11px;
    right: 11px;
    color: #a5a0ad;
    font-size: .6rem
}

.eam-simple-map article>i {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-bottom: 17px;
    color: var(--node);
    background: color-mix(in srgb, var(--node) 9%, white);
    border-radius: 10px
}

.eam-simple-map article strong {
    font-size: .72rem
}

.eam-simple-map article p {
    margin: 6px 0;
    color: #64748b;
    font-size: .62rem;
    line-height: 1.48
}

.eam-simple-map article small {
    margin-top: auto;
    padding-top: 9px;
    color: color-mix(in srgb, var(--node) 78%, #334155);
    border-top: 1px solid #efedf2;
    font-size: .57rem;
    line-height: 1.4
}

.eam-support-rails {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px
}

.eam-support-rails>div {
    display: grid;
    grid-template-columns: 34px auto;
    gap: 1px 10px;
    padding: 13px 15px;
    background: #f5f3ff;
    border: 1px solid #e9e2ff;
    border-radius: 13px
}

.eam-support-rails i {
    grid-row: 1/3;
    align-self: center;
    color: #7c3aed
}

.eam-support-rails strong {
    font-size: .68rem
}

.eam-support-rails span {
    color: #64748b;
    font-size: .62rem;
    line-height: 1.4
}

.eam-complete-map {
    display: grid;
    gap: 7px
}

.eam-center-lane {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 210px;
    gap: 12px;
    padding: 12px;
    background: #fcfcfd;
    border: 1px solid #ebe9ee;
    border-left: 4px solid var(--lane);
    border-radius: 15px
}

.eam-center-lane header {
    display: grid;
    grid-template-columns: 24px 34px 1fr;
    gap: 8px;
    align-items: start
}

.eam-center-lane header>span {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #fff;
    background: var(--lane);
    border-radius: 7px;
    font-size: .58rem;
    font-weight: 800
}

.eam-center-lane header>i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--lane);
    background: color-mix(in srgb, var(--lane) 9%, white);
    border-radius: 9px
}

.eam-center-lane header strong {
    display: block;
    font-size: .7rem
}

.eam-center-lane header small {
    display: block;
    margin-top: 3px;
    color: #7b8798;
    font-size: .58rem;
    line-height: 1.35
}

.eam-lane-modules {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap
}

.eam-lane-modules a {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 7px 8px;
    color: #475569;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e9e7ec;
    border-radius: 9px;
    font-size: .59rem;
    font-weight: 700
}

.eam-lane-modules a:hover {
    color: var(--lane);
    border-color: color-mix(in srgb, var(--lane) 30%, white)
}

.eam-lane-modules span {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    color: var(--lane);
    background: color-mix(in srgb, var(--lane) 8%, white);
    border-radius: 5px;
    font-size: .5rem
}

.eam-center-lane footer {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 9px 11px;
    color: #496273;
    background: #f2f8fb;
    border-radius: 10px;
    font-size: .6rem;
    line-height: 1.4
}

.eam-center-lane footer i {
    color: var(--lane)
}

.eam-lane-handoff {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    height: 20px;
    color: #a098aa;
    font-size: .55rem;
    text-transform: uppercase;
    letter-spacing: .1em
}

.eam-journey {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 34px
}

.eam-journey:before {
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 50%;
    width: 1px;
    content: "";
    background: #e5e1e9
}

.eam-journey article {
    position: relative;
    display: grid;
    grid-template-columns: 28px 34px 1fr auto;
    gap: 10px;
    align-items: start;
    min-height: 92px;
    padding: 14px;
    background: #fbfbfd;
    border: 1px solid #e9e6ed;
    border-radius: 14px
}

.eam-journey article>b {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: #7c3aed;
    background: #ede9fe;
    border-radius: 8px;
    font-size: .56rem
}

.eam-journey article>i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: #7c3aed;
    background: #f4f1ff;
    border-radius: 9px
}

.eam-journey article strong {
    font-size: .69rem
}

.eam-journey article p {
    margin: 4px 0 0;
    color: #64748b;
    font-size: .62rem;
    line-height: 1.45
}

.eam-journey article>span {
    padding: 4px 6px;
    color: #5b21b6;
    background: #f5f3ff;
    border-radius: 6px;
    font-size: .48rem;
    font-weight: 850
}

.eam-journey article.is-human {
    border-left: 3px solid #2563eb
}

.eam-journey article.is-gate {
    border-left: 3px solid #d97706
}

.eam-journey article.is-data {
    border-left: 3px solid #059669
}

.eam-erd-core {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 16px;
    padding: 15px;
    background: #f8fafc;
    border: 1px dashed #d9d3e1;
    border-radius: 15px
}

.eam-erd-core>div {
    display: grid;
    grid-template-columns: 34px auto;
    column-gap: 9px;
    min-width: 250px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e6e2e9;
    border-radius: 12px
}

.eam-erd-core>div>i {
    grid-row: 1/3;
    align-self: center;
    color: #7c3aed
}

.eam-erd-core strong {
    font-size: .7rem
}

.eam-erd-core small {
    color: #64748b;
    font-size: .59rem
}

.eam-erd-core>i {
    color: #8b7f98
}

.eam-domain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px
}

.eam-domain-grid article {
    padding: 16px;
    border: 1px solid #e9e6ed;
    border-top: 3px solid var(--domain);
    border-radius: 14px
}

.eam-domain-grid header {
    display: flex;
    align-items: center;
    gap: 8px
}

.eam-domain-grid header span {
    width: 9px;
    height: 9px;
    background: var(--domain);
    border-radius: 50%
}

.eam-domain-grid header strong {
    font-size: .7rem
}

.eam-domain-grid article>div {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 11px
}

.eam-domain-grid code {
    padding: 5px 7px;
    color: color-mix(in srgb, var(--domain) 80%, #1e293b);
    background: color-mix(in srgb, var(--domain) 6%, white);
    border: 1px solid color-mix(in srgb, var(--domain) 12%, white);
    border-radius: 7px;
    font-size: .55rem
}

.eam-domain-grid p {
    margin: 10px 0 0;
    color: #64748b;
    font-size: .61rem;
    line-height: 1.48
}

.eam-relation-map {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding: 14px;
    overflow-x: auto;
    background: #fafafa;
    border: 1px solid #ece9ef;
    border-radius: 14px
}

.eam-relation-map>div {
    min-width: 115px;
    padding: 9px;
    text-align: center;
    background: #fff;
    border: 1px solid #e7e3ea;
    border-radius: 10px
}

.eam-relation-map strong {
    display: block;
    font-size: .61rem
}

.eam-relation-map code {
    color: #7c3aed;
    font-size: .52rem
}

.eam-relation-map>i {
    color: #a49bad
}

.eam-data-rules {
    margin-top: 12px;
    padding: 15px 17px;
    color: #34485b;
    background: #f0f9ff;
    border: 1px solid #dbeafe;
    border-radius: 14px
}

.eam-data-rules>strong {
    font-size: .69rem
}

.eam-data-rules ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 20px;
    margin: 10px 0 0;
    padding-left: 18px
}

.eam-data-rules li {
    font-size: .61rem;
    line-height: 1.45
}

.eam-role-matrix {
    overflow: hidden;
    border: 1px solid #e7e3ea;
    border-radius: 14px
}

.eam-role-matrix header,
.eam-role-matrix article {
    display: grid;
    grid-template-columns: .6fr 1fr 1fr 1fr .8fr
}

.eam-role-matrix header {
    color: #fff;
    background: #2b2138
}

.eam-role-matrix header span {
    padding: 10px;
    font-size: .57rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em
}

.eam-role-matrix article:nth-child(odd) {
    background: #fbfafc
}

.eam-role-matrix article span {
    padding: 11px;
    color: #526074;
    border-top: 1px solid #eeeaf1;
    font-size: .61rem;
    line-height: 1.4
}

.eam-role-matrix article span+span {
    border-left: 1px solid #eeeaf1
}

.eam-role-matrix article strong {
    color: #31283c
}

.eam-gates {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 12px
}

.eam-gates article {
    display: flex;
    gap: 9px;
    min-width: 0;
    padding: 13px;
    background: #fffaf2;
    border: 1px solid #ffead0;
    border-radius: 12px
}

.eam-gates b {
    display: grid;
    place-items: center;
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    color: #fff;
    background: #d97706;
    border-radius: 7px;
    font-size: .55rem
}

.eam-gates strong {
    font-size: .63rem
}

.eam-gates p {
    margin: 4px 0;
    color: #697586;
    font-size: .57rem;
    line-height: 1.4
}

.eam-gates small {
    color: #b45309;
    font-size: .52rem;
    font-weight: 750
}

@media(max-width:1250px) {
    .eam-simple-map {
        grid-template-columns: repeat(3, 1fr);
        gap: 9px
    }

    .eam-simple-map>i {
        display: none
    }

    .eam-simple-map article {
        min-height: 180px
    }

    .eam-center-lane {
        grid-template-columns: 190px 1fr
    }

    .eam-center-lane footer {
        grid-column: 1/-1
    }

    .eam-gates {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(max-width:800px) {
    .eam-flow-hero {
        grid-template-columns: 1fr
    }

    .eam-flow-tabs {
        top: 62px;
        overflow-x: auto
    }

    .eam-flow-tabs button {
        min-width: 135px;
        flex: none
    }

    .eam-flow-view {
        padding: 17px
    }

    .eam-simple-map {
        grid-template-columns: 1fr 1fr
    }

    .eam-center-lane {
        grid-template-columns: 1fr
    }

    .eam-center-lane footer {
        grid-column: auto
    }

    .eam-journey {
        grid-template-columns: 1fr
    }

    .eam-journey:before {
        display: none
    }

    .eam-domain-grid {
        grid-template-columns: 1fr
    }

    .eam-role-matrix header {
        display: none
    }

    .eam-role-matrix article {
        display: grid;
        grid-template-columns: 1fr
    }

    .eam-role-matrix article span {
        display: grid;
        grid-template-columns: 105px 1fr;
        gap: 8px
    }

    .eam-role-matrix article span:before {
        content: attr(data-label);
        color: #8b7f98;
        font-size: .52rem;
        font-weight: 800;
        text-transform: uppercase
    }

    .eam-role-matrix article span+span {
        border-left: 0
    }

    .eam-gates {
        grid-template-columns: 1fr 1fr
    }

    .eam-data-rules ul {
        grid-template-columns: 1fr
    }
}

@media(max-width:480px) {

    .eam-flow-legend,
    .eam-simple-map,
    .eam-support-rails,
    .eam-gates {
        grid-template-columns: 1fr
    }

    .eam-erd-core {
        align-items: stretch;
        flex-direction: column
    }

    .eam-erd-core>div {
        min-width: 0
    }

    .eam-erd-core>i {
        align-self: center
    }

    .eam-role-matrix article span {
        grid-template-columns: 85px 1fr
    }
}

/* =========================================================
   EA Manual Book — Mobile Scroll Fix
   Letakkan paling bawah
   ========================================================= */

@media (max-width: 767.98px) {
    html,
    body {
        width: 100%;
        min-height: 100%;
    }

    body.eam-page {
        height: auto;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .eam-shell {
        display: block;
        width: 100%;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    .eam-main {
        width: 100%;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    .eam-content {
        width: 100%;
        min-width: 0;
        padding: 12px 12px 32px;
    }

    .eam-topbar {
        position: sticky;
        top: 0;
        z-index: 15;
    }

    /* Sidebar tetap memiliki scroll sendiri */
    .eam-sidebar {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    .eam-nav {
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    /* Saat menu terbuka, kunci halaman belakang */
    body.eam-menu-open {
        overflow: hidden;
        touch-action: none;
    }

    body.eam-menu-open .eam-sidebar {
        touch-action: pan-y;
    }
}