.demo-flow-card {
    position: relative;
    display: grid;
    gap: 1.1rem;
    margin: 1.25rem 0;
    padding: 1.2rem;
    border: 1px solid
        color-mix(in srgb, var(--app-primary) 24%, var(--bs-border-color));
    border-radius: 1.1rem;
    background:
        linear-gradient(
            135deg,
            rgba(var(--app-primary-rgb), 0.13),
            rgba(var(--app-secondary-rgb), 0.08) 46%,
            rgba(255, 255, 255, 0.82)
        ),
        var(--bs-body-bg);
    box-shadow: 0 18px 42px rgba(var(--app-primary-rgb), 0.08);
    overflow: hidden;
}

.demo-story-player,
.demo-story-player-pill,
.demo-story-launcher,
.demo-story-picker {
    position: fixed;
    z-index: 1085;
    width: min(420px, calc(100vw - 28px));
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 0.85rem;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 72px rgba(15, 23, 42, 0.22);
}

.demo-story-launcher {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: auto;
    min-height: 2.75rem;
    padding: 0.65rem 0.85rem;
    color: var(--app-text-strong, #172033);
    font-size: 0.84rem;
    font-weight: 820;
}

.demo-story-launcher strong {
    display: grid;
    place-items: center;
    min-width: 1.45rem;
    height: 1.45rem;
    border-radius: 999px;
    background: var(--app-primary);
    color: #fff;
    font-size: 0.72rem;
}

.demo-story-player {
    overflow: hidden;
}

.demo-story-picker {
    width: min(460px, calc(100vw - 28px));
    overflow: hidden;
}

.demo-story-picker__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    background: linear-gradient(135deg, rgba(var(--app-primary-rgb), 0.12), rgba(var(--app-secondary-rgb), 0.08));
}

.demo-story-picker__header div {
    display: grid;
    gap: 0.15rem;
}

.demo-story-picker__header span,
.demo-story-picker__card span,
.demo-story-player__focus span {
    color: var(--app-primary);
    font-size: 0.68rem;
    font-weight: 820;
    text-transform: uppercase;
}

.demo-story-picker__header strong {
    color: var(--app-text-strong, #172033);
    font-size: 1.06rem;
    font-weight: 850;
}

.demo-story-picker__header button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.86);
}

.demo-story-picker__body {
    display: grid;
    gap: 0.65rem;
    max-height: min(66vh, 560px);
    padding: 0.9rem;
    overflow: auto;
}

.demo-story-picker__card {
    display: grid;
    gap: 0.65rem;
    padding: 0.8rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 0.72rem;
    background: rgba(248, 250, 252, 0.86);
}

.demo-story-picker__card strong {
    display: block;
    margin-top: 0.12rem;
    color: var(--app-text-strong, #172033);
    font-size: 0.9rem;
    font-weight: 820;
}

.demo-story-picker__card p {
    margin: 0.3rem 0 0;
    color: var(--app-text-soft, #475569);
    font-size: 0.8rem;
    line-height: 1.42;
}

.demo-story-picker__card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.demo-story-picker__card em {
    color: var(--app-text-muted, #64748b);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 750;
}

.demo-story-picker__card button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.38rem 0.62rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.2);
    border-radius: 0.55rem;
    background: var(--app-primary);
    color: #fff;
    font-size: 0.76rem;
    font-weight: 780;
}

.demo-story-player.is-dragging,
.demo-story-player-pill.is-dragging {
    cursor: grabbing;
    user-select: none;
}

.demo-story-player__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.95rem 1rem;
    background: linear-gradient(135deg, rgba(var(--app-primary-rgb), 0.12), rgba(var(--app-secondary-rgb), 0.08));
    cursor: grab;
}

.demo-story-player__header div:first-child {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.demo-story-player__header span,
.demo-story-player__select-label,
.demo-story-player__step-meta span,
.demo-story-player__script span {
    color: var(--app-primary);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.demo-story-player__header strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
}

.demo-story-player__window-actions {
    display: inline-flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

.demo-story-player__window-actions button,
.demo-story-player__btn {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.86);
    color: var(--app-text-strong, #172033);
}

.demo-story-player__window-actions button {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
}

.demo-story-player__body {
    display: grid;
    gap: 0.75rem;
    max-height: min(58vh, 520px);
    padding: 1rem;
    overflow: auto;
}

.demo-story-player__select {
    width: 100%;
    min-height: 2.45rem;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 0.62rem;
    background: #fff;
    color: var(--app-text-strong, #172033);
    font-size: 0.86rem;
}

.demo-story-player__progress {
    display: grid;
    gap: 0.35rem;
}

.demo-story-player__progress > span {
    color: var(--app-text-soft, #475569);
    font-size: 0.78rem;
    font-weight: 700;
}

.demo-story-player__progress div {
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(var(--app-secondary-rgb), 0.16);
    overflow: hidden;
}

.demo-story-player__progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--app-primary), var(--app-secondary));
}

.demo-story-player__timeline {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
}

.demo-story-player__timeline-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 2.15rem;
    min-height: 2rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.6rem;
    background: #fff;
    color: var(--app-text-soft, #475569);
    font-size: 0.74rem;
    font-weight: 800;
}

.demo-story-player__timeline-step.is-active {
    border-color: rgba(var(--app-primary-rgb), 0.38);
    background: rgba(var(--app-primary-rgb), 0.11);
    color: var(--app-primary);
}

.demo-story-player__timeline-step--completed {
    border-color: rgba(34, 197, 94, 0.3);
    color: #166534;
}

.demo-story-player__timeline-step--skipped {
    color: var(--app-text-muted, #64748b);
    opacity: 0.74;
}

.demo-story-player__focus {
    display: grid;
    gap: 0.38rem;
    padding: 0.68rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.12);
    border-radius: 0.68rem;
    background: rgba(var(--app-primary-rgb), 0.055);
}

.demo-story-player__focus ul {
    display: grid;
    gap: 0.28rem;
    margin: 0;
    padding-left: 1rem;
    color: var(--app-text-soft, #475569);
    font-size: 0.78rem;
    line-height: 1.35;
}

.demo-story-player__step-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.demo-story-player__step-meta span {
    width: fit-content;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--app-primary-rgb), 0.1);
}

.demo-story-player h3 {
    margin: 0;
    color: var(--app-text-strong, #172033);
    font-size: 1.08rem;
    font-weight: 800;
    line-height: 1.28;
}

.demo-story-player p {
    margin: 0;
    color: var(--app-text-soft, #475569);
    font-size: 0.86rem;
    line-height: 1.5;
}

.demo-story-player__script {
    display: grid;
    gap: 0.5rem;
}

.demo-story-player__script div {
    padding: 0.65rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 0.65rem;
    background: rgba(248, 250, 252, 0.9);
}

.demo-story-player__flow {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding-left: 1.1rem;
    color: var(--app-text-soft, #475569);
    font-size: 0.83rem;
}

.demo-story-player__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.demo-story-player__proof span {
    padding: 0.26rem 0.5rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.06);
    color: var(--app-text-strong, #172033);
    font-size: 0.72rem;
    font-weight: 700;
}

.demo-story-player__route {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--app-text-muted, #64748b);
    font-size: 0.78rem;
}

.demo-story-player__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.82rem 1rem 1rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.demo-story-player__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.15rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 750;
}

.demo-story-player__btn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.demo-story-player__btn.is-copied {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
}

.demo-story-player__btn--primary {
    border-color: rgba(var(--app-primary-rgb), 0.2);
    background: var(--app-primary);
    color: #fff;
}

.demo-story-player__btn--success {
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
}

.demo-story-player-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: auto;
    min-height: 2.6rem;
    padding: 0.58rem 0.78rem;
    color: var(--app-text-strong, #172033);
    font-size: 0.82rem;
    font-weight: 800;
}

.demo-story-player-pill strong {
    padding: 0.15rem 0.42rem;
    border-radius: 999px;
    background: rgba(var(--app-primary-rgb), 0.12);
    color: var(--app-primary);
    font-size: 0.72rem;
}

.demo-story-player-target {
    position: relative;
    outline: 3px solid rgba(var(--app-primary-rgb), 0.72) !important;
    outline-offset: 4px;
    border-radius: 0.55rem;
}

.demo-story-player-spotlight {
    position: fixed;
    z-index: 1080;
    pointer-events: none;
    border: 2px solid rgba(var(--app-primary-rgb), 0.74);
    border-radius: 0.8rem;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.12);
}

@media (max-width: 767.98px) {
    .demo-story-player {
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        left: 0.75rem !important;
        top: auto !important;
        width: auto;
        max-height: 86vh;
    }

    .demo-story-player__body {
        max-height: 56vh;
    }

    .demo-story-player-pill {
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        left: auto !important;
        top: auto !important;
    }

    .demo-story-launcher,
    .demo-story-picker {
        right: 0.75rem !important;
        bottom: 0.75rem !important;
        left: 0.75rem !important;
        top: auto !important;
        width: auto;
    }
}

.demo-flow-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--app-primary),
        var(--app-secondary)
    );
}

.demo-flow-card__header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
}

.demo-flow-card__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.45rem;
    padding: 0.28rem 0.62rem;
    border-radius: 999px;
    background: rgba(var(--app-primary-rgb), 0.12);
    color: var(--app-primary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.demo-flow-card h2,
.demo-flow-modal h2 {
    margin: 0;
    color: var(--app-text-strong, #172033);
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: 0;
}

.demo-flow-card p,
.demo-flow-modal p {
    margin: 0.4rem 0 0;
    color: var(--app-text-muted, #64748b);
    font-size: 0.92rem;
    line-height: 1.55;
}

.demo-flow-card__progress {
    min-width: 160px;
    text-align: right;
    color: var(--app-text-strong, #172033);
    font-size: 0.9rem;
    font-weight: 650;
}

.demo-flow-card__bar {
    width: 160px;
    height: 0.5rem;
    margin-top: 0.55rem;
    border-radius: 999px;
    background: rgba(var(--app-secondary-rgb), 0.14);
    overflow: hidden;
}

.demo-flow-card__bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--app-primary),
        var(--app-secondary)
    );
}

.demo-flow-card__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 0.95rem;
    align-items: start;
}

.demo-flow-scenario {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.95rem;
    border: 1px solid rgba(var(--app-secondary-rgb), 0.18);
    border-radius: 1rem;
    background:
        linear-gradient(
            135deg,
            rgba(var(--app-secondary-rgb), 0.11),
            rgba(255, 255, 255, 0.76)
        ),
        rgba(255, 255, 255, 0.68);
}

.demo-flow-scenario__brief {
    display: grid;
    gap: 0.2rem;
}

.demo-flow-scenario__brief strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.92rem;
    font-weight: 650;
}

.demo-flow-scenario__brief span {
    color: var(--app-text-muted, #64748b);
    font-size: 0.84rem;
}

.demo-flow-scenario dl {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0;
}

.demo-flow-scenario dl div {
    min-width: 112px;
    padding: 0.62rem 0.72rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.1);
    border-radius: 0.78rem;
    background: rgba(255, 255, 255, 0.72);
}

.demo-flow-scenario dt,
.demo-flow-drawer__scenario dt {
    color: var(--app-text-muted, #64748b);
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: uppercase;
}

.demo-flow-scenario dd,
.demo-flow-drawer__scenario dd {
    margin: 0.12rem 0 0;
    color: var(--app-text-strong, #172033);
    font-size: 0.82rem;
    font-weight: 650;
}

.demo-flow-roadmap {
    display: grid;
    gap: 0.82rem;
    padding: 0.95rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.85rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(var(--app-primary-rgb), 0.055)),
        var(--bs-body-bg);
}

.demo-flow-roadmap--drawer {
    padding: 0.85rem;
}

.demo-flow-roadmap__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8.5rem, auto);
    gap: 0.75rem;
    align-items: start;
}

.demo-flow-roadmap__head > div:first-child,
.demo-flow-roadmap__now,
.demo-flow-roadmap__phase div,
.demo-flow-modal__flow {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.demo-flow-roadmap__head span,
.demo-flow-roadmap__phase span,
.demo-flow-modal__flow span,
.demo-page-hint__flow span {
    color: var(--app-primary);
    font-size: 0.68rem;
    font-weight: 820;
    text-transform: uppercase;
}

.demo-flow-roadmap__head strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.25;
}

.demo-flow-roadmap__head p {
    margin: 0;
    color: var(--app-text-soft, #475569);
    font-size: 0.8rem;
    line-height: 1.45;
}

.demo-flow-roadmap__now {
    padding: 0.65rem;
    border-radius: 0.72rem;
    background: rgba(var(--app-primary-rgb), 0.085);
}

.demo-flow-roadmap__now strong,
.demo-flow-modal__flow strong,
.demo-page-hint__flow strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.86rem;
    font-weight: 820;
    line-height: 1.25;
}

.demo-flow-roadmap__now em,
.demo-flow-roadmap__phase em,
.demo-page-hint__flow em {
    color: var(--app-text-soft, #475569);
    font-size: 0.74rem;
    font-style: normal;
    line-height: 1.32;
    overflow-wrap: anywhere;
}

.demo-flow-roadmap__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
    gap: 0.48rem;
}

.demo-flow-roadmap__phase {
    display: grid;
    grid-template-columns: 1.9rem minmax(0, 1fr);
    gap: 0.48rem;
    min-width: 0;
    padding: 0.58rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 0.72rem;
    background: rgba(255, 255, 255, 0.76);
}

.demo-flow-roadmap__phase--current {
    border-color: rgba(var(--app-primary-rgb), 0.38);
    background: rgba(var(--app-primary-rgb), 0.07);
}

.demo-flow-roadmap__phase--complete {
    border-color: rgba(25, 135, 84, 0.3);
    background: rgba(240, 253, 244, 0.78);
}

.demo-flow-roadmap__phase--handoff {
    opacity: 0.72;
}

.demo-flow-roadmap__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.58rem;
    background: rgba(var(--app-primary-rgb), 0.1);
    color: var(--app-primary);
    font-size: 0.72rem;
    font-weight: 850;
}

.demo-flow-roadmap__phase--complete .demo-flow-roadmap__marker {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.demo-flow-roadmap__phase strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.demo-flow-roadmap__next,
.demo-flow-roadmap__handoff {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 0.58rem 0.65rem;
    border-radius: 0.68rem;
    background: rgba(var(--app-secondary-rgb), 0.085);
    color: var(--app-text-soft, #475569);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
}

.demo-flow-roadmap__next i {
    color: var(--app-primary);
    flex: 0 0 auto;
}

.demo-flow-modal__flow {
    margin-top: 0.9rem;
    padding: 0.8rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.14);
    border-radius: 0.78rem;
    background: rgba(255, 255, 255, 0.68);
}

.demo-flow-modal__flow p {
    margin: 0;
    font-size: 0.8rem;
}

.demo-flow-role-map {
    display: grid;
    gap: 0.75rem;
    padding: 0.95rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.95rem;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(var(--app-primary-rgb), 0.05)),
        var(--bs-body-bg);
}

.demo-flow-role-map--drawer {
    margin-top: 0.9rem;
}

.demo-flow-role-map__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.demo-flow-role-map__head span {
    color: var(--app-primary);
    font-size: 0.72rem;
    font-weight: 820;
    text-transform: uppercase;
}

.demo-flow-role-map__head strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.84rem;
    font-weight: 760;
}

.demo-flow-role-map__track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr));
    gap: 0.55rem;
}

.demo-flow-role-map__item {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.55rem;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 0.78rem;
    background: rgba(255, 255, 255, 0.76);
}

.demo-flow-role-map__item--complete {
    border-color: rgba(25, 135, 84, 0.28);
    background: rgba(240, 253, 244, 0.78);
}

.demo-flow-role-map__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.62rem;
    background: rgba(var(--app-primary-rgb), 0.1);
    color: var(--app-primary);
}

.demo-flow-role-map__item--complete .demo-flow-role-map__marker {
    background: rgba(25, 135, 84, 0.12);
    color: #198754;
}

.demo-flow-role-map__item div {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.demo-flow-role-map__item strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.78rem;
    font-weight: 820;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.demo-flow-role-map__item span:not(.demo-flow-role-map__marker) {
    color: var(--app-text-muted, #64748b);
    font-size: 0.68rem;
    font-weight: 720;
    text-transform: uppercase;
}

.demo-flow-role-map__item em {
    color: var(--app-text-soft, #475569);
    font-size: 0.72rem;
    font-style: normal;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.demo-flow-step {
    position: relative;
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    align-items: start;
    align-self: start;
    gap: 0.85rem;
    min-height: 0;
    padding: 1rem;
    border: 1px solid
        color-mix(in srgb, var(--app-primary) 15%, var(--bs-border-color));
    border-radius: 1rem;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.97),
            rgba(248, 250, 252, 0.92)
        ),
        var(--bs-body-bg);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.demo-flow-step::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--app-primary);
    opacity: 0.72;
}

.demo-flow-step--completed {
    border-color: rgba(25, 135, 84, 0.32);
    background:
        linear-gradient(
            180deg,
            rgba(240, 253, 244, 0.96),
            rgba(255, 255, 255, 0.94)
        ),
        var(--bs-body-bg);
    box-shadow: 0 14px 32px rgba(22, 101, 52, 0.08);
}

.demo-flow-step--completed::before {
    background: #198754;
    opacity: 0.86;
}

.demo-flow-step--skipped {
    opacity: 0.78;
}

.demo-flow-step__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.8rem;
    color: var(--app-primary);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.9),
            rgba(var(--app-primary-rgb), 0.09)
        );
    box-shadow:
        inset 0 0 0 1px rgba(var(--app-primary-rgb), 0.16),
        0 8px 18px rgba(15, 23, 42, 0.06);
}

.demo-flow-step--completed .demo-flow-step__icon {
    color: #198754;
    background: rgba(25, 135, 84, 0.13);
}

.demo-flow-step__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.demo-flow-step__status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 1.35rem;
    padding: 0.16rem 0.48rem;
    border-radius: 999px;
    background: rgba(var(--app-primary-rgb), 0.08);
    color: var(--app-primary);
    font-size: 0.68rem;
    font-weight: 760;
    letter-spacing: 0;
    text-transform: uppercase;
}

.demo-flow-step--completed .demo-flow-step__status {
    background: rgba(25, 135, 84, 0.11);
    color: #198754;
}

.demo-flow-step h3 {
    margin: 0.35rem 0 0;
    color: var(--app-text-strong, #172033);
    font-size: 1.02rem;
    font-weight: 760;
    line-height: 1.22;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.demo-flow-step p {
    margin-top: 0.52rem;
    color: var(--app-text-soft, #475569);
    font-size: 0.86rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.demo-flow-step__actor {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.78rem;
    border: 1px solid rgba(15, 23, 42, 0.18);
    border-radius: 0.78rem;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.06), rgba(var(--app-primary-rgb), 0.06)),
        #fff;
}

.demo-flow-step__actor > span {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--app-text-strong, #172033);
    font-size: 0.74rem;
    font-weight: 820;
    text-transform: uppercase;
}

.demo-flow-step__actor > span i {
    color: var(--app-primary);
}

.demo-flow-step__actor > strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.95rem;
    font-weight: 820;
    line-height: 1.2;
}

.demo-flow-step__actor dl {
    display: grid;
    gap: 0.42rem;
    margin: 0;
}

.demo-flow-step__actor dl div {
    display: grid;
    grid-template-columns: minmax(4.4rem, 0.5fr) minmax(0, 1fr);
    gap: 0.58rem;
    align-items: center;
    padding: 0.5rem 0.58rem;
    border-radius: 0.62rem;
    background: rgba(255, 255, 255, 0.72);
}

.demo-flow-step__actor dt {
    margin: 0;
    color: var(--app-text-muted, #64748b);
    font-size: 0.72rem;
    font-weight: 760;
}

.demo-flow-step__actor dd {
    margin: 0;
    color: var(--app-text-strong, #172033);
    font-size: 0.8rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.demo-flow-step__actor em {
    color: #7c2d12;
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 760;
    line-height: 1.35;
}

.demo-flow-step__handoff {
    margin: 0;
}

.demo-flow-step__handoff .btn {
    justify-content: center;
    width: 100%;
}

.demo-flow-step__flow,
.demo-flow-drawer__flow,
.demo-flow-tour-popover__flow,
.demo-scenario-runner__flow {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.75rem;
    padding: 0.72rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.14);
    border-radius: 0.78rem;
    background: rgba(var(--app-primary-rgb), 0.045);
}

.demo-flow-step__flow > span,
.demo-flow-drawer__flow > span,
.demo-flow-flow-title {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: var(--app-text-strong, #172033);
    font-size: 0.74rem;
    font-weight: 800;
    text-transform: uppercase;
}

.demo-flow-flow-title i {
    color: var(--app-primary);
}

.demo-flow-step__flow ol,
.demo-flow-drawer__flow ol,
.demo-flow-tour-popover__flow ol,
.demo-scenario-runner__flow ol {
    display: grid;
    gap: 0.38rem;
    margin: 0;
    padding-left: 1.1rem;
}

.demo-flow-step__flow li,
.demo-flow-drawer__flow li,
.demo-flow-tour-popover__flow li,
.demo-scenario-runner__flow li {
    color: var(--app-text-soft, #475569);
    font-size: 0.78rem;
    line-height: 1.4;
}

.demo-flow-step__flow li::marker,
.demo-flow-drawer__flow li::marker,
.demo-flow-tour-popover__flow li::marker,
.demo-scenario-runner__flow li::marker {
    color: var(--app-primary);
    font-weight: 800;
}

.demo-flow-substeps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.62rem;
}

.demo-flow-substep {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.62rem;
    align-items: flex-start;
    min-width: 0;
    padding: 0.68rem;
    border: 1px solid var(--app-border-soft, rgba(148, 163, 184, 0.22));
    border-radius: 0.78rem;
    background: var(--app-surface, var(--bs-body-bg));
    color: var(--app-text, var(--bs-body-color));
}

.demo-flow-substep__marker {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--app-border, rgba(148, 163, 184, 0.28));
    border-radius: 0.7rem;
    background: var(--app-surface-raised, var(--bs-tertiary-bg));
    color: var(--app-text-strong, var(--bs-body-color));
}

.demo-flow-substep span:not(.demo-flow-substep__marker) {
    display: block;
    color: var(--app-text-muted, var(--bs-secondary-color));
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
}

.demo-flow-substep strong {
    display: block;
    margin-top: 0.16rem;
    color: var(--app-text-strong, var(--bs-body-color));
    font-size: 0.86rem;
    line-height: 1.2;
}

.demo-flow-substep p,
.demo-flow-card .demo-flow-substep p {
    display: block;
    min-height: 0;
    margin: 0.24rem 0 0;
    overflow: visible;
    color: var(--app-text-soft, var(--bs-secondary-color));
    font-size: 0.75rem;
    line-height: 1.35;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
}

.demo-flow-substeps--drawer {
    grid-template-columns: 1fr;
}

.portal-step-runner {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1085;
    display: grid;
    gap: 0.62rem;
    width: min(24rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0.92rem;
    border: 1px solid var(--app-border, var(--bs-border-color));
    border-radius: 0.82rem;
    background: var(--app-panel-bg, var(--bs-body-bg));
    color: var(--app-text, var(--bs-body-color));
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18);
    overflow: auto;
    overscroll-behavior: contain;
}

.portal-step-runner__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.portal-step-runner__head span {
    color: var(--app-text-muted, var(--bs-secondary-color));
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.portal-step-runner__head strong {
    flex: 0 0 auto;
    padding: 0.24rem 0.5rem;
    border: 1px solid var(--app-border-soft, var(--bs-border-color));
    border-radius: 999px;
    background: var(--app-surface-raised, var(--bs-tertiary-bg));
    color: var(--app-text-strong, var(--bs-body-color));
    font-size: 0.7rem;
    font-weight: 800;
}

.portal-step-runner__toggle {
    display: inline-grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border: 1px solid var(--app-border, var(--bs-border-color));
    border-radius: 0.5rem;
    background: var(--app-surface, var(--bs-body-bg));
    color: var(--app-text-strong, var(--bs-body-color));
    cursor: pointer;
}

.portal-step-runner.is-dragging .portal-step-runner__head {
    cursor: grabbing;
}

.portal-step-runner.is-collapsed {
    width: min(19rem, calc(100vw - 2rem));
    gap: 0;
    padding: 0.68rem 0.78rem;
}

.portal-step-runner.is-collapsed > :not(.portal-step-runner__head) {
    display: none;
}

.portal-step-runner h3 {
    margin: 0;
    color: var(--app-text-strong, var(--bs-body-color));
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
}

.portal-step-runner p {
    margin: 0;
    color: var(--app-text-soft, var(--bs-secondary-color));
    font-size: 0.86rem;
    line-height: 1.45;
}

.portal-step-runner__hint {
    display: flex;
    align-items: flex-start;
    gap: 0.44rem;
    padding: 0.55rem 0.62rem;
    border: 1px solid transparent;
    border-radius: 0.58rem;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.34;
}

.portal-step-runner__hint--done {
    border-color: color-mix(in srgb, #16a34a 42%, transparent);
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #16a34a 12%);
    color: color-mix(in srgb, var(--app-text-strong, #172033) 76%, #15803d 24%);
}

.portal-step-runner__hint--next {
    border-color: color-mix(in srgb, #f59e0b 42%, transparent);
    background: color-mix(in srgb, var(--bs-body-bg) 88%, #f59e0b 12%);
    color: color-mix(in srgb, var(--app-text-strong, #172033) 74%, #92400e 26%);
}

.portal-step-runner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.portal-step-runner__target {
    position: relative;
    z-index: 3;
    outline: 3px solid rgba(var(--app-primary-rgb), 0.42);
    outline-offset: 4px;
    box-shadow: 0 0 0 8px rgba(var(--app-primary-rgb), 0.1);
}

[data-bs-theme="dark"] .portal-step-runner {
    border-color: var(--app-border, #333333);
    background: var(--app-panel-bg, #151515);
    box-shadow: none;
}

[data-bs-theme="dark"] .portal-step-runner__hint--done {
    color: #bbf7d0;
}

[data-bs-theme="dark"] .portal-step-runner__hint--next {
    color: #fde68a;
}

.demo-flow-step__done-hint,
.demo-flow-flow-done,
.demo-flow-drawer__flow > strong {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.52rem 0.6rem;
    border-radius: 0.65rem;
    background: rgba(25, 135, 84, 0.08);
    color: #146c43;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.38;
}

.demo-flow-step__next-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.52rem 0.6rem;
    border-radius: 0.65rem;
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.38;
}

.demo-flow-drawer__flow > strong {
    margin-top: 0;
}

.demo-flow-step__done-hint i,
.demo-flow-step__next-hint i,
.demo-flow-flow-done i {
    flex: 0 0 auto;
}

.demo-flow-step__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.95rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.demo-flow-step__actions form,
.demo-flow-card__footer form,
.demo-flow-assist-form {
    margin: 0;
}

.demo-flow-step__primary-action {
    flex: 1 1 100%;
    min-height: 2.45rem;
    justify-content: center;
}

.demo-flow-step__secondary-action,
.demo-flow-step__skip-action,
.demo-flow-step__assist-action {
    flex: 1 1 calc(50% - 0.3rem);
    min-width: 7.25rem;
}

.demo-flow-step__assist-action {
    flex-basis: 100%;
}

.demo-flow-step__secondary-action .mui-btn,
.demo-flow-step__skip-action .mui-btn,
.demo-flow-step__assist-action .mui-btn {
    width: 100%;
    justify-content: center;
}

.demo-flow-step__done {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    padding: 0.48rem 0.68rem;
    border: 1px solid rgba(25, 135, 84, 0.18);
    border-radius: 999px;
    background: rgba(25, 135, 84, 0.08);
    color: #198754;
    font-size: 0.82rem;
    font-weight: 720;
}

.demo-flow-card__summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    padding: 0.62rem 0.78rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.1);
    border-radius: 999px;
    background: rgba(var(--app-primary-rgb), 0.06);
    color: var(--app-text-soft, #475569);
    font-size: 0.82rem;
    font-weight: 650;
}

.demo-flow-card__summary i {
    color: var(--app-primary);
}

.demo-flow-card__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.55rem;
}

.demo-flow-modal .modal-dialog {
    width: min(960px, calc(100vw - 2rem));
    max-width: min(960px, calc(100vw - 2rem));
}

.demo-flow-modal .modal-content {
    max-height: calc(100vh - 2rem);
    border: 0;
    border-radius: 1.25rem;
    background:
        linear-gradient(
            135deg,
            rgba(var(--app-primary-rgb), 0.13),
            rgba(var(--app-secondary-rgb), 0.08) 48%,
            rgba(255, 255, 255, 0.96)
        ),
        var(--bs-body-bg);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.demo-flow-modal .modal-body {
    position: relative;
    padding: 1.35rem;
    overflow: auto;
}

.demo-flow-modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.demo-flow-modal__layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1.08fr);
    gap: 1rem;
    min-width: 0;
}

.demo-flow-modal__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-height: 280px;
    padding: 1rem;
}

.demo-flow-modal__intro .mui-btn {
    margin-top: 1.1rem;
}

.demo-flow-modal__scenario {
    display: grid;
    gap: 0.25rem;
    margin-top: 0.9rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.14);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.68);
}

.demo-flow-modal__scenario span {
    color: var(--app-text-muted, #64748b);
    font-size: 0.84rem;
    line-height: 1.45;
}

.demo-flow-modal__scenario strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.88rem;
    font-weight: 650;
}

.demo-flow-modal__steps {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.demo-flow-modal__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.7rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.12);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.74);
}

.demo-flow-modal__step > div {
    display: grid;
    justify-items: start;
    min-width: 0;
}

.demo-flow-modal__step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.55rem;
    color: #fff !important;
    background: linear-gradient(
        135deg,
        var(--app-primary),
        var(--app-secondary)
    );
    font-size: 0.78rem;
    font-weight: 700;
}

.demo-flow-modal__step strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.92rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.demo-flow-modal__step p {
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.demo-flow-modal__run {
    width: fit-content;
    min-width: max-content;
    margin-top: 0.8rem;
    white-space: nowrap;
}

[data-bs-theme="dark"] .demo-flow-card,
[data-bs-theme="dark"] .demo-flow-modal .modal-content {
    background:
        linear-gradient(
            135deg,
            rgba(var(--app-primary-rgb), 0.2),
            rgba(var(--app-secondary-rgb), 0.16) 48%,
            rgba(15, 23, 42, 0.9)
        ),
        var(--bs-body-bg);
}

[data-bs-theme="dark"] .demo-flow-step,
[data-bs-theme="dark"] .demo-flow-modal__step {
    background: rgba(15, 23, 42, 0.64);
}

[data-bs-theme="dark"] .demo-flow-scenario,
[data-bs-theme="dark"] .demo-flow-scenario dl div,
[data-bs-theme="dark"] .demo-flow-modal__scenario {
    background: rgba(15, 23, 42, 0.66);
}

@media (max-width: 768px) {
    .demo-flow-card__header,
    .demo-flow-card__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .demo-flow-card__progress,
    .demo-flow-card__bar {
        width: 100%;
        text-align: left;
    }

    .demo-flow-modal__layout {
        grid-template-columns: 1fr;
    }

    .demo-flow-modal__intro {
        min-height: auto;
        padding-top: 2rem;
    }

    .demo-flow-roadmap__head {
        grid-template-columns: 1fr;
    }

    .demo-flow-scenario {
        grid-template-columns: 1fr;
    }

    .demo-flow-scenario dl {
        justify-content: flex-start;
    }
}

.demo-flow-drawer {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1048;
    pointer-events: none;
}

.demo-flow-drawer__launcher {
    pointer-events: auto;
    box-shadow: 0 16px 38px rgba(var(--app-primary-rgb), 0.22);
}

.demo-flow-drawer.is-open .demo-flow-drawer__launcher {
    display: none;
}

.demo-flow-drawer__panel {
    display: none;
    width: min(440px, calc(100vw - 28px));
    max-height: min(680px, calc(100vh - 44px));
    overflow: hidden;
    border: 1px solid
        color-mix(in srgb, var(--app-primary) 22%, var(--bs-border-color));
    border-radius: 1.05rem;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(var(--app-primary-rgb), 0.07)
        ),
        var(--bs-body-bg);
    box-shadow: 0 26px 76px rgba(15, 23, 42, 0.24);
    pointer-events: auto;
}

.demo-flow-drawer.is-open .demo-flow-drawer__panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.demo-flow-drawer__header,
.demo-flow-drawer__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(var(--app-primary-rgb), 0.1);
}

.demo-flow-drawer__footer {
    border-top: 1px solid rgba(var(--app-primary-rgb), 0.1);
    border-bottom: 0;
    flex-wrap: wrap;
}

.demo-flow-drawer__footer form {
    margin: 0;
}

.demo-flow-drawer__header h2 {
    margin: 0;
    color: var(--app-text-strong, #172033);
    font-size: 1.08rem;
    font-weight: 650;
    letter-spacing: 0;
}

.demo-flow-drawer__body {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.demo-flow-drawer__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    padding: 0.5rem;
}

.demo-flow-drawer__tabs button {
    justify-content: space-between;
    gap: 0.45rem;
    width: 100%;
    min-width: 0;
    text-align: left;
}

.demo-flow-drawer__tabs button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demo-flow-drawer__tabs button strong {
    flex: 0 0 auto;
    color: var(--app-text-strong, #172033);
    font-size: 0.72rem;
}

.demo-flow-drawer__tabs button.active strong,
.demo-flow-drawer__tabs button.is-active strong {
    color: rgba(255, 255, 255, 0.86);
}

.demo-flow-drawer__page {
    display: grid;
    gap: 0.35rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--app-secondary-rgb), 0.16);
    border-radius: 0.9rem;
    background: rgba(var(--app-secondary-rgb), 0.075);
}

.demo-flow-drawer__page span {
    color: var(--app-primary);
    font-size: 0.66rem;
    font-weight: 750;
    text-transform: uppercase;
}

.demo-flow-drawer__page strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.94rem;
    font-weight: 700;
}

.demo-flow-drawer__page p,
.demo-flow-drawer__page em {
    margin: 0;
    color: var(--app-text-muted, #64748b);
    font-size: 0.8rem;
    line-height: 1.45;
}

.demo-flow-drawer__page em {
    color: var(--app-text-soft, #475569);
    font-style: normal;
    font-weight: 650;
}

.demo-flow-drawer__scenario-panel {
    display: none;
    gap: 0.85rem;
}

.demo-flow-drawer__scenario-panel.is-active {
    display: grid;
}

.demo-flow-drawer__scenario-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.demo-flow-drawer__scenario h3 {
    margin: 0;
    color: var(--app-text-strong, #172033);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

.demo-flow-drawer__mini-progress {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    min-width: 3.7rem;
    padding: 0.5rem;
    border-radius: 0.78rem;
    background: rgba(var(--app-primary-rgb), 0.09);
}

.demo-flow-drawer__mini-progress strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.92rem;
    font-weight: 800;
}

.demo-flow-drawer__mini-progress span {
    color: var(--app-text-muted, #64748b);
    font-size: 0.68rem;
    font-weight: 700;
}

.demo-flow-drawer__scenario-side {
    flex: 0 0 auto;
    display: grid;
    gap: 0.5rem;
    justify-items: end;
}

.demo-flow-drawer__run,
.demo-flow-modal__run {
    width: fit-content;
}

.demo-flow-modal__run {
    margin-top: 0.65rem;
}

.demo-flow-drawer__scenario,
.demo-flow-drawer__current,
.demo-flow-drawer-step {
    border: 1px solid rgba(var(--app-primary-rgb), 0.12);
    border-radius: 0.95rem;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.9),
            rgba(var(--app-primary-rgb), 0.05)
        ),
        var(--bs-body-bg);
}

.demo-flow-drawer__scenario {
    display: grid;
    gap: 0.72rem;
    padding: 0.9rem;
}

.demo-flow-drawer__scenario p {
    margin: 0;
    color: var(--app-text-muted, #64748b);
    font-size: 0.84rem;
    line-height: 1.5;
}

.demo-flow-drawer__scenario .demo-flow-drawer__persona {
    color: var(--app-text-strong, #172033);
    font-weight: 650;
}

.demo-flow-drawer__scenario dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0;
}

.demo-flow-drawer__scenario dl div {
    min-width: 0;
    padding: 0.55rem;
    border-radius: 0.72rem;
    background: rgba(var(--app-secondary-rgb), 0.08);
}

.demo-flow-drawer__focus {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.demo-flow-drawer__focus span {
    padding: 0.42rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--app-primary-rgb), 0.09);
    color: var(--app-text-soft, #475569);
    font-size: 0.72rem;
    font-weight: 600;
}

.demo-flow-drawer__current {
    display: grid;
    gap: 0.65rem;
    padding: 0.92rem;
    border-color: rgba(var(--app-secondary-rgb), 0.22);
    background:
        linear-gradient(
            135deg,
            rgba(var(--app-secondary-rgb), 0.11),
            rgba(var(--app-primary-rgb), 0.05)
        ),
        var(--bs-body-bg);
}

.demo-flow-drawer__current-top {
    display: grid;
    gap: 0.18rem;
}

.demo-flow-drawer__current-top span,
.demo-flow-drawer-step__meta {
    color: var(--app-primary);
    font-size: 0.67rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: uppercase;
}

.demo-flow-drawer__current-top strong {
    color: var(--app-text-strong, #172033);
    font-size: 1rem;
    font-weight: 650;
}

.demo-flow-drawer__current p {
    margin: 0;
    color: var(--app-text-muted, #64748b);
    font-size: 0.84rem;
    line-height: 1.5;
}

.demo-flow-drawer__flow {
    margin-top: 0;
    background: rgba(255, 255, 255, 0.68);
}

.demo-flow-drawer__actions,
.demo-flow-drawer-step__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.demo-flow-drawer__list {
    display: grid;
    gap: 0.55rem;
}

.demo-flow-drawer-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    padding: 0.75rem;
}

.demo-flow-drawer-step--completed {
    border-color: rgba(25, 135, 84, 0.22);
    background: linear-gradient(
        135deg,
        rgba(25, 135, 84, 0.09),
        rgba(255, 255, 255, 0.9)
    );
}

.demo-flow-drawer-step--skipped {
    opacity: 0.72;
}

.demo-flow-drawer-step__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 0.62rem;
    color: var(--app-primary);
    background: rgba(var(--app-primary-rgb), 0.1);
}

.demo-flow-drawer-step--completed .demo-flow-drawer-step__marker {
    color: #198754;
    background: rgba(25, 135, 84, 0.12);
}

.demo-flow-drawer-step h3 {
    margin: 0.18rem 0 0;
    color: var(--app-text-strong, #172033);
    font-size: 0.88rem;
    font-weight: 650;
}

.demo-flow-drawer-step__actions {
    margin-top: 0.42rem;
}

.demo-flow-drawer-step__actions form {
    margin: 0;
}

.demo-flow-drawer-step__actions a,
.demo-flow-drawer-step__actions button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--app-primary);
    font-size: 0.78rem;
    font-weight: 650;
    text-decoration: none;
}

.demo-help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-left: 0.28rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.16);
    border-radius: 999px;
    background: rgba(var(--app-primary-rgb), 0.08);
    color: var(--app-primary);
    font-size: 0.82rem;
    line-height: 1;
    vertical-align: middle;
}

.demo-help-trigger:hover,
.demo-help-trigger:focus {
    background: rgba(var(--app-primary-rgb), 0.14);
    color: var(--app-primary);
}

.demo-explainable-heading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.demo-help-popover {
    position: fixed;
    z-index: 1080;
    width: min(320px, calc(100vw - 28px));
    padding: 0.9rem;
    border: 1px solid
        color-mix(in srgb, var(--app-primary) 24%, var(--bs-border-color));
    border-radius: 0.9rem;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99),
            rgba(var(--app-secondary-rgb), 0.08)
        ),
        var(--bs-body-bg);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2);
}

.demo-help-popover h3 {
    margin: 0;
    color: var(--app-text-strong, #172033);
    font-size: 0.96rem;
    font-weight: 650;
}

.demo-help-popover p {
    margin: 0.45rem 0 0;
    color: var(--app-text-muted, #64748b);
    font-size: 0.84rem;
    line-height: 1.5;
}

.demo-page-hint {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    gap: 1rem;
    align-items: start;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid
        color-mix(in srgb, var(--app-primary) 18%, var(--bs-border-color));
    border-radius: 1rem;
    background:
        linear-gradient(
            135deg,
            rgba(var(--app-primary-rgb), 0.09),
            rgba(var(--app-secondary-rgb), 0.055)
        ),
        var(--bs-body-bg);
    box-shadow: 0 14px 34px rgba(var(--app-primary-rgb), 0.07);
}

.demo-page-hint h2 {
    margin: 0;
    color: var(--app-text-strong, #172033);
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: 0;
}

.demo-page-hint p {
    margin: 0.35rem 0 0;
    color: var(--app-text-muted, #64748b);
    font-size: 0.88rem;
    line-height: 1.5;
}

.demo-page-hint__side {
    display: grid;
    gap: 0.75rem;
}

.demo-page-hint__flow {
    display: grid;
    gap: 0.18rem;
    padding: 0.65rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(var(--app-primary-rgb), 0.1);
}

.demo-page-hint__side ul {
    display: grid;
    gap: 0.38rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.demo-page-hint__side li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    color: var(--app-text-soft, #475569);
    font-size: 0.8rem;
    line-height: 1.35;
}

.demo-page-hint__side li i {
    color: var(--app-primary);
}

.demo-page-hint__action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem;
    border-radius: 0.82rem;
    background: rgba(var(--app-primary-rgb), 0.07);
}

.demo-page-hint__action > span {
    color: var(--app-text-strong, #172033);
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.35;
}

.demo-scenario-runner {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.demo-scenario-runner__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.54);
    backdrop-filter: blur(7px);
}

.demo-scenario-runner__panel {
    position: relative;
    display: grid;
    gap: 0.95rem;
    width: min(760px, calc(100vw - 28px));
    max-height: min(860px, calc(100vh - 28px));
    overflow: auto;
    padding: 1.2rem;
    border: 1px solid
        color-mix(in srgb, var(--app-primary) 24%, var(--bs-border-color));
    border-radius: 1.1rem;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.99),
            rgba(var(--app-primary-rgb), 0.06)
        ),
        var(--bs-body-bg);
    box-shadow: 0 28px 78px rgba(15, 23, 42, 0.3);
}

.demo-scenario-runner__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.12);
    border-radius: 0.65rem;
    background: rgba(var(--app-primary-rgb), 0.07);
    color: var(--app-text-strong, #172033);
}

.demo-scenario-runner__header {
    padding-right: 2.4rem;
}

.demo-scenario-runner__header h2 {
    margin: 0;
    color: var(--app-text-strong, #172033);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0;
}

.demo-scenario-runner__header p,
.demo-scenario-runner__persona,
.demo-scenario-runner__objective p {
    margin: 0.45rem 0 0;
    color: var(--app-text-muted, #64748b);
    font-size: 0.9rem;
    line-height: 1.55;
}

.demo-scenario-runner__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.demo-scenario-runner__meta div,
.demo-scenario-runner__objective,
.demo-scenario-runner__focus,
.demo-scenario-runner__checklist {
    border: 1px solid rgba(var(--app-primary-rgb), 0.12);
    border-radius: 0.85rem;
    background: rgba(var(--app-primary-rgb), 0.055);
}

.demo-scenario-runner__meta div {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
    padding: 0.75rem;
}

.demo-scenario-runner__meta span,
.demo-scenario-runner__objective span {
    color: var(--app-primary);
    font-size: 0.66rem;
    font-weight: 780;
    text-transform: uppercase;
}

.demo-scenario-runner__meta strong,
.demo-scenario-runner__objective strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--app-text-strong, #172033);
    font-size: 0.88rem;
    font-weight: 750;
}

.demo-scenario-runner__persona {
    padding: 0.82rem 0.9rem;
    border-left: 3px solid var(--app-primary);
    border-radius: 0.75rem;
    background: rgba(var(--app-primary-rgb), 0.055);
    color: var(--app-text-strong, #172033);
    font-weight: 650;
}

.demo-scenario-runner__objective,
.demo-scenario-runner__focus,
.demo-scenario-runner__checklist {
    padding: 0.9rem;
}

.demo-scenario-runner__focus strong,
.demo-scenario-runner__checklist > strong {
    display: block;
    margin-bottom: 0.58rem;
    color: var(--app-text-strong, #172033);
    font-size: 0.86rem;
    font-weight: 780;
}

.demo-scenario-runner__focus ul,
.demo-scenario-runner__checklist ul {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.demo-scenario-runner__window-note {
    margin: -0.18rem 0 0.65rem;
    color: var(--app-text-muted, #64748b);
    font-size: 0.78rem;
    line-height: 1.4;
}

.demo-scenario-runner__focus li,
.demo-scenario-runner__check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}

.demo-scenario-runner__focus li {
    color: var(--app-text-soft, #475569);
    font-size: 0.83rem;
    line-height: 1.4;
}

.demo-scenario-runner__focus li i {
    color: var(--app-primary);
    font-size: 1rem;
    line-height: 1.2;
}

.demo-scenario-runner__check {
    padding: 0.65rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.1);
    border-radius: 0.78rem;
    background: rgba(255, 255, 255, 0.72);
}

.demo-scenario-runner__check > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 999px;
    color: var(--app-primary);
    background: rgba(var(--app-primary-rgb), 0.09);
}

.demo-scenario-runner__check--completed {
    border-color: rgba(25, 135, 84, 0.24);
    background: rgba(25, 135, 84, 0.08);
}

.demo-scenario-runner__check--completed > span {
    color: #198754;
    background: rgba(25, 135, 84, 0.13);
}

.demo-scenario-runner__check--skipped {
    opacity: 0.74;
}

.demo-scenario-runner__check strong {
    display: block;
    color: var(--app-text-strong, #172033);
    font-size: 0.86rem;
    font-weight: 720;
    line-height: 1.3;
}

.demo-scenario-runner__check em {
    display: block;
    margin-top: 0.16rem;
    color: var(--app-text-muted, #64748b);
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 720;
    text-transform: uppercase;
}

.demo-scenario-runner__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
}

[data-bs-theme="dark"] .demo-page-hint {
    background:
        linear-gradient(
            135deg,
            rgba(var(--app-primary-rgb), 0.16),
            rgba(var(--app-secondary-rgb), 0.12)
        ),
        var(--bs-body-bg);
}

[data-bs-theme="dark"] .demo-scenario-runner__panel {
    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, 0.98),
            rgba(var(--app-primary-rgb), 0.14)
        ),
        var(--bs-body-bg);
}

[data-bs-theme="dark"] .demo-scenario-runner__check,
[data-bs-theme="dark"] .demo-scenario-runner__meta div,
[data-bs-theme="dark"] .demo-scenario-runner__objective,
[data-bs-theme="dark"] .demo-scenario-runner__focus,
[data-bs-theme="dark"] .demo-scenario-runner__checklist {
    background: rgba(15, 23, 42, 0.66);
}

[data-bs-theme="dark"] .demo-flow-drawer__panel,
[data-bs-theme="dark"] .demo-flow-drawer__scenario,
[data-bs-theme="dark"] .demo-flow-drawer__current,
[data-bs-theme="dark"] .demo-flow-drawer-step,
[data-bs-theme="dark"] .demo-flow-drawer__page,
[data-bs-theme="dark"] .demo-flow-roadmap,
[data-bs-theme="dark"] .demo-help-popover {
    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, 0.98),
            rgba(var(--app-primary-rgb), 0.14)
        ),
        var(--bs-body-bg);
}

[data-bs-theme="dark"] .demo-flow-drawer__tabs button strong {
    color: #f8fafc;
}

[data-bs-theme="dark"] .demo-flow-step__flow,
[data-bs-theme="dark"] .demo-flow-drawer__flow,
[data-bs-theme="dark"] .demo-flow-tour-popover__flow,
[data-bs-theme="dark"] .demo-scenario-runner__flow {
    background: rgba(15, 23, 42, 0.58);
}

[data-bs-theme="dark"] .demo-flow-step__actor {
    border-color: rgba(148, 163, 184, 0.24);
    background:
        linear-gradient(135deg, rgba(148, 163, 184, 0.12), rgba(var(--app-primary-rgb), 0.18)),
        rgba(15, 23, 42, 0.72);
}

[data-bs-theme="dark"] .demo-flow-step__actor dl div {
    background: rgba(15, 23, 42, 0.58);
}

[data-bs-theme="dark"] .demo-flow-roadmap__phase,
[data-bs-theme="dark"] .demo-flow-roadmap__now,
[data-bs-theme="dark"] .demo-flow-modal__flow,
[data-bs-theme="dark"] .demo-page-hint__flow {
    background: rgba(15, 23, 42, 0.58);
}

[data-bs-theme="dark"] .demo-flow-step__actor > span,
[data-bs-theme="dark"] .demo-flow-step__actor > strong,
[data-bs-theme="dark"] .demo-flow-step__actor dd {
    color: #f8fafc;
}

[data-bs-theme="dark"] .demo-flow-step__actor em {
    color: #fdba74;
}

[data-bs-theme="dark"] .demo-flow-step__done-hint,
[data-bs-theme="dark"] .demo-flow-flow-done,
[data-bs-theme="dark"] .demo-flow-drawer__flow > strong {
    color: #86efac;
    background: rgba(25, 135, 84, 0.16);
}

[data-bs-theme="dark"] .demo-flow-step__next-hint {
    color: #fcd34d;
    background: rgba(245, 158, 11, 0.16);
}

@media (max-height: 760px) {
    .demo-flow-drawer {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .demo-flow-drawer__panel {
        max-height: calc(100vh - 24px);
    }

    .demo-flow-drawer__header,
    .demo-flow-drawer__footer,
    .demo-flow-drawer__body {
        padding: 0.75rem;
    }
}

@media (max-width: 576px) {
    .demo-flow-drawer {
        right: 0.75rem;
        bottom: 0.75rem;
    }

    .demo-flow-drawer__launcher {
        width: 3.25rem;
        min-width: 3.25rem;
        height: 3.25rem;
        padding-inline: 0;
        border-radius: 999px;
    }

    .demo-flow-drawer__launcher .mui-btn__content {
        justify-content: center;
    }

    .demo-flow-drawer__launcher .mui-btn__content > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }

    .demo-flow-drawer__scenario dl {
        grid-template-columns: 1fr;
    }

    .demo-flow-drawer__tabs,
    .demo-page-hint {
        grid-template-columns: 1fr;
    }

    .demo-flow-drawer__scenario-head {
        flex-direction: column;
    }

    .demo-flow-drawer__scenario-side {
        width: 100%;
        justify-items: stretch;
    }

    .demo-flow-drawer__run {
        width: 100%;
    }

    .demo-scenario-runner__meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .demo-page-hint__action {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .demo-scenario-runner__meta {
        grid-template-columns: 1fr;
    }

    .demo-scenario-runner__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .demo-scenario-runner__actions .mui-btn {
        width: 100%;
    }
}

.demo-flow-tour-target {
    position: relative;
    z-index: 1072 !important;
}

.demo-flow-tour-spotlight {
    position: fixed;
    z-index: 1071;
    border: 2px solid var(--app-primary);
    border-radius: 1rem;
    pointer-events: none;
    box-shadow:
        0 0 0 9999px rgba(15, 23, 42, 0.42),
        0 18px 45px rgba(var(--app-primary-rgb), 0.22),
        inset 0 0 0 4px rgba(255, 255, 255, 0.24);
    transition:
        top 0.18s ease,
        left 0.18s ease,
        width 0.18s ease,
        height 0.18s ease;
}

.demo-flow-tour-arrow {
    position: fixed;
    z-index: 1074;
    height: 3px;
    pointer-events: none;
    transform-origin: left center;
    background: linear-gradient(
        90deg,
        var(--app-secondary),
        var(--app-primary)
    );
    filter: drop-shadow(0 8px 12px rgba(15, 23, 42, 0.24));
}

.demo-flow-tour-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -2px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid var(--app-primary);
    transform: translateY(-50%);
}

.demo-flow-tour-click-dot {
    position: fixed;
    z-index: 1075;
    width: 2.25rem;
    height: 2.25rem;
    margin: -1.125rem 0 0 -1.125rem;
    border-radius: 999px;
    pointer-events: none;
    background: rgba(var(--app-primary-rgb), 0.18);
    box-shadow: 0 0 0 0 rgba(var(--app-primary-rgb), 0.34);
    animation: none;
}

.demo-flow-tour-click-dot::after {
    content: "";
    position: absolute;
    inset: 0.72rem;
    border-radius: inherit;
    background: var(--app-primary);
}

.demo-flow-tour-popover {
    position: fixed;
    z-index: 1076;
    width: min(430px, calc(100vw - 28px));
    max-height: calc(100vh - 28px);
    overflow-y: auto;
    padding: 1rem;
    border: 1px solid
        color-mix(in srgb, var(--app-primary) 28%, var(--bs-border-color));
    border-radius: 1rem;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(var(--app-primary-rgb), 0.07)
        ),
        var(--bs-body-bg);
    box-shadow: 0 24px 62px rgba(15, 23, 42, 0.24);
}

.demo-flow-tour-popover--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.demo-flow-tour-popover__eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.62rem;
    border-radius: 999px;
    background: rgba(var(--app-primary-rgb), 0.12);
    color: var(--app-primary);
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: uppercase;
}

.demo-flow-tour-popover h3 {
    margin: 0;
    color: var(--app-text-strong, #172033);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
}

.demo-flow-tour-popover p {
    margin: 0.55rem 0 0;
    color: var(--app-text-muted, #64748b);
    font-size: 0.88rem;
    line-height: 1.55;
}

.demo-flow-tour-popover__hint {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin-top: 0.8rem;
    padding: 0.72rem;
    border-radius: 0.78rem;
    background: rgba(var(--app-secondary-rgb), 0.1);
    color: var(--app-text-soft, #475569);
    font-size: 0.82rem;
    line-height: 1.45;
}

.demo-flow-tour-popover__flow {
    margin-top: 0.8rem;
    background: rgba(var(--app-primary-rgb), 0.055);
}

.demo-flow-tour-popover__hint i {
    color: var(--app-primary);
}

.demo-flow-tour-popover__hint--assist {
    background: rgba(25, 135, 84, 0.1);
}

.demo-flow-tour-popover__hint--assist i {
    color: #198754;
}

.demo-flow-field-guide {
    margin-top: 0.82rem;
    padding: 0.78rem;
    border: 1px solid rgba(var(--app-primary-rgb), 0.16);
    border-radius: 0.78rem;
    background: rgba(var(--app-primary-rgb), 0.06);
}

.demo-flow-field-guide__title {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    color: var(--app-text-strong, #172033);
    font-size: 0.78rem;
    font-weight: 800;
}

.demo-flow-field-guide__title i {
    color: var(--app-primary);
}

.demo-flow-field-guide ul {
    display: grid;
    gap: 0.45rem;
    margin: 0.62rem 0 0;
    padding: 0;
    list-style: none;
}

.demo-flow-field-guide li {
    display: grid;
    grid-template-columns: minmax(7rem, 34%) 1fr;
    gap: 0.5rem;
    align-items: start;
    padding: 0.46rem 0.55rem;
    border-radius: 0.62rem;
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
}

.demo-flow-field-guide li span {
    color: var(--app-text-muted, #64748b);
    font-weight: 700;
}

.demo-flow-field-guide li strong {
    min-width: 0;
    color: var(--app-text-strong, #172033);
    font-weight: 750;
    overflow-wrap: anywhere;
}

.demo-flow-field-filled {
    outline: 2px solid rgba(var(--app-primary-rgb), 0.45);
    outline-offset: 3px;
    border-radius: 0.75rem;
    transition: outline-color 0.2s ease;
}

.demo-flow-tour-popover__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.95rem;
}

@keyframes demo-flow-click-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(var(--app-primary-rgb), 0.34);
        transform: scale(0.92);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(var(--app-primary-rgb), 0);
        transform: scale(1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(var(--app-primary-rgb), 0);
        transform: scale(0.92);
    }
}

[data-bs-theme="dark"] .demo-flow-tour-popover {
    background:
        linear-gradient(
            145deg,
            rgba(15, 23, 42, 0.98),
            rgba(var(--app-primary-rgb), 0.14)
        ),
        var(--bs-body-bg);
}

[data-bs-theme="dark"] .demo-flow-field-guide li {
    background: rgba(15, 23, 42, 0.58);
}

/* Unified demo step cards: keep every role on the same admin card language. */
.demo-flow-card {
    gap: 1rem;
    padding: 1rem;
    border-color: rgba(148, 163, 184, 0.34);
    border-radius: 0.9rem;
    background: var(--bs-body-bg);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.demo-flow-card::before {
    height: 3px;
    background: var(--app-primary);
}

.demo-flow-card__header {
    align-items: center;
}

.demo-flow-card__eyebrow,
.demo-flow-step__status,
.demo-flow-tour-popover__eyebrow {
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(241, 245, 249, 0.9);
    color: var(--app-text-strong, #172033);
}

.demo-flow-card h2,
.demo-flow-modal h2,
.demo-scenario-runner__header h2 {
    font-size: 1.18rem;
    font-weight: 780;
}

.demo-flow-card p,
.demo-flow-modal p,
.demo-scenario-runner__header p,
.demo-scenario-runner__persona,
.demo-scenario-runner__objective p {
    color: var(--app-text-muted, #64748b);
    font-size: 0.86rem;
    line-height: 1.45;
}

.demo-flow-card__steps {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr));
    gap: 0.8rem;
    align-items: stretch;
}

.demo-flow-step,
.demo-flow-drawer__current,
.demo-flow-drawer-step,
.demo-flow-drawer__scenario,
.demo-flow-drawer__page,
.demo-scenario-runner__check,
.demo-flow-modal__step {
    border: 1px solid rgba(148, 163, 184, 0.34);
    border-radius: 0.82rem;
    background: var(--bs-body-bg);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.045);
}

.demo-flow-step {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0.72rem;
    padding: 0.88rem;
}

.demo-flow-step::before {
    inset: 0 0 auto;
    width: auto;
    height: 3px;
    background: #344054;
    opacity: 1;
}

.demo-flow-step--completed,
.demo-flow-drawer-step--completed,
.demo-scenario-runner__check--completed {
    border-color: rgba(25, 135, 84, 0.28);
    background: var(--bs-body-bg);
    box-shadow: 0 10px 24px rgba(22, 101, 52, 0.055);
}

.demo-flow-step--completed::before {
    background: #198754;
}

.demo-flow-step--skipped,
.demo-flow-drawer-step--skipped,
.demo-scenario-runner__check--skipped {
    opacity: 0.68;
}

.demo-flow-step__icon,
.demo-flow-drawer-step__marker,
.demo-flow-role-map__marker,
.demo-scenario-runner__check > span {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 0.68rem;
    background: rgba(248, 250, 252, 0.92);
    color: var(--app-primary);
    box-shadow: none;
}

.demo-flow-step--completed .demo-flow-step__icon,
.demo-flow-drawer-step--completed .demo-flow-drawer-step__marker,
.demo-flow-role-map__item--complete .demo-flow-role-map__marker,
.demo-scenario-runner__check--completed > span {
    border-color: rgba(25, 135, 84, 0.24);
    background: rgba(25, 135, 84, 0.09);
    color: #198754;
}

.demo-flow-step h3,
.demo-flow-drawer-step h3 {
    margin-top: 0.3rem;
    color: var(--app-text-strong, #172033);
    font-size: 0.98rem;
    font-weight: 780;
    line-height: 1.25;
}

.demo-flow-step p,
.demo-flow-drawer__current p,
.demo-flow-drawer-step__meta,
.demo-scenario-runner__focus li {
    color: var(--app-text-muted, #64748b);
    font-size: 0.8rem;
    line-height: 1.42;
}

.demo-flow-step__actor,
.demo-flow-step__flow,
.demo-flow-drawer__flow,
.demo-flow-tour-popover__flow,
.demo-scenario-runner__flow,
.demo-flow-field-guide,
.demo-scenario-runner__objective,
.demo-scenario-runner__focus,
.demo-scenario-runner__checklist {
    border-color: rgba(148, 163, 184, 0.24);
    border-radius: 0.72rem;
    background: rgba(248, 250, 252, 0.74);
}

.demo-flow-step__actor {
    padding: 0.68rem;
}

.demo-flow-step__actor dl div,
.demo-flow-field-guide li {
    border: 1px solid rgba(148, 163, 184, 0.16);
    background: var(--bs-body-bg);
}

.demo-flow-step__flow,
.demo-flow-drawer__flow,
.demo-flow-tour-popover__flow,
.demo-scenario-runner__flow {
    gap: 0.48rem;
    padding: 0.65rem;
}

.demo-flow-step__flow li,
.demo-flow-drawer__flow li,
.demo-flow-tour-popover__flow li,
.demo-scenario-runner__flow li {
    font-size: 0.76rem;
    line-height: 1.38;
}

.demo-flow-step__done-hint,
.demo-flow-flow-done,
.demo-flow-drawer__flow > strong {
    border: 1px solid rgba(25, 135, 84, 0.14);
    border-radius: 0.62rem;
    background: rgba(25, 135, 84, 0.075);
}

.demo-flow-step__actions {
    gap: 0.45rem;
    margin-top: 0.78rem;
    padding-top: 0.72rem;
}

.demo-flow-step__primary-action {
    min-height: 2.35rem;
}

.demo-flow-step__done {
    border-radius: 0.68rem;
}

.demo-flow-scenario,
.demo-flow-role-map,
.demo-scenario-runner__meta div {
    border-color: rgba(148, 163, 184, 0.26);
    border-radius: 0.82rem;
    background: rgba(248, 250, 252, 0.72);
    box-shadow: none;
}

.demo-flow-scenario dl div,
.demo-flow-role-map__item,
.demo-scenario-runner__meta div {
    background: var(--bs-body-bg);
}

.demo-flow-drawer__panel,
.demo-flow-tour-popover,
.demo-scenario-runner__panel,
.demo-help-popover {
    border-color: rgba(148, 163, 184, 0.34);
    background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .demo-flow-card,
[data-bs-theme="dark"] .demo-flow-step,
[data-bs-theme="dark"] .demo-flow-drawer__panel,
[data-bs-theme="dark"] .demo-flow-drawer__current,
[data-bs-theme="dark"] .demo-flow-drawer-step,
[data-bs-theme="dark"] .demo-flow-drawer__scenario,
[data-bs-theme="dark"] .demo-flow-drawer__page,
[data-bs-theme="dark"] .demo-flow-tour-popover,
[data-bs-theme="dark"] .demo-scenario-runner__panel,
[data-bs-theme="dark"] .demo-scenario-runner__check,
[data-bs-theme="dark"] .demo-flow-modal__step,
[data-bs-theme="dark"] .demo-help-popover {
    border-color: rgba(148, 163, 184, 0.24);
    background: #111827;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

[data-bs-theme="dark"] .demo-flow-card__eyebrow,
[data-bs-theme="dark"] .demo-flow-step__status,
[data-bs-theme="dark"] .demo-flow-tour-popover__eyebrow,
[data-bs-theme="dark"] .demo-flow-step__actor,
[data-bs-theme="dark"] .demo-flow-step__flow,
[data-bs-theme="dark"] .demo-flow-drawer__flow,
[data-bs-theme="dark"] .demo-flow-tour-popover__flow,
[data-bs-theme="dark"] .demo-scenario-runner__flow,
[data-bs-theme="dark"] .demo-flow-field-guide,
[data-bs-theme="dark"] .demo-scenario-runner__objective,
[data-bs-theme="dark"] .demo-scenario-runner__focus,
[data-bs-theme="dark"] .demo-scenario-runner__checklist,
[data-bs-theme="dark"] .demo-flow-scenario,
[data-bs-theme="dark"] .demo-flow-role-map {
    border-color: rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.72);
}

[data-bs-theme="dark"] .demo-flow-step__actor dl div,
[data-bs-theme="dark"] .demo-flow-field-guide li,
[data-bs-theme="dark"] .demo-flow-scenario dl div,
[data-bs-theme="dark"] .demo-flow-role-map__item,
[data-bs-theme="dark"] .demo-scenario-runner__meta div {
    background: rgba(17, 24, 39, 0.92);
}

/* Dashboard cards stay compact while the current task still shows its handoff. */
.demo-flow-card .demo-flow-step {
    min-height: 0;
}

.demo-flow-card .demo-flow-step__body {
    min-height: 100%;
}

.demo-flow-card .demo-flow-step p {
    display: -webkit-box;
    min-height: 2.25rem;
    margin-top: 0.42rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.demo-flow-card .demo-flow-step__actor {
    display: inline-grid;
    gap: 0.42rem;
    margin-top: 0.58rem;
    padding: 0.56rem;
}

.demo-flow-card .demo-flow-step__actor--compact {
    width: fit-content;
    max-width: 100%;
    padding: 0.5rem 0.58rem;
}

.demo-flow-card .demo-flow-step__actor--compact span {
    font-size: 0.63rem;
}

.demo-flow-card .demo-flow-step__actor > strong {
    font-size: 0.84rem;
}

.demo-flow-card .demo-flow-step__actor--compact dl {
    gap: 0.32rem;
}

.demo-flow-card .demo-flow-step__actor--compact dl div {
    grid-template-columns: minmax(3.8rem, 0.35fr) minmax(0, 1fr);
    padding: 0.38rem 0.45rem;
}

.demo-flow-card .demo-flow-step__flow--card {
    margin-top: 0.58rem;
    padding: 0.62rem;
}

.demo-flow-card .demo-flow-step__flow--card li {
    font-size: 0.75rem;
}

.demo-flow-card .demo-flow-step__actions {
    margin-top: auto;
}

/* Demo surfaces must follow the active app theme instead of hard-coded light/dark panels. */
.demo-flow-card,
.demo-flow-roadmap,
.demo-flow-role-map,
.demo-flow-scenario,
.demo-flow-modal .modal-content,
.demo-flow-drawer__panel,
.demo-flow-drawer__scenario,
.demo-flow-drawer__current,
.demo-flow-drawer__page,
.demo-flow-tour-popover,
.demo-scenario-runner__panel,
.demo-page-hint,
.demo-help-popover {
    border-color: var(--app-border, var(--bs-border-color));
    background: var(--app-panel-bg, var(--bs-body-bg));
    color: var(--app-text, var(--bs-body-color));
    box-shadow: var(--app-shadow-sm, none);
}

.demo-flow-step,
.demo-flow-drawer-step,
.demo-flow-modal__step,
.demo-scenario-runner__check {
    border-color: var(--app-border, var(--bs-border-color));
    background: var(--app-surface, var(--bs-body-bg));
    color: var(--app-text, var(--bs-body-color));
    box-shadow: var(--app-shadow-xs, none);
}

.demo-flow-card__eyebrow,
.demo-flow-step__status,
.demo-flow-tour-popover__eyebrow,
.demo-flow-roadmap__now,
.demo-flow-roadmap__phase,
.demo-flow-modal__flow,
.demo-page-hint__flow,
.demo-flow-step__actor,
.demo-flow-step__flow,
.demo-flow-drawer__flow,
.demo-flow-tour-popover__flow,
.demo-scenario-runner__flow,
.demo-flow-field-guide,
.demo-scenario-runner__objective,
.demo-scenario-runner__focus,
.demo-scenario-runner__checklist,
.demo-scenario-runner__meta div,
.demo-flow-role-map__item,
.demo-flow-scenario dl div {
    border-color: var(--app-border-soft, var(--bs-border-color));
    background: var(--app-surface-subtle, var(--bs-body-bg));
    color: var(--app-text, var(--bs-body-color));
}

.demo-flow-step__actor dl div,
.demo-flow-field-guide li {
    border-color: var(--app-border-soft, var(--bs-border-color));
    background: var(--app-surface, var(--bs-body-bg));
}

.demo-flow-card h2,
.demo-flow-modal h2,
.demo-flow-step h3,
.demo-flow-drawer__header h2,
.demo-flow-drawer__scenario h3,
.demo-flow-drawer__current strong,
.demo-flow-drawer-step h3,
.demo-flow-tour-popover h3,
.demo-scenario-runner__header h2,
.demo-scenario-runner__meta strong,
.demo-scenario-runner__objective strong,
.demo-scenario-runner__focus strong,
.demo-scenario-runner__checklist > strong,
.demo-flow-field-guide__title,
.demo-flow-field-guide li strong,
.demo-flow-step__actor > span,
.demo-flow-step__actor > strong,
.demo-flow-step__actor dd {
    color: var(--app-text-strong, var(--bs-heading-color));
}

.demo-flow-card p,
.demo-flow-modal p,
.demo-flow-step p,
.demo-flow-drawer__current p,
.demo-flow-drawer__persona,
.demo-flow-drawer-step__meta,
.demo-flow-roadmap__head p,
.demo-flow-roadmap__phase em,
.demo-flow-roadmap__now em,
.demo-flow-step__flow li,
.demo-flow-drawer__flow li,
.demo-flow-tour-popover__flow li,
.demo-scenario-runner__flow li,
.demo-scenario-runner__focus li,
.demo-flow-field-guide li span,
.demo-flow-step__actor dt {
    color: var(--app-text-muted, var(--bs-secondary-color));
}

.demo-flow-step__icon,
.demo-flow-drawer-step__marker,
.demo-flow-role-map__marker,
.demo-flow-roadmap__marker,
.demo-scenario-runner__check > span {
    border-color: var(--app-border-soft, var(--bs-border-color));
    background: var(--app-surface-raised, var(--bs-tertiary-bg));
    color: var(--app-primary, var(--bs-primary));
}

[data-bs-theme="dark"] .demo-flow-card,
[data-bs-theme="dark"] .demo-flow-roadmap,
[data-bs-theme="dark"] .demo-flow-role-map,
[data-bs-theme="dark"] .demo-flow-scenario,
[data-bs-theme="dark"] .demo-flow-modal .modal-content,
[data-bs-theme="dark"] .demo-flow-drawer__panel,
[data-bs-theme="dark"] .demo-flow-drawer__scenario,
[data-bs-theme="dark"] .demo-flow-drawer__current,
[data-bs-theme="dark"] .demo-flow-drawer__page,
[data-bs-theme="dark"] .demo-flow-tour-popover,
[data-bs-theme="dark"] .demo-scenario-runner__panel,
[data-bs-theme="dark"] .demo-page-hint,
[data-bs-theme="dark"] .demo-help-popover {
    border-color: var(--app-border, var(--bs-border-color));
    background: var(--app-panel-bg, var(--bs-body-bg));
    color: var(--app-text, var(--bs-body-color));
    box-shadow: var(--app-shadow-xs, none);
}

[data-bs-theme="dark"] .demo-flow-step,
[data-bs-theme="dark"] .demo-flow-drawer-step,
[data-bs-theme="dark"] .demo-flow-modal__step,
[data-bs-theme="dark"] .demo-scenario-runner__check {
    border-color: var(--app-border, var(--bs-border-color));
    background: var(--app-surface, var(--bs-body-bg));
    color: var(--app-text, var(--bs-body-color));
}

[data-bs-theme="dark"] .demo-flow-card__eyebrow,
[data-bs-theme="dark"] .demo-flow-step__status,
[data-bs-theme="dark"] .demo-flow-tour-popover__eyebrow,
[data-bs-theme="dark"] .demo-flow-roadmap__now,
[data-bs-theme="dark"] .demo-flow-roadmap__phase,
[data-bs-theme="dark"] .demo-flow-modal__flow,
[data-bs-theme="dark"] .demo-page-hint__flow,
[data-bs-theme="dark"] .demo-flow-step__actor,
[data-bs-theme="dark"] .demo-flow-step__flow,
[data-bs-theme="dark"] .demo-flow-drawer__flow,
[data-bs-theme="dark"] .demo-flow-tour-popover__flow,
[data-bs-theme="dark"] .demo-scenario-runner__flow,
[data-bs-theme="dark"] .demo-flow-field-guide,
[data-bs-theme="dark"] .demo-scenario-runner__objective,
[data-bs-theme="dark"] .demo-scenario-runner__focus,
[data-bs-theme="dark"] .demo-scenario-runner__checklist,
[data-bs-theme="dark"] .demo-scenario-runner__meta div,
[data-bs-theme="dark"] .demo-flow-role-map__item,
[data-bs-theme="dark"] .demo-flow-scenario dl div {
    border-color: var(--app-border-soft, var(--bs-border-color));
    background: var(--app-surface-subtle, var(--bs-body-bg));
    color: var(--app-text, var(--bs-body-color));
}

[data-bs-theme="dark"] .demo-flow-step__actor dl div,
[data-bs-theme="dark"] .demo-flow-field-guide li {
    border-color: var(--app-border-soft, var(--bs-border-color));
    background: var(--app-surface, var(--bs-body-bg));
}

[data-bs-theme="dark"] .demo-flow-step--completed,
[data-bs-theme="dark"] .demo-flow-drawer-step--completed,
[data-bs-theme="dark"] .demo-flow-role-map__item--complete,
[data-bs-theme="dark"] .demo-scenario-runner__check--completed {
    border-color: rgba(34, 197, 94, 0.42);
    background: color-mix(in srgb, var(--app-surface) 86%, #16a34a 14%);
}

/* Demo buttons: one filled primary action, every secondary action is a neutral bordered surface. */
.demo-flow-card .mui-btn.mui-btn--outline,
.demo-flow-drawer .mui-btn.mui-btn--outline,
.demo-flow-modal .mui-btn.mui-btn--outline,
.demo-flow-tour-popover .mui-btn.mui-btn--outline,
.demo-scenario-runner .mui-btn.mui-btn--outline,
.demo-page-hint .mui-btn.mui-btn--outline {
    --btn-bg: var(--app-surface, var(--bs-body-bg));
    --btn-color: var(--app-text-strong, var(--bs-body-color));
    --btn-border: var(--app-border-strong, var(--bs-border-color));
    --btn-hover-accent: rgba(var(--app-primary-rgb), 0.08);
    border-color: var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-color);
    box-shadow: none;
}

.demo-flow-card .mui-btn.mui-btn--outline:hover,
.demo-flow-card .mui-btn.mui-btn--outline:focus-visible,
.demo-flow-drawer .mui-btn.mui-btn--outline:hover,
.demo-flow-drawer .mui-btn.mui-btn--outline:focus-visible,
.demo-flow-modal .mui-btn.mui-btn--outline:hover,
.demo-flow-modal .mui-btn.mui-btn--outline:focus-visible,
.demo-flow-tour-popover .mui-btn.mui-btn--outline:hover,
.demo-flow-tour-popover .mui-btn.mui-btn--outline:focus-visible,
.demo-scenario-runner .mui-btn.mui-btn--outline:hover,
.demo-scenario-runner .mui-btn.mui-btn--outline:focus-visible,
.demo-page-hint .mui-btn.mui-btn--outline:hover,
.demo-page-hint .mui-btn.mui-btn--outline:focus-visible {
    --btn-bg: var(--app-surface-raised, var(--bs-tertiary-bg));
    --btn-color: var(--app-text-strong, var(--bs-body-color));
    --btn-border: var(--app-border-strong, var(--bs-border-color));
    background: var(--btn-bg);
    color: var(--btn-color);
    border-color: var(--btn-border);
}

[data-bs-theme="dark"] .demo-flow-card .mui-btn.mui-btn--outline,
[data-bs-theme="dark"] .demo-flow-drawer .mui-btn.mui-btn--outline,
[data-bs-theme="dark"] .demo-flow-modal .mui-btn.mui-btn--outline,
[data-bs-theme="dark"] .demo-flow-tour-popover .mui-btn.mui-btn--outline,
[data-bs-theme="dark"] .demo-scenario-runner .mui-btn.mui-btn--outline,
[data-bs-theme="dark"] .demo-page-hint .mui-btn.mui-btn--outline {
    --btn-bg: var(--app-surface-raised, #1f2937);
    --btn-color: var(--app-text-strong, #f8fafc);
    --btn-border: var(--app-border-strong, #475569);
    --btn-hover-accent: rgba(255, 255, 255, 0.08);
    background: var(--btn-bg);
    color: var(--btn-color);
    border-color: var(--btn-border);
}

[data-bs-theme="dark"] .demo-flow-card .mui-btn.mui-btn--primary,
[data-bs-theme="dark"] .demo-flow-drawer .mui-btn.mui-btn--primary,
[data-bs-theme="dark"] .demo-flow-modal .mui-btn.mui-btn--primary,
[data-bs-theme="dark"] .demo-flow-tour-popover .mui-btn.mui-btn--primary,
[data-bs-theme="dark"] .demo-scenario-runner .mui-btn.mui-btn--primary,
[data-bs-theme="dark"] .demo-page-hint .mui-btn.mui-btn--primary {
    --btn-bg: var(--app-surface-raised, #202020);
    --btn-color: var(--app-text-strong, #f4f4f4);
    --btn-border: var(--app-border-strong, #424242);
    border-color: var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-color);
    box-shadow: none;
}

[data-bs-theme="dark"] .demo-flow-card .mui-btn.mui-btn--primary:hover,
[data-bs-theme="dark"] .demo-flow-card .mui-btn.mui-btn--primary:focus-visible,
[data-bs-theme="dark"] .demo-flow-drawer .mui-btn.mui-btn--primary:hover,
[data-bs-theme="dark"] .demo-flow-drawer .mui-btn.mui-btn--primary:focus-visible,
[data-bs-theme="dark"] .demo-flow-modal .mui-btn.mui-btn--primary:hover,
[data-bs-theme="dark"] .demo-flow-modal .mui-btn.mui-btn--primary:focus-visible,
[data-bs-theme="dark"] .demo-flow-tour-popover .mui-btn.mui-btn--primary:hover,
[data-bs-theme="dark"] .demo-flow-tour-popover .mui-btn.mui-btn--primary:focus-visible,
[data-bs-theme="dark"] .demo-scenario-runner .mui-btn.mui-btn--primary:hover,
[data-bs-theme="dark"] .demo-scenario-runner .mui-btn.mui-btn--primary:focus-visible,
[data-bs-theme="dark"] .demo-page-hint .mui-btn.mui-btn--primary:hover,
[data-bs-theme="dark"] .demo-page-hint .mui-btn.mui-btn--primary:focus-visible {
    --btn-bg: var(--app-surface-muted, #242424);
    --btn-color: var(--app-text-strong, #f4f4f4);
    --btn-border: var(--app-text-muted, #a3a3a3);
    background: var(--btn-bg);
    color: var(--btn-color);
    border-color: var(--btn-border);
}

.demo-flow-card .demo-flow-step__flow--card {
    gap: 0.62rem;
    padding: 0.82rem 0.9rem;
    border-color: color-mix(in srgb, var(--app-border-soft, var(--bs-border-color)) 82%, var(--app-text-muted, #64748b) 18%);
    background: color-mix(in srgb, var(--app-surface-subtle, var(--bs-tertiary-bg)) 92%, var(--app-surface, var(--bs-body-bg)) 8%);
}

.demo-flow-card .demo-flow-step__flow--card ol {
    gap: 0.48rem;
}

.demo-flow-card .demo-flow-step__flow--card li {
    color: var(--app-text, var(--bs-body-color));
    font-size: 0.82rem;
}

.demo-flow-card .demo-flow-step__flow--card li::marker {
    color: var(--app-text-muted, var(--bs-secondary-color));
}

.demo-flow-card .demo-flow-step__done-hint,
.demo-flow-card .demo-flow-step__next-hint {
    border: 1px solid transparent;
    font-size: 0.8rem;
}

.demo-flow-card .demo-flow-step__done-hint {
    border-color: color-mix(in srgb, #16a34a 42%, transparent);
    background: color-mix(in srgb, var(--app-surface, var(--bs-body-bg)) 88%, #16a34a 12%);
    color: color-mix(in srgb, var(--app-text-strong, #172033) 76%, #15803d 24%);
}

.demo-flow-card .demo-flow-step__next-hint {
    border-color: color-mix(in srgb, #f59e0b 40%, transparent);
    background: color-mix(in srgb, var(--app-surface, var(--bs-body-bg)) 88%, #f59e0b 12%);
    color: color-mix(in srgb, var(--app-text-strong, #172033) 74%, #92400e 26%);
}

[data-bs-theme="dark"] .demo-flow-card .demo-flow-step__flow--card {
    border-color: var(--app-border-soft, #334155);
    background: color-mix(in srgb, var(--app-surface, #111827) 86%, #ffffff 4%);
}

[data-bs-theme="dark"] .demo-flow-card .demo-flow-step__flow--card li {
    color: var(--app-text, #e5e7eb);
}

[data-bs-theme="dark"] .demo-flow-card .demo-flow-step__done-hint {
    border-color: color-mix(in srgb, #22c55e 38%, transparent);
    background: color-mix(in srgb, var(--app-surface, #111827) 88%, #22c55e 12%);
    color: #bbf7d0;
}

[data-bs-theme="dark"] .demo-flow-card .demo-flow-step__next-hint {
    border-color: color-mix(in srgb, #f59e0b 38%, transparent);
    background: color-mix(in srgb, var(--app-surface, #111827) 88%, #f59e0b 12%);
    color: #fde68a;
}

.demo-flow-card .mui-btn:disabled,
.demo-flow-card .mui-btn.disabled,
.demo-flow-card .mui-btn[aria-disabled="true"],
.demo-flow-drawer .mui-btn:disabled,
.demo-flow-drawer .mui-btn.disabled,
.demo-flow-drawer .mui-btn[aria-disabled="true"],
.demo-flow-tour-popover .mui-btn:disabled,
.demo-flow-tour-popover .mui-btn.disabled,
.demo-flow-tour-popover .mui-btn[aria-disabled="true"],
.demo-scenario-runner .mui-btn:disabled,
.demo-scenario-runner .mui-btn.disabled,
.demo-scenario-runner .mui-btn[aria-disabled="true"] {
    --btn-bg: var(--app-surface-muted, var(--bs-tertiary-bg));
    --btn-color: var(--app-text-faint, var(--bs-secondary-color));
    --btn-border: var(--app-border-soft, var(--bs-border-color));
    border-color: var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-color);
    opacity: 0.62;
}

.demo-flow-card .mui-btn:disabled .mui-btn__content,
.demo-flow-card .mui-btn.disabled .mui-btn__content,
.demo-flow-card .mui-btn[aria-disabled="true"] .mui-btn__content,
.demo-flow-drawer .mui-btn:disabled .mui-btn__content,
.demo-flow-drawer .mui-btn.disabled .mui-btn__content,
.demo-flow-drawer .mui-btn[aria-disabled="true"] .mui-btn__content,
.demo-flow-tour-popover .mui-btn:disabled .mui-btn__content,
.demo-flow-tour-popover .mui-btn.disabled .mui-btn__content,
.demo-flow-tour-popover .mui-btn[aria-disabled="true"] .mui-btn__content,
.demo-scenario-runner .mui-btn:disabled .mui-btn__content,
.demo-scenario-runner .mui-btn.disabled .mui-btn__content,
.demo-scenario-runner .mui-btn[aria-disabled="true"] .mui-btn__content {
    color: var(--btn-color);
}

/* Dashboard demo cards stay compact; a single current card must not become a full-width slab. */
.demo-flow-card__steps {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    justify-content: start;
}

.demo-flow-card .demo-flow-step {
    width: 100%;
    max-width: 26rem;
    padding: 0.86rem;
    border-radius: 0.72rem;
    grid-template-columns: 2.2rem minmax(0, 1fr);
}

.demo-flow-card .demo-flow-step--current {
    max-width: 42rem;
    grid-column: span 2;
}

.demo-flow-card .demo-flow-step__icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.58rem;
}

.demo-flow-card .demo-flow-step__flow--card {
    gap: 0.42rem;
    max-width: 100%;
    padding: 0.62rem 0.68rem;
    border-radius: 0.62rem;
}

.demo-flow-card .demo-flow-step__flow--card ol {
    gap: 0.28rem;
    padding-left: 1rem;
}

.demo-flow-card .demo-flow-step__flow--card li {
    font-size: 0.76rem;
    line-height: 1.32;
}

.demo-flow-card .demo-flow-step__done-hint,
.demo-flow-card .demo-flow-step__next-hint {
    padding: 0.42rem 0.52rem;
    border-radius: 0.5rem;
    font-size: 0.74rem;
    line-height: 1.28;
}

.demo-flow-step__actions {
    align-items: center;
}

.demo-flow-step__primary-action {
    flex: 0 1 auto;
    width: auto;
    min-width: 12rem;
    max-width: 100%;
}

.demo-flow-step__secondary-action,
.demo-flow-step__skip-action,
.demo-flow-step__assist-action {
    flex: 0 1 auto;
    min-width: 9.5rem;
}

.demo-flow-step__secondary-action .mui-btn,
.demo-flow-step__skip-action .mui-btn,
.demo-flow-step__assist-action .mui-btn {
    width: auto;
    min-width: 9.5rem;
}

.demo-flow-card .mui-btn .mui-btn__content,
.demo-flow-drawer .mui-btn .mui-btn__content,
.demo-flow-modal .mui-btn .mui-btn__content,
.demo-flow-tour-popover .mui-btn .mui-btn__content,
.demo-scenario-runner .mui-btn .mui-btn__content,
.demo-page-hint .mui-btn .mui-btn__content {
    color: inherit;
}

.demo-page-hint .mui-btn .mui-btn__content span {
    color: inherit;
}

[data-bs-theme="dark"] .demo-flow-card .mui-btn.mui-btn--primary .mui-btn__content,
[data-bs-theme="dark"] .demo-flow-drawer .mui-btn.mui-btn--primary .mui-btn__content,
[data-bs-theme="dark"] .demo-flow-modal .mui-btn.mui-btn--primary .mui-btn__content,
[data-bs-theme="dark"] .demo-flow-tour-popover .mui-btn.mui-btn--primary .mui-btn__content,
[data-bs-theme="dark"] .demo-scenario-runner .mui-btn.mui-btn--primary .mui-btn__content,
[data-bs-theme="dark"] .demo-page-hint .mui-btn.mui-btn--primary .mui-btn__content {
    color: var(--btn-color, var(--app-text-strong, #f4f4f4)) !important;
}

@media (max-width: 991.98px) {
    .demo-flow-card .demo-flow-step--current {
        grid-column: span 1;
        max-width: 100%;
    }
}

/* Requester portal pages need a lighter, action-focused checklist than the staff command center. */
.portal-layout .demo-page-hint {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.62fr);
    gap: 0.85rem;
    padding: 0.85rem;
    border-radius: 0.75rem;
}

.portal-layout .demo-page-hint__flow,
.portal-layout .demo-page-hint__action {
    border: 1px solid var(--app-border-soft, var(--bs-border-color));
    border-radius: 0.62rem;
    background: var(--app-surface-subtle, var(--bs-tertiary-bg));
}

.portal-layout .demo-page-hint__side {
    gap: 0.55rem;
}

.portal-layout .demo-page-hint__side ul {
    gap: 0.25rem;
}

.portal-layout .demo-page-hint__side li {
    font-size: 0.76rem;
}

.demo-flow-card--portal {
    gap: 0.85rem;
    padding: 1rem;
    border-radius: 0.85rem;
}

.demo-flow-card--portal .demo-flow-card__header {
    align-items: center;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--app-border-soft, var(--bs-border-color));
}

.demo-flow-card--portal .demo-flow-card__header h2 {
    font-size: 1.08rem;
}

.demo-flow-card--portal .demo-flow-card__header p {
    max-width: 58rem;
    font-size: 0.84rem;
}

.demo-flow-card--portal .demo-flow-card__progress,
.demo-flow-card--portal .demo-flow-card__bar {
    min-width: 130px;
    width: 130px;
}

.demo-flow-card--portal .demo-flow-scenario {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.72rem;
    border-radius: 0.7rem;
}

.demo-flow-card--portal .demo-flow-scenario dl {
    gap: 0.4rem;
}

.demo-flow-card--portal .demo-flow-scenario dl div {
    min-width: 8.5rem;
    padding: 0.5rem 0.58rem;
    border-radius: 0.58rem;
}

.demo-flow-card--portal .demo-flow-card__steps {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
    gap: 0.7rem;
}

.demo-flow-card--portal .demo-flow-step,
.demo-flow-card--portal .demo-flow-step--current {
    grid-column: span 1;
    max-width: none;
    padding: 0.72rem;
    border-radius: 0.65rem;
}

.demo-flow-card--portal .demo-flow-step__actor {
    display: none;
}

.demo-flow-card--portal .demo-flow-step--current .demo-flow-step__actor {
    display: grid;
    width: fit-content;
    max-width: 100%;
    gap: 0.34rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 0.58rem;
}

.demo-flow-card--portal .demo-flow-step--current .demo-flow-step__actor dl {
    grid-template-columns: 1fr;
    gap: 0.32rem;
}

.demo-flow-card--portal .demo-flow-step--current .demo-flow-step__actor dl div {
    padding: 0.38rem 0.45rem;
    border-radius: 0.48rem;
}

.demo-flow-card--portal .demo-flow-step h3 {
    font-size: 0.9rem;
}

.demo-flow-card--portal .demo-flow-step p {
    min-height: 0;
    font-size: 0.78rem;
    -webkit-line-clamp: 2;
}

.demo-flow-card--portal .demo-flow-step--current p {
    -webkit-line-clamp: 3;
}

.demo-flow-card--portal .demo-flow-step__flow--card {
    padding: 0.55rem;
}

.demo-flow-card--portal .demo-flow-step__flow--card li {
    font-size: 0.72rem;
}

.demo-flow-card--portal .demo-flow-step__actions {
    gap: 0.42rem;
    padding-top: 0.62rem;
}

.demo-flow-card--portal .demo-flow-step__primary-action,
.demo-flow-card--portal .demo-flow-step__secondary-action,
.demo-flow-card--portal .demo-flow-step__skip-action,
.demo-flow-card--portal .demo-flow-step__assist-action,
.demo-flow-card--portal .demo-flow-step__secondary-action .mui-btn,
.demo-flow-card--portal .demo-flow-step__skip-action .mui-btn,
.demo-flow-card--portal .demo-flow-step__assist-action .mui-btn {
    min-width: 7.5rem;
}

.demo-flow-card--portal .demo-flow-card__footer {
    padding-top: 0.75rem;
    border-top: 1px solid var(--app-border-soft, var(--bs-border-color));
}

[data-bs-theme="dark"] .portal-layout .demo-page-hint,
[data-bs-theme="dark"] .portal-layout .demo-page-hint__flow,
[data-bs-theme="dark"] .portal-layout .demo-page-hint__action,
[data-bs-theme="dark"] .demo-flow-card--portal,
[data-bs-theme="dark"] .demo-flow-card--portal .demo-flow-scenario {
    border-color: var(--app-border, #333333);
    background: var(--app-panel-bg, #1a1a1a);
    color: var(--app-text, #dedede);
    box-shadow: var(--app-shadow-xs, none);
}

[data-bs-theme="dark"] .demo-flow-card--portal .demo-flow-step {
    border-color: var(--app-border-soft, #2a2a2a);
    background: var(--app-surface, #1a1a1a);
}

@media (max-width: 767.98px) {
    .portal-layout .demo-page-hint,
    .demo-flow-card--portal .demo-flow-card__header,
    .demo-flow-card--portal .demo-flow-scenario {
        grid-template-columns: 1fr;
    }

    .demo-flow-card--portal .demo-flow-card__progress,
    .demo-flow-card--portal .demo-flow-card__bar {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .demo-flow-card--portal .demo-flow-step__primary-action,
    .demo-flow-card--portal .demo-flow-step__secondary-action,
    .demo-flow-card--portal .demo-flow-step__skip-action,
    .demo-flow-card--portal .demo-flow-step__assist-action,
    .demo-flow-card--portal .demo-flow-step__secondary-action .mui-btn,
    .demo-flow-card--portal .demo-flow-step__skip-action .mui-btn,
    .demo-flow-card--portal .demo-flow-step__assist-action .mui-btn {
        width: 100%;
        min-width: 0;
    }
}

.demo-flow-card--complete::before {
    background: #198754;
}

.demo-flow-finished,
.demo-scenario-runner__finished {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid rgba(25, 135, 84, 0.28);
    border-radius: 0.85rem;
    background: rgba(25, 135, 84, 0.1);
    color: var(--app-text-strong, #172033);
}

.demo-flow-finished > span,
.demo-scenario-runner__finished > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 999px;
    background: rgba(25, 135, 84, 0.16);
    color: #198754;
    font-size: 1rem;
}

.demo-flow-finished strong,
.demo-scenario-runner__finished strong {
    display: block;
    color: var(--app-text-strong, #172033);
    font-size: 0.95rem;
    font-weight: 780;
    line-height: 1.3;
}

.demo-flow-finished p,
.demo-scenario-runner__finished p {
    margin: 0.25rem 0 0;
    color: var(--app-text-soft, #475569);
    font-size: 0.86rem;
    line-height: 1.45;
}

.demo-flow-card__finished-pill,
.demo-flow-drawer__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    width: fit-content;
    min-height: 2.45rem;
    padding: 0.58rem 0.9rem;
    border: 1px solid rgba(25, 135, 84, 0.28);
    border-radius: 0.78rem;
    background: rgba(25, 135, 84, 0.1);
    color: #137149;
    font-size: 0.86rem;
    font-weight: 750;
}

.demo-flow-card__finished-pill--sm {
    min-height: 2rem;
    margin-top: 0.6rem;
    padding: 0.42rem 0.7rem;
    font-size: 0.78rem;
}

.demo-flow-drawer__scenario-panel.is-complete .demo-flow-drawer__scenario {
    border-color: rgba(25, 135, 84, 0.28);
}

.demo-flow-drawer__current--complete {
    border-color: rgba(25, 135, 84, 0.26);
    background: rgba(25, 135, 84, 0.08);
}

[data-bs-theme="dark"] .demo-flow-finished,
[data-bs-theme="dark"] .demo-scenario-runner__finished,
[data-bs-theme="dark"] .demo-flow-drawer__current--complete {
    border-color: rgba(74, 222, 128, 0.28);
    background: rgba(22, 101, 52, 0.28);
}

[data-bs-theme="dark"] .demo-flow-finished strong,
[data-bs-theme="dark"] .demo-flow-finished p,
[data-bs-theme="dark"] .demo-scenario-runner__finished strong,
[data-bs-theme="dark"] .demo-scenario-runner__finished p {
    color: #f8fafc;
}

[data-bs-theme="dark"] .demo-flow-card__finished-pill,
[data-bs-theme="dark"] .demo-flow-drawer__status {
    border-color: rgba(74, 222, 128, 0.32);
    background: rgba(22, 101, 52, 0.24);
    color: #bbf7d0;
}

.demo-flow-completion {
    display: grid;
    gap: 1rem;
}

.demo-flow-completion__hero {
    padding-right: 2.2rem;
}

.demo-flow-completion__hero h2 {
    margin: 0.25rem 0 0.45rem;
    color: var(--app-text-strong, #172033);
    font-size: 1.55rem;
    font-weight: 820;
    line-height: 1.15;
    letter-spacing: 0;
}

.demo-flow-completion__hero p {
    margin: 0;
    max-width: 62rem;
    color: var(--app-text-soft, #475569);
    font-size: 0.96rem;
    line-height: 1.55;
}

.demo-flow-completion__proof {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.demo-flow-completion__proof div {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-height: 3.1rem;
    padding: 0.8rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 0.75rem;
    background: rgba(248, 250, 252, 0.72);
    color: var(--app-text-strong, #172033);
    font-size: 0.88rem;
    line-height: 1.35;
}

.demo-flow-completion__proof i {
    color: #198754;
}

.demo-flow-completion__rating {
    display: grid;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 0.8rem;
    background: rgba(255, 255, 255, 0.76);
}

.demo-flow-completion__rating strong,
.demo-flow-completion__rating span {
    display: block;
}

.demo-flow-completion__rating strong {
    color: var(--app-text-strong, #172033);
    font-size: 0.95rem;
}

.demo-flow-completion__rating span {
    color: var(--app-text-soft, #475569);
    font-size: 0.84rem;
}

.demo-flow-rating {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.demo-flow-rating label {
    margin: 0;
}

.demo-flow-rating input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.demo-flow-rating label span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 3.4rem;
    min-height: 2.25rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 0.7rem;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-weight: 750;
}

.demo-flow-rating input:checked + span {
    border-color: rgba(245, 158, 11, 0.62);
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
}

.demo-flow-completion__rating textarea {
    width: 100%;
    min-height: 5.2rem;
    resize: vertical;
    border: 1px solid rgba(15, 23, 42, 0.14);
    border-radius: 0.75rem;
    padding: 0.75rem 0.85rem;
    color: var(--app-text-strong, #172033);
}

.demo-flow-completion__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.demo-flow-completion__replay {
    margin: 0;
}

.demo-flow-persona-switcher,
.demo-flow-script {
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 0.75rem;
    background: rgba(248, 250, 252, 0.82);
}

.demo-flow-persona-switcher {
    padding: 0.85rem;
    margin-bottom: 1rem;
}

.demo-flow-persona-switcher__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.demo-flow-persona-switcher__head span,
.demo-flow-script dt {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.demo-flow-persona-switcher__head strong {
    color: #172033;
    font-size: 0.86rem;
}

.demo-flow-persona-switcher__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.demo-flow-persona-switcher__actions form {
    margin: 0;
}

.demo-flow-persona-switcher__actions button,
.demo-flow-persona-switcher__current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.38rem 0.65rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 0.55rem;
    background: #fff;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.1;
}

.demo-flow-persona-switcher__actions button:hover {
    border-color: rgba(37, 99, 235, 0.42);
    color: #1d4ed8;
}

.demo-flow-persona-switcher__current {
    gap: 0.35rem;
    border-color: rgba(22, 163, 74, 0.32);
    background: rgba(22, 163, 74, 0.1);
    color: #166534;
}

.demo-flow-script {
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem;
    margin: 0.75rem 0;
}

.demo-flow-script--compact {
    padding: 0.65rem;
    margin: 0.55rem 0;
}

.demo-flow-script--card {
    margin-top: 0.85rem;
}

.demo-flow-script div {
    display: grid;
    gap: 0.18rem;
}

.demo-flow-script dt,
.demo-flow-script dd {
    margin: 0;
}

.demo-flow-script dd {
    color: #334155;
    font-size: 0.82rem;
    line-height: 1.45;
}

@media (max-width: 767.98px) {
    .demo-flow-completion__proof {
        grid-template-columns: 1fr;
    }

    .demo-flow-completion__actions,
    .demo-flow-completion__actions .mui-btn,
    .demo-flow-completion__replay .mui-btn {
        width: 100%;
    }
}

[data-bs-theme="dark"] .demo-flow-completion__proof div,
[data-bs-theme="dark"] .demo-flow-completion__rating,
[data-bs-theme="dark"] .demo-flow-persona-switcher,
[data-bs-theme="dark"] .demo-flow-script {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(15, 23, 42, 0.5);
}

[data-bs-theme="dark"] .demo-flow-completion__hero h2,
[data-bs-theme="dark"] .demo-flow-completion__proof div,
[data-bs-theme="dark"] .demo-flow-completion__rating strong,
[data-bs-theme="dark"] .demo-flow-persona-switcher__head strong {
    color: #f8fafc;
}

[data-bs-theme="dark"] .demo-flow-completion__hero p,
[data-bs-theme="dark"] .demo-flow-completion__rating span,
[data-bs-theme="dark"] .demo-flow-script dd {
    color: #cbd5e1;
}

[data-bs-theme="dark"] .demo-flow-rating label span,
[data-bs-theme="dark"] .demo-flow-completion__rating textarea,
[data-bs-theme="dark"] .demo-flow-persona-switcher__actions button {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(2, 6, 23, 0.42);
    color: #f8fafc;
}