:root {
    --lph-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --lph-color-primary: #751c39;
    --lph-color-primary-strong: #5f142d;
    --lph-color-primary-soft: #f8f1f4;

    --lph-color-success: #2f8f61;
    --lph-color-success-soft: #edf7f2;

    --lph-color-text: #1d1d1f;
    --lph-color-muted: #70757d;
    --lph-color-subtle: #9a9fa7;
    --lph-color-border: #e7e7ea;
    --lph-color-border-strong: #d9dadd;
    --lph-color-surface: #ffffff;
    --lph-color-page: #f7f7f8;

    --lph-radius-sm: 8px;
    --lph-radius-md: 12px;
    --lph-radius-lg: 16px;

    --lph-shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .04);
    --lph-shadow-footer: 0 -8px 30px rgba(16, 24, 40, .05);

    --lph-sidebar-width: 250px;
    --lph-top-height: 118px;
    --lph-footer-height: 76px;

    --lph-transition: 180ms ease;
}

html,
body {
    overflow-x: hidden;
}

.lph-app,
.lph-app * {
    box-sizing: border-box;
}

.lph-app {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    min-height: 100vh;
    margin-left: calc(50% - 50vw);
    display: grid;
    grid-template-columns: var(--lph-sidebar-width) minmax(0, 1fr);
    background: var(--lph-color-page);
    color: var(--lph-color-text);
    font-family: var(--lph-font-family);
    overflow: hidden;
}

.lph-sidebar {
    height: 100vh;
    overflow-y: auto;
    background: #fff;
    border-right: 1px solid var(--lph-color-border);
    padding: 22px 14px 18px;
}

.lph-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 10px 20px;
    color: var(--lph-color-primary);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.2px;
}

.lph-brand-mark {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #ead7df;
    border-radius: 50%;
    background: var(--lph-color-primary-soft);
    font-size: 16px;
}

.lph-sidebar-nav {
    display: grid;
    gap: 4px;
}

.lph-sidebar-nav .lph-nav-item {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 13px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #292a2d;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background var(--lph-transition), color var(--lph-transition), transform var(--lph-transition);
}

.lph-sidebar-nav .lph-nav-item:hover {
    background: #f4f4f5;
}

.lph-sidebar-nav .lph-nav-item.is-active {
    background: var(--lph-color-primary);
    color: #fff;
}

.lph-sidebar-nav .lph-nav-item.is-active:hover {
    background: var(--lph-color-primary-strong);
}

.lph-check {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--lph-color-success);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.lph-check[hidden] {
    display: none !important;
}

.lph-main {
    min-width: 0;
    height: 100vh;
    overflow: hidden;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--lph-color-page);
}

.lph-top {
    position: relative;
    z-index: 20;
    background: #fff;
    border-bottom: 1px solid var(--lph-color-border);
    padding: 18px 30px 0;
}

.lph-progress-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #3b3d42;
    font-size: 13px;
}

.lph-progress-row strong {
    font-weight: 700;
}

.lph-progress-track {
    height: 5px;
    overflow: hidden;
    background: #ececef;
    border-radius: 999px;
}

.lph-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--lph-color-primary);
    transition: width 250ms ease;
}

.lph-tabs {
    display: flex;
    align-items: flex-end;
    gap: 28px;
    margin-top: 17px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.lph-tab {
    position: relative;
    appearance: none;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    padding: 12px 1px 13px;
    color: #5f6369;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--lph-transition), border-color var(--lph-transition);
}

.lph-tab:hover {
    color: var(--lph-color-primary);
}

.lph-tab.is-active {
    color: var(--lph-color-primary);
    border-bottom-color: var(--lph-color-primary);
}

.lph-tab.is-complete {
    color: var(--lph-color-success);
}

.lph-tab.is-complete.is-active {
    border-bottom-color: var(--lph-color-success);
}

.lph-tab-check {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    margin-left: 6px;
    border-radius: 50%;
    background: var(--lph-color-success);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    vertical-align: middle;
}

.lph-tab-check[hidden] {
    display: none !important;
}

.lph-content {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 30px 34px 38px;
    scrollbar-gutter: stable;
}

.lph-tab-panel[hidden],
.lph-section-panel[hidden],
.lph-health-header[hidden],
.lph-generic-header[hidden] {
    display: none !important;
}

.lph-tab-panel,
.lph-section-panel {
    width: min(1120px, 100%);
    margin: 0 auto;
}

.lph-card {
    background: #fff;
    border: 1px solid var(--lph-color-border);
    border-radius: 14px;
    box-shadow: var(--lph-shadow-card);
}

.lph-placeholder {
    padding: 30px 32px;
}

.lph-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--lph-color-primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lph-placeholder h1 {
    margin: 0 0 11px;
    color: #1f2023;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.lph-placeholder p {
    max-width: 780px;
    margin: 0;
    color: var(--lph-color-muted);
    font-size: 15px;
    line-height: 1.7;
}

.lph-inner-progress {
    margin-top: 28px;
    padding: 18px 20px;
    border: 1px solid var(--lph-color-border);
    border-radius: 10px;
    background: #fafafa;
}

.lph-inner-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 13px;
}

.lph-inner-progress-head strong {
    color: #33353a;
    font-weight: 700;
}

.lph-inner-progress-head span {
    color: var(--lph-color-muted);
    font-weight: 700;
}

.lph-demo-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.lph-demo-controls label {
    color: #50535a;
    font-size: 13px;
    font-weight: 700;
}

.lph-demo-controls input[type="range"] {
    width: min(340px, 100%);
    accent-color: var(--lph-color-primary);
}

.lph-button {
    appearance: none;
    min-height: 42px;
    border: 1px solid var(--lph-color-primary);
    border-radius: 8px;
    background: var(--lph-color-primary);
    color: #fff;
    padding: 10px 17px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--lph-transition), border-color var(--lph-transition), transform var(--lph-transition);
}

.lph-button:hover {
    border-color: var(--lph-color-primary-strong);
    background: var(--lph-color-primary-strong);
}

.lph-button:active {
    transform: translateY(1px);
}

.lph-button:disabled {
    opacity: .42;
    cursor: not-allowed;
    transform: none;
}

.lph-button-secondary {
    border-color: var(--lph-color-border-strong);
    background: #fff;
    color: #33353a;
}

.lph-button-secondary:hover {
    border-color: #c9cbd0;
    background: #f7f7f8;
}

.lph-save-status {
    color: var(--lph-color-success);
    font-size: 12px;
    font-weight: 800;
}

.lph-demo-long-content {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--lph-color-border);
}

.lph-demo-long-content h2 {
    margin: 0 0 9px;
    color: #282a2e;
    font-size: 20px;
}

.lph-demo-spacer {
    min-height: 430px;
}

.lph-footer-nav {
    position: relative;
    z-index: 25;
    min-height: var(--lph-footer-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 26px;
    background: rgba(255, 255, 255, .98);
    border-top: 1px solid var(--lph-color-border);
    box-shadow: var(--lph-shadow-footer);
}

.lph-generic-header {
    min-height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 16px;
}

.lph-generic-header h2 {
    margin: 3px 0 0;
    color: #1f2023;
    font-size: 24px;
    letter-spacing: -.025em;
}

@media (max-width: 1050px) {
    :root {
        --lph-sidebar-width: 220px;
    }

    .lph-content {
        padding-left: 24px;
        padding-right: 24px;
    }

    .lph-top {
        padding-left: 24px;
        padding-right: 24px;
    }

    .lph-tabs {
        gap: 22px;
    }
}

@media (max-width: 760px) {
    .lph-app {
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        height: auto;
        margin-left: 0;
        display: block;
        overflow: visible;
    }

    .lph-sidebar {
        height: auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--lph-color-border);
        padding-bottom: 12px;
    }

    .lph-brand {
        padding-bottom: 12px;
    }

    .lph-sidebar-nav {
        display: flex;
        gap: 7px;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .lph-sidebar-nav .lph-nav-item {
        width: auto;
        min-width: max-content;
        flex: 0 0 auto;
        min-height: 39px;
        padding: 8px 12px;
    }

    .lph-main {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .lph-top {
        position: sticky;
        top: 0;
        padding: 14px 16px 0;
    }

    .lph-tabs {
        gap: 20px;
        margin-top: 14px;
    }

    .lph-content {
        overflow: visible;
        padding: 18px 14px 26px;
    }

    .lph-placeholder {
        padding: 22px 18px;
    }

    .lph-footer-nav {
        position: sticky;
        bottom: 0;
        padding: 12px 14px;
    }

    .lph-demo-spacer {
        min-height: 230px;
    }
}


/* =========================================================
   v0.1.5 — Reference UI polish
   ========================================================= */

/* Sidebar hover fix:
   Never allow white text on a white / very light hover background. */
.lph-sidebar-nav .lph-nav-item {
    color: #24262b;
}

.lph-sidebar-nav .lph-nav-item:hover {
    background: #f3f4f5;
    color: #24262b;
}

.lph-sidebar-nav .lph-nav-item.is-active,
.lph-sidebar-nav .lph-nav-item.is-active:hover,
.lph-sidebar-nav .lph-nav-item.is-active:focus-visible {
    background: var(--lph-color-primary);
    color: #fff;
}

/* If a completed inactive item gets a check, keep text dark and the tick green. */
.lph-sidebar-nav .lph-nav-item.is-complete:not(.is-active) {
    background: transparent;
    color: #24262b;
}

.lph-sidebar-nav .lph-nav-item.is-complete:not(.is-active):hover {
    background: #f3f4f5;
    color: #24262b;
}

/* Top Health tabs — match the reference:
   plain text tabs, compact spacing, active underline, no outlined boxes. */
.lph-tabs {
    gap: 0;
    margin-top: 15px;
    border-bottom: 1px solid #ececef;
    overflow-x: auto;
}

.lph-tab {
    min-height: 42px;
    padding: 10px 14px 11px;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #27292d !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

.lph-tab:hover {
    background: #fafafa !important;
    color: var(--lph-color-primary) !important;
}

.lph-tab.is-active {
    background: transparent !important;
    color: var(--lph-color-primary) !important;
    font-weight: 700;
}

.lph-tab.is-active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--lph-color-primary);
}

.lph-tab.is-complete {
    color: var(--lph-color-success) !important;
}

.lph-tab.is-complete.is-active::after {
    background: var(--lph-color-success);
}

.lph-tab-check {
    width: 18px;
    height: 18px;
    margin-left: 5px;
    background: var(--lph-color-success);
    color: #fff;
    font-size: 10px;
}

/* Header density closer to the provided reference */
.lph-top {
    padding-top: 16px;
}

.lph-progress-row {
    margin-bottom: 7px;
    font-size: 12px;
}

.lph-progress-track {
    height: 5px;
}

/* Content cards should feel flatter / cleaner, not like a giant modal card. */
.lph-content {
    background: #f8f9fa;
    padding-top: 20px;
}

.lph-card {
    border-color: #e3e5e8;
    box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.035);
}

.lph-placeholder {
    padding: 28px 30px;
}

.lph-placeholder h1 {
    font-size: clamp(30px, 3vw, 43px);
}

/* Bottom nav — match reference:
   subtle Back, solid burgundy Continue */
.lph-footer-nav {
    min-height: 64px;
    padding: 10px 22px;
    background: #fff;
    border-top: 1px solid #e1e3e6;
    box-shadow: 0 -2px 10px rgba(16,24,40,.035);
}

.lph-footer-nav .lph-button {
    min-height: 38px;
    padding: 8px 15px;
    border-radius: 7px;
    font-size: 13px;
    box-shadow: none;
}

.lph-footer-nav .lph-button-secondary {
    background: #fff;
    border-color: #d5d8dc;
    color: #4d5158;
}

.lph-footer-nav .lph-button-secondary:hover {
    background: #f7f8f9;
    border-color: #c8ccd1;
    color: #2f3237;
}

.lph-footer-nav .lph-button:not(.lph-button-secondary) {
    background: var(--lph-color-primary);
    border-color: var(--lph-color-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(117, 28, 57, .16);
}

.lph-footer-nav .lph-button:not(.lph-button-secondary):hover {
    background: var(--lph-color-primary-strong);
    border-color: var(--lph-color-primary-strong);
    color: #fff;
}

/* Remove any theme-level button styles that bleed into our tabs/navigation. */
.lph-app button {
    font-family: var(--lph-font-family);
}

.lph-app button:focus {
    outline: none;
}

.lph-app button:focus-visible {
    outline: 2px solid rgba(117, 28, 57, .28);
    outline-offset: 2px;
}

/* Keep mobile tabs as horizontal text nav too. */
@media (max-width: 760px) {
    .lph-tabs {
        gap: 0;
    }

    .lph-tab {
        padding-left: 12px;
        padding-right: 12px;
    }

    .lph-footer-nav {
        padding: 10px 12px;
    }
}


/* =========================================================
   v0.1.6 — zoom / overflow / navigation fixes
   ========================================================= */

.lph-app {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.lph-main,
.lph-top,
.lph-health-header,
.lph-tabs-shell,
.lph-tabs,
.lph-content,
.lph-footer-nav {
    min-width: 0;
}

.lph-tabs-shell {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    margin-top: 15px;
    border-bottom: 1px solid #ececef;
}

.lph-tabs-shell .lph-tabs {
    margin-top: 0;
    border-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
}

.lph-tabs-shell .lph-tab {
    flex: 0 0 auto;
}

.lph-tabs-arrow {
    position: relative;
    z-index: 4;
    width: 34px;
    min-width: 34px;
    height: 42px;
    border: 0 !important;
    background: #fff !important;
    color: #4a4d53 !important;
    font-size: 25px !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: none !important;
}

.lph-tabs-arrow:hover:not(:disabled) {
    background: #f5f5f6 !important;
    color: var(--lph-color-primary) !important;
}

.lph-tabs-arrow:disabled {
    opacity: .28;
    cursor: default;
}

.lph-tabs-arrow[hidden] {
    display: none !important;
}

.lph-footer-nav {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.lph-footer-nav .lph-button {
    flex: 0 0 auto;
    max-width: calc(50% - 8px);
    white-space: nowrap;
}

@media (max-width: 1250px) {
    :root {
        --lph-sidebar-width: 210px;
    }

    .lph-sidebar {
        padding-left: 10px;
        padding-right: 10px;
    }

    .lph-sidebar-nav .lph-nav-item {
        font-size: 13px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .lph-top {
        padding-left: 20px;
        padding-right: 20px;
    }

    .lph-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 980px) {
    :root {
        --lph-sidebar-width: 185px;
    }

    .lph-brand {
        font-size: 16px;
    }

    .lph-sidebar-nav .lph-nav-item {
        font-size: 12px;
    }

    .lph-placeholder {
        padding: 24px;
    }
}

@media (max-width: 760px) {
    .lph-tabs-shell {
        grid-template-columns: 30px minmax(0, 1fr) 30px;
    }

    .lph-tabs-arrow {
        width: 30px;
        min-width: 30px;
    }

    .lph-footer-nav .lph-button {
        max-width: none;
    }
}


/* =========================================================
   v0.1.7 — true full viewport breakout
   ========================================================= */

/*
 * WordPress themes often wrap shortcode content in a centered/max-width
 * container. Break the LifePlan app out of that container and center it
 * against the actual browser viewport.
 */
.lph-app {
    position: relative;
    left: 50%;
    transform: translateX(-50%);

    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0;

    height: 100dvh;
    min-height: 100vh;

    margin: 0 !important;
    border: 0;
    border-radius: 0;
}

/* Keep the internal grid constrained to the viewport, never the WP theme container. */
.lph-main {
    width: 100%;
    max-width: 100%;
}

/* Prevent cards/panels from forcing horizontal overflow. */
.lph-tab-panel,
.lph-section-panel,
.lph-card,
.lph-placeholder {
    min-width: 0;
    max-width: 100%;
}

/* Use the available right-side width rather than an artificial narrow content cap. */
.lph-tab-panel,
.lph-section-panel {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Keep some comfortable content breathing room on very large screens. */
@media (min-width: 1600px) {
    .lph-content {
        padding-left: 34px;
        padding-right: 34px;
    }
}

/* Mobile stays naturally full-width without viewport breakout transforms. */
@media (max-width: 760px) {
    .lph-app {
        position: relative;
        left: auto;
        transform: none;
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        min-height: 100vh;
    }
}


/* =========================================================
   v0.1.8 — premium interaction + API loading polish
   ========================================================= */

.lph-sidebar {
    box-shadow: 10px 0 30px rgba(28, 34, 45, .035);
}

.lph-sidebar-nav .lph-nav-item {
    transition:
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.lph-sidebar-nav .lph-nav-item:hover:not(.is-active) {
    transform: translateX(2px);
    box-shadow: inset 3px 0 0 rgba(117, 28, 57, .16);
}

.lph-sidebar-nav .lph-nav-item.is-active {
    box-shadow: 0 8px 20px rgba(117, 28, 57, .15);
}

.lph-card {
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.lph-loaded-card:hover {
    transform: translateY(-2px);
    border-color: #dddfe3;
    box-shadow:
        0 2px 4px rgba(16, 24, 40, .04),
        0 16px 40px rgba(16, 24, 40, .08);
}

.lph-tab {
    transition:
        color 180ms ease,
        background-color 180ms ease,
        transform 180ms ease;
}

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

.lph-button {
    box-shadow: 0 7px 16px rgba(117, 28, 57, .12);
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

.lph-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(117, 28, 57, .18);
}

.lph-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(117, 28, 57, .12);
}

.lph-button-secondary {
    box-shadow: 0 3px 10px rgba(16, 24, 40, .05);
}

.lph-button-secondary:hover:not(:disabled) {
    box-shadow: 0 7px 18px rgba(16, 24, 40, .08);
}

.lph-async-region {
    min-height: 360px;
}

.lph-loaded-card {
    animation: lph-fade-up 260ms ease both;
}

@keyframes lph-fade-up {
    from {
        opacity: 0;
        transform: translateY(7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lph-skeleton-card {
    width: 100%;
    min-height: 430px;
    padding: 30px 32px;
    border: 1px solid var(--lph-color-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--lph-shadow-card);
}

.lph-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #eceef1;
}

.lph-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.72) 50%,
        transparent 100%
    );
    animation: lph-shimmer 1.1s infinite;
}

@keyframes lph-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.lph-skeleton-sm {
    width: 130px;
    height: 14px;
    margin-bottom: 24px;
}

.lph-skeleton-title {
    width: min(520px, 72%);
    height: 48px;
    margin-bottom: 22px;
}

.lph-skeleton-line {
    width: min(760px, 92%);
    height: 18px;
    margin-bottom: 36px;
}

.lph-skeleton-box {
    width: 100%;
    height: 110px;
}

.lph-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.lph-button-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255,255,255,.38);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lph-spin .7s linear infinite;
}

.lph-button-spinner[hidden] {
    display: none !important;
}

@keyframes lph-spin {
    to { transform: rotate(360deg); }
}

.lph-error-card {
    border-color: #ead5dd;
    background: #fffafb;
}

.lph-retry-button {
    margin-top: 22px;
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
    .lph-loaded-card,
    .lph-skeleton::after,
    .lph-button-spinner {
        animation: none !important;
    }

    .lph-card,
    .lph-button,
    .lph-tab,
    .lph-nav-item {
        transition: none !important;
    }
}


/* =========================================================
   v0.1.9 — sidebar icons + collapse / expand
   ========================================================= */

:root {
    --lph-sidebar-collapsed-width: 82px;
}

.lph-brand {
    position: relative;
    gap: 10px;
}

.lph-brand-mark {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 0;
    background: transparent;
}

.lph-brand-mark svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lph-brand-text {
    white-space: nowrap;
    transition: opacity 180ms ease, width 180ms ease;
}

.lph-sidebar-toggle {
    margin-left: auto;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: inline-grid;
    place-items: center;
    border: 1px solid #e3e5e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #5d626a !important;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(16,24,40,.05) !important;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease, border-color 180ms ease;
}

.lph-sidebar-toggle:hover {
    background: var(--lph-color-primary-soft) !important;
    border-color: #e4cbd5 !important;
    color: var(--lph-color-primary) !important;
    transform: translateY(-1px);
}

.lph-sidebar-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 220ms ease;
}

.lph-nav-item {
    position: relative;
}

.lph-nav-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-grid;
    place-items: center;
    color: currentColor;
}

.lph-nav-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lph-nav-label {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main sidebar transition */
.lph-app {
    transition: grid-template-columns 220ms ease;
}

.lph-sidebar {
    transition: width 220ms ease, padding 220ms ease;
}

.lph-app.is-sidebar-collapsed {
    grid-template-columns: var(--lph-sidebar-collapsed-width) minmax(0, 1fr);
}

.lph-app.is-sidebar-collapsed .lph-sidebar {
    padding-left: 10px;
    padding-right: 10px;
}

.lph-app.is-sidebar-collapsed .lph-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.lph-app.is-sidebar-collapsed .lph-brand-text {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    position: absolute;
    right: -2px;
    top: 0;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle svg {
    transform: rotate(180deg);
}

.lph-app.is-sidebar-collapsed .lph-sidebar-nav .lph-nav-item {
    justify-content: center;
    padding-left: 10px;
    padding-right: 10px;
}

.lph-app.is-sidebar-collapsed .lph-nav-label {
    width: 0;
    flex: 0 0 0;
    opacity: 0;
    overflow: hidden;
}

.lph-app.is-sidebar-collapsed .lph-check {
    position: absolute;
    right: 6px;
    top: 5px;
    width: 16px;
    height: 16px;
    font-size: 9px;
}

.lph-app.is-sidebar-collapsed .lph-nav-icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-nav .lph-nav-item:hover:not(.is-active) {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(16,24,40,.06);
}

/* Provide a compact tooltip from title on collapsed mode via native browser title,
   while keeping text labels hidden. */
.lph-app.is-sidebar-collapsed .lph-sidebar-nav {
    gap: 6px;
}

/* Mobile: do not use collapsed desktop rail; horizontal navigation remains easier. */
@media (max-width: 760px) {
    .lph-sidebar-toggle {
        display: none;
    }

    .lph-app.is-sidebar-collapsed {
        display: block;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar {
        padding-left: 14px;
        padding-right: 14px;
    }

    .lph-app.is-sidebar-collapsed .lph-brand {
        justify-content: flex-start;
    }

    .lph-app.is-sidebar-collapsed .lph-brand-text,
    .lph-app.is-sidebar-collapsed .lph-nav-label {
        width: auto;
        opacity: 1;
        overflow: visible;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-nav .lph-nav-item {
        justify-content: flex-start;
    }

    .lph-app.is-sidebar-collapsed .lph-check {
        position: static;
    }
}


/* =========================================================
   v0.2.0 — sidebar motion + scrollbar polish
   ========================================================= */

/* Smooth sidebar stretch / close animation */
.lph-app {
    transition:
        grid-template-columns 300ms cubic-bezier(.2,.75,.25,1),
        width 300ms cubic-bezier(.2,.75,.25,1);
}

.lph-sidebar {
    position: relative;
    overflow-x: hidden;
    transition:
        padding 300ms cubic-bezier(.2,.75,.25,1),
        box-shadow 220ms ease;
    will-change: padding;
}

.lph-brand,
.lph-sidebar-nav .lph-nav-item,
.lph-nav-label,
.lph-brand-text,
.lph-nav-icon,
.lph-sidebar-toggle {
    transition:
        opacity 220ms ease,
        transform 300ms cubic-bezier(.2,.75,.25,1),
        width 300ms cubic-bezier(.2,.75,.25,1),
        margin 300ms cubic-bezier(.2,.75,.25,1),
        padding 300ms cubic-bezier(.2,.75,.25,1),
        background-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease,
        border-color 180ms ease;
}

/* Better collapse / expand handle positioning.
   It floats on the sidebar edge instead of occupying the brand row awkwardly. */
.lph-sidebar-toggle {
    position: absolute;
    top: 22px;
    right: -14px;
    z-index: 60;

    width: 30px;
    height: 30px;
    min-width: 30px;

    border: 1px solid #dfe2e6 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #555a62 !important;

    box-shadow:
        0 2px 5px rgba(16,24,40,.05),
        0 7px 18px rgba(16,24,40,.08) !important;
}

.lph-sidebar-toggle:hover {
    background: var(--lph-color-primary) !important;
    border-color: var(--lph-color-primary) !important;
    color: #fff !important;
    transform: translateY(-1px) scale(1.03);
    box-shadow:
        0 3px 7px rgba(117,28,57,.12),
        0 10px 24px rgba(117,28,57,.18) !important;
}

.lph-sidebar-toggle:active {
    transform: translateY(0) scale(.97);
}

.lph-sidebar-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 300ms cubic-bezier(.2,.75,.25,1);
}

/* Expanded = arrow points left. Collapsed = arrow rotates to point right. */
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    right: -14px;
    top: 22px;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle svg {
    transform: rotate(180deg);
}

/* Remove prior absolute positioning rule from collapsed mode */
.lph-app.is-sidebar-collapsed .lph-brand {
    justify-content: center;
}

.lph-app.is-sidebar-collapsed .lph-brand-text {
    opacity: 0;
    width: 0;
    transform: translateX(-6px);
    pointer-events: none;
}

.lph-app.is-sidebar-collapsed .lph-nav-label {
    opacity: 0;
    width: 0;
    transform: translateX(-8px);
    pointer-events: none;
}

.lph-app:not(.is-sidebar-collapsed) .lph-brand-text,
.lph-app:not(.is-sidebar-collapsed) .lph-nav-label {
    opacity: 1;
    transform: translateX(0);
}

/* More premium nav icon motion */
.lph-sidebar-nav .lph-nav-item:hover .lph-nav-icon {
    transform: translateY(-1px) scale(1.04);
}

.lph-sidebar-nav .lph-nav-item.is-active .lph-nav-icon {
    transform: scale(1.04);
}

/* Thin, unobtrusive scrollbars across the app */
.lph-sidebar,
.lph-content,
.lph-tabs {
    scrollbar-width: thin;
    scrollbar-color: rgba(86, 91, 99, .34) transparent;
}

.lph-sidebar::-webkit-scrollbar,
.lph-content::-webkit-scrollbar,
.lph-tabs::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.lph-sidebar::-webkit-scrollbar-track,
.lph-content::-webkit-scrollbar-track,
.lph-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.lph-sidebar::-webkit-scrollbar-thumb,
.lph-content::-webkit-scrollbar-thumb,
.lph-tabs::-webkit-scrollbar-thumb {
    background: rgba(86, 91, 99, .28);
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

.lph-sidebar::-webkit-scrollbar-thumb:hover,
.lph-content::-webkit-scrollbar-thumb:hover,
.lph-tabs::-webkit-scrollbar-thumb:hover {
    background: rgba(86, 91, 99, .46);
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* Hide scrollbar buttons/arrows on Chromium/WebKit */
.lph-sidebar::-webkit-scrollbar-button,
.lph-content::-webkit-scrollbar-button,
.lph-tabs::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

/* Keep the sidebar visually calm while scrolling */
.lph-sidebar {
    scrollbar-gutter: stable;
}

/* Slightly cleaner collapsed rail spacing */
.lph-app.is-sidebar-collapsed .lph-sidebar-nav {
    gap: 7px;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-nav .lph-nav-item {
    min-height: 46px;
    border-radius: 12px;
}

/* Ensure toggle does not get clipped by the sidebar */
.lph-app {
    overflow: hidden;
}

.lph-sidebar {
    overflow-y: auto;
}

/* Mobile: keep sidebar toggle hidden; native responsive nav remains */
@media (max-width: 760px) {
    .lph-sidebar-toggle {
        display: none !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lph-app,
    .lph-sidebar,
    .lph-brand,
    .lph-sidebar-nav .lph-nav-item,
    .lph-nav-label,
    .lph-brand-text,
    .lph-nav-icon,
    .lph-sidebar-toggle,
    .lph-sidebar-toggle svg {
        transition: none !important;
    }
}


/* =========================================================
   v0.2.1 — refined collapsed rail, tiny scrollbar, smoother motion
   ========================================================= */

:root {
    --lph-sidebar-collapsed-width: 76px;
    --lph-sidebar-motion: 360ms cubic-bezier(.22, .72, .18, 1);
}

/* Use one consistent motion curve for both collapse AND expand. */
.lph-app {
    transition: grid-template-columns var(--lph-sidebar-motion) !important;
}

.lph-sidebar {
    overflow-x: hidden;
    scrollbar-gutter: auto !important;
    transition:
        padding var(--lph-sidebar-motion),
        box-shadow 220ms ease !important;
}

.lph-brand {
    min-height: 56px;
    padding-right: 46px;
    transition:
        padding var(--lph-sidebar-motion),
        gap var(--lph-sidebar-motion) !important;
}

.lph-brand-text {
    width: auto;
    max-width: 150px;
    opacity: 1;
    overflow: hidden;
    white-space: nowrap;
    transform: translateX(0);
    transition:
        max-width var(--lph-sidebar-motion),
        opacity 180ms ease,
        transform var(--lph-sidebar-motion) !important;
}

.lph-nav-label {
    width: auto !important;
    max-width: 170px;
    opacity: 1;
    overflow: hidden !important;
    white-space: nowrap;
    transform: translateX(0);
    transition:
        max-width var(--lph-sidebar-motion),
        opacity 180ms ease,
        transform var(--lph-sidebar-motion) !important;
}

.lph-sidebar-nav .lph-nav-item {
    transition:
        padding var(--lph-sidebar-motion),
        gap var(--lph-sidebar-motion),
        background-color 180ms ease,
        color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease !important;
}

/* Cleaner LifePlan logo */
.lph-brand-mark {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    color: var(--lph-color-primary);
}

.lph-brand-mark svg {
    width: 27px;
    height: 27px;
    stroke-width: 1.55;
}

/* Compact panel-style collapse control.
   Expanded: sits neatly in the brand row.
   Collapsed: centers below the logo instead of overlapping it. */
.lph-sidebar-toggle {
    position: absolute !important;
    top: 20px !important;
    right: 12px !important;
    left: auto !important;

    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;

    display: grid !important;
    place-items: center;

    border: 1px solid #e2e4e8 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #5b6068 !important;

    box-shadow:
        0 1px 2px rgba(16,24,40,.04),
        0 5px 14px rgba(16,24,40,.07) !important;

    transform: none !important;
    transition:
        top var(--lph-sidebar-motion),
        right var(--lph-sidebar-motion),
        left var(--lph-sidebar-motion),
        transform var(--lph-sidebar-motion),
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease !important;
}

.lph-sidebar-toggle:hover {
    background: var(--lph-color-primary-soft) !important;
    border-color: #dfc8d1 !important;
    color: var(--lph-color-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow:
        0 2px 4px rgba(16,24,40,.05),
        0 8px 18px rgba(117,28,57,.10) !important;
}

.lph-sidebar-toggle svg {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 1.65 !important;
    transition: transform var(--lph-sidebar-motion) !important;
}

.lph-app.is-sidebar-collapsed .lph-sidebar {
    padding-left: 9px;
    padding-right: 9px;
}

.lph-app.is-sidebar-collapsed .lph-brand {
    min-height: 104px;
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.lph-app.is-sidebar-collapsed .lph-brand-text {
    max-width: 0;
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    top: 58px !important;
    right: 50% !important;
    transform: translateX(50%) !important;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle:hover {
    transform: translateX(50%) translateY(-1px) !important;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle svg {
    transform: rotate(180deg) !important;
}

.lph-app.is-sidebar-collapsed .lph-nav-label {
    max-width: 0 !important;
    opacity: 0;
    transform: translateX(-8px);
    pointer-events: none;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-nav .lph-nav-item {
    min-height: 46px;
    justify-content: center;
    gap: 0;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 11px;
}

/* Much thinner scrollbars — especially the collapsed left rail */
.lph-sidebar,
.lph-content,
.lph-tabs {
    scrollbar-width: thin;
    scrollbar-color: rgba(80, 85, 92, .24) transparent;
}

.lph-sidebar::-webkit-scrollbar,
.lph-content::-webkit-scrollbar {
    width: 4px !important;
}

.lph-tabs::-webkit-scrollbar {
    height: 4px !important;
}

.lph-sidebar::-webkit-scrollbar-track,
.lph-content::-webkit-scrollbar-track,
.lph-tabs::-webkit-scrollbar-track {
    background: transparent !important;
}

.lph-sidebar::-webkit-scrollbar-thumb,
.lph-content::-webkit-scrollbar-thumb,
.lph-tabs::-webkit-scrollbar-thumb {
    min-height: 28px;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(80, 85, 92, .22) !important;
}

.lph-sidebar::-webkit-scrollbar-thumb:hover,
.lph-content::-webkit-scrollbar-thumb:hover,
.lph-tabs::-webkit-scrollbar-thumb:hover {
    background: rgba(80, 85, 92, .38) !important;
}

.lph-sidebar::-webkit-scrollbar-button,
.lph-content::-webkit-scrollbar-button,
.lph-tabs::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Keep icon movement subtle so the rail feels stable. */
.lph-nav-icon {
    transition:
        transform 180ms ease,
        color 180ms ease !important;
}

.lph-sidebar-nav .lph-nav-item:hover .lph-nav-icon {
    transform: scale(1.03);
}

/* Avoid visual jump when the rail changes width. */
.lph-main,
.lph-top,
.lph-content,
.lph-footer-nav {
    min-width: 0;
}

/* Mobile keeps the existing responsive navigation. */
@media (max-width: 760px) {
    .lph-sidebar-toggle {
        display: none !important;
    }

    .lph-app.is-sidebar-collapsed .lph-brand {
        min-height: 54px;
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
    }

    .lph-app.is-sidebar-collapsed .lph-brand-text,
    .lph-app.is-sidebar-collapsed .lph-nav-label {
        max-width: 180px !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lph-app,
    .lph-sidebar,
    .lph-brand,
    .lph-brand-text,
    .lph-nav-label,
    .lph-sidebar-nav .lph-nav-item,
    .lph-sidebar-toggle,
    .lph-sidebar-toggle svg {
        transition: none !important;
    }
}


/* =========================================================
   v0.2.2 — edge-mounted sidebar toggle + logo cleanup
   ========================================================= */

.lph-sidebar {
    position: relative;
    overflow-y: auto;
    overflow-x: visible !important;
}

/* Keep the brand row compact and stop the toggle from affecting its layout. */
.lph-brand {
    position: relative;
    min-height: 52px !important;
    padding-right: 12px !important;
}

/* Cleaner LifePlan mark */
.lph-brand-mark {
    width: 30px !important;
    height: 30px !important;
    flex: 0 0 30px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--lph-color-primary) !important;
}

.lph-brand-mark svg {
    width: 26px !important;
    height: 26px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.65 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/*
 * Toggle position:
 * - always attached to the sidebar divider
 * - half inside / half outside
 * - stays near the top in both expanded and collapsed states
 */
.lph-sidebar-toggle,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    position: fixed !important;
    top: 68px !important;
    left: calc(var(--lph-sidebar-width) - 17px) !important;
    right: auto !important;

    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid #dfe2e6 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #5d626a !important;

    box-shadow:
        0 2px 5px rgba(16,24,40,.05),
        0 8px 20px rgba(16,24,40,.10) !important;

    z-index: 120 !important;
    transform: none !important;

    transition:
        left var(--lph-sidebar-motion),
        transform 180ms ease,
        background-color 180ms ease,
        color 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease !important;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    left: calc(var(--lph-sidebar-collapsed-width) - 17px) !important;
}

.lph-sidebar-toggle:hover,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle:hover {
    background: #fff !important;
    border-color: #cfd3d8 !important;
    color: var(--lph-color-primary) !important;
    transform: translateY(-1px) scale(1.03) !important;
    box-shadow:
        0 3px 7px rgba(16,24,40,.06),
        0 10px 24px rgba(16,24,40,.12) !important;
}

.lph-sidebar-toggle:active,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle:active {
    transform: translateY(0) scale(.98) !important;
}

.lph-sidebar-toggle svg {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 1.55 !important;
    transition: transform var(--lph-sidebar-motion) !important;
}

/* Expanded points inward (left); collapsed points outward (right). */
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle svg {
    transform: rotate(180deg) !important;
}

/* Do not create the tall empty brand block in collapsed mode anymore. */
.lph-app.is-sidebar-collapsed .lph-brand {
    min-height: 52px !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.lph-app.is-sidebar-collapsed .lph-brand-text {
    max-width: 0 !important;
    width: 0 !important;
    opacity: 0 !important;
    transform: translateX(-6px) !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Ultra-thin scrollbar, almost hairline */
.lph-sidebar,
.lph-content,
.lph-tabs {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(86,91,99,.18) transparent !important;
}

.lph-sidebar::-webkit-scrollbar,
.lph-content::-webkit-scrollbar {
    width: 3px !important;
}

.lph-tabs::-webkit-scrollbar {
    height: 3px !important;
}

.lph-sidebar::-webkit-scrollbar-track,
.lph-content::-webkit-scrollbar-track,
.lph-tabs::-webkit-scrollbar-track {
    background: transparent !important;
}

.lph-sidebar::-webkit-scrollbar-thumb,
.lph-content::-webkit-scrollbar-thumb,
.lph-tabs::-webkit-scrollbar-thumb {
    background: rgba(86,91,99,.18) !important;
    border: 0 !important;
    border-radius: 999px !important;
}

.lph-sidebar::-webkit-scrollbar-thumb:hover,
.lph-content::-webkit-scrollbar-thumb:hover,
.lph-tabs::-webkit-scrollbar-thumb:hover {
    background: rgba(86,91,99,.34) !important;
}

.lph-sidebar::-webkit-scrollbar-button,
.lph-content::-webkit-scrollbar-button,
.lph-tabs::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Keep toggle aligned correctly at responsive desktop breakpoints. */
@media (max-width: 1250px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(210px - 17px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 17px) !important;
    }
}

@media (max-width: 980px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(185px - 17px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 17px) !important;
    }
}

@media (max-width: 760px) {
    .lph-sidebar-toggle {
        display: none !important;
    }
}


/* =========================================================
   v0.2.3 — larger sidebar collapse/expand glyph
   ========================================================= */

/* Keep the button compact, but let the icon actually fill it. */
.lph-sidebar-toggle,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
}

/* Visually larger panel icon — less empty space inside the control. */
.lph-sidebar-toggle svg,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle svg {
    width: 22px !important;
    height: 22px !important;
    stroke-width: 1.85 !important;
}

/* Re-center half-in / half-out after button grows from 34px to 36px. */
.lph-sidebar-toggle,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    left: calc(var(--lph-sidebar-width) - 18px) !important;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    left: calc(var(--lph-sidebar-collapsed-width) - 18px) !important;
}

@media (max-width: 1250px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(210px - 18px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 18px) !important;
    }
}

@media (max-width: 980px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(185px - 18px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 18px) !important;
    }
}


/* =========================================================
   v0.2.4 — toggle redesign inspired by the second reference
   ========================================================= */

/*
 * The user asked for the collapse/expand control to look like the second
 * reference image: a cleaner rounded-square control with a simple chevron.
 * We are matching the design language/shape/spacing, not the exact colors.
 */
.lph-sidebar-toggle,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    top: 74px !important;

    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;

    border-radius: 14px !important;
    border: 1px solid rgba(255,255,255,.08) !important;

    background: rgba(18, 23, 30, .98) !important;
    color: #eef2f6 !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 0 0 1px rgba(255,255,255,.03),
        0 12px 28px rgba(9, 12, 16, .30) !important;
}

/* Position stays half-in / half-out on the divider */
.lph-sidebar-toggle {
    left: calc(var(--lph-sidebar-width) - 23px) !important;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    left: calc(var(--lph-sidebar-collapsed-width) - 23px) !important;
}

.lph-sidebar-toggle:hover,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle:hover {
    background: rgba(24, 30, 38, 1) !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.12) !important;
    transform: translateY(-1px) scale(1.02) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.05) inset,
        0 0 0 1px rgba(255,255,255,.04),
        0 16px 34px rgba(9, 12, 16, .38) !important;
}

.lph-sidebar-toggle:active,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle:active {
    transform: translateY(0) scale(.985) !important;
}

/* Only a clean chevron inside, sized like the reference */
.lph-sidebar-toggle svg,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.4 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Responsive desktop breakpoint alignment after new 46px size */
@media (max-width: 1250px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(210px - 23px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 23px) !important;
    }
}

@media (max-width: 980px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(185px - 23px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 23px) !important;
    }
}


/* =========================================================
   v0.2.5 — smaller sidebar toggle + better zoom-out sizing
   ========================================================= */

/* Smaller collapse / expand button */
.lph-sidebar-toggle,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    border-radius: 12px !important;
}

/* Slightly smaller chevron so the control feels balanced */
.lph-sidebar-toggle svg,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle svg {
    width: 17px !important;
    height: 17px !important;
    stroke-width: 2.25 !important;
}

/* Re-center the half-in / half-out button after reducing it to 40px */
.lph-sidebar-toggle {
    left: calc(var(--lph-sidebar-width) - 20px) !important;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    left: calc(var(--lph-sidebar-collapsed-width) - 20px) !important;
}

/*
 * Browser zoom-out effectively creates a wider CSS viewport.
 * These responsive rules keep the sidebar from looking too tiny at
 * 90% / 80% while also improving large-screen readability.
 */
@media (min-width: 1450px) {
    :root {
        --lph-sidebar-width: 260px;
    }

    .lph-sidebar-nav .lph-nav-item {
        font-size: 15px !important;
        min-height: 46px;
    }

    .lph-brand {
        font-size: 19px !important;
    }

    .lph-nav-icon svg {
        width: 20px;
        height: 20px;
    }

    .lph-sidebar-toggle {
        left: calc(260px - 20px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 20px) !important;
    }
}

@media (min-width: 1850px) {
    :root {
        --lph-sidebar-width: 270px;
    }

    .lph-sidebar-nav .lph-nav-item {
        font-size: 15.5px !important;
        min-height: 47px;
    }

    .lph-brand {
        font-size: 20px !important;
    }

    .lph-nav-icon svg {
        width: 20.5px;
        height: 20.5px;
    }

    .lph-sidebar-toggle {
        left: calc(270px - 20px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 20px) !important;
    }
}

/* Existing narrower-desktop breakpoints still align the smaller control */
@media (max-width: 1250px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(210px - 20px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 20px) !important;
    }
}

@media (max-width: 980px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(185px - 20px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 20px) !important;
    }
}


/* =========================================================
   v0.2.6 — smaller toggle + slightly larger sidebar text
   ========================================================= */

/* Smaller, tighter collapse/expand control */
.lph-sidebar-toggle,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 10px !important;
}

/* Keep arrow visually centered and proportionate */
.lph-sidebar-toggle svg,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle svg {
    width: 15px !important;
    height: 15px !important;
    stroke-width: 2.35 !important;
    display: block !important;
    margin: 0 !important;
}

/* Re-center half-in / half-out position after reducing button size */
.lph-sidebar-toggle {
    left: calc(var(--lph-sidebar-width) - 17px) !important;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    left: calc(var(--lph-sidebar-collapsed-width) - 17px) !important;
}

/* Slight increase to sidebar readability */
.lph-sidebar-nav .lph-nav-item {
    font-size: 15px !important;
    font-weight: 600;
}

.lph-brand {
    font-size: 19px !important;
}

.lph-nav-icon svg {
    width: 19.5px !important;
    height: 19.5px !important;
}

/* Keep the larger text balanced on normal and wide screens */
@media (min-width: 1450px) {
    .lph-sidebar-nav .lph-nav-item {
        font-size: 15.5px !important;
    }

    .lph-brand {
        font-size: 19.5px !important;
    }
}

@media (min-width: 1850px) {
    .lph-sidebar-nav .lph-nav-item {
        font-size: 16px !important;
    }

    .lph-brand {
        font-size: 20px !important;
    }
}

/* Responsive desktop alignment for the smaller 34px control */
@media (max-width: 1250px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(210px - 17px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 17px) !important;
    }
}

@media (max-width: 980px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(185px - 17px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 17px) !important;
    }
}


/* =========================================================
   v0.2.7 — +1px sidebar text + smaller/lighter toggle
   ========================================================= */

/* Sidebar labels: +1px from v0.2.6 */
.lph-sidebar-nav .lph-nav-item {
    font-size: 16px !important;
}

/* Keep wider displays slightly larger too */
@media (min-width: 1450px) {
    .lph-sidebar-nav .lph-nav-item {
        font-size: 16.5px !important;
    }
}

@media (min-width: 1850px) {
    .lph-sidebar-nav .lph-nav-item {
        font-size: 17px !important;
    }
}

/* Smaller and softer collapse / expand control */
.lph-sidebar-toggle,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 9px !important;

    background: rgba(18, 23, 30, .86) !important;
    border-color: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.88) !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.03) inset,
        0 7px 18px rgba(9,12,16,.20) !important;
}

/* Smaller, cleaner arrow */
.lph-sidebar-toggle svg,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle svg {
    width: 13px !important;
    height: 13px !important;
    stroke-width: 2.2 !important;
}

/* Re-center half-in / half-out after shrinking to 30px */
.lph-sidebar-toggle {
    left: calc(var(--lph-sidebar-width) - 15px) !important;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
    left: calc(var(--lph-sidebar-collapsed-width) - 15px) !important;
}

.lph-sidebar-toggle:hover,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle:hover {
    background: rgba(18, 23, 30, .94) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.09) !important;
    transform: translateY(-1px) scale(1.02) !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.04) inset,
        0 9px 22px rgba(9,12,16,.26) !important;
}

/* Responsive desktop alignment for the smaller control */
@media (max-width: 1250px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(210px - 15px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 15px) !important;
    }
}

@media (max-width: 980px) and (min-width: 761px) {
    .lph-sidebar-toggle {
        left: calc(185px - 15px) !important;
    }

    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle {
        left: calc(var(--lph-sidebar-collapsed-width) - 15px) !important;
    }
}

/* =========================================================
   v0.3.0 — real Health Introduction + Formidable Background
   ========================================================= */

.lph-health-intro,
.lph-health-form-view {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.lph-intro-pillar {
    padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 68px);
    text-align: center;
    background:
        radial-gradient(circle at 50% -20%, rgba(117,28,57,.08), transparent 48%),
        #fff;
    border: 1px solid var(--lph-color-border);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(16,24,40,.055);
}

.lph-intro-pillar h1 {
    margin: 4px 0 18px;
    color: var(--lph-color-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.02em;
}

.lph-intro-lead {
    max-width: 920px;
    margin: 0 auto;
    color: #656b73;
    font-size: clamp(16px, 1.5vw, 19px);
    line-height: 1.7;
}

.lph-intro-divider {
    width: min(92%, 1040px);
    height: 1px;
    margin: 28px auto;
    background: linear-gradient(90deg, transparent, #dfe2e6 12%, #dfe2e6 88%, transparent);
}

.lph-intro-journey {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .8fr);
    gap: 24px;
    align-items: stretch;
}

.lph-intro-video-card,
.lph-intro-copy-card {
    background: #fff;
    border: 1px solid var(--lph-color-border);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(16,24,40,.055);
    overflow: hidden;
}

.lph-intro-video-card {
    padding: 16px;
}

.lph-video-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 13px;
    background: #11161c;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.lph-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.lph-video-empty {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 30px;
    color: #fff;
    text-align: center;
}

.lph-video-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 4px 11px;
}

.lph-video-meta > div {
    display: grid;
    gap: 3px;
}

.lph-video-meta strong {
    color: #292d33;
    font-size: 14px;
}

.lph-video-meta span:not(.lph-video-status) {
    color: #777d85;
    font-size: 12px;
}

.lph-video-status {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f4f4f5;
    color: #656a72;
    font-size: 12px;
    font-weight: 750;
}

.lph-video-status.is-complete {
    background: var(--lph-color-success-soft);
    color: var(--lph-color-success);
}

.lph-video-progress-track {
    height: 4px;
    margin: 0 4px 2px;
    overflow: hidden;
    border-radius: 999px;
    background: #eceef1;
}

.lph-video-progress-track span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--lph-color-primary), #b45b78);
    transition: width 250ms ease;
}

.lph-intro-copy-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(26px, 3vw, 42px);
}

.lph-step-kicker {
    display: inline-flex;
    align-self: flex-start;
    padding: 6px 9px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: var(--lph-color-primary-soft);
    color: var(--lph-color-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.lph-intro-copy-card h2 {
    margin: 0 0 14px;
    color: var(--lph-color-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.12;
    font-weight: 500;
}

.lph-intro-copy {
    color: #696f77;
    font-size: 15px;
    line-height: 1.7;
}

.lph-intro-ready {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding: 14px 15px;
    border: 1px solid #e3e5e8;
    border-radius: 12px;
    background: #fafafa;
}

.lph-intro-ready.is-complete {
    border-color: #cfe7db;
    background: var(--lph-color-success-soft);
}

.lph-ready-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--lph-color-primary);
    box-shadow: 0 3px 10px rgba(16,24,40,.06);
    font-size: 13px;
    font-weight: 900;
}

.lph-intro-ready.is-complete .lph-ready-icon {
    color: var(--lph-color-success);
}

.lph-intro-ready > div {
    display: grid;
    gap: 2px;
}

.lph-intro-ready strong {
    color: #33373d;
    font-size: 13px;
}

.lph-intro-ready span:not(.lph-ready-icon) {
    color: #737981;
    font-size: 12px;
}

.lph-health-form-view {
    background: #fff;
    border: 1px solid var(--lph-color-border);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(16,24,40,.055);
    overflow: hidden;
}

.lph-section-heading {
    padding: 28px 30px 24px;
    border-bottom: 1px solid #eceef1;
    background: linear-gradient(180deg, #fff, #fcfcfd);
}

.lph-section-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
}

.lph-section-heading h1 {
    margin: 2px 0 8px;
    color: #202329;
    font-size: clamp(29px, 3vw, 40px);
    line-height: 1.12;
    letter-spacing: -.03em;
}

.lph-section-description {
    max-width: 780px;
    color: #70767e;
    font-size: 14px;
    line-height: 1.65;
}

.lph-section-state {
    flex: 0 0 auto;
    margin-top: 4px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f3f4f5;
    color: #6d727a;
    font-size: 12px;
    font-weight: 750;
}

.lph-section-state.is-complete {
    background: var(--lph-color-success-soft);
    color: var(--lph-color-success);
}

.lph-formidable-shell {
    padding: 28px 30px 36px;
}

/* Formidable stays the form engine; LifePlan only gives it a consistent visual shell. */
.lph-formidable-shell .frm_forms,
.lph-formidable-shell .frm_form_fields {
    width: 100%;
    max-width: none;
}

.lph-formidable-shell .frm_form_field {
    margin-bottom: 20px;
}

.lph-formidable-shell .frm_primary_label,
.lph-formidable-shell .frm_section_heading h3 {
    color: #30343a;
    font-family: var(--lph-font-family) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.45;
}

.lph-formidable-shell .frm_section_heading,
.lph-formidable-shell .section-title {
    margin-top: 24px !important;
    margin-bottom: 14px !important;
    color: var(--lph-color-primary) !important;
    font-family: var(--lph-font-family) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

.lph-formidable-shell input[type="text"],
.lph-formidable-shell input[type="email"],
.lph-formidable-shell input[type="tel"],
.lph-formidable-shell input[type="number"],
.lph-formidable-shell input[type="date"],
.lph-formidable-shell select,
.lph-formidable-shell textarea {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px !important;
    border: 1px solid #d9dce1 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #25292f !important;
    font-family: var(--lph-font-family) !important;
    font-size: 14px !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.02) !important;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.lph-formidable-shell textarea {
    min-height: 100px;
}

.lph-formidable-shell input:focus,
.lph-formidable-shell select:focus,
.lph-formidable-shell textarea:focus {
    outline: none !important;
    border-color: rgba(117,28,57,.55) !important;
    box-shadow: 0 0 0 3px rgba(117,28,57,.08) !important;
}

.lph-formidable-shell .frm_opt_container {
    display: grid;
    gap: 8px;
    margin-top: 9px;
}

.lph-formidable-shell .frm_checkbox,
.lph-formidable-shell .frm_radio {
    padding: 10px 12px;
    border: 1px solid #e3e5e8;
    border-radius: 9px;
    background: #fafafa;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.lph-formidable-shell .frm_checkbox:hover,
.lph-formidable-shell .frm_radio:hover {
    border-color: #d4c1c9;
    background: #fffafb;
    transform: translateY(-1px);
}

.lph-formidable-shell input[type="radio"],
.lph-formidable-shell input[type="checkbox"] {
    accent-color: var(--lph-color-primary);
}

.lph-formidable-shell .frm_button_submit,
.lph-formidable-shell button[type="submit"] {
    min-height: 42px !important;
    padding: 10px 18px !important;
    border: 1px solid var(--lph-color-primary) !important;
    border-radius: 9px !important;
    background: var(--lph-color-primary) !important;
    color: #fff !important;
    font-family: var(--lph-font-family) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    box-shadow: 0 7px 16px rgba(117,28,57,.13) !important;
}

.lph-formidable-shell .frm_button_submit:hover,
.lph-formidable-shell button[type="submit"]:hover {
    background: var(--lph-color-primary-strong) !important;
    border-color: var(--lph-color-primary-strong) !important;
    transform: translateY(-1px);
}

.lph-formidable-shell .frm_error,
.lph-formidable-shell .frm_error_style {
    color: #a4233f !important;
    font-size: 12px !important;
}

.lph-formidable-shell .frm_message {
    padding: 14px 16px !important;
    border: 1px solid #cae5d7 !important;
    border-radius: 10px !important;
    background: var(--lph-color-success-soft) !important;
    color: #24734e !important;
}

.lph-integration-error {
    margin: 28px 30px 36px;
    padding: 20px;
    border: 1px solid #efd0d8;
    border-radius: 12px;
    background: #fff8fa;
    color: #5f2737;
}

.lph-integration-error p {
    margin: 7px 0;
}

.lph-integration-error code {
    padding: 2px 5px;
    border-radius: 5px;
    background: rgba(117,28,57,.07);
}

.lph-upcoming-card {
    min-height: 300px;
}

.lph-upcoming-badge {
    display: inline-flex;
    margin-top: 24px;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--lph-color-primary-soft);
    color: var(--lph-color-primary);
    font-size: 12px;
    font-weight: 750;
}

.lph-footer-nav .lph-button.is-locked {
    opacity: .48;
}

@media (max-width: 980px) {
    .lph-intro-journey {
        grid-template-columns: 1fr;
    }

    .lph-intro-copy-card {
        min-height: 0;
    }
}

@media (max-width: 760px) {
    .lph-intro-pillar,
    .lph-intro-video-card,
    .lph-intro-copy-card,
    .lph-health-form-view {
        border-radius: 13px;
    }

    .lph-intro-pillar {
        padding: 26px 18px;
    }

    .lph-intro-divider {
        margin: 18px auto;
    }

    .lph-intro-journey {
        gap: 14px;
    }

    .lph-intro-copy-card,
    .lph-section-heading,
    .lph-formidable-shell {
        padding-left: 18px;
        padding-right: 18px;
    }

    .lph-video-meta,
    .lph-section-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   v0.3.1 — compact Introduction + native Background form
   ========================================================= */

.lph-health-intro,
.lph-native-form-view {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

/* Remove the oversized top banner feeling. */
.lph-intro-compact-head {
    padding: 24px 28px 22px;
    margin-bottom: 18px;
    border: 1px solid #e5e7ea;
    border-radius: 16px;
    background: linear-gradient(135deg, #fff 0%, #fff 72%, #fbf6f8 100%);
    box-shadow: 0 7px 24px rgba(16,24,40,.045);
}

.lph-intro-head-copy {
    max-width: 1040px;
}

.lph-intro-compact-head .lph-eyebrow {
    margin-bottom: 8px;
}

.lph-intro-compact-head h1 {
    margin: 0 0 9px;
    color: var(--lph-color-primary);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -.02em;
}

.lph-intro-compact-head .lph-intro-lead {
    max-width: 1000px;
    margin: 0;
    color: #676d75;
    font-size: 15px;
    line-height: 1.65;
}

.lph-intro-journey-v2 {
    grid-template-columns: minmax(0, 1.55fr) minmax(320px, .72fr);
    gap: 18px;
}

.lph-intro-video-card,
.lph-intro-copy-card-v2 {
    border-radius: 16px;
    box-shadow: 0 8px 26px rgba(16,24,40,.05);
}

.lph-intro-video-card {
    padding: 12px;
}

.lph-intro-copy-card-v2 {
    padding: 28px;
    justify-content: flex-start;
}

.lph-intro-copy-card-v2 .lph-step-kicker {
    margin-bottom: 12px;
}

.lph-intro-copy-card-v2 h2 {
    font-size: clamp(27px, 2.6vw, 36px);
}

.lph-intro-copy-card-v2 .lph-intro-ready {
    margin-top: 22px;
}

/* Native Background form */
.lph-native-form-view {
    background: #fff;
    border: 1px solid #e5e7ea;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(16,24,40,.05);
    overflow: hidden;
}

.lph-native-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 28px 30px 24px;
    border-bottom: 1px solid #eceef1;
    background: linear-gradient(180deg, #fff, #fcfcfd);
}

.lph-native-heading h1 {
    margin: 2px 0 8px;
    font-size: clamp(28px, 3vw, 40px);
}

.lph-native-form {
    padding: 0 30px 30px;
}

.lph-native-section {
    padding: 28px 0;
    border-bottom: 1px solid #eceef1;
}

.lph-native-section:last-of-type {
    border-bottom: 0;
}

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

.lph-native-section-head h2 {
    margin: 0 0 5px;
    color: #272b31;
    font-size: 20px;
    line-height: 1.25;
}

.lph-native-section-head p {
    margin: 0;
    color: #747a83;
    font-size: 13px;
    line-height: 1.55;
}

.lph-native-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.lph-native-field {
    grid-column: 1 / -1;
}

.lph-native-field.is-half {
    grid-column: span 1;
}

.lph-native-field[hidden] {
    display: none !important;
}

.lph-native-label {
    display: block;
    margin-bottom: 8px;
    color: #34383e;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

.lph-native-field input[type="text"],
.lph-native-field input[type="number"],
.lph-native-field select,
.lph-native-field textarea {
    width: 100%;
    min-height: 43px;
    padding: 10px 12px;
    border: 1px solid #d9dde2;
    border-radius: 9px;
    background: #fff;
    color: #24282e;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.lph-native-field textarea {
    min-height: 92px;
    resize: vertical;
}

.lph-native-field input:focus,
.lph-native-field select:focus,
.lph-native-field textarea:focus {
    border-color: rgba(117,28,57,.55);
    box-shadow: 0 0 0 3px rgba(117,28,57,.08);
}

.lph-native-options {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.lph-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lph-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #e0e3e7;
    border-radius: 9px;
    background: #fafbfc;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.lph-choice:hover {
    border-color: #d0d4da;
    background: #fff;
    transform: translateY(-1px);
}

.lph-choice input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--lph-color-primary);
}

.lph-choice span {
    color: #454a52;
    font-size: 13px;
    line-height: 1.4;
}

.lph-add-row,
.lph-remove-row {
    appearance: none;
    border: 1px solid #d8dce1;
    border-radius: 8px;
    background: #fff;
    color: var(--lph-color-primary);
    padding: 8px 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.lph-add-row:hover,
.lph-remove-row:hover {
    background: var(--lph-color-primary-soft);
    border-color: #dfcbd3;
}

.lph-repeater-list {
    display: grid;
    gap: 14px;
}

.lph-repeater-row {
    padding: 18px;
    border: 1px solid #e3e6ea;
    border-radius: 12px;
    background: #fbfbfc;
}

.lph-repeater-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.lph-repeater-row-head strong {
    color: #30343a;
    font-size: 13px;
}

.lph-repeater-empty {
    padding: 15px;
    border: 1px dashed #d9dde2;
    border-radius: 10px;
    color: #7b818a;
    background: #fafbfc;
    font-size: 13px;
}

.lph-native-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 26px;
}

.lph-native-save-note {
    color: #747a83;
    font-size: 12px;
}

.lph-native-submit {
    min-width: 160px;
}

@media (max-width: 980px) {
    .lph-intro-journey-v2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .lph-intro-compact-head,
    .lph-native-form-view {
        border-radius: 13px;
    }

    .lph-intro-compact-head {
        padding: 20px 18px;
    }

    .lph-native-heading {
        padding: 22px 18px 18px;
        flex-direction: column;
    }

    .lph-native-form {
        padding: 0 18px 22px;
    }

    .lph-native-grid,
    .lph-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .lph-native-field.is-half {
        grid-column: 1 / -1;
    }

    .lph-native-section-head,
    .lph-native-form-actions {
        flex-direction: column;
        align-items: stretch;
    }
}


/* =========================================================
   v0.3.2 — admin typography + softer premium Health UI
   ========================================================= */

.lph-app {
    font-family: var(--lph-font-family) !important;
    font-size: var(--lph-font-body, 15px);
}

.lph-sidebar-nav .lph-nav-item {
    font-size: var(--lph-font-sidebar, 16px) !important;
}

.lph-tab {
    font-size: var(--lph-font-tabs, 14px) !important;
}

.lph-health-intro h1,
.lph-native-form-view h1,
.lph-upcoming-card h1,
.lph-error-card h1 {
    font-family: var(--lph-font-family) !important;
    font-size: var(--lph-font-h1, 38px) !important;
    font-weight: 680 !important;
    letter-spacing: -.025em !important;
}

.lph-health-intro h2,
.lph-native-section-head h2 {
    font-family: var(--lph-font-family) !important;
    font-size: var(--lph-font-h2, 22px) !important;
    font-weight: 680 !important;
}

.lph-intro-lead,
.lph-intro-copy,
.lph-section-description,
.lph-native-section-head p,
.lph-choice span,
.lph-native-save-note {
    font-size: var(--lph-font-body, 15px) !important;
}

.lph-native-label {
    font-size: var(--lph-font-label, 14px) !important;
}

/* Introduction: remove the "huge banner" feeling and use an editorial header. */
.lph-intro-compact-head {
    margin: 2px 0 20px !important;
    padding: 22px 26px 20px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(117,28,57,.055), transparent 34%),
        #fff !important;
    box-shadow: 0 14px 38px rgba(16,24,40,.055) !important;
}

.lph-intro-compact-head h1 {
    margin-bottom: 10px !important;
    color: var(--lph-color-primary) !important;
}

.lph-intro-video-card,
.lph-intro-copy-card-v2 {
    border: 0 !important;
    box-shadow: 0 14px 38px rgba(16,24,40,.065) !important;
}

/* Background form: premium surface, fewer divider lines/borders. */
.lph-native-form-view {
    border: 0 !important;
    border-radius: 18px !important;
    background: #f7f8fa !important;
    box-shadow: 0 16px 44px rgba(16,24,40,.065) !important;
}

.lph-native-heading {
    padding: 28px 30px 22px !important;
    border-bottom: 0 !important;
    background: #fff !important;
}

.lph-native-form {
    padding: 18px 24px 28px !important;
}

.lph-native-section {
    margin: 0 0 16px;
    padding: 24px !important;
    border: 0 !important;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 7px 22px rgba(16,24,40,.045);
}

.lph-native-section:last-of-type {
    margin-bottom: 0;
}

.lph-native-section-head {
    margin-bottom: 18px !important;
}

.lph-native-section-head h2 {
    color: #24282e !important;
}

.lph-native-field input[type="text"],
.lph-native-field input[type="number"],
.lph-native-field select,
.lph-native-field textarea {
    min-height: 46px !important;
    border: 1px solid #e4e7eb !important;
    border-radius: 11px !important;
    background: #fafbfc !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.025);
}

.lph-native-field input:hover,
.lph-native-field select:hover,
.lph-native-field textarea:hover {
    border-color: #d7dbe0 !important;
    background: #fff !important;
}

.lph-native-field input:focus,
.lph-native-field select:focus,
.lph-native-field textarea:focus {
    border-color: rgba(117,28,57,.42) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(117,28,57,.07) !important;
}

.lph-choice {
    border: 0 !important;
    border-radius: 11px !important;
    background: #f6f7f9 !important;
    box-shadow: inset 0 0 0 1px rgba(30,35,42,.055);
}

.lph-choice:hover {
    background: #fff !important;
    box-shadow: inset 0 0 0 1px rgba(117,28,57,.18), 0 6px 18px rgba(16,24,40,.05) !important;
}

.lph-repeater-row {
    border: 0 !important;
    background: #f7f8fa !important;
    box-shadow: inset 0 0 0 1px rgba(30,35,42,.05);
}

.lph-repeater-empty {
    border: 0 !important;
    background: #f7f8fa !important;
    box-shadow: inset 0 0 0 1px rgba(30,35,42,.055);
}

.lph-native-form-actions {
    padding: 18px 4px 0 !important;
}

@media (max-width: 760px) {
    .lph-native-form {
        padding: 14px 12px 22px !important;
    }
    .lph-native-section {
        padding: 18px !important;
    }
}


/* =========================================================
   v0.3.5 — universal font weights
   ========================================================= */

.lph-app {
    font-weight: var(--lph-weight-body, 400);
}

.lph-health-intro h1,
.lph-native-form-view h1,
.lph-upcoming-card h1,
.lph-error-card h1 {
    font-weight: var(--lph-weight-h1, 700) !important;
}

.lph-health-intro h2,
.lph-native-section-head h2 {
    font-weight: var(--lph-weight-h2, 700) !important;
}

.lph-intro-lead,
.lph-intro-copy,
.lph-section-description,
.lph-native-section-head p,
.lph-choice span,
.lph-native-save-note {
    font-weight: var(--lph-weight-body, 400) !important;
}

.lph-native-label {
    font-weight: var(--lph-weight-label, 600) !important;
}

.lph-sidebar-nav .lph-nav-item {
    font-weight: var(--lph-weight-sidebar, 600) !important;
}

.lph-tab {
    font-weight: var(--lph-weight-tabs, 600) !important;
}


/* =========================================================
   v0.4.0 — Nutrition native 3-step flow
   ========================================================= */

.lph-nutrition-view {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.lph-nutrition-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 4px 20px;
}

.lph-nutrition-heading h1 {
    margin: 3px 0 8px;
    color: var(--lph-color-primary);
    font-size: var(--lph-font-h1, 38px);
    font-weight: var(--lph-weight-h1, 700);
    letter-spacing: -.025em;
}

.lph-nutrition-heading p {
    margin: 0;
    max-width: 900px;
    color: #68717c;
    font-size: var(--lph-font-body, 15px);
    line-height: 1.65;
}

.lph-nutrition-card,
.lph-next-step-card,
.lph-nutrition-video-card {
    border: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(16,24,40,.07);
}

.lph-nutrition-card {
    padding: 28px 30px;
}

.lph-nutrition-question + .lph-nutrition-question {
    margin-top: 34px;
}

.lph-nutrition-question > label {
    display: block;
    margin-bottom: 18px;
    color: #252b32;
    font-size: calc(var(--lph-font-label, 14px) + 1px);
    font-weight: var(--lph-weight-label, 600);
    line-height: 1.55;
}

.lph-range-wrap input[type="range"] {
    --lph-range-fill: 44.44%;
    width: 100%;
    height: 8px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    outline: none;
    background: linear-gradient(to right, var(--lph-color-primary) 0 var(--lph-range-fill), #e2e5e8 var(--lph-range-fill) 100%);
}

.lph-range-wrap input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 23px;
    height: 23px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--lph-color-primary);
    box-shadow: 0 3px 10px rgba(16,24,40,.22);
    cursor: pointer;
}

.lph-range-wrap input[type="range"]::-moz-range-thumb {
    width: 19px;
    height: 19px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--lph-color-primary);
    box-shadow: 0 3px 10px rgba(16,24,40,.22);
    cursor: pointer;
}

.lph-range-labels {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    color: #747c86;
    font-size: 13px;
}

.lph-range-labels span:last-child { text-align: right; }

.lph-range-labels strong {
    min-width: 42px;
    text-align: center;
    color: var(--lph-color-primary);
    font-size: 23px;
    font-weight: 800;
}

.lph-big-choice-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}

.lph-big-choice {
    position: relative;
    cursor: pointer;
}

.lph-big-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lph-big-choice span {
    display: grid;
    place-items: center;
    min-height: 64px;
    padding: 14px 20px;
    border-radius: 13px;
    background: #f7f8fa;
    box-shadow: inset 0 0 0 1px #e3e6e9;
    color: #2b3037;
    font-weight: 650;
    transition: all 180ms ease;
}

.lph-big-choice:hover span {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(117,28,57,.22), 0 8px 18px rgba(16,24,40,.05);
}

.lph-big-choice input:checked + span {
    background: var(--lph-color-primary-soft);
    color: var(--lph-color-primary);
    box-shadow: inset 0 0 0 2px rgba(117,28,57,.34);
}

.lph-nutrition-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 26px;
}

.lph-nutrition-actions.is-centered {
    justify-content: center;
}

.lph-gold-standard {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 18px;
    padding: 16px 18px;
    border-radius: 13px;
    background: #f7f8fa;
    color: #505862;
    line-height: 1.6;
}

.lph-gold-standard strong {
    color: #262c33;
    white-space: nowrap;
}

.lph-nutrition-video-card {
    overflow: hidden;
}

.lph-nutrition-video-card .lph-video-frame {
    border-radius: 0;
}

.lph-next-step-card {
    padding: 20px;
}

.lph-next-step-options {
    display: grid;
    gap: 12px;
}

.lph-next-step-option {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 13px;
    align-items: center;
    min-height: 62px;
    padding: 15px 17px;
    border-radius: 13px;
    background: #f8f9fa;
    box-shadow: inset 0 0 0 1px #e1e5e9;
    cursor: pointer;
    transition: all 180ms ease;
}

.lph-next-step-option:hover {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(117,28,57,.22), 0 8px 18px rgba(16,24,40,.045);
}

.lph-next-step-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lph-radio-dot {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: #fff;
    box-shadow: inset 0 0 0 1px #cfd5da;
}

.lph-next-step-option input:checked + .lph-radio-dot {
    box-shadow: inset 0 0 0 6px var(--lph-color-primary);
}

.lph-next-step-option:has(input:checked) {
    background: var(--lph-color-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(117,28,57,.24);
}

.lph-next-step-option strong {
    color: #2b3037;
    font-size: var(--lph-font-body, 15px);
    font-weight: 600;
    line-height: 1.5;
}

.lph-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(12,16,21,.56);
    backdrop-filter: blur(5px);
}

.lph-decision-modal {
    width: min(520px,100%);
    padding: 28px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 70px rgba(0,0,0,.24);
    animation: lph-fade-up 220ms ease both;
}

.lph-decision-modal h2 {
    margin: 8px 0 10px;
    color: #242a31;
    font-size: 26px;
}

.lph-decision-modal p {
    margin: 0;
    color: #69717b;
    line-height: 1.65;
}

.lph-decision-actions {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

@media (max-width:760px) {
    .lph-nutrition-heading {
        display: block;
    }

    .lph-nutrition-heading .lph-section-state {
        display: inline-flex;
        margin-top: 12px;
    }

    .lph-nutrition-card {
        padding: 20px 17px;
    }

    .lph-big-choice-grid {
        grid-template-columns: 1fr;
    }

    .lph-nutrition-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .lph-gold-standard {
        display: block;
    }

    .lph-gold-standard strong {
        display: block;
        margin-bottom: 4px;
    }
}


/* =========================================================
   v0.4.2 — Nutrition reference layout
   ========================================================= */
.lph-course-shell{display:grid;grid-template-columns:minmax(360px,42%) minmax(0,58%);min-height:calc(100vh - 260px);margin:-20px -34px -38px;background:#fff}
.lph-course-left{min-width:0;padding:20px;background:#f1f4f5;border-right:1px solid #e0e4e7}
.lph-course-video{overflow:hidden;aspect-ratio:16/9;border-radius:10px;background:#171a1d;box-shadow:0 10px 28px rgba(16,24,40,.10)}
.lph-course-video iframe{width:100%;height:100%;border:0;display:block}
.lph-course-syllabus{margin-top:14px;padding:15px 14px 12px;border-radius:10px;background:#fff;box-shadow:0 5px 18px rgba(16,24,40,.07)}
.lph-course-syllabus h3{margin:0 0 9px;color:#24282d;font-size:17px;font-weight:700}
.lph-course-chapter{width:100%;min-height:38px;display:grid;grid-template-columns:48px 18px minmax(0,1fr);gap:8px;align-items:center;padding:7px 9px;border:0!important;border-radius:6px!important;background:transparent!important;color:#2b3036!important;text-align:left;cursor:pointer;box-shadow:none!important}
.lph-course-chapter:hover{background:#f3f5f6!important}.lph-course-chapter.is-active{background:#dfe3e5!important}
.lph-course-time{color:#23627b;font-size:13px;text-decoration:underline;text-underline-offset:2px}.lph-course-play{color:#1f252b;font-size:11px}.lph-course-label{overflow:hidden;color:#22272d;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.lph-course-right{min-width:0;padding:22px 24px 28px;background:#fff}.lph-course-panel{width:100%;max-width:820px}
.lph-course-content-head{margin-bottom:17px}.lph-course-content-head h1{margin:5px 0 8px;color:#1f242a;font-size:clamp(30px,3vw,44px);font-weight:var(--lph-weight-h1,700);line-height:1.1;letter-spacing:-.03em}
.lph-course-content-head p{max-width:760px;margin:0;color:#69717b;font-size:var(--lph-font-body,15px);line-height:1.65}
.lph-course-callout{display:flex;gap:9px;align-items:flex-start;margin-bottom:18px;padding:15px 17px;border-radius:8px;background:#e8f3f8;color:#314852}.lph-course-callout strong{white-space:nowrap}.lph-course-callout p{margin:0;line-height:1.55}
.lph-course-help{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lph-course-help>div{padding:16px;border-radius:10px;background:#fafbfc;box-shadow:inset 0 0 0 1px #e4e7ea}.lph-course-help strong,.lph-course-help span{display:block}.lph-course-help strong{margin-bottom:5px;color:var(--lph-color-primary)}.lph-course-help span{color:#66707a;line-height:1.5}
.lph-course-form{display:grid;gap:20px}.lph-course-question{padding:18px 0 20px;border-bottom:1px solid #eceef0}.lph-course-question>label{display:block;margin-bottom:14px;color:#252a30;font-size:15px;font-weight:650;line-height:1.55}
.lph-course-radio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lph-course-radio{position:relative;min-height:58px;display:flex;align-items:center;justify-content:center;gap:10px;padding:13px 15px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px #dfe3e7;cursor:pointer}.lph-course-radio input{position:absolute;opacity:0;pointer-events:none}.lph-course-radio:hover{box-shadow:inset 0 0 0 1px rgba(117,28,57,.28),0 6px 16px rgba(16,24,40,.04)}.lph-course-radio:has(input:checked){background:var(--lph-color-primary-soft);box-shadow:inset 0 0 0 2px rgba(117,28,57,.28)}.lph-course-radio strong{font-size:14px;font-weight:650}
.lph-course-next-options{display:grid;gap:11px}.lph-course-next-option{position:relative;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;min-height:58px;padding:14px 15px;border-radius:8px;background:#fafbfc;box-shadow:inset 0 0 0 1px #dfe3e7;cursor:pointer}.lph-course-next-option input{position:absolute;opacity:0;pointer-events:none}.lph-radio-dot{width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px #c9d0d6}.lph-course-next-option input:checked+.lph-radio-dot{box-shadow:inset 0 0 0 5px var(--lph-color-primary)}.lph-course-next-option:has(input:checked){background:#f8f1f4;box-shadow:inset 0 0 0 1px rgba(117,28,57,.22)}.lph-course-next-option strong{color:#252b31;font-size:14px;font-weight:600;line-height:1.45}
.lph-course-form-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:4px}
@media(max-width:1050px){.lph-course-shell{grid-template-columns:minmax(310px,40%) minmax(0,60%);margin-left:-20px;margin-right:-20px}}
@media(max-width:820px){.lph-course-shell{display:block;margin:-18px -14px -26px}.lph-course-left{border-right:0;border-bottom:1px solid #e0e4e7}.lph-course-right{padding:20px 18px 28px}.lph-course-help,.lph-course-radio-grid{grid-template-columns:1fr}.lph-course-form-actions{align-items:stretch;flex-direction:column}}


/* =========================================================
   v0.4.3 — Nutrition premium polish / 50-50 layout
   ========================================================= */
.lph-course-shell{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    align-items: start;
    gap: 22px;
    min-height: auto !important;
    margin: -8px -18px -22px !important;
    padding: 18px;
    background: linear-gradient(180deg,#f7f8fa 0%,#f2f4f7 100%);
}

.lph-course-left,
.lph-course-right{
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.lph-course-video{
    border: 1px solid #dfe5ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(15,23,42,.08), 0 2px 8px rgba(15,23,42,.05);
}

.lph-course-video iframe{
    border-radius: 18px;
}

.lph-course-syllabus{
    margin-top: 18px;
    padding: 18px 18px 16px;
    border: 1px solid #dfe5ea;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 40px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.04);
}

.lph-course-syllabus h3{
    margin-bottom: 12px;
    font-size: 18px;
}

.lph-course-chapter{
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px !important;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.lph-course-chapter:hover{
    background: #f4f7f8 !important;
    transform: translateY(-1px);
}

.lph-course-chapter.is-active{
    background: #e6eaed !important;
    box-shadow: inset 0 0 0 1px #d5dce2;
}

.lph-course-time{
    font-size: 14px;
}

.lph-course-label{
    font-size: 15px;
    font-weight: 500;
}

.lph-course-panel{
    width: 100%;
    max-width: none;
    padding: 24px 24px 22px;
    border: 1px solid #dfe5ea;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(15,23,42,.07), 0 2px 10px rgba(15,23,42,.04);
}

.lph-course-content-head{
    margin-bottom: 18px;
}

.lph-course-content-head h1{
    font-size: clamp(24px, 2.2vw, 34px) !important;
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 6px 0 10px;
}

.lph-course-content-head p{
    font-size: 14px;
    line-height: 1.7;
}

.lph-step-kicker{
    padding: 8px 14px;
    border-radius: 999px;
    background: #f6eef2;
    color: var(--lph-color-primary);
    letter-spacing: .08em;
    font-size: 12px;
    font-weight: 700;
}

.lph-course-callout{
    margin-bottom: 18px;
    padding: 16px 18px;
    border: 1px solid #d8e8ef;
    border-radius: 16px;
    background: linear-gradient(180deg,#eef7fb 0%,#e8f2f7 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.lph-course-callout strong{
    font-size: 15px;
}

.lph-course-callout p{
    font-size: 14px;
}

.lph-course-help{
    gap: 14px;
}

.lph-course-help > div{
    padding: 18px;
    border: 1px solid #e1e7ec;
    border-radius: 16px;
    background: linear-gradient(180deg,#ffffff 0%,#fafbfc 100%);
    box-shadow: 0 8px 24px rgba(15,23,42,.04);
}

.lph-course-help strong{
    font-size: 24px;
    line-height: 1;
    margin-bottom: 8px;
}

.lph-course-help span{
    font-size: 14px;
}

.lph-course-form{
    gap: 22px;
}

.lph-course-question{
    padding: 0 0 18px;
    border-bottom: 1px solid #edf0f3;
}

.lph-course-question > label{
    font-size: 15px;
    font-weight: 650;
    margin-bottom: 16px;
}

.lph-range-wrap input[type="range"]{
    height: 8px;
}

.lph-range-labels{
    margin-top: 12px;
    font-size: 14px;
}

.lph-range-labels strong{
    font-size: 20px;
}

.lph-course-radio-grid{
    gap: 14px;
}

.lph-course-radio{
    min-height: 64px;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px #dfe5ea;
    transition: box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.lph-course-radio:hover{
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(117,28,57,.24), 0 10px 22px rgba(15,23,42,.06);
}

.lph-course-radio strong{
    font-size: 15px;
}

.lph-course-next-options{
    gap: 14px;
}

.lph-course-next-option{
    min-height: 72px;
    padding: 18px 18px;
    border: 1px solid #dde4ea;
    border-radius: 16px;
    background: linear-gradient(180deg,#ffffff 0%,#fafbfc 100%);
    box-shadow: 0 8px 22px rgba(15,23,42,.04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.lph-course-next-option:hover{
    transform: translateY(-1px);
    border-color: #d2dbe2;
    box-shadow: 0 12px 28px rgba(15,23,42,.07);
}

.lph-course-next-option:has(input:checked){
    background: linear-gradient(180deg,#fbf5f7 0%,#f8eff3 100%);
    border-color: rgba(117,28,57,.28);
    box-shadow: 0 12px 28px rgba(117,28,57,.08);
}

.lph-radio-dot{
    width: 20px;
    height: 20px;
}

.lph-course-next-option strong{
    font-size: 15px;
    line-height: 1.5;
}

.lph-course-form-actions{
    padding-top: 8px;
    gap: 16px;
}

.lph-course-form-actions .lph-button{
    min-width: 180px;
}

@media (max-width: 1200px){
    .lph-course-shell{
        gap: 18px;
        padding: 16px;
    }
    .lph-course-panel{
        padding: 22px 20px 20px;
    }
    .lph-course-content-head h1{
        font-size: clamp(22px, 2vw, 30px) !important;
    }
}

@media (max-width: 980px){
    .lph-course-shell{
        grid-template-columns: 1fr !important;
        margin: -6px -12px -18px !important;
    }
    .lph-course-video,
    .lph-course-syllabus,
    .lph-course-panel{
        border-radius: 18px;
    }
}

@media (max-width: 640px){
    .lph-course-shell{
        padding: 12px;
    }
    .lph-course-panel,
    .lph-course-syllabus{
        padding: 16px;
    }
    .lph-course-content-head h1{
        font-size: 22px !important;
    }
    .lph-course-help{
        grid-template-columns: 1fr;
    }
    .lph-course-next-option{
        min-height: 64px;
        padding: 15px 14px;
    }
}


/* =========================================================
   v0.4.4 — Nutrition flow + scoped scrolling + tablet polish
   ========================================================= */

/* Nutrition owns the available center viewport.
   The page itself should not scroll just because one Nutrition column is taller. */
.lph-app.is-nutrition-workspace .lph-content {
    overflow: hidden !important;
    padding-bottom: 0 !important;
}

.lph-app.is-nutrition-workspace .lph-async-region {
    height: 100%;
    min-height: 0;
}

.lph-app.is-nutrition-workspace .lph-course-shell {
    height: 100%;
    min-height: 0 !important;
    align-items: stretch;
    overflow: hidden;
}

/* Desktop: true balanced 50 / 50 workspace */
.lph-app.is-nutrition-workspace .lph-course-left,
.lph-app.is-nutrition-workspace .lph-course-right {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(73,82,92,.22) transparent;
}

.lph-app.is-nutrition-workspace .lph-course-left::-webkit-scrollbar,
.lph-app.is-nutrition-workspace .lph-course-right::-webkit-scrollbar {
    width: 4px;
}

.lph-app.is-nutrition-workspace .lph-course-left::-webkit-scrollbar-thumb,
.lph-app.is-nutrition-workspace .lph-course-right::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(73,82,92,.22);
}

.lph-app.is-nutrition-workspace .lph-course-left {
    padding: 4px 8px 18px 4px !important;
}

.lph-app.is-nutrition-workspace .lph-course-right {
    padding: 4px 4px 18px 8px !important;
}

.lph-course-video,
.lph-course-syllabus,
.lph-course-panel {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.lph-course-video:hover,
.lph-course-syllabus:hover,
.lph-course-panel:hover {
    border-color: #d5dce2;
    box-shadow: 0 18px 48px rgba(15,23,42,.085), 0 3px 10px rgba(15,23,42,.045);
}

.lph-course-panel {
    position: relative;
}

.lph-course-content-head-compact h1 {
    max-width: 680px;
    font-size: clamp(22px,2vw,30px) !important;
}

.lph-course-callout-soft {
    background: linear-gradient(180deg,#f1f8f5 0%,#ebf5f0 100%) !important;
    border-color: #d8eadf !important;
    color: #315b48 !important;
}

.lph-course-next-cue {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid #e1e6ea;
    border-radius: 16px;
    background: linear-gradient(180deg,#fff 0%,#fafbfc 100%);
    box-shadow: 0 10px 28px rgba(15,23,42,.05);
}

.lph-course-next-cue-time {
    flex: 0 0 auto;
    min-width: 74px;
    color: var(--lph-color-primary);
    font-size: 24px;
    font-weight: 800;
}

.lph-course-next-cue strong,
.lph-course-next-cue span {
    display: block;
}

.lph-course-next-cue strong {
    margin-bottom: 3px;
    color: #252b31;
}

.lph-course-next-cue div > span {
    color: #6a737d;
    font-size: 14px;
}

/* Make form cards calmer and easier to scan. */
.lph-course-question {
    border-bottom-color: #eef1f3;
}

.lph-course-radio,
.lph-course-next-option {
    background: #fff;
}

.lph-course-radio:has(input:checked),
.lph-course-next-option:has(input:checked) {
    border-color: rgba(117,28,57,.22);
    background: linear-gradient(180deg,#fbf5f7 0%,#f8eff3 100%);
}

.lph-course-form-actions {
    position: sticky;
    bottom: -1px;
    z-index: 4;
    margin: 0 -8px -8px;
    padding: 14px 8px 8px;
    background: linear-gradient(to top,#fff 68%,rgba(255,255,255,.90) 84%,rgba(255,255,255,0));
}

/* Tablet: one clean column — video, syllabus, then form/content.
   No squeezed side-by-side layout. */
@media (max-width: 1024px) {
    .lph-app.is-nutrition-workspace .lph-content {
        overflow-y: auto !important;
    }

    .lph-app.is-nutrition-workspace .lph-async-region {
        height: auto;
    }

    .lph-app.is-nutrition-workspace .lph-course-shell {
        display: block !important;
        height: auto;
        overflow: visible;
        padding: 14px !important;
        margin: -6px -10px -16px !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-left,
    .lph-app.is-nutrition-workspace .lph-course-right {
        overflow: visible;
        padding: 0 !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-right {
        margin-top: 18px;
    }

    .lph-course-video {
        max-width: 100%;
        border-radius: 16px;
    }

    .lph-course-syllabus,
    .lph-course-panel {
        border-radius: 16px;
    }

    .lph-course-form-actions {
        position: static;
        margin: 0;
        padding: 10px 0 0;
        background: transparent;
    }
}

@media (max-width: 700px) {
    .lph-course-panel {
        padding: 18px 16px 16px !important;
    }

    .lph-course-content-head h1 {
        font-size: 22px !important;
    }

    .lph-course-radio-grid,
    .lph-course-help {
        grid-template-columns: 1fr !important;
    }

    .lph-course-next-cue {
        align-items: flex-start;
    }

    .lph-course-next-cue-time {
        min-width: 58px;
        font-size: 20px;
    }
}


/* =========================================================
   v0.4.5 — Nutrition scroll boundary / footer overlap fix
   ========================================================= */

/*
 * Nutrition must fit exactly inside the middle grid row.
 * The previous 100% height + padding + negative margins could make the
 * workspace extend underneath the fixed bottom navigation.
 */
.lph-app.is-nutrition-workspace .lph-content {
    min-height: 0 !important;
    overflow: hidden !important;
    padding: 14px 18px 14px !important;
}

.lph-app.is-nutrition-workspace .lph-async-region {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.lph-app.is-nutrition-workspace .lph-course-shell {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 18px !important;
    overflow: hidden !important;
    background: transparent !important;
}

/* Each side owns its own scroll only when its content is taller. */
.lph-app.is-nutrition-workspace .lph-course-left,
.lph-app.is-nutrition-workspace .lph-course-right {
    box-sizing: border-box;
    height: 100%;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scroll-padding-bottom: 28px;
    padding-bottom: 28px !important;
}

/* Give the scrollbar a tiny inset so it doesn't visually merge with cards. */
.lph-app.is-nutrition-workspace .lph-course-left {
    padding: 0 8px 28px 0 !important;
}

.lph-app.is-nutrition-workspace .lph-course-right {
    padding: 0 4px 28px 8px !important;
}

/* Never let the last card/action disappear beneath the bottom app bar. */
.lph-app.is-nutrition-workspace .lph-course-syllabus,
.lph-app.is-nutrition-workspace .lph-course-panel {
    margin-bottom: 4px;
}

.lph-app.is-nutrition-workspace .lph-course-form-actions {
    bottom: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 12px !important;
}

/* The scrollbar should stop at the Nutrition workspace, not continue
   through the footer/navigation bar. */
.lph-app.is-nutrition-workspace .lph-course-left::-webkit-scrollbar,
.lph-app.is-nutrition-workspace .lph-course-right::-webkit-scrollbar {
    width: 4px !important;
}

.lph-app.is-nutrition-workspace .lph-course-left::-webkit-scrollbar-track,
.lph-app.is-nutrition-workspace .lph-course-right::-webkit-scrollbar-track {
    background: transparent !important;
    margin-block: 6px;
}

.lph-app.is-nutrition-workspace .lph-course-left::-webkit-scrollbar-thumb,
.lph-app.is-nutrition-workspace .lph-course-right::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(70,78,88,.24) !important;
}

.lph-app.is-nutrition-workspace .lph-course-left::-webkit-scrollbar-thumb:hover,
.lph-app.is-nutrition-workspace .lph-course-right::-webkit-scrollbar-thumb:hover {
    background: rgba(70,78,88,.40) !important;
}

/* Tablet/mobile returns to one natural page scroll: video, syllabus, form. */
@media (max-width: 1024px) {
    .lph-app.is-nutrition-workspace .lph-content {
        overflow-y: auto !important;
        padding: 12px 14px 18px !important;
    }

    .lph-app.is-nutrition-workspace .lph-async-region {
        height: auto !important;
        overflow: visible !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-shell {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-left,
    .lph-app.is-nutrition-workspace .lph-course-right {
        height: auto !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-right {
        margin-top: 18px;
    }
}


/* =========================================================
   v0.4.6 — Nutrition scrolling + timeline progression
   ========================================================= */

/* Ensure the middle content row is allowed to shrink inside the app grid.
   Without this, inner overflow has nothing to scroll against. */
.lph-app.is-nutrition-workspace .lph-main,
.lph-app.is-nutrition-workspace .lph-content,
.lph-app.is-nutrition-workspace .lph-async-region {
    min-height: 0 !important;
}

.lph-app.is-nutrition-workspace .lph-content {
    height: 100% !important;
    overflow: hidden !important;
}

.lph-app.is-nutrition-workspace .lph-course-shell {
    height: 100% !important;
    max-height: 100% !important;
}

/* Visible internal scroll regions. */
.lph-app.is-nutrition-workspace .lph-course-left,
.lph-app.is-nutrition-workspace .lph-course-right {
    height: 100% !important;
    max-height: 100% !important;
    overflow-y: scroll !important;
    overscroll-behavior-y: contain !important;
    scrollbar-gutter: stable;
}

/* Keep the scrollbar subtle but visible enough to communicate scrollability. */
.lph-app.is-nutrition-workspace .lph-course-left,
.lph-app.is-nutrition-workspace .lph-course-right {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(65,74,84,.36) rgba(0,0,0,0) !important;
}

.lph-app.is-nutrition-workspace .lph-course-left::-webkit-scrollbar,
.lph-app.is-nutrition-workspace .lph-course-right::-webkit-scrollbar {
    width: 6px !important;
}

.lph-app.is-nutrition-workspace .lph-course-left::-webkit-scrollbar-thumb,
.lph-app.is-nutrition-workspace .lph-course-right::-webkit-scrollbar-thumb {
    background: rgba(65,74,84,.34) !important;
    border-radius: 999px !important;
}

.lph-app.is-nutrition-workspace .lph-course-left::-webkit-scrollbar-thumb:hover,
.lph-app.is-nutrition-workspace .lph-course-right::-webkit-scrollbar-thumb:hover {
    background: rgba(65,74,84,.52) !important;
}

/* Timeline/chapter progression:
   reached chapters become green; current chapter keeps stronger emphasis. */
.lph-course-chapter.is-reached .lph-course-time,
.lph-course-chapter.is-reached .lph-course-label {
    color: #27895f !important;
}

.lph-course-chapter.is-reached .lph-course-time {
    text-decoration-color: #27895f !important;
}

.lph-course-chapter.is-reached:not(.is-active) {
    background: #f2faf6 !important;
}

.lph-course-chapter.is-active {
    background: #e7f4ed !important;
    box-shadow: inset 0 0 0 1px rgba(39,137,95,.22) !important;
}

.lph-course-chapter.is-active .lph-course-label,
.lph-course-chapter.is-active .lph-course-time,
.lph-course-chapter.is-active .lph-course-play {
    color: #247d58 !important;
}

/* Tablet/mobile: return to one natural scroll; no nested scroll areas. */
@media (max-width: 1024px) {
    .lph-app.is-nutrition-workspace .lph-content {
        height: auto !important;
        overflow-y: auto !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-left,
    .lph-app.is-nutrition-workspace .lph-course-right {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        scrollbar-gutter: auto;
    }
}


/* =========================================================
   v0.4.7 — Nutrition inner-scroll height chain + Step 3 polish
   ========================================================= */

/*
 * The scroll panes need every parent in the grid's middle row to have
 * an explicit constrained height. Otherwise the columns grow with their
 * content and there is nothing for overflow-y to scroll.
 */
.lph-app.is-nutrition-workspace .lph-content,
.lph-app.is-nutrition-workspace .lph-content > [data-lph-section-panel="health"],
.lph-app.is-nutrition-workspace [data-lph-section-panel="health"] > .lph-async-region,
.lph-app.is-nutrition-workspace .lph-course-shell {
    height: 100% !important;
    min-height: 0 !important;
}

.lph-app.is-nutrition-workspace .lph-content > [data-lph-section-panel="health"] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    overflow: hidden !important;
}

.lph-app.is-nutrition-workspace [data-lph-section-panel="health"] > .lph-async-region {
    overflow: hidden !important;
}

.lph-app.is-nutrition-workspace .lph-course-shell {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    overflow: hidden !important;
}

/* Make the two scroll areas unmistakably scrollable on desktop. */
.lph-app.is-nutrition-workspace .lph-course-left,
.lph-app.is-nutrition-workspace .lph-course-right {
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-gutter: stable both-edges;
}

.lph-app.is-nutrition-workspace .lph-course-left {
    padding-right: 12px !important;
}

.lph-app.is-nutrition-workspace .lph-course-right {
    padding-left: 12px !important;
    padding-right: 8px !important;
}

/* Clearer timeline progression. */
.lph-course-chapter {
    border-left: 3px solid transparent !important;
}

.lph-course-chapter.is-reached {
    border-left-color: rgba(39,137,95,.45) !important;
}

.lph-course-chapter.is-reached:not(.is-active) {
    background: #f4faf7 !important;
}

.lph-course-chapter.is-active {
    border-left-color: #27895f !important;
    background: #e7f4ed !important;
}

.lph-course-chapter.is-active .lph-course-play::after {
    content: ' Now';
    margin-left: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #27895f;
}

/* Step 3 options feel selected immediately. */
.lph-course-next-option.is-selected {
    background: linear-gradient(180deg,#fbf5f7 0%,#f7edf1 100%) !important;
    border-color: rgba(117,28,57,.30) !important;
    box-shadow: 0 12px 30px rgba(117,28,57,.08) !important;
}

/* Tablet/mobile: no nested scrollbars; normal document-like flow. */
@media (max-width:1024px) {
    .lph-app.is-nutrition-workspace .lph-content,
    .lph-app.is-nutrition-workspace .lph-content > [data-lph-section-panel="health"],
    .lph-app.is-nutrition-workspace [data-lph-section-panel="health"] > .lph-async-region,
    .lph-app.is-nutrition-workspace .lph-course-shell {
        height: auto !important;
        overflow: visible !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-shell {
        display: block !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-left,
    .lph-app.is-nutrition-workspace .lph-course-right {
        height: auto !important;
        overflow: visible !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        scrollbar-gutter: auto;
    }
}


/* =========================================================
   v0.4.8 — Nutrition compact premium layout
   ========================================================= */

/* More breathing room between left and right panes */
.lph-app.is-nutrition-workspace .lph-course-shell{
    gap: 24px !important;
}

/* Make both columns feel visually separated but not oversized */
.lph-app.is-nutrition-workspace .lph-course-left{
    padding-right: 14px !important;
}

.lph-app.is-nutrition-workspace .lph-course-right{
    padding-left: 14px !important;
}

/* Slightly smaller video footprint so more of the syllabus fits on screen */
.lph-course-video{
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.07) !important;
}

.lph-course-syllabus{
    margin-top: 14px !important;
    padding: 14px 14px 12px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 28px rgba(15,23,42,.055) !important;
}

.lph-course-syllabus h3{
    margin-bottom: 8px !important;
    font-size: 16px !important;
}

.lph-course-chapter{
    min-height: 40px !important;
    padding: 8px 10px !important;
    border-radius: 9px !important;
}

.lph-course-time{
    font-size: 13px !important;
}

.lph-course-label{
    font-size: 14px !important;
}

/* Right content card: more compact so most forms fit without much scrolling */
.lph-course-panel{
    padding: 18px 20px 18px !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.065) !important;
}

.lph-course-content-head{
    margin-bottom: 14px !important;
}

.lph-course-content-head h1{
    margin: 4px 0 7px !important;
    font-size: clamp(22px,1.85vw,30px) !important;
    line-height: 1.1 !important;
}

.lph-course-content-head p{
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}

.lph-step-kicker{
    padding: 6px 11px !important;
    font-size: 11px !important;
}

/* Self-audit form */
.lph-course-form{
    gap: 14px !important;
}

.lph-course-question{
    padding: 12px 0 14px !important;
}

.lph-course-question > label{
    margin-bottom: 11px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.lph-range-wrap input[type="range"]{
    height: 7px !important;
}

.lph-range-labels{
    margin-top: 8px !important;
    font-size: 13px !important;
}

.lph-range-labels strong{
    font-size: 18px !important;
}

.lph-course-radio-grid{
    gap: 10px !important;
}

.lph-course-radio{
    min-height: 52px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
}

.lph-course-radio strong{
    font-size: 14px !important;
}

/* Keep saved note and action clearly separated instead of colliding */
.lph-course-form-actions{
    position: static !important;
    margin: 8px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid #edf0f2;
    background: transparent !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 18px !important;
    align-items: center !important;
}

.lph-course-form-actions .lph-native-save-note{
    max-width: 420px;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.lph-course-form-actions .lph-button{
    min-width: 160px !important;
    min-height: 44px;
    padding: 10px 18px !important;
    white-space: nowrap;
}

/* Next Steps: smaller cards so all three usually fit in one desktop viewport */
.lph-course-next-options{
    gap: 10px !important;
}

.lph-course-next-option{
    min-height: 58px !important;
    padding: 13px 15px !important;
    border-radius: 13px !important;
    box-shadow: 0 6px 18px rgba(15,23,42,.035) !important;
}

.lph-course-next-option strong{
    font-size: 14px !important;
    line-height: 1.42 !important;
}

.lph-radio-dot{
    width: 18px !important;
    height: 18px !important;
}

/* Intro / learn callouts are compact too */
.lph-course-callout{
    margin-bottom: 12px !important;
    padding: 12px 14px !important;
    border-radius: 13px !important;
}

.lph-course-callout strong,
.lph-course-callout p{
    font-size: 13px !important;
}

.lph-course-help{
    gap: 10px !important;
}

.lph-course-help > div{
    padding: 13px 14px !important;
    border-radius: 13px !important;
}

.lph-course-help strong{
    font-size: 18px !important;
    margin-bottom: 5px !important;
}

.lph-course-help span{
    font-size: 13px !important;
}

/* Timeline should not feel crowded */
.lph-course-chapter{
    grid-template-columns: 44px 16px minmax(0,1fr) !important;
    column-gap: 7px !important;
}

/* Prevent odd text overlap on current row */
.lph-course-chapter.is-active .lph-course-play::after{
    content: '' !important;
}

/* Desktop height efficiency: slightly smaller gutters around the workspace */
.lph-app.is-nutrition-workspace .lph-content{
    padding: 10px 14px 12px !important;
}

/* Tablet: video first, then syllabus, then form; comfortable spacing */
@media (max-width: 1024px){
    .lph-app.is-nutrition-workspace .lph-course-shell{
        gap: 0 !important;
    }

    .lph-course-video{
        max-height: none !important;
    }

    .lph-course-syllabus{
        margin-top: 12px !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-right{
        margin-top: 14px !important;
    }

    .lph-course-panel{
        padding: 18px !important;
    }

    .lph-course-form-actions{
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .lph-course-form-actions .lph-button{
        width: 100%;
    }
}

/* Small tablets / phones: even tighter but still touch-friendly */
@media (max-width: 700px){
    .lph-course-syllabus{
        padding: 12px !important;
    }

    .lph-course-panel{
        padding: 15px !important;
    }

    .lph-course-content-head h1{
        font-size: 21px !important;
    }

    .lph-course-question > label{
        font-size: 13.5px !important;
    }

    .lph-course-radio,
    .lph-course-next-option{
        min-height: 54px !important;
    }

    .lph-course-next-option{
        padding: 12px 13px !important;
    }
}


/* =========================================================
   v0.4.9 — tighter Nutrition layout, spaced syllabus rows
   ========================================================= */

/* Match the reference more closely: compact workspace, less wasted space. */
.lph-app.is-nutrition-workspace .lph-content{
    padding: 8px 12px 10px !important;
}

.lph-app.is-nutrition-workspace .lph-course-shell{
    gap: 20px !important;
}

/* Left side: tighter video + syllabus stack */
.lph-course-video{
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.07) !important;
}

.lph-course-syllabus{
    margin-top: 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(15,23,42,.05) !important;
}

.lph-course-syllabus h3{
    margin: 0 0 10px !important;
    font-size: 16px !important;
}

/* Add visible space between the 3 syllabus rows */
.lph-course-chapter{
    min-height: 38px !important;
    margin: 0 0 8px !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
}

.lph-course-chapter:last-child{
    margin-bottom: 0 !important;
}

/* Keep completed/current rows visually distinct, but not bulky */
.lph-course-chapter.is-reached:not(.is-active){
    background: #f2f8f5 !important;
}

.lph-course-chapter.is-active{
    background: #e6f2eb !important;
}

/* Right card: closer to reference, less empty padding */
.lph-course-panel{
    padding: 16px 18px !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 26px rgba(15,23,42,.055) !important;
}

.lph-course-content-head{
    margin-bottom: 12px !important;
}

.lph-course-content-head h1{
    margin: 3px 0 6px !important;
    font-size: clamp(22px,1.7vw,28px) !important;
}

.lph-course-content-head p{
    font-size: 13px !important;
    line-height: 1.5 !important;
}

.lph-step-kicker{
    padding: 5px 10px !important;
    font-size: 10.5px !important;
}

/* Self Audit: reduce empty vertical gaps */
.lph-course-form{
    gap: 10px !important;
}

.lph-course-question{
    padding: 9px 0 11px !important;
}

.lph-course-question > label{
    margin-bottom: 9px !important;
    font-size: 13.5px !important;
    line-height: 1.42 !important;
}

.lph-range-labels{
    margin-top: 6px !important;
}

.lph-course-radio-grid{
    gap: 10px !important;
}

.lph-course-radio{
    min-height: 48px !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
}

/* Keep action row visible without taking a huge block of height */
.lph-course-form-actions{
    margin-top: 4px !important;
    padding-top: 10px !important;
    gap: 14px !important;
}

.lph-course-form-actions .lph-native-save-note{
    font-size: 12.5px !important;
    line-height: 1.4 !important;
}

.lph-course-form-actions .lph-button{
    min-width: 150px !important;
    min-height: 42px !important;
    padding: 9px 16px !important;
}

/* Next Steps: compact like the reference screenshot */
.lph-course-next-options{
    gap: 9px !important;
}

.lph-course-next-option{
    min-height: 54px !important;
    padding: 12px 14px !important;
    border-radius: 11px !important;
}

.lph-course-next-option strong{
    font-size: 13.5px !important;
    line-height: 1.4 !important;
}

/* Keep desktop columns aligned at the top */
.lph-app.is-nutrition-workspace .lph-course-left,
.lph-app.is-nutrition-workspace .lph-course-right{
    padding-top: 0 !important;
}

/* Slightly tighter scrollbar gutter so the content does not feel pushed inward */
.lph-app.is-nutrition-workspace .lph-course-left{
    padding-right: 8px !important;
}

.lph-app.is-nutrition-workspace .lph-course-right{
    padding-left: 8px !important;
    padding-right: 4px !important;
}

/* Tablet: video + syllabus + form in one clean flow with minimal dead space */
@media (max-width:1024px){
    .lph-app.is-nutrition-workspace .lph-content{
        padding: 8px 10px 12px !important;
    }

    .lph-course-syllabus{
        margin-top: 10px !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-right{
        margin-top: 12px !important;
    }

    .lph-course-panel{
        padding: 15px !important;
    }
}

@media (max-width:700px){
    .lph-course-panel{
        padding: 13px !important;
    }

    .lph-course-content-head h1{
        font-size: 20px !important;
    }

    .lph-course-question > label{
        font-size: 13px !important;
    }

    .lph-course-form-actions{
        gap: 8px !important;
    }
}


/* =========================================================
   v0.5.0 — reference-matched Nutrition layout
   Goal: same structure as the supplied reference, compact text,
   strict 50/50 split, minimal decorative styling.
   ========================================================= */

/* Exact balanced desktop split */
.lph-app.is-nutrition-workspace .lph-course-shell{
    grid-template-columns: 50% 50% !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
}

/* LEFT: soft grey workspace like the reference */
.lph-app.is-nutrition-workspace .lph-course-left{
    padding: 18px 18px 20px !important;
    background: #eef2f3 !important;
    border-right: 1px solid #dde2e5 !important;
}

/* RIGHT: plain white content area */
.lph-app.is-nutrition-workspace .lph-course-right{
    padding: 18px 20px 22px !important;
    background: #fff !important;
}

/* Video should feel like the reference: simple, rectangular, compact */
.lph-course-video{
    border: 0 !important;
    border-radius: 8px !important;
    background: #171717 !important;
    box-shadow: 0 5px 14px rgba(0,0,0,.08) !important;
}

/* Syllabus card directly below video */
.lph-course-syllabus{
    margin-top: 12px !important;
    padding: 14px 14px 12px !important;
    border: 1px solid #d7dcdf !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.055) !important;
}

.lph-course-syllabus h3{
    margin: 0 0 8px !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
}

/* Reference-like chapter rows: compact, flatter, clear active row */
.lph-course-chapter{
    min-height: 36px !important;
    margin: 0 !important;
    padding: 7px 8px !important;
    grid-template-columns: 42px 14px minmax(0,1fr) !important;
    column-gap: 6px !important;
    border-left: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.lph-course-chapter + .lph-course-chapter{
    margin-top: 2px !important;
}

.lph-course-chapter:hover{
    transform: none !important;
    background: #f2f4f5 !important;
}

.lph-course-chapter.is-reached:not(.is-active){
    background: transparent !important;
}

.lph-course-chapter.is-active{
    background: #dfe3e5 !important;
    box-shadow: none !important;
}

.lph-course-chapter.is-active .lph-course-time,
.lph-course-chapter.is-active .lph-course-label,
.lph-course-chapter.is-active .lph-course-play,
.lph-course-chapter.is-reached .lph-course-time,
.lph-course-chapter.is-reached .lph-course-label{
    color: inherit !important;
}

.lph-course-time{
    font-size: 12px !important;
    color: #27647d !important;
}

.lph-course-play{
    font-size: 10px !important;
    color: #252b30 !important;
}

.lph-course-label{
    font-size: 13px !important;
    line-height: 1.3 !important;
    font-weight: 500 !important;
}

/* RIGHT SIDE: remove oversized floating-card feel */
.lph-course-panel{
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Compact reference typography */
.lph-course-content-head{
    margin-bottom: 12px !important;
}

.lph-course-content-head h1{
    margin: 3px 0 8px !important;
    font-size: clamp(24px,2vw,34px) !important;
    line-height: 1.12 !important;
    letter-spacing: -.025em !important;
    color: #1f2328 !important;
}

.lph-course-content-head p{
    max-width: 760px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #6d747c !important;
}

.lph-step-kicker{
    display: inline-flex !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: #f6edf1 !important;
    color: var(--lph-color-primary) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .07em !important;
}

/* Reference-style info strip */
.lph-course-callout{
    margin: 0 0 12px !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #e9f4f8 !important;
    box-shadow: none !important;
}

.lph-course-callout strong,
.lph-course-callout p{
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

/* Reference-style helper boxes */
.lph-course-help{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
}

.lph-course-help > div{
    padding: 13px 14px !important;
    border: 1px solid #dce1e4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.lph-course-help strong{
    margin-bottom: 5px !important;
    font-size: 16px !important;
    color: var(--lph-color-primary) !important;
}

.lph-course-help span{
    font-size: 12.5px !important;
    line-height: 1.45 !important;
}

/* Self Audit form: compact like the reference */
.lph-course-form{
    gap: 10px !important;
}

.lph-course-question{
    padding: 10px 0 12px !important;
    border-bottom: 1px solid #eceff1 !important;
}

.lph-course-question > label{
    margin-bottom: 10px !important;
    font-size: 13.5px !important;
    line-height: 1.42 !important;
    font-weight: 650 !important;
}

.lph-range-wrap input[type="range"]{
    height: 6px !important;
}

.lph-range-labels{
    margin-top: 6px !important;
    font-size: 12px !important;
}

.lph-range-labels strong{
    font-size: 17px !important;
}

.lph-course-radio-grid{
    gap: 10px !important;
}

.lph-course-radio{
    min-height: 48px !important;
    padding: 10px 12px !important;
    border: 1px solid #dce1e4 !important;
    border-radius: 7px !important;
    background: #fff !important;
    box-shadow: none !important;
}

.lph-course-radio:hover{
    transform: none !important;
    box-shadow: none !important;
    border-color: #cdd4d9 !important;
}

.lph-course-radio:has(input:checked){
    background: #f8f1f4 !important;
    border-color: #d5aeba !important;
    box-shadow: none !important;
}

.lph-course-radio strong{
    font-size: 13px !important;
}

/* Actions: compact, no giant gaps */
.lph-course-form-actions{
    margin: 6px 0 0 !important;
    padding: 10px 0 0 !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 12px !important;
    border-top: 1px solid #eceff1 !important;
}

.lph-course-form-actions .lph-native-save-note{
    font-size: 12px !important;
    line-height: 1.4 !important;
}

.lph-course-form-actions .lph-button{
    min-width: 140px !important;
    min-height: 40px !important;
    padding: 8px 15px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
}

/* Next Steps: simple flat radio cards like the screenshot */
.lph-course-next-options{
    gap: 9px !important;
}

.lph-course-next-option{
    min-height: 52px !important;
    padding: 12px 14px !important;
    border: 1px solid #dce1e4 !important;
    border-radius: 7px !important;
    background: #fafbfc !important;
    box-shadow: none !important;
}

.lph-course-next-option:hover{
    transform: none !important;
    border-color: #cdd4d9 !important;
    box-shadow: none !important;
}

.lph-course-next-option.is-selected,
.lph-course-next-option:has(input:checked){
    background: #f8f1f4 !important;
    border-color: #d5aeba !important;
    box-shadow: none !important;
}

.lph-course-next-option strong{
    font-size: 13px !important;
    line-height: 1.4 !important;
}

/* Reduce scrollbar visual weight */
.lph-app.is-nutrition-workspace .lph-course-left::-webkit-scrollbar,
.lph-app.is-nutrition-workspace .lph-course-right::-webkit-scrollbar{
    width: 4px !important;
}

.lph-app.is-nutrition-workspace .lph-course-left::-webkit-scrollbar-thumb,
.lph-app.is-nutrition-workspace .lph-course-right::-webkit-scrollbar-thumb{
    background: rgba(80,86,92,.26) !important;
}

/* Tablet: same content, stacked to preserve usability */
@media (max-width:1024px){
    .lph-app.is-nutrition-workspace .lph-course-shell{
        display: block !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-left{
        padding: 12px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #dde2e5 !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-right{
        padding: 14px !important;
        margin-top: 0 !important;
    }

    .lph-course-form-actions{
        grid-template-columns: 1fr !important;
    }

    .lph-course-form-actions .lph-button{
        width: 100%;
    }
}

@media (max-width:700px){
    .lph-course-help,
    .lph-course-radio-grid{
        grid-template-columns: 1fr !important;
    }

    .lph-course-content-head h1{
        font-size: 21px !important;
    }
}


/* =========================================================
   v0.5.1 — Nutrition edge-to-edge workspace
   ========================================================= */

/* Remove the outer white/grey gutter around Nutrition. */
.lph-app.is-nutrition-workspace .lph-content{
    padding: 0 !important;
    margin: 0 !important;
}

/* Make the async Nutrition area fill the complete available content row. */
.lph-app.is-nutrition-workspace .lph-async-region{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Nutrition itself touches the available edges. */
.lph-app.is-nutrition-workspace .lph-course-shell{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep useful INTERNAL spacing only. */
.lph-app.is-nutrition-workspace .lph-course-left{
    padding: 14px 16px 18px !important;
}

.lph-app.is-nutrition-workspace .lph-course-right{
    padding: 14px 18px 18px !important;
}

/* Remove any outer panel/container gutter that may still wrap the async region. */
.lph-app.is-nutrition-workspace [data-lph-section-panel="health"]{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Keep the footer flush with the workspace without an extra gap. */
.lph-app.is-nutrition-workspace .lph-footer{
    margin-top: 0 !important;
}

/* Tablet/mobile stays edge-to-edge as well, but keeps compact inner padding. */
@media (max-width:1024px){
    .lph-app.is-nutrition-workspace .lph-content,
    .lph-app.is-nutrition-workspace .lph-async-region,
    .lph-app.is-nutrition-workspace [data-lph-section-panel="health"],
    .lph-app.is-nutrition-workspace .lph-course-shell{
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .lph-app.is-nutrition-workspace .lph-course-left,
    .lph-app.is-nutrition-workspace .lph-course-right{
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}


/* =========================================================
   v0.5.2 — Vimeo edge cleanup + completed chapter styling
   ========================================================= */

/* Remove the visible black rim/gutter around the embedded Vimeo frame.
   Slight overscan hides the player's outer background without affecting
   the usable controls in a noticeable way. */
.lph-course-video{
    overflow: hidden !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.lph-course-video iframe{
    display: block !important;
    width: 101.4% !important;
    height: 101.4% !important;
    margin: -.7% !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: translateZ(0);
}

/* Finished syllabus steps stay softly green.
   Current step remains clear, even if it has already been completed. */
.lph-course-chapter.is-complete-step:not(.is-active){
    background: #eef8f2 !important;
    box-shadow: inset 3px 0 0 rgba(45,151,103,.38) !important;
}

.lph-course-chapter.is-complete-step:not(.is-active) .lph-course-time,
.lph-course-chapter.is-complete-step:not(.is-active) .lph-course-label{
    color: #287d59 !important;
}

.lph-course-chapter.is-active{
    background: #e1e5e7 !important;
    box-shadow: inset 3px 0 0 #287d59 !important;
}

.lph-course-chapter.is-active .lph-course-time{
    color: #246b7d !important;
}

.lph-course-chapter.is-active .lph-course-label,
.lph-course-chapter.is-active .lph-course-play{
    color: #242a30 !important;
}

/* Slightly cleaner chapter card spacing without adding height. */
.lph-course-syllabus{
    border-color: #d9dfe3 !important;
}

.lph-course-chapter{
    transition: background .16s ease, box-shadow .16s ease !important;
}

/* Keep video and syllabus visually aligned. */
.lph-course-video,
.lph-course-syllabus{
    width: 100% !important;
}

/* On mobile/tablet do not overscan as aggressively. */
@media (max-width:1024px){
    .lph-course-video iframe{
        width: 100.8% !important;
        height: 100.8% !important;
        margin: -.4% !important;
    }
}


/* =========================================================
   v0.5.3 — Syllabus card premium spacing polish
   ========================================================= */

.lph-course-syllabus{
    padding: 16px 16px 14px !important;
    border: 1px solid #d6dde1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.05),
        0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.lph-course-syllabus h3{
    margin: 0 0 12px !important;
}

/* Add slight inner breathing room and premium row treatment */
.lph-course-chapter{
    padding: 12px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.02) !important;
}

.lph-course-chapter + .lph-course-chapter{
    margin-top: 6px !important;
}

/* Hover / active / complete states with a softer premium feel */
.lph-course-chapter:hover{
    border-color: #d7dfe3 !important;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.05) !important;
}

.lph-course-chapter.is-active{
    border-color: #cfd7dc !important;
    box-shadow:
        inset 3px 0 0 #287d59,
        0 6px 16px rgba(15, 23, 42, 0.05) !important;
}

.lph-course-chapter.is-complete-step:not(.is-active){
    border-color: #d8e8de !important;
    box-shadow:
        inset 3px 0 0 rgba(45,151,103,.38),
        0 4px 12px rgba(34, 84, 61, 0.035) !important;
}

/* Slightly better text balance inside each row */
.lph-course-time{
    line-height: 1.25 !important;
}

.lph-course-label{
    line-height: 1.3 !important;
}

/* On smaller screens, keep the same feel without overcrowding */
@media (max-width: 700px){
    .lph-course-syllabus{
        padding: 14px 14px 12px !important;
        border-radius: 10px !important;
    }

    .lph-course-chapter{
        padding: 10px 12px !important;
        border-radius: 9px !important;
    }
}


/* =========================================================
   v0.6.0 — LifePlan Premium UI System
   A restrained "native app" visual/motion pass across the
   entire plugin. Keeps the LifePlan burgundy identity.
   ========================================================= */

.lph-app{
    /* Surfaces */
    --lp-bg: #f5f6f8;
    --lp-surface: rgba(255,255,255,.96);
    --lp-surface-solid: #ffffff;
    --lp-surface-soft: #fafbfc;
    --lp-surface-raised: #ffffff;
    --lp-line: rgba(31,41,55,.095);
    --lp-line-strong: rgba(31,41,55,.14);

    /* Brand */
    --lp-brand: var(--lph-color-primary);
    --lp-brand-strong: var(--lph-color-primary-strong);
    --lp-brand-soft: rgba(117,28,57,.075);
    --lp-success: #2c9565;
    --lp-success-soft: rgba(44,149,101,.09);

    /* Native-feeling shadows */
    --lp-shadow-1: 0 1px 2px rgba(15,23,42,.035), 0 5px 16px rgba(15,23,42,.035);
    --lp-shadow-2: 0 2px 5px rgba(15,23,42,.045), 0 12px 30px rgba(15,23,42,.06);
    --lp-shadow-3: 0 5px 14px rgba(15,23,42,.07), 0 22px 56px rgba(15,23,42,.09);
    --lp-shadow-float: 0 10px 30px rgba(15,23,42,.13), 0 2px 8px rgba(15,23,42,.07);

    /* Consistent radii */
    --lp-r-sm: 10px;
    --lp-r-md: 14px;
    --lp-r-lg: 18px;
    --lp-r-xl: 22px;

    /* Motion */
    --lp-ease: cubic-bezier(.22,.72,.24,1);
    --lp-ease-spring: cubic-bezier(.2,.9,.24,1.12);
    --lp-fast: 150ms;
    --lp-normal: 260ms;
    --lp-slow: 380ms;

    background:
        radial-gradient(circle at 78% -10%, rgba(117,28,57,.035), transparent 27%),
        linear-gradient(180deg,#f8f9fa 0%,var(--lp-bg) 100%) !important;
}

/* ---------- typography / rendering ---------- */
.lph-app,
.lph-app button,
.lph-app input,
.lph-app select,
.lph-app textarea{
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.lph-app h1,
.lph-app h2,
.lph-app h3{
    text-wrap: balance;
}

.lph-app p{
    text-wrap: pretty;
}

/* ---------- global focus ---------- */
.lph-app :focus-visible{
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(117,28,57,.14) !important;
}

/* ---------- sidebar: quieter, richer, smoother ---------- */
.lph-sidebar{
    background: rgba(255,255,255,.94) !important;
    border-right: 1px solid var(--lp-line) !important;
    box-shadow: 8px 0 30px rgba(15,23,42,.025);
    backdrop-filter: saturate(135%) blur(18px);
    -webkit-backdrop-filter: saturate(135%) blur(18px);
    scrollbar-width: thin;
    scrollbar-color: rgba(80,88,98,.16) transparent;
}

.lph-brand{
    transition: padding var(--lp-slow) var(--lp-ease),
                gap var(--lp-slow) var(--lp-ease);
}

.lph-brand-mark{
    border-color: rgba(117,28,57,.16) !important;
    background: linear-gradient(145deg,#fff,var(--lp-brand-soft)) !important;
    box-shadow: var(--lp-shadow-1);
}

.lph-brand-text,
.lph-nav-label{
    transition:
        opacity 180ms var(--lp-ease),
        transform var(--lp-normal) var(--lp-ease),
        max-width var(--lp-slow) var(--lp-ease);
}

.lph-sidebar-nav{
    gap: 6px !important;
}

.lph-sidebar-nav .lph-nav-item{
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    transition:
        background var(--lp-normal) var(--lp-ease),
        color var(--lp-normal) var(--lp-ease),
        border-color var(--lp-normal) var(--lp-ease),
        box-shadow var(--lp-normal) var(--lp-ease),
        transform var(--lp-fast) var(--lp-ease) !important;
}

.lph-sidebar-nav .lph-nav-item:hover:not(.is-active){
    transform: translateX(2px);
    background: rgba(255,255,255,.94) !important;
    border-color: var(--lp-line) !important;
    box-shadow: var(--lp-shadow-1);
}

.lph-sidebar-nav .lph-nav-item.is-active{
    background: linear-gradient(135deg,var(--lp-brand) 0%,var(--lp-brand-strong) 100%) !important;
    border-color: rgba(117,28,57,.2) !important;
    box-shadow: 0 12px 28px rgba(117,28,57,.16) !important;
}

.lph-sidebar-nav .lph-nav-item:active{
    transform: scale(.985);
}

.lph-nav-icon svg{
    transition: transform var(--lp-normal) var(--lp-ease);
}

.lph-sidebar-nav .lph-nav-item:hover .lph-nav-icon svg{
    transform: scale(1.045);
}

/* premium floating sidebar toggle */
.lph-sidebar-toggle,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle{
    border: 1px solid rgba(255,255,255,.09) !important;
    background: rgba(25,31,38,.94) !important;
    box-shadow: var(--lp-shadow-float) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        left var(--lp-slow) var(--lp-ease),
        transform var(--lp-fast) var(--lp-ease),
        background var(--lp-normal) ease,
        box-shadow var(--lp-normal) ease !important;
}

.lph-sidebar-toggle:hover{
    transform: translateY(-1px) scale(1.035) !important;
    background: #11161c !important;
}

.lph-sidebar-toggle:active{
    transform: scale(.94) !important;
}

/* Smooth the entire sidebar column change */
.lph-app{
    transition: grid-template-columns var(--lp-slow) var(--lp-ease);
}

.lph-sidebar{
    transition:
        width var(--lp-slow) var(--lp-ease),
        padding var(--lp-slow) var(--lp-ease);
}

.lph-app.is-sidebar-collapsed .lph-brand-text,
.lph-app.is-sidebar-collapsed .lph-nav-label{
    opacity: 0 !important;
    transform: translateX(-7px);
}

/* ---------- top area / progress ---------- */
.lph-top{
    background: rgba(255,255,255,.91) !important;
    border-bottom: 1px solid var(--lp-line) !important;
    backdrop-filter: saturate(150%) blur(18px);
    -webkit-backdrop-filter: saturate(150%) blur(18px);
}

.lph-progress-fill{
    background: linear-gradient(90deg,var(--lp-brand),#9d4563) !important;
    box-shadow: 0 1px 5px rgba(117,28,57,.18);
    transition: width 520ms var(--lp-ease) !important;
}

.lph-progress-track{
    overflow: hidden;
    border-radius: 999px;
    background: #e9ebee !important;
}

/* ---------- top tabs ---------- */
.lph-tabs-shell{
    background: transparent !important;
}

.lph-tab{
    position: relative;
    border-radius: 10px 10px 0 0 !important;
    transition:
        color var(--lp-normal) var(--lp-ease),
        background var(--lp-normal) var(--lp-ease),
        transform var(--lp-fast) var(--lp-ease) !important;
}

.lph-tab:hover:not(.is-active){
    background: rgba(117,28,57,.035) !important;
    transform: translateY(-1px);
}

.lph-tab:active{
    transform: scale(.98);
}

.lph-tab::after{
    transition:
        opacity var(--lp-normal) var(--lp-ease),
        transform var(--lp-normal) var(--lp-ease),
        width var(--lp-normal) var(--lp-ease) !important;
    transform-origin: center;
}

.lph-tab:not(.is-active)::after{
    transform: scaleX(.35);
    opacity: 0;
}

.lph-tab.is-active::after{
    transform: scaleX(1);
    opacity: 1;
}

.lph-tab-check{
    box-shadow: 0 4px 12px rgba(47,143,97,.18);
}

/* ---------- buttons ---------- */
.lph-button{
    border-radius: 11px !important;
    box-shadow: 0 7px 18px rgba(117,28,57,.12) !important;
    transition:
        transform var(--lp-fast) var(--lp-ease-spring),
        box-shadow var(--lp-normal) var(--lp-ease),
        background var(--lp-normal) var(--lp-ease),
        opacity var(--lp-normal) ease !important;
}

.lph-button:hover:not(:disabled){
    transform: translateY(-1px) scale(1.008);
    box-shadow: 0 11px 26px rgba(117,28,57,.17) !important;
}

.lph-button:active:not(:disabled){
    transform: scale(.975);
    box-shadow: 0 4px 10px rgba(117,28,57,.1) !important;
}

.lph-button-secondary{
    box-shadow: var(--lp-shadow-1) !important;
}

.lph-button:disabled{
    filter: saturate(.55);
    cursor: default;
}

/* ---------- footer ---------- */
.lph-footer-nav{
    background: rgba(255,255,255,.9) !important;
    border-top: 1px solid var(--lp-line) !important;
    box-shadow: 0 -8px 30px rgba(15,23,42,.045) !important;
    backdrop-filter: saturate(145%) blur(18px);
    -webkit-backdrop-filter: saturate(145%) blur(18px);
}

/* ---------- universal cards ---------- */
.lph-card,
.lph-loaded-card,
.lph-native-form-view,
.lph-intro-video-card,
.lph-intro-copy-card-v2,
.lph-native-section,
.lph-course-syllabus,
.lph-course-panel,
.lph-nutrition-card,
.lph-next-step-card{
    transition:
        border-color var(--lp-normal) var(--lp-ease),
        box-shadow var(--lp-normal) var(--lp-ease),
        transform var(--lp-normal) var(--lp-ease);
}

/* We only lift standalone cards, not the entire Nutrition split */
.lph-card:hover,
.lph-native-section:hover,
.lph-intro-copy-card-v2:hover{
    transform: translateY(-1px);
    box-shadow: var(--lp-shadow-2) !important;
}

/* ---------- inputs ---------- */
.lph-native-field input[type="text"],
.lph-native-field input[type="number"],
.lph-native-field input[type="email"],
.lph-native-field input[type="tel"],
.lph-native-field input[type="url"],
.lph-native-field select,
.lph-native-field textarea{
    transition:
        border-color var(--lp-normal) ease,
        box-shadow var(--lp-normal) ease,
        background var(--lp-normal) ease,
        transform var(--lp-fast) var(--lp-ease);
}

.lph-native-field input:hover,
.lph-native-field select:hover,
.lph-native-field textarea:hover{
    border-color: rgba(117,28,57,.18) !important;
}

.lph-native-field input:focus,
.lph-native-field select:focus,
.lph-native-field textarea:focus{
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(117,28,57,.07), 0 8px 18px rgba(15,23,42,.045) !important;
}

/* Choices feel tactile without being flashy */
.lph-choice,
.lph-course-radio,
.lph-course-next-option,
.lph-big-choice span,
.lph-next-step-option{
    transition:
        transform var(--lp-fast) var(--lp-ease-spring),
        border-color var(--lp-normal) var(--lp-ease),
        background var(--lp-normal) var(--lp-ease),
        box-shadow var(--lp-normal) var(--lp-ease) !important;
}

.lph-choice:hover,
.lph-course-radio:hover,
.lph-course-next-option:hover,
.lph-next-step-option:hover{
    transform: translateY(-1px);
}

.lph-choice:active,
.lph-course-radio:active,
.lph-course-next-option:active,
.lph-next-step-option:active{
    transform: scale(.99);
}

/* ---------- conditional fields / native form sections ---------- */
.lph-native-section{
    animation: lphSoftReveal 320ms var(--lp-ease) both;
}

@keyframes lphSoftReveal{
    from{opacity:0; transform:translateY(5px);}
    to{opacity:1; transform:translateY(0);}
}

/* ---------- async content transitions ---------- */
.lph-async-region{
    transform: translateZ(0);
}

.lph-region-enter > *{
    animation: lphRegionEnter 360ms var(--lp-ease) both;
}

@keyframes lphRegionEnter{
    0%{opacity:0; transform:translateY(7px) scale(.997);}
    100%{opacity:1; transform:translateY(0) scale(1);}
}

/* ---------- skeleton loading ---------- */
.lph-skeleton-card{
    border: 1px solid var(--lp-line) !important;
    box-shadow: var(--lp-shadow-1) !important;
    overflow: hidden;
}

.lph-skeleton{
    position: relative;
    overflow: hidden;
    background: #eceef1 !important;
}

.lph-skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    transform:translateX(-110%);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.76),transparent);
    animation:lphShimmer 1.25s ease-in-out infinite;
}

@keyframes lphShimmer{
    to{transform:translateX(110%);}
}

/* ---------- completion animation ---------- */
.lph-completion-pop{
    animation:lphCompletionPop 520ms var(--lp-ease-spring) both;
}

@keyframes lphCompletionPop{
    0%{transform:scale(.72); opacity:.2;}
    55%{transform:scale(1.16); opacity:1;}
    100%{transform:scale(1); opacity:1;}
}

/* ---------- modals ---------- */
.lph-modal-overlay{
    animation:lphOverlayIn 210ms ease both;
    backdrop-filter: blur(8px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(115%) !important;
}

.lph-decision-modal{
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 28px 80px rgba(15,23,42,.24) !important;
    animation:lphModalIn 330ms var(--lp-ease-spring) both !important;
}

@keyframes lphOverlayIn{
    from{opacity:0;}
    to{opacity:1;}
}

@keyframes lphModalIn{
    from{opacity:0; transform:translateY(10px) scale(.975);}
    to{opacity:1; transform:translateY(0) scale(1);}
}

/* ---------- Introduction ---------- */
.lph-intro-compact-head{
    border: 1px solid rgba(117,28,57,.06) !important;
    box-shadow: var(--lp-shadow-2) !important;
}

.lph-intro-video-card,
.lph-intro-copy-card-v2{
    border: 1px solid var(--lp-line) !important;
    box-shadow: var(--lp-shadow-2) !important;
}

/* ---------- Background form ---------- */
.lph-native-form-view{
    background: rgba(248,249,250,.96) !important;
    border: 1px solid var(--lp-line) !important;
    box-shadow: var(--lp-shadow-2) !important;
}

.lph-native-section{
    border: 1px solid rgba(31,41,55,.07) !important;
    box-shadow: var(--lp-shadow-1) !important;
}

/* ---------- Nutrition, preserve the user's reference-driven 50/50 layout ---------- */
.lph-app.is-nutrition-workspace .lph-course-left,
.lph-app.is-nutrition-workspace .lph-course-right{
    scroll-behavior:smooth;
}

.lph-course-video{
    box-shadow: var(--lp-shadow-2) !important;
}

.lph-course-syllabus{
    box-shadow: var(--lp-shadow-2) !important;
}

.lph-course-chapter{
    transition:
        background var(--lp-normal) var(--lp-ease),
        border-color var(--lp-normal) var(--lp-ease),
        box-shadow var(--lp-normal) var(--lp-ease),
        transform var(--lp-fast) var(--lp-ease) !important;
}

.lph-course-chapter:hover{
    transform:translateX(1px);
}

.lph-course-chapter.is-active{
    box-shadow:
        inset 3px 0 0 #287d59,
        0 5px 14px rgba(15,23,42,.045) !important;
}

/* ---------- global scrollbars ---------- */
.lph-sidebar,
.lph-content,
.lph-course-left,
.lph-course-right{
    scrollbar-width:thin;
    scrollbar-color:rgba(67,75,84,.22) transparent;
}

.lph-sidebar::-webkit-scrollbar,
.lph-content::-webkit-scrollbar,
.lph-course-left::-webkit-scrollbar,
.lph-course-right::-webkit-scrollbar{
    width:5px;
    height:5px;
}

.lph-sidebar::-webkit-scrollbar-thumb,
.lph-content::-webkit-scrollbar-thumb,
.lph-course-left::-webkit-scrollbar-thumb,
.lph-course-right::-webkit-scrollbar-thumb{
    background:rgba(67,75,84,.22);
    border-radius:999px;
}

.lph-sidebar::-webkit-scrollbar-thumb:hover,
.lph-content::-webkit-scrollbar-thumb:hover,
.lph-course-left::-webkit-scrollbar-thumb:hover,
.lph-course-right::-webkit-scrollbar-thumb:hover{
    background:rgba(67,75,84,.36);
}

/* ---------- desktop polish ---------- */
@media (min-width:1025px){
    .lph-content{
        background:
            radial-gradient(circle at 86% 12%,rgba(117,28,57,.028),transparent 26%),
            var(--lp-bg);
    }

    .lph-footer-nav .lph-button{
        min-width:126px;
    }
}

/* ---------- tablet/mobile ---------- */
@media (max-width:1024px){
    .lph-top,
    .lph-footer-nav{
        backdrop-filter:blur(14px);
        -webkit-backdrop-filter:blur(14px);
    }

    .lph-card:hover,
    .lph-native-section:hover,
    .lph-intro-copy-card-v2:hover{
        transform:none;
    }
}

/* ---------- respect OS reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce){
    .lph-app *,
    .lph-app *::before,
    .lph-app *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.001ms !important;
    }
}


/* =========================================================
   v0.6.1 — Full sidebar control + richer native motion/depth
   ========================================================= */

/*
 * Keep the sidebar collapse/expand control FULLY visible.
 * It now sits just inside the sidebar edge instead of being half clipped.
 */
.lph-sidebar-toggle,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle{
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    top: 72px !important;
    border-radius: 13px !important;

    /* Full button stays inside the visible sidebar */
    left: max(10px, calc(var(--lph-sidebar-width) - 50px)) !important;

    background:
        linear-gradient(145deg, rgba(31,38,46,.98), rgba(18,23,29,.98)) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.10) !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.09) inset,
        0 8px 20px rgba(15,23,42,.18),
        0 20px 46px rgba(15,23,42,.13) !important;

    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);

    transition:
        left 430ms cubic-bezier(.22,.82,.22,1),
        transform 220ms cubic-bezier(.2,.9,.22,1.12),
        box-shadow 260ms ease,
        background 260ms ease,
        border-color 260ms ease !important;
}

.lph-app.is-sidebar-collapsed .lph-sidebar-toggle{
    left: max(10px, calc(var(--lph-sidebar-collapsed-width) - 50px)) !important;
}

.lph-sidebar-toggle:hover,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle:hover{
    transform: translateY(-2px) scale(1.035) !important;
    background:
        linear-gradient(145deg, #242b33, #13181e) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.12) inset,
        0 10px 24px rgba(15,23,42,.20),
        0 24px 54px rgba(15,23,42,.16) !important;
}

.lph-sidebar-toggle:active,
.lph-app.is-sidebar-collapsed .lph-sidebar-toggle:active{
    transform: translateY(0) scale(.94) !important;
}

.lph-sidebar-toggle svg{
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.8 !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.18));
}

/* Mobile/tablet safety: never let the control clip off-screen */
@media (max-width:760px){
    .lph-sidebar-toggle,
    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle{
        left: 10px !important;
        top: 68px !important;
    }
}

/* ---------------------------------------------------------
   More refined "native" motion
   --------------------------------------------------------- */

.lph-app{
    --lp-ease-premium: cubic-bezier(.18,.78,.22,1);
    --lp-ease-premium-spring: cubic-bezier(.16,1,.3,1);
}

/* Sidebar/content resize feels softer and less mechanical */
.lph-app,
.lph-sidebar,
.lph-main,
.lph-top,
.lph-content,
.lph-footer-nav{
    transition-timing-function: var(--lp-ease-premium) !important;
}

/* Top tabs: gentle lift + softer active motion */
.lph-tab{
    transition:
        color 250ms var(--lp-ease-premium),
        background 250ms var(--lp-ease-premium),
        transform 200ms var(--lp-ease-premium-spring),
        opacity 200ms ease !important;
}

.lph-tab:hover:not(.is-active){
    transform: translateY(-1.5px) !important;
}

.lph-tab.is-active{
    text-shadow: 0 .25px 0 currentColor;
}

/* Richer, more realistic card depth */
.lph-intro-compact-head,
.lph-intro-video-card,
.lph-intro-copy-card-v2,
.lph-native-form-view,
.lph-native-section,
.lph-course-video,
.lph-course-syllabus,
.lph-decision-modal{
    box-shadow:
        0 1px 2px rgba(15,23,42,.035),
        0 5px 16px rgba(15,23,42,.045),
        0 18px 42px rgba(15,23,42,.055) !important;
}

/* A tiny edge highlight makes white surfaces feel more physical */
.lph-intro-compact-head,
.lph-intro-video-card,
.lph-intro-copy-card-v2,
.lph-native-form-view,
.lph-native-section,
.lph-course-syllabus{
    border-color: rgba(255,255,255,.82) !important;
    outline: 1px solid rgba(31,41,55,.07);
    outline-offset: -1px;
}

/* Buttons: more iPhone-like press and release */
.lph-button{
    transition:
        transform 190ms var(--lp-ease-premium-spring),
        box-shadow 260ms var(--lp-ease-premium),
        background 260ms var(--lp-ease-premium),
        filter 220ms ease,
        opacity 220ms ease !important;
}

.lph-button:hover:not(:disabled){
    transform: translateY(-1.5px) scale(1.012) !important;
}

.lph-button:active:not(:disabled){
    transform: translateY(0) scale(.965) !important;
    filter: brightness(.98);
}

/* Form choices: premium tactile response */
.lph-choice,
.lph-course-radio,
.lph-course-next-option,
.lph-next-step-option{
    transition:
        transform 190ms var(--lp-ease-premium-spring),
        border-color 240ms var(--lp-ease-premium),
        background 240ms var(--lp-ease-premium),
        box-shadow 240ms var(--lp-ease-premium) !important;
}

.lph-choice:hover,
.lph-course-radio:hover,
.lph-course-next-option:hover,
.lph-next-step-option:hover{
    transform: translateY(-1.5px) !important;
    box-shadow:
        0 2px 6px rgba(15,23,42,.035),
        0 9px 22px rgba(15,23,42,.055) !important;
}

.lph-choice:active,
.lph-course-radio:active,
.lph-course-next-option:active,
.lph-next-step-option:active{
    transform: scale(.985) !important;
}

/* Smoother section switching: opacity + soft depth, no flashy movement */
.lph-region-enter > *{
    animation: lphPremiumRegionEnter 420ms var(--lp-ease-premium) both !important;
}

@keyframes lphPremiumRegionEnter{
    0%{
        opacity:0;
        transform:translateY(8px) scale(.994);
        filter:blur(1.5px);
    }
    58%{
        opacity:1;
        filter:blur(0);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

/* More elegant modal movement */
.lph-decision-modal{
    animation: lphPremiumModalIn 380ms var(--lp-ease-premium-spring) both !important;
}

@keyframes lphPremiumModalIn{
    0%{
        opacity:0;
        transform:translateY(14px) scale(.965);
    }
    65%{
        opacity:1;
        transform:translateY(-1px) scale(1.006);
    }
    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* Progress feels fluid instead of linear */
.lph-progress-fill{
    transition: width 620ms var(--lp-ease-premium) !important;
}

/* Syllabus/chapter movement: subtle only */
.lph-course-chapter:hover{
    transform: translateX(2px) !important;
}

.lph-course-chapter:active{
    transform: translateX(1px) scale(.995) !important;
}

/* Smooth scrollbar thumb interaction */
.lph-sidebar::-webkit-scrollbar-thumb,
.lph-content::-webkit-scrollbar-thumb,
.lph-course-left::-webkit-scrollbar-thumb,
.lph-course-right::-webkit-scrollbar-thumb{
    transition: background 180ms ease;
}

/* Reduced motion remains authoritative */
@media (prefers-reduced-motion: reduce){
    .lph-sidebar-toggle,
    .lph-app.is-sidebar-collapsed .lph-sidebar-toggle{
        transition-duration:.001ms !important;
    }
}



/* =========================================================
   v1.5.3 — Shared Health course workspace
   Nutrition keeps its established course shell; Exercise, Medical Team and
   Social & Cognitive now share one outer workspace definition.
   ========================================================= */

.lph-app:is(.is-exercise-workspace,.is-medical-team-workspace,.is-social-workspace) .lph-content{
    padding:0!important;
    margin:0!important;
    min-height:0!important;
    overflow:hidden!important;
}
.lph-app:is(.is-exercise-workspace,.is-medical-team-workspace,.is-social-workspace) .lph-async-region,
.lph-app:is(.is-exercise-workspace,.is-medical-team-workspace,.is-social-workspace) [data-lph-section-panel="health"]{
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
}
.lph-app:is(.is-exercise-workspace,.is-medical-team-workspace,.is-social-workspace) .lph-course-shell{
    display:grid!important;
    grid-template-columns:50% 50%!important;
    gap:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    background:var(--lp-card-bg,#fff)!important;
}
.lph-app:is(.is-exercise-workspace,.is-medical-team-workspace,.is-social-workspace) .lph-course-left{
    height:100%!important;
    min-height:0!important;
    padding:18px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:var(--lp-surface-subtle,#f7f9fa)!important;
    border-right:1px solid var(--lp-ui-border,#dde2e5)!important;
    scrollbar-width:thin;
}
.lph-app:is(.is-exercise-workspace,.is-medical-team-workspace,.is-social-workspace) .lph-course-right{
    height:100%!important;
    min-height:0!important;
    padding:18px 20px 22px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:var(--lp-card-bg,#fff)!important;
    scrollbar-width:thin;
}

/* Common course visual language in Core mode. */
.lph-core-health-module .lph-course-content-head h1{
    color:var(--lp-text,#242a2f)!important;
    font-family:var(--lp-font-family,inherit)!important;
    font-weight:var(--lp-title-weight,500)!important;
}
.lph-core-health-module .lph-course-content-head p,
.lph-core-health-module .lph-course-help{
    color:var(--lp-muted,#6f7881)!important;
    font-family:var(--lp-font-family,inherit)!important;
    font-weight:var(--lp-body-weight,400)!important;
}
.lph-core-health-module .lph-course-question>label,
.lph-core-health-module .lph-course-label{
    color:var(--lp-text,#242a2f)!important;
    font-family:var(--lp-font-family,inherit)!important;
    font-weight:var(--lp-label-weight,600)!important;
}
.lph-core-health-module .lph-course-syllabus.lp-ui-card,
.lph-core-health-module .lph-medical-pcp-details.lp-ui-card{
    border-color:var(--lp-ui-border,#e3e8eb)!important;
    border-radius:var(--lp-card-radius,14px)!important;
    background:var(--lp-card-bg,#fff)!important;
    box-shadow:var(--lp-shadow-card,0 8px 24px rgba(15,23,42,.045))!important;
}
.lph-core-health-module .lph-course-radio,
.lph-core-health-module .lph-course-choice,
.lph-core-health-module .lph-course-next-option,
.lph-core-health-module .lph-exercise-radio{
    border-color:var(--lp-ui-border,#dde3e7)!important;
    background:var(--lp-surface-subtle,#fbfcfd)!important;
    border-radius:var(--lp-field-radius,10px)!important;
}
.lph-core-health-module .lph-course-radio:hover,
.lph-core-health-module .lph-course-choice:hover,
.lph-core-health-module .lph-course-next-option:hover,
.lph-core-health-module .lph-exercise-radio:hover{
    border-color:color-mix(in srgb,var(--lp-primary,#7b1d3d) 18%,var(--lp-ui-border,#dde3e7))!important;
    background:#fff!important;
}
.lph-core-health-module .lph-course-radio:has(input:checked),
.lph-core-health-module .lph-course-choice:has(input:checked),
.lph-core-health-module .lph-course-next-option:has(input:checked),
.lph-core-health-module .lph-exercise-radio:has(input:checked){
    border-color:color-mix(in srgb,var(--lp-primary,#7b1d3d) 30%,#d9dfe3)!important;
    background:color-mix(in srgb,var(--lp-primary,#7b1d3d) 5%,#fff)!important;
}
.lph-core-health-module .lph-medical-details-grid .lp-ui-field{
    display:grid;
    gap:7px;
}
.lph-core-health-module .lph-medical-details-grid .lp-ui-control{
    min-height:var(--lp-field-height,44px)!important;
    border-radius:var(--lp-field-radius,10px)!important;
}

/* The three modules retain the same existing tablet/mobile behavior, but the
   shared colors/borders remain Core-driven. */
@media(max-width:1024px){
    .lph-app:is(.is-exercise-workspace,.is-medical-team-workspace,.is-social-workspace) .lph-course-left{
        background:var(--lp-surface-subtle,#f7f9fa)!important;
        border-right:0!important;
        border-bottom:1px solid var(--lp-ui-border,#dde2e5)!important;
    }
}


/* =========================================================
   v0.7.0 — Exercise module, using global Health course design
   ========================================================= */

/* Exercise intentionally reuses the same course shell/classes as Nutrition. */

.lph-exercise-choice-list{
    display:grid;
    gap:9px;
}

.lph-exercise-radio{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px;
    align-items:center;
    min-height:52px;
    padding:12px 14px;
    border:1px solid #dce1e4;
    border-radius:9px;
    background:#fafbfc;
    cursor:pointer;
    transition:
        transform 190ms var(--lp-ease-premium-spring),
        border-color 240ms var(--lp-ease-premium),
        background 240ms var(--lp-ease-premium),
        box-shadow 240ms var(--lp-ease-premium);
}

.lph-exercise-radio input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.lph-exercise-radio:hover{
    transform:translateY(-1px);
    border-color:#ccd5da;
    box-shadow:0 7px 18px rgba(15,23,42,.045);
}

.lph-exercise-radio:has(input:checked){
    background:#f8f1f4;
    border-color:#d4adba;
}

.lph-exercise-radio input:checked + .lph-radio-dot{
    box-shadow:inset 0 0 0 5px var(--lph-color-primary);
}

.lph-exercise-radio strong{
    color:#283039;
    font-size:13.5px;
    line-height:1.45;
    font-weight:560;
}

.lph-checkbox-dot{
    display:grid;
    place-items:center;
    width:19px;
    height:19px;
    border:1px solid #cbd4da;
    border-radius:4px;
    background:#fff;
    color:transparent;
    font-size:12px;
    font-weight:800;
    transition:
        background 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        transform 180ms var(--lp-ease-premium-spring);
}

.lph-course-next-option input[type="checkbox"]:checked + .lph-checkbox-dot{
    border-color:var(--lph-color-primary);
    background:var(--lph-color-primary);
    color:#fff;
    transform:scale(1.04);
}

.lph-exercise-next-options .lph-course-next-option{
    grid-template-columns:auto 1fr !important;
}

/* Exercise timestamp completion inherits the same green syllabus language. */
.lph-exercise-course .lph-course-chapter.is-complete-step:not(.is-active){
    background:#eef8f2 !important;
}

.lph-exercise-course .lph-course-chapter.is-active{
    background:#dfe3e5 !important;
}

/* Tablet/mobile uses the same standard Health responsive stack. */
@media(max-width:1024px){
    .lph-app.is-exercise-workspace .lph-content{
        overflow-y:auto !important;
    }

    .lph-app.is-exercise-workspace .lph-async-region,
    .lph-app.is-exercise-workspace [data-lph-section-panel="health"],
    .lph-app.is-exercise-workspace .lph-course-shell{
        height:auto !important;
        overflow:visible !important;
    }

    .lph-app.is-exercise-workspace .lph-course-shell{
        display:block !important;
    }

    .lph-app.is-exercise-workspace .lph-course-left,
    .lph-app.is-exercise-workspace .lph-course-right{
        height:auto !important;
        overflow:visible !important;
    }

    .lph-app.is-exercise-workspace .lph-course-left{
        padding:12px !important;
        border-right:0 !important;
        border-bottom:1px solid #dde2e5 !important;
    }

    .lph-app.is-exercise-workspace .lph-course-right{
        padding:14px !important;
    }
}


/* =========================================================
   v0.8.0 — Medical Team module
   ========================================================= */
.lph-medical-pcp-details{
    display:none;
    margin-top:4px;
    padding:14px;
    border:1px solid #dce1e4;
    border-radius:11px;
    background:#fbfcfd;
    box-shadow:0 7px 18px rgba(15,23,42,.035);
    animation:lphSoftReveal 280ms var(--lp-ease) both;
}
.lph-medical-pcp-details.is-open{display:block}
.lph-medical-details-head{
    display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:12px
}
.lph-medical-details-head strong,
.lph-medical-details-head span{display:block}
.lph-medical-details-head strong{font-size:14px;color:#252b31}
.lph-medical-details-head div>span{margin-top:3px;color:#737b84;font-size:12px}
.lph-medical-details-status{
    color:#2d8f61!important;font-size:12px!important;font-weight:700;white-space:nowrap
}
.lph-medical-details-grid{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px
}
.lph-medical-details-grid label{display:grid;gap:5px}
.lph-medical-details-grid label>span{font-size:11.5px;font-weight:650;color:#555e67}
.lph-medical-details-grid input{
    width:100%;min-height:40px;padding:9px 11px;border:1px solid #d8dee3;border-radius:8px;background:#fff;font:inherit;color:#252b31;transition:border-color 200ms ease,box-shadow 200ms ease,transform 180ms var(--lp-ease-premium-spring)
}
.lph-medical-details-grid input:focus{
    border-color:rgba(117,28,57,.28);box-shadow:0 0 0 4px rgba(117,28,57,.07);transform:translateY(-1px);outline:0
}
.lph-medical-next-options .lph-course-next-option{grid-template-columns:auto 1fr!important}

@media(max-width:1024px){
    .lph-app.is-medical-team-workspace .lph-content{overflow-y:auto!important}
    .lph-app.is-medical-team-workspace .lph-async-region,
    .lph-app.is-medical-team-workspace [data-lph-section-panel="health"],
    .lph-app.is-medical-team-workspace .lph-course-shell{height:auto!important;overflow:visible!important}
    .lph-app.is-medical-team-workspace .lph-course-shell{display:block!important}
    .lph-app.is-medical-team-workspace .lph-course-left,
    .lph-app.is-medical-team-workspace .lph-course-right{height:auto!important;overflow:visible!important}
    .lph-app.is-medical-team-workspace .lph-course-left{padding:12px!important;border-right:0!important;border-bottom:1px solid #dde2e5!important}
    .lph-app.is-medical-team-workspace .lph-course-right{padding:14px!important}
}
@media(max-width:700px){
    .lph-medical-details-grid{grid-template-columns:1fr}
    .lph-medical-details-head{flex-direction:column}
}


/* =========================================================
   v0.8.2 — Single-transition tab loading
   ========================================================= */

/* Keep the current panel stable while the next tab is fetching. */
.lph-async-region{
    position:relative;
}

.lph-soft-loading-overlay{
    position:absolute;
    inset:0;
    z-index:60;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:18px;
    background:rgba(248,249,250,.18);
    backdrop-filter:blur(.6px);
    -webkit-backdrop-filter:blur(.6px);
    animation:lphSoftLoaderFade 150ms ease both;
    pointer-events:auto;
}

.lph-soft-loading-pill{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:54px;
    height:28px;
    padding:0 11px;
    border:1px solid rgba(31,41,55,.09);
    border-radius:999px;
    background:rgba(255,255,255,.92);
    box-shadow:
        0 2px 6px rgba(15,23,42,.05),
        0 10px 26px rgba(15,23,42,.07);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.lph-soft-loading-pill span{
    width:5px;
    height:5px;
    border-radius:50%;
    background:var(--lph-color-primary);
    opacity:.35;
    animation:lphSoftLoaderDot 900ms ease-in-out infinite;
}

.lph-soft-loading-pill span:nth-child(2){animation-delay:120ms}
.lph-soft-loading-pill span:nth-child(3){animation-delay:240ms}

@keyframes lphSoftLoaderFade{
    from{opacity:0}
    to{opacity:1}
}

@keyframes lphSoftLoaderDot{
    0%,100%{transform:translateY(0);opacity:.28}
    50%{transform:translateY(-2px);opacity:.9}
}

/* Final content still gets one premium enter animation only. */
.lph-region-enter > *{
    animation:lphPremiumRegionEnter 320ms var(--lp-ease-premium) both !important;
}

@media(prefers-reduced-motion:reduce){
    .lph-soft-loading-overlay,
    .lph-soft-loading-pill span{
        animation-duration:.001ms!important;
    }
}


/* =========================================================
   v0.8.4 — Stable page, video-only loading
   ========================================================= */

/*
 * Course pages should not look like they refresh when Vimeo starts.
 * The full 50/50 layout stays completely still; only the video surface
 * gets a tiny loading treatment until the iframe is ready.
 */
.lph-course-video,
.lph-video-frame{
    position:relative;
    contain:paint;
}

/* Fixed visual layer inside the already-sized video box. */
.lph-course-video::after,
.lph-video-frame::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    opacity:0;
    background:
        linear-gradient(
            110deg,
            rgba(247,248,249,.96) 8%,
            rgba(255,255,255,.99) 18%,
            rgba(247,248,249,.96) 33%
        );
    background-size:220% 100%;
    transition:opacity 160ms ease;
}

.lph-course-video.is-video-loading::after,
.lph-video-frame.is-video-loading::after{
    opacity:1;
    animation:lphVideoSurfaceShimmer 1.05s linear infinite;
}

@keyframes lphVideoSurfaceShimmer{
    to{background-position-x:-220%}
}

/* Only Vimeo fades in; the syllabus, form, header and footer do not move. */
.lph-course-video iframe,
.lph-video-frame iframe{
    opacity:1;
    transition:opacity 220ms cubic-bezier(.22,.72,.24,1);
}

.lph-course-video iframe.lph-video-booting,
.lph-video-frame iframe.lph-video-booting{
    opacity:0;
}

.lph-course-video iframe.lph-video-ready,
.lph-video-frame iframe.lph-video-ready{
    opacity:1;
}

/* Course shells must never inherit the full-region refresh animation. */
.lph-app.is-nutrition-workspace .lph-async-region.lph-region-enter > *,
.lph-app.is-exercise-workspace .lph-async-region.lph-region-enter > *,
.lph-app.is-medical-team-workspace .lph-async-region.lph-region-enter > *{
    animation:none !important;
    filter:none !important;
    transform:none !important;
}

/* Preserve layout dimensions while Vimeo/HLS makes its own network requests. */
.lph-course-video{
    aspect-ratio:16/9;
    min-height:0;
}

/* No grey wash over the whole page while a course tab request is fast. */
.lph-app.is-nutrition-workspace .lph-soft-loading-overlay,
.lph-app.is-exercise-workspace .lph-soft-loading-overlay,
.lph-app.is-medical-team-workspace .lph-soft-loading-overlay{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    pointer-events:none;
}

@media(prefers-reduced-motion:reduce){
    .lph-course-video.is-video-loading::after,
    .lph-video-frame.is-video-loading::after{
        animation:none !important;
    }

    .lph-course-video iframe,
    .lph-video-frame iframe{
        transition:none !important;
    }
}


/* =========================================================
   v0.9.0 — Health Insurance module
   ========================================================= */
.lph-app.is-insurance-workspace .lph-content{
    padding:0!important;margin:0!important;min-height:0!important;overflow:hidden!important
}
.lph-app.is-insurance-workspace .lph-async-region,
.lph-app.is-insurance-workspace [data-lph-section-panel="health"]{
    width:100%!important;max-width:none!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important
}
.lph-app.is-insurance-workspace .lph-course-shell{
    display:grid!important;grid-template-columns:50% 50%!important;gap:0!important;width:100%!important;height:100%!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#fff!important
}
.lph-app.is-insurance-workspace .lph-course-left{
    height:100%!important;min-height:0!important;padding:18px!important;overflow-y:auto!important;overflow-x:hidden!important;background:#eef2f3!important;border-right:1px solid #dde2e5!important
}
.lph-app.is-insurance-workspace .lph-course-right{
    height:100%!important;min-height:0!important;padding:18px 20px 22px!important;overflow-y:auto!important;overflow-x:hidden!important;background:#fff!important
}

/* No whole-page loading effect; only Vimeo gets the local loader. */
.lph-app.is-insurance-workspace .lph-async-region.lph-region-enter > *{
    animation:none!important;filter:none!important;transform:none!important
}
.lph-app.is-insurance-workspace .lph-soft-loading-overlay{
    background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none
}

.lph-insurance-details-action{
    display:none;
    margin-top:2px;
    padding:2px 0 12px;
}
.lph-insurance-details-action.is-visible{display:block}
.lph-insurance-details-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    min-height:46px;
    padding:10px 15px;
    border:1px solid #cfd6db;
    border-radius:9px;
    background:#fff;
    color:#3a444d;
    font:inherit;
    font-size:13.5px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 3px 10px rgba(15,23,42,.035);
    transition:transform 180ms var(--lp-ease-premium-spring),border-color 220ms ease,box-shadow 220ms ease
}
.lph-insurance-details-button:hover{
    transform:translateY(-1px);
    border-color:#bcc7ce;
    box-shadow:0 7px 18px rgba(15,23,42,.055)
}
.lph-insurance-plus{
    font-size:24px;
    line-height:1;
    color:#69737c;
    font-weight:600
}
.lph-insurance-details-submitted{
    display:none;
    margin:9px 0 0 4px;
    color:#15904f;
    font-size:12.5px;
    font-weight:750
}
.lph-insurance-details-submitted.is-visible{display:block}

body.lph-modal-open{overflow:hidden}
.lph-insurance-overlay{
    z-index:999999!important;
    padding:24px!important;
    overflow-y:auto;
    align-items:center!important
}
.lph-insurance-modal{
    width:min(820px,100%);
    max-height:min(92vh,900px);
    overflow:auto;
    margin:auto;
    background:#fff;
    border:1px solid rgba(255,255,255,.8);
    border-radius:22px;
    box-shadow:0 28px 90px rgba(15,23,42,.25);
    animation:lphPremiumModalIn 340ms var(--lp-ease-premium-spring) both
}
.lph-insurance-modal-head{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:22px 26px 18px;
    border-bottom:1px solid #e6e8ea;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px)
}
.lph-insurance-modal-head h2{
    margin:0;
    color:var(--lph-color-primary);
    font-size:25px;
    line-height:1.2;
    font-family:var(--lph-heading-font,inherit)
}
.lph-insurance-close{
    width:38px;
    height:38px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:#20262b;
    font-size:32px;
    line-height:1;
    cursor:pointer;
    transition:background 180ms ease,transform 180ms var(--lp-ease-premium-spring)
}
.lph-insurance-close:hover{background:#f1f3f4;transform:scale(1.04)}
.lph-insurance-details-form{padding:22px 26px 26px}
.lph-insurance-details-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
}
.lph-insurance-field{
    display:grid;
    gap:7px
}
.lph-insurance-field.is-full{grid-column:1/-1}
.lph-insurance-field>span,
.lph-insurance-upload>span{
    color:#505b67;
    font-size:13px;
    font-weight:700
}
.lph-insurance-field input,
.lph-insurance-field select{
    width:100%;
    min-height:48px;
    padding:11px 13px;
    border:1px solid #d4dbe1;
    border-radius:10px;
    background:#fff;
    color:#25303a;
    font:inherit;
    font-size:13.5px;
    transition:border-color 190ms ease,box-shadow 190ms ease,transform 160ms var(--lp-ease-premium-spring)
}
.lph-insurance-field input:focus,
.lph-insurance-field select:focus{
    outline:0;
    border-color:rgba(117,28,57,.32);
    box-shadow:0 0 0 4px rgba(117,28,57,.07),0 8px 18px rgba(15,23,42,.04);
    transform:translateY(-1px)
}
.lph-insurance-upload{
    display:grid;
    gap:8px;
    margin-top:18px
}
.lph-insurance-upload input{
    position:absolute;
    opacity:0;
    pointer-events:none
}
.lph-insurance-upload-box{
    display:grid;
    place-items:center;
    min-height:104px;
    padding:16px;
    border:1px dashed #b9c4cc;
    border-radius:12px;
    background:#fafbfc;
    text-align:center;
    cursor:pointer;
    transition:border-color 190ms ease,background 190ms ease,transform 180ms var(--lp-ease-premium-spring)
}
.lph-insurance-upload:hover .lph-insurance-upload-box{
    transform:translateY(-1px);
    border-color:rgba(117,28,57,.34);
    background:#fcf8fa
}
.lph-insurance-upload-box strong{font-size:13.5px;color:#303a43}
.lph-insurance-upload-box small{margin-top:4px;color:#78818a;font-size:11.5px}
.lph-insurance-upload em{color:#69737c;font-size:11.5px;font-style:normal}
.lph-insurance-modal-status{
    min-height:20px;
    margin-top:12px;
    color:#2f895f;
    font-size:12.5px;
    font-weight:650
}
.lph-insurance-modal-status.is-error{color:#b42318}
.lph-insurance-modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:8px;
    padding-top:16px;
    border-top:1px solid #edf0f2
}

@media(max-width:1024px){
    .lph-app.is-insurance-workspace .lph-content{overflow-y:auto!important}
    .lph-app.is-insurance-workspace .lph-async-region,
    .lph-app.is-insurance-workspace [data-lph-section-panel="health"],
    .lph-app.is-insurance-workspace .lph-course-shell{height:auto!important;overflow:visible!important}
    .lph-app.is-insurance-workspace .lph-course-shell{display:block!important}
    .lph-app.is-insurance-workspace .lph-course-left,
    .lph-app.is-insurance-workspace .lph-course-right{height:auto!important;overflow:visible!important}
    .lph-app.is-insurance-workspace .lph-course-left{padding:12px!important;border-right:0!important;border-bottom:1px solid #dde2e5!important}
    .lph-app.is-insurance-workspace .lph-course-right{padding:14px!important}
}
@media(max-width:700px){
    .lph-insurance-overlay{padding:10px!important}
    .lph-insurance-modal{border-radius:16px}
    .lph-insurance-modal-head{padding:18px}
    .lph-insurance-modal-head h2{font-size:21px}
    .lph-insurance-details-form{padding:18px}
    .lph-insurance-details-grid{grid-template-columns:1fr}
    .lph-insurance-field.is-full{grid-column:auto}
    .lph-insurance-modal-actions{flex-direction:column-reverse}
    .lph-insurance-modal-actions .lph-button{width:100%}
}


/* =========================================================
   v0.9.1 — Health Insurance saved plan cards + modal polish
   ========================================================= */

.lph-insurance-saved-wrap{
    display:grid;
    gap:11px;
}

.lph-insurance-saved-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:2px 2px 0;
}

.lph-insurance-saved-head>div{
    display:grid;
    gap:2px;
}

.lph-insurance-saved-head strong{
    color:#283139;
    font-size:13px;
    font-weight:750;
}

.lph-insurance-saved-head span{
    color:#78818a;
    font-size:11.5px;
}

.lph-insurance-add-new{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:36px;
    padding:7px 11px;
    border:1px solid rgba(117,28,57,.16);
    border-radius:9px;
    background:#fff7fa;
    color:var(--lph-color-primary);
    font:inherit;
    font-size:12px;
    font-weight:750;
    cursor:pointer;
    transition:transform 180ms var(--lp-ease-premium-spring),box-shadow 200ms ease,background 200ms ease;
}

.lph-insurance-add-new span{
    font-size:18px;
    line-height:1;
}

.lph-insurance-add-new:hover{
    transform:translateY(-1px);
    background:#fff;
    box-shadow:0 7px 18px rgba(117,28,57,.09);
}

.lph-insurance-plan-list{
    display:grid;
    gap:10px;
}

.lph-insurance-plan-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:13px 14px;
    border:1px solid #e0e5e9;
    border-radius:13px;
    background:
        linear-gradient(180deg,#fff 0%,#fcfdfe 100%);
    box-shadow:
        0 1px 2px rgba(15,23,42,.03),
        0 8px 22px rgba(15,23,42,.045);
    transition:transform 190ms var(--lp-ease-premium-spring),box-shadow 220ms ease,border-color 220ms ease;
}

.lph-insurance-plan-card:hover{
    transform:translateY(-1px);
    border-color:#d2d9de;
    box-shadow:
        0 2px 4px rgba(15,23,42,.035),
        0 12px 28px rgba(15,23,42,.065);
}

.lph-insurance-plan-icon{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    border-radius:11px;
    background:#f8eef2;
    color:var(--lph-color-primary);
    font-size:17px;
    box-shadow:inset 0 0 0 1px rgba(117,28,57,.07);
}

.lph-insurance-plan-copy{
    display:grid;
    min-width:0;
    gap:2px;
}

.lph-insurance-plan-copy strong{
    overflow:hidden;
    color:#252c33;
    font-size:13.5px;
    font-weight:760;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lph-insurance-plan-copy>span{
    color:#59636d;
    font-size:12.5px;
}

.lph-insurance-plan-copy small{
    color:#7c858e;
    font-size:11px;
    line-height:1.4;
}

.lph-insurance-policy-file{
    color:#4c7563!important;
}

.lph-insurance-edit-plan{
    min-width:62px;
    min-height:34px;
    padding:7px 11px;
    border:1px solid #d9dfe3;
    border-radius:9px;
    background:#fff;
    color:#424b54;
    font:inherit;
    font-size:12px;
    font-weight:720;
    cursor:pointer;
    transition:transform 180ms var(--lp-ease-premium-spring),border-color 200ms ease,box-shadow 200ms ease;
}

.lph-insurance-edit-plan:hover{
    transform:translateY(-1px);
    border-color:rgba(117,28,57,.22);
    box-shadow:0 6px 15px rgba(15,23,42,.06);
}

/* Premium modal shell */
.lph-insurance-overlay{
    background:rgba(20,25,31,.55)!important;
    backdrop-filter:blur(9px) saturate(115%)!important;
    -webkit-backdrop-filter:blur(9px) saturate(115%)!important;
}

.lph-insurance-modal{
    border:1px solid rgba(255,255,255,.82)!important;
    background:
        linear-gradient(180deg,rgba(255,255,255,.995) 0%,rgba(250,251,252,.995) 100%)!important;
    box-shadow:
        0 1px 0 rgba(255,255,255,.85) inset,
        0 30px 90px rgba(15,23,42,.28),
        0 8px 24px rgba(15,23,42,.12)!important;
}

.lph-insurance-modal-head{
    padding:20px 24px 18px!important;
    border-bottom:1px solid #e9ecef!important;
    background:
        linear-gradient(180deg,rgba(255,255,255,.98),rgba(253,251,252,.96))!important;
}

.lph-insurance-modal-titleblock{
    display:grid;
    gap:4px;
}

.lph-insurance-modal-kicker{
    color:var(--lph-color-primary);
    font-size:10px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.lph-insurance-modal-titleblock h2{
    font-size:24px!important;
    letter-spacing:-.025em;
}

.lph-insurance-modal-titleblock p{
    margin:0;
    color:#737d86;
    font-size:12px;
}

.lph-insurance-form-section-title{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    margin-bottom:15px;
    padding-bottom:10px;
    border-bottom:1px solid #eef0f2;
}

.lph-insurance-form-section-title span{
    color:#303941;
    font-size:13px;
    font-weight:780;
}

.lph-insurance-form-section-title small{
    color:#8a9299;
    font-size:10.5px;
    text-align:right;
}

.lph-insurance-modal-actions{
    position:sticky;
    bottom:0;
    z-index:2;
    align-items:center!important;
    justify-content:space-between!important;
    margin:18px -26px -26px!important;
    padding:14px 26px!important;
    border-top:1px solid #e6eaed!important;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

.lph-insurance-modal-footnote{
    display:flex;
    align-items:center;
    gap:6px;
    color:#68727b;
    font-size:10.5px;
}

.lph-insurance-modal-footnote span{
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#eaf7ef;
    color:#218757;
    font-size:10px;
    font-weight:800;
}

.lph-insurance-modal-buttons{
    display:flex;
    align-items:center;
    gap:9px;
}

.lph-insurance-modal-buttons .lph-button{
    min-width:110px;
}

@media(max-width:700px){
    .lph-insurance-plan-card{
        grid-template-columns:auto minmax(0,1fr);
    }

    .lph-insurance-edit-plan{
        grid-column:1/-1;
        width:100%;
    }

    .lph-insurance-saved-head{
        align-items:flex-start;
    }

    .lph-insurance-form-section-title{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }

    .lph-insurance-form-section-title small{
        text-align:left;
    }

    .lph-insurance-modal-actions{
        align-items:stretch!important;
        flex-direction:column!important;
        gap:10px;
        margin:18px -18px -18px!important;
        padding:14px 18px!important;
    }

    .lph-insurance-modal-footnote{
        justify-content:center;
    }

    .lph-insurance-modal-buttons{
        width:100%;
        flex-direction:column-reverse;
    }

    .lph-insurance-modal-buttons .lph-button{
        width:100%;
    }
}


/* =========================================================
   v1.5.1 — Health modal shell now comes from the LifePlan Core UI Kit.
   The old v0.9.2/v0.9.3 duplicated modal chrome was removed.
   Health retains only insurance/share domain-specific layout below.
   ========================================================= */

/* =========================================================
   v0.9.4 — Fixed Edit/Add modal header + footer
   ========================================================= */

/*
 * Edit/Add modal structure:
 *   modal
 *     fixed header
 *     form
 *       scrollable body
 *       fixed footer
 */
.lph-insurance-details-form--fixed{
    flex:1 1 auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    padding:0!important;
    background:#fff;
}

.lph-insurance-edit-scroll{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:22px 28px 24px!important;
    background:#fff!important;
    scrollbar-width:thin;
    scrollbar-color:#aab1b7 transparent;
}

.lph-insurance-edit-scroll::-webkit-scrollbar{
    width:7px;
}

.lph-insurance-edit-scroll::-webkit-scrollbar-track{
    background:transparent;
}

.lph-insurance-edit-scroll::-webkit-scrollbar-thumb{
    background:#aab1b7;
    border-radius:999px;
}

.lph-insurance-edit-scroll::-webkit-scrollbar-thumb:hover{
    background:#8e969d;
}

/* Header remains fixed as the first flex item. */
.lph-insurance-modal > .lph-global-modal-head{
    flex:0 0 auto!important;
    position:relative!important;
    top:auto!important;
}

/* Footer remains visible while only the edit body scrolls. */
.lph-insurance-details-form--fixed > .lph-global-modal-foot{
    flex:0 0 auto!important;
    position:relative!important;
    bottom:auto!important;
    margin:0!important;
    padding:14px 26px!important;
    background:#fff!important;
    border-top:1px solid #e3e7ea!important;
    box-shadow:0 -10px 28px rgba(15,23,42,.07)!important;
}

/* Remove old negative-margin footer behavior specifically in edit/add modal. */
.lph-insurance-details-form--fixed .lph-insurance-modal-actions{
    margin:0!important;
}

/* Status belongs to the scrolling body, so errors never hide under footer. */
.lph-insurance-edit-scroll .lph-insurance-modal-status{
    margin-bottom:2px;
}

/* Preserve good spacing at the bottom of scrollable form content. */
.lph-insurance-edit-scroll .lph-insurance-upload{
    margin-bottom:4px;
}

@media(max-width:700px){
    .lph-insurance-edit-scroll{
        padding:18px!important;
    }

    .lph-insurance-details-form--fixed > .lph-global-modal-foot{
        padding:14px 18px!important;
    }
}


/* =========================================================
   v1.0.0 — Social & Cognitive module
   ========================================================= */
.lph-app.is-social-workspace .lph-async-region.lph-region-enter > *{
    animation:none!important;filter:none!important;transform:none!important
}
.lph-app.is-social-workspace .lph-soft-loading-overlay{
    background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none
}
.lph-social-course .lph-course-radio-list{
    display:grid;
    gap:10px;
}
.lph-social-course .lph-course-radio-list .lph-course-choice{
    width:100%;
}
@media(max-width:1024px){
    .lph-app.is-social-workspace .lph-content{overflow-y:auto!important}
    .lph-app.is-social-workspace .lph-async-region,
    .lph-app.is-social-workspace [data-lph-section-panel="health"],
    .lph-app.is-social-workspace .lph-course-shell{height:auto!important;overflow:visible!important}
    .lph-app.is-social-workspace .lph-course-shell{display:block!important}
    .lph-app.is-social-workspace .lph-course-left,
    .lph-app.is-social-workspace .lph-course-right{height:auto!important;overflow:visible!important}
    .lph-app.is-social-workspace .lph-course-left{padding:12px!important;border-right:0!important;border-bottom:1px solid #dde2e5!important}
    .lph-app.is-social-workspace .lph-course-right{padding:14px!important}
}


/* =========================================================
   v1.1.0 — Action Plan + Narrative Roadmap
   ========================================================= */

.lph-app.is-summary-workspace .lph-content{
    padding:0!important;
    min-height:0!important;
    overflow:hidden!important;
}

.lph-app.is-summary-workspace .lph-async-region,
.lph-app.is-summary-workspace [data-lph-section-panel="health"]{
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
}

.lph-summary-shell{
    width:100%;
    height:100%;
    min-height:0;
    padding:24px clamp(20px,3vw,42px) 34px;
    overflow-y:auto;
    overflow-x:hidden;
    background:
        radial-gradient(circle at 90% 0%,rgba(117,28,57,.045),transparent 28%),
        linear-gradient(180deg,#fff 0%,#fafbfc 100%);
    scrollbar-width:thin;
    scrollbar-color:#aab1b7 transparent;
}

.lph-summary-shell::-webkit-scrollbar{width:7px}
.lph-summary-shell::-webkit-scrollbar-track{background:transparent}
.lph-summary-shell::-webkit-scrollbar-thumb{background:#aab1b7;border-radius:999px}

.lph-summary-hero{
    display:grid;
    gap:8px;
    max-width:1080px;
    margin:0 auto 22px;
}

.lph-summary-hero h1{
    margin:0;
    color:#20242a;
    font-family:var(--lph-heading-font,inherit);
    font-size:clamp(28px,3vw,43px);
    line-height:1.08;
    letter-spacing:-.03em;
}

.lph-summary-hero>p,
.lph-roadmap-hero>div>p{
    max-width:950px;
    margin:0;
    color:#69727c;
    font-size:clamp(14px,1.2vw,17px);
    line-height:1.65;
}

.lph-action-summary-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
    max-width:1080px;
    margin:0 auto;
}

.lph-action-summary-card{
    overflow:hidden;
    border:1px solid #e2e6e9;
    border-radius:17px;
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.03),0 10px 28px rgba(15,23,42,.045);
    transition:transform 190ms var(--lp-ease-premium-spring),box-shadow 220ms ease,border-color 220ms ease;
}

.lph-action-summary-card:hover{
    transform:translateY(-2px);
    border-color:#d5dce1;
    box-shadow:0 2px 4px rgba(15,23,42,.04),0 16px 36px rgba(15,23,42,.065);
}

.lph-summary-card-head{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:11px;
    padding:15px 17px;
    border-bottom:1px solid #edf0f2;
    background:linear-gradient(180deg,#fff,#fdfdfd);
}

.lph-summary-card-icon,
.lph-summary-check{
    display:grid;
    place-items:center;
    flex:0 0 auto;
    border-radius:50%;
    background:#eaf7ef;
    color:#25895d;
    font-weight:850;
}

.lph-summary-card-icon{
    width:34px;
    height:34px;
    font-size:14px;
}

.lph-summary-card-head h2{
    margin:0;
    color:#2a3036;
    font-size:16px;
    font-weight:780;
}

.lph-summary-card-head>span{
    color:#8a9299;
    font-size:10.5px;
    font-weight:650;
}

.lph-action-summary-items{
    display:grid;
    gap:0;
    padding:4px 17px 7px;
}

.lph-action-summary-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 0;
    border-bottom:1px solid #f0f2f3;
}

.lph-action-summary-item:last-child{border-bottom:0}

.lph-summary-check{
    width:22px;
    height:22px;
    margin-top:1px;
    font-size:10px;
}

.lph-action-summary-item p{
    margin:0;
    color:#343b42;
    font-size:13px;
    line-height:1.55;
}

.lph-summary-empty{
    display:grid;
    place-items:center;
    gap:6px;
    min-height:260px;
    max-width:1080px;
    margin:0 auto;
    border:1px dashed #d5dbe0;
    border-radius:18px;
    background:#fff;
    color:#6f7881;
    text-align:center;
}

.lph-summary-empty strong{
    color:#333b42;
    font-size:17px;
}

/* Roadmap */
.lph-roadmap-hero{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap:22px;
}

.lph-roadmap-list{
    display:grid;
    gap:15px;
    max-width:1080px;
    margin:0 auto;
}

.lph-roadmap-card{
    display:grid;
    grid-template-columns:58px minmax(0,1fr);
    gap:0;
    overflow:hidden;
    border:1px solid #e2e6e9;
    border-radius:17px;
    background:#fff;
    box-shadow:0 1px 2px rgba(15,23,42,.025),0 9px 26px rgba(15,23,42,.04);
}

.lph-roadmap-index{
    display:grid;
    place-items:start center;
    padding-top:20px;
    border-right:1px solid #edf0f2;
    background:#faf7f8;
    color:var(--lph-color-primary);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
}

.lph-roadmap-content{
    padding:18px 21px 19px;
}

.lph-roadmap-content h2{
    margin:0 0 8px;
    color:var(--lph-color-primary);
    font-family:var(--lph-heading-font,inherit);
    font-size:20px;
    font-weight:700;
}

.lph-roadmap-content p{
    margin:0 0 9px;
    color:#505860;
    font-size:13px;
    line-height:1.55;
}

.lph-roadmap-content ul{
    display:grid;
    gap:7px;
    margin:0;
    padding-left:20px;
    color:#30373d;
    font-size:13px;
    line-height:1.55;
}

/* Export */
.lph-export-wrap{
    position:relative;
    z-index:6;
}

.lph-export-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:110px;
    min-height:42px;
    padding:10px 15px;
    border:1px solid var(--lph-color-primary);
    border-radius:10px;
    background:var(--lph-color-primary);
    color:#fff;
    font:inherit;
    font-size:12.5px;
    font-weight:760;
    cursor:pointer;
    box-shadow:0 7px 18px rgba(117,28,57,.16);
    transition:transform 180ms var(--lp-ease-premium-spring),background 180ms ease,box-shadow 180ms ease;
}

.lph-export-button:hover{
    transform:translateY(-1px);
    background:#64172f;
    box-shadow:0 10px 24px rgba(117,28,57,.21);
}

.lph-export-chevron{
    font-size:15px;
    line-height:1;
    transition:transform 180ms ease;
}

.lph-export-button[aria-expanded="true"] .lph-export-chevron{
    transform:rotate(180deg);
}

.lph-export-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:245px;
    padding:7px;
    border:1px solid #e0e5e8;
    border-radius:13px;
    background:#fff;
    box-shadow:0 18px 50px rgba(15,23,42,.15);
    animation:lphPremiumModalIn 220ms var(--lp-ease-premium-spring) both;
}

.lph-export-menu[hidden]{display:none!important}

.lph-export-menu button{
    display:grid;
    grid-template-columns:28px 1fr;
    align-items:center;
    gap:9px;
    width:100%;
    padding:10px 11px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:#303840;
    text-align:left;
    cursor:pointer;
    transition:background 160ms ease,transform 160ms ease;
}

.lph-export-menu button:hover{
    background:#f4f5f6;
    transform:translateX(1px);
}

.lph-export-menu button>span{
    display:grid;
    place-items:center;
    width:27px;
    height:27px;
    border-radius:8px;
    background:#f5edef;
    color:var(--lph-color-primary);
    font-size:13px;
    font-weight:800;
}

.lph-export-menu button div{
    display:grid;
    gap:1px;
}

.lph-export-menu strong{
    font-size:12px;
    font-weight:760;
}

.lph-export-menu small{
    color:#858d95;
    font-size:10px;
}

.lph-export-toast{
    position:fixed;
    left:50%;
    bottom:82px;
    z-index:99999;
    max-width:320px;
    padding:10px 14px;
    border-radius:10px;
    background:#181c20;
    color:#fff;
    font-size:12px;
    font-weight:650;
    box-shadow:0 12px 30px rgba(15,23,42,.2);
    opacity:0;
    pointer-events:none;
    transform:translate(-50%,10px);
    transition:opacity 180ms ease,transform 220ms var(--lp-ease-premium-spring);
}

.lph-export-toast.is-visible{
    opacity:1;
    transform:translate(-50%,0);
}

/* Legacy shortcode compatibility */
.lph-legacy-summary{
    display:grid;
    gap:18px;
}

.lph-legacy-summary-section{
    padding:20px 24px;
    border:1px solid #e1e5e8;
    border-radius:16px;
    background:#fff;
}

.lph-legacy-summary-section h3{
    margin:0 0 14px;
    color:var(--lph-color-primary);
}

.lph-legacy-summary-section ul{
    margin:0;
}

.lph-legacy-check-list{
    display:grid;
    gap:10px;
    padding:0!important;
    list-style:none!important;
}

.lph-legacy-check-list li{
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.lph-legacy-check-list li>span{
    color:#18a65b;
    font-weight:900;
}

@media(max-width:800px){
    .lph-summary-shell{
        padding:18px 14px 28px;
    }

    .lph-action-summary-grid{
        grid-template-columns:1fr;
    }

    .lph-roadmap-hero{
        grid-template-columns:1fr;
        align-items:start;
    }

    .lph-export-wrap{
        justify-self:start;
    }

    .lph-export-menu{
        left:0;
        right:auto;
    }
}

@media(max-width:520px){
    .lph-roadmap-card{
        grid-template-columns:42px minmax(0,1fr);
    }

    .lph-roadmap-content{
        padding:15px;
    }

    .lph-summary-card-head{
        grid-template-columns:auto minmax(0,1fr);
    }

    .lph-summary-card-head>span{
        grid-column:2;
    }
}


/* =========================================================
   v1.2.2 — Action Plan + Roadmap premium compact redesign
   ========================================================= */

/* Give both summary screens a calmer, denser dashboard feel. */
.lph-summary-shell{
    padding:18px clamp(18px,2.2vw,30px) 28px!important;
    background:
        radial-gradient(circle at 92% 2%,rgba(117,28,57,.035),transparent 26%),
        linear-gradient(180deg,#fbfcfd 0%,#f7f9fa 100%)!important;
}

/* Smaller hero so the useful content is visible immediately. */
.lph-summary-hero{
    max-width:1180px!important;
    margin:0 auto 16px!important;
    gap:6px!important;
    padding:0 2px!important;
}

.lph-summary-hero .lph-step-kicker{
    width:max-content!important;
    min-width:0!important;
    padding:6px 10px!important;
    border-radius:999px!important;
    background:#f5e9ee!important;
    color:var(--lph-color-primary)!important;
    font-size:10px!important;
    font-weight:800!important;
    letter-spacing:.08em!important;
}

.lph-summary-hero h1{
    max-width:900px!important;
    font-size:clamp(26px,2.4vw,36px)!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
}

.lph-summary-hero>p,
.lph-roadmap-hero>div>p{
    max-width:900px!important;
    font-size:14px!important;
    line-height:1.55!important;
}

/* ---------- ACTION PLAN ---------- */
.lph-action-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    max-width:1180px!important;
}

.lph-action-summary-card{
    border-radius:14px!important;
    border-color:#e1e6e9!important;
    box-shadow:
        0 1px 2px rgba(15,23,42,.025),
        0 8px 22px rgba(15,23,42,.04)!important;
}

.lph-action-summary-card:hover{
    transform:translateY(-1px)!important;
    box-shadow:
        0 2px 4px rgba(15,23,42,.035),
        0 12px 28px rgba(15,23,42,.055)!important;
}

.lph-summary-card-head{
    grid-template-columns:auto minmax(0,1fr) auto!important;
    gap:9px!important;
    padding:12px 14px!important;
}

.lph-summary-card-icon{
    width:30px!important;
    height:30px!important;
    font-size:12px!important;
    background:#ecf8f1!important;
}

.lph-summary-card-head h2{
    font-size:15px!important;
    font-weight:780!important;
}

.lph-summary-card-head>span{
    font-size:9.5px!important;
    font-weight:720!important;
    letter-spacing:.01em!important;
}

.lph-action-summary-items{
    padding:3px 14px 6px!important;
}

.lph-action-summary-item{
    gap:9px!important;
    padding:10px 0!important;
}

.lph-summary-check{
    width:20px!important;
    height:20px!important;
    font-size:9px!important;
}

.lph-action-summary-item p{
    font-size:12.5px!important;
    line-height:1.48!important;
}

/* ---------- ROADMAP ---------- */
.lph-roadmap-hero{
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:18px!important;
}

.lph-roadmap-list{
    gap:11px!important;
    max-width:1180px!important;
}

.lph-roadmap-card{
    grid-template-columns:48px minmax(0,1fr)!important;
    border-radius:14px!important;
    border-color:#e1e6e9!important;
    box-shadow:
        0 1px 2px rgba(15,23,42,.02),
        0 7px 20px rgba(15,23,42,.035)!important;
}

.lph-roadmap-index{
    padding-top:16px!important;
    font-size:10px!important;
    background:linear-gradient(180deg,#faf4f6,#f8f8f9)!important;
}

.lph-roadmap-content{
    padding:14px 17px 15px!important;
}

.lph-roadmap-content h2{
    margin:0 0 5px!important;
    font-size:16px!important;
    line-height:1.25!important;
}

.lph-roadmap-content p{
    margin:0 0 7px!important;
    font-size:12.5px!important;
    line-height:1.5!important;
}

.lph-roadmap-content ul{
    gap:5px!important;
    padding-left:18px!important;
    font-size:12.5px!important;
    line-height:1.48!important;
}

/* ---------- EXPORT CONTROL ---------- */
.lph-export-button{
    min-width:100px!important;
    min-height:38px!important;
    padding:8px 13px!important;
    border-radius:9px!important;
    font-size:12px!important;
    box-shadow:0 5px 14px rgba(117,28,57,.14)!important;
}

.lph-export-menu{
    top:calc(100% + 7px)!important;
    width:220px!important;
    padding:6px!important;
    border-radius:12px!important;
    box-shadow:
        0 18px 42px rgba(15,23,42,.14),
        0 2px 8px rgba(15,23,42,.06)!important;
}

.lph-export-menu button{
    grid-template-columns:26px 1fr!important;
    gap:8px!important;
    padding:9px 10px!important;
    border-radius:8px!important;
}

.lph-export-menu button>span{
    width:25px!important;
    height:25px!important;
    border-radius:7px!important;
    font-size:11px!important;
}

.lph-export-menu strong{
    font-size:11.5px!important;
}

.lph-export-menu small{
    font-size:9.5px!important;
}

/* Prevent any native browser disabled styling from washing out the PDF row. */
.lph-export-menu button,
.lph-export-menu button:disabled{
    opacity:1!important;
    color:#303840!important;
}

/* Download PDF should remain visually equal to the other export actions. */
.lph-export-menu button[data-lph-export-action="pdf"]{
    background:transparent!important;
}

.lph-export-menu button[data-lph-export-action="pdf"]:hover{
    background:#f4f5f6!important;
}

/* Empty states should still feel intentional, not oversized. */
.lph-summary-empty{
    min-height:190px!important;
    border-radius:14px!important;
}

.lph-summary-empty strong{
    font-size:15px!important;
}

/* Responsive refinements */
@media(max-width:1000px){
    .lph-action-summary-grid{
        grid-template-columns:1fr 1fr!important;
    }

    .lph-summary-hero h1{
        font-size:clamp(24px,3vw,32px)!important;
    }
}

@media(max-width:760px){
    .lph-summary-shell{
        padding:14px 12px 24px!important;
    }

    .lph-action-summary-grid{
        grid-template-columns:1fr!important;
    }

    .lph-roadmap-hero{
        grid-template-columns:1fr!important;
        align-items:start!important;
    }

    .lph-export-wrap{
        justify-self:start!important;
    }

    .lph-export-menu{
        left:0!important;
        right:auto!important;
    }
}

@media(max-width:520px){
    .lph-summary-hero h1{
        font-size:24px!important;
    }

    .lph-summary-hero>p,
    .lph-roadmap-hero>div>p{
        font-size:13px!important;
    }

    .lph-roadmap-card{
        grid-template-columns:38px minmax(0,1fr)!important;
    }

    .lph-roadmap-content{
        padding:12px 13px!important;
    }

    .lph-summary-card-head{
        grid-template-columns:auto minmax(0,1fr)!important;
    }

    .lph-summary-card-head>span{
        grid-column:2!important;
        justify-self:start!important;
    }
}


/* =========================================================
   v1.3.0 — Premium Action Plan, Journey Roadmap & Advisor Share
   ========================================================= */
.lph-action-plan-shell,.lph-roadmap-shell{padding:18px clamp(18px,2vw,28px) 30px!important;background:#f6f8f9!important}
.lph-plan-overview{max-width:1180px;margin:0 auto 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;padding:22px 24px;border:1px solid #eadfe3;border-radius:18px;background:linear-gradient(135deg,#fff 0%,#fff 58%,#faf3f6 100%);box-shadow:0 9px 28px rgba(30,35,40,.055)}
.lph-plan-eyebrow{display:inline-flex;width:max-content;padding:5px 9px;border-radius:999px;background:#f4e8ed;color:#7b1d3d;font-size:9.5px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.lph-plan-eyebrow.is-light{background:rgba(255,255,255,.14);color:#fff}
.lph-plan-overview h1,.lph-roadmap-banner h1{margin:8px 0 6px;font-family:var(--lph-heading-font,inherit);font-size:clamp(26px,2.2vw,35px);line-height:1.08;letter-spacing:-.025em}.lph-plan-overview p{max-width:760px;margin:0;color:#6a727a;font-size:13.5px;line-height:1.55}
.lph-plan-stats{display:flex;gap:9px}.lph-plan-stats>div{min-width:94px;padding:11px 13px;border:1px solid #eadfe3;border-radius:13px;background:#fff;text-align:center}.lph-plan-stats strong{display:block;color:#7b1d3d;font-size:23px;line-height:1}.lph-plan-stats span{display:block;margin-top:5px;color:#858d94;font-size:9.5px;font-weight:700}
.lph-plan-board{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.lph-plan-area{overflow:hidden;border:1px solid #e1e6e9;border-radius:15px;background:#fff;box-shadow:0 7px 22px rgba(25,35,45,.04);transition:transform .2s var(--lp-ease-premium-spring),box-shadow .2s ease}.lph-plan-area:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(25,35,45,.065)}
.lph-plan-area-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #edf0f2;background:#fcfcfd}.lph-plan-area-no{display:grid;place-items:center;width:31px;height:31px;border-radius:9px;background:#f5e9ee;color:#7b1d3d;font-size:10px;font-weight:850}.lph-plan-area-head h2{margin:0;color:#252b31;font-size:15px}.lph-plan-area-head div:nth-child(2)>span{display:block;margin-top:2px;color:#949ba1;font-size:9.5px;font-weight:680}.lph-plan-complete-mark{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#eaf7ef;color:#21875a;font-size:11px;font-weight:850}.lph-plan-area-items{padding:4px 14px 7px}.lph-plan-task{display:flex;align-items:flex-start;gap:9px;padding:10px 0;border-bottom:1px solid #f0f2f3}.lph-plan-task:last-child{border-bottom:0}.lph-plan-task>span,.lph-roadmap-actions>div>span{display:grid;place-items:center;flex:0 0 auto;width:20px;height:20px;border-radius:7px;background:#f5e9ee;color:#8b2447;font-size:9px;font-weight:850}.lph-plan-task p,.lph-roadmap-actions p{margin:0;color:#394047;font-size:12.5px;line-height:1.48}
.lph-roadmap-banner{max-width:1180px;margin:0 auto 18px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:23px 25px;border-radius:18px;background:linear-gradient(135deg,#7f2042,#5d152f);color:#fff;box-shadow:0 16px 38px rgba(75,25,45,.18)}.lph-roadmap-banner p{max-width:790px;margin:0;color:rgba(255,255,255,.8);font-size:13.5px;line-height:1.55}.lph-export-button.is-roadmap{border-color:rgba(255,255,255,.38)!important;background:#fff!important;color:#7b1d3d!important;box-shadow:none!important}.lph-export-button.is-roadmap:hover{background:#faf5f7!important}
.lph-roadmap-journey{position:relative;max-width:1040px;margin:0 auto;padding-left:56px}.lph-roadmap-journey:before{content:"";position:absolute;left:20px;top:23px;bottom:23px;width:2px;background:linear-gradient(#d5a8b8,#eadce1)}.lph-roadmap-stop{position:relative;margin:0 0 12px}.lph-roadmap-node{position:absolute;left:-56px;top:17px;display:grid;place-items:center;width:42px;height:42px;border:7px solid #f6f8f9;border-radius:50%;background:#7b1d3d;box-shadow:0 0 0 1px #d8b3c0}.lph-roadmap-node span{color:#fff;font-size:9px;font-weight:850}.lph-roadmap-stop-card{border:1px solid #e0e5e8;border-radius:15px;background:#fff;padding:15px 17px;box-shadow:0 7px 22px rgba(25,35,45,.04)}.lph-roadmap-stop-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}.lph-roadmap-stop-head h2{margin:0;color:#7b1d3d;font-size:17px}.lph-roadmap-stop-head>span{padding:4px 8px;border-radius:999px;background:#f5f6f7;color:#8a9299;font-size:9px;font-weight:750}.lph-roadmap-stop-card>p{margin:0 0 9px;color:#707880;font-size:12px;line-height:1.5}.lph-roadmap-actions{display:grid;gap:6px}.lph-roadmap-actions>div{display:flex;align-items:flex-start;gap:9px;padding:8px 9px;border:1px solid #edf0f2;border-radius:10px;background:#fbfcfc}
.lph-export-menu{width:265px!important}.lph-export-menu button{align-items:start!important}.lph-export-menu button div{gap:2px!important}
.lph-roadmap-share-overlay{z-index:100000!important}.lph-roadmap-share-modal{width:min(720px,calc(100vw - 32px))!important;max-height:min(720px,calc(100vh - 34px))!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}.lph-roadmap-share-modal .lph-global-modal-head{flex:0 0 auto!important;background:#7b1d3d!important;color:#fff!important}.lph-roadmap-share-modal .lph-global-modal-head h2{color:#fff!important}.lph-roadmap-share-modal .lph-global-modal-head p,.lph-roadmap-share-modal .lph-modal-eyebrow{color:rgba(255,255,255,.78)!important}.lph-roadmap-share-modal .lph-modal-close{color:#fff!important;border-color:rgba(255,255,255,.22)!important;background:rgba(255,255,255,.08)!important}.lph-share-body{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;padding:22px 26px!important}.lph-share-field{display:grid;gap:7px;margin-bottom:17px}.lph-share-field>span{color:#30363c;font-size:12px;font-weight:780}.lph-share-field>span small{color:#949ba1;font-weight:550}.lph-share-field>em{color:#979ea5;font-size:9.5px;font-style:normal}.lph-share-field textarea{width:100%;resize:vertical;min-height:105px;padding:12px 13px;border:1px solid #d9dfe3;border-radius:11px;background:#fff;font:inherit;font-size:12.5px;outline:none}.lph-share-field textarea:focus{border-color:#a85c75;box-shadow:0 0 0 3px rgba(123,29,61,.08)}.lph-email-chip-box{min-height:48px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:7px 9px;border:1px solid #d9dfe3;border-radius:11px;background:#fff}.lph-email-chip-box:focus-within{border-color:#a85c75;box-shadow:0 0 0 3px rgba(123,29,61,.08)}.lph-email-chip-box>div{display:contents}.lph-email-chip-box span{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:8px;background:#f5e9ee;color:#74203e;font-size:10.5px;font-weight:680}.lph-email-chip-box span button{padding:0;border:0;background:none;color:#74203e;cursor:pointer}.lph-email-chip-box input{flex:1 1 220px;min-width:180px;padding:6px 2px;border:0!important;outline:0!important;box-shadow:none!important;background:transparent;font:inherit;font-size:12px}.lph-share-link-result{display:grid;gap:5px;padding:11px 13px;border:1px solid #cfe7d8;border-radius:11px;background:#f2faf5}.lph-share-link-result>span{color:#278259;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.lph-share-link-result strong{overflow-wrap:anywhere;color:#2d373f;font-size:10.5px}.lph-share-link-result small{color:#6e7a72;font-size:9.5px}.lph-share-status{min-height:20px;margin-top:8px;color:#7b1d3d;font-size:11px;font-weight:650}.lph-share-foot{flex:0 0 auto!important;background:#fff!important;border-top:1px solid #e4e8ea!important;box-shadow:0 -8px 24px rgba(20,30,40,.05)!important;padding:13px 20px!important}.lph-share-foot,.lph-share-foot>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.lph-share-security{color:#7a838a;font-size:9.5px}.lph-copy-link:hover{background:#f5f6f7!important;color:#292f34!important}
@media(max-width:800px){.lph-plan-overview,.lph-roadmap-banner{grid-template-columns:1fr}.lph-plan-stats{justify-content:flex-start}.lph-plan-board{grid-template-columns:1fr}.lph-roadmap-banner .lph-export-wrap{justify-self:start}.lph-roadmap-journey{padding-left:45px}.lph-roadmap-node{left:-45px}.lph-share-foot{align-items:flex-start!important;flex-direction:column!important}.lph-share-foot>div{width:100%;flex-wrap:wrap}.lph-share-foot .lph-button{flex:1 1 130px}}
@media(max-width:520px){.lph-action-plan-shell,.lph-roadmap-shell{padding:12px 10px 22px!important}.lph-plan-overview,.lph-roadmap-banner{padding:18px 16px;border-radius:15px}.lph-plan-overview h1,.lph-roadmap-banner h1{font-size:25px}.lph-plan-stats>div{min-width:82px}.lph-roadmap-journey{padding-left:35px}.lph-roadmap-journey:before{left:13px}.lph-roadmap-node{left:-35px;width:29px;height:29px;border-width:5px}.lph-share-body{padding:17px!important}}


/* =========================================================
   v1.3.1 — Advisor modal visibility + readability polish
   ========================================================= */

/* Share modal must be a true viewport overlay. v1.3.0 inherited only the
   visual overlay skin, so the dialog could be appended below the page. */
.lph-roadmap-share-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:2147483000!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:18px!important;
    overflow:auto!important;
}

.lph-roadmap-share-modal{
    position:relative!important;
    margin:auto!important;
}

/* Prevent the page underneath from visually fighting the modal. */
body:has(.lph-roadmap-share-overlay){
    overflow:hidden!important;
}

/* Modal close visual styling is supplied by the Core UI Kit. */
.lph-roadmap-share-modal .lph-modal-close{
    flex:0 0 auto!important;
}

/* Slightly larger supporting text across Action Plan / Roadmap. Headings stay
   at the current sizes so the screens remain compact. */
.lph-plan-overview p,
.lph-roadmap-banner p{
    font-size:14.5px!important;
    line-height:1.58!important;
}

.lph-plan-stats span,
.lph-plan-area-head div:nth-child(2)>span,
.lph-roadmap-stop-head>span{
    font-size:10.5px!important;
}

.lph-plan-task p,
.lph-roadmap-actions p{
    font-size:13.5px!important;
    line-height:1.52!important;
}

.lph-roadmap-stop-card>p{
    font-size:13px!important;
    line-height:1.55!important;
}

.lph-export-menu strong{
    font-size:12.5px!important;
}

.lph-export-menu small{
    font-size:10.5px!important;
    line-height:1.35!important;
}

.lph-share-field>span{
    font-size:13px!important;
}

.lph-share-field textarea,
.lph-email-chip-box input{
    font-size:13px!important;
}

.lph-share-field>em,
.lph-share-security,
.lph-share-link-result small{
    font-size:10.5px!important;
}

.lph-share-status{
    font-size:12px!important;
}

@media(max-width:700px){
    .lph-roadmap-share-overlay{
        align-items:flex-start!important;
        padding:10px!important;
    }
    .lph-roadmap-share-modal{
        width:100%!important;
        max-height:calc(100vh - 20px)!important;
    }
}


/* =========================================================
   v1.3.2 — Export menu readability
   Legacy pre-v1.3 Action Plan/Roadmap selectors were removed in v1.5.4.
   ========================================================= */
.lph-export-menu strong{
    font-size:12.5px!important;
}
.lph-export-menu small{
    font-size:10.5px!important;
}


/* =========================================================
   v1.3.3 — Advisor sharing fix + premium modal polish
   ========================================================= */

/* Export button: center both text and the chevron precisely. */
.lph-export-button.is-roadmap{
    display:inline-grid!important;
    grid-template-columns:auto 18px!important;
    align-items:center!important;
    justify-content:center!important;
    column-gap:8px!important;
    min-width:118px!important;
    height:42px!important;
    padding:0 14px!important;
    line-height:1!important;
}

.lph-export-button.is-roadmap>span:first-child{
    line-height:1!important;
}

.lph-export-button.is-roadmap .lph-export-chevron{
    display:grid!important;
    place-items:center!important;
    width:18px!important;
    height:18px!important;
    transform:none!important;
    transition:transform 180ms ease!important;
}

.lph-export-button.is-roadmap .lph-export-chevron svg{
    display:block!important;
    width:16px!important;
    height:16px!important;
}

.lph-export-button.is-roadmap[aria-expanded="true"] .lph-export-chevron{
    transform:rotate(180deg)!important;
}

body.lph-modal-open{
    overflow:hidden!important;
}

.lph-roadmap-share-overlay{
    position:fixed!important;
    inset:0!important;
    z-index:2147483000!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:22px!important;
    overflow:auto!important;
    background:rgba(24,28,32,.60)!important;
    backdrop-filter:blur(9px) saturate(110%)!important;
    -webkit-backdrop-filter:blur(9px) saturate(110%)!important;
}

/* Same premium structure used by the Health Insurance modal. */
.lph-roadmap-share-modal{
    position:relative!important;
    width:min(780px,calc(100vw - 44px))!important;
    max-height:min(720px,calc(100vh - 44px))!important;
    margin:auto!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.78)!important;
    border-radius:20px!important;
    background:#fff!important;
    box-shadow:0 34px 90px rgba(15,23,42,.28),0 8px 26px rgba(15,23,42,.12)!important;
}

.lph-roadmap-share-modal .lph-global-modal-head{
    position:relative!important;
    top:auto!important;
    flex:0 0 auto!important;
    min-height:140px!important;
    padding:24px 30px 25px!important;
    align-items:flex-start!important;
    border:0!important;
    background:
        radial-gradient(circle at 92% 15%,rgba(255,255,255,.10),transparent 27%),
        linear-gradient(135deg,#861f46 0%,#711a3a 100%)!important;
}

.lph-roadmap-share-modal .lph-global-modal-head>div{
    min-width:0!important;
    max-width:620px!important;
}

.lph-roadmap-share-modal .lph-modal-eyebrow{
    display:block!important;
    margin:0 0 7px!important;
    color:rgba(255,255,255,.76)!important;
    font-size:11px!important;
    line-height:1.2!important;
    font-weight:800!important;
    letter-spacing:.075em!important;
    text-transform:uppercase!important;
}

.lph-roadmap-share-modal .lph-global-modal-head h2{
    margin:0 0 8px!important;
    color:#fff!important;
    font-size:27px!important;
    line-height:1.12!important;
    letter-spacing:-.02em!important;
}

.lph-roadmap-share-modal .lph-global-modal-head p{
    margin:0!important;
    color:rgba(255,255,255,.78)!important;
    font-size:13.5px!important;
    line-height:1.55!important;
}

.lph-roadmap-share-modal .lph-modal-close{
    flex:0 0 auto!important;
    margin:1px 0 0 18px!important;
}

/* Only the middle content area scrolls. */
.lph-roadmap-share-modal .lph-share-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:24px 30px 26px!important;
    background:#fff!important;
    scrollbar-width:thin!important;
    scrollbar-color:#aeb5bb transparent!important;
}

.lph-roadmap-share-modal .lph-share-body::-webkit-scrollbar{width:6px!important}
.lph-roadmap-share-modal .lph-share-body::-webkit-scrollbar-track{background:transparent!important}
.lph-roadmap-share-modal .lph-share-body::-webkit-scrollbar-thumb{background:#aeb5bb!important;border-radius:999px!important}

.lph-roadmap-share-modal .lph-share-field{
    display:grid!important;
    gap:8px!important;
    margin:0 0 18px!important;
}

.lph-roadmap-share-modal .lph-share-field>span{
    display:flex!important;
    align-items:baseline!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    color:#31383f!important;
    font-size:13.5px!important;
    font-weight:780!important;
}

.lph-roadmap-share-modal .lph-share-field>span small{
    color:#929aa2!important;
    font-size:10px!important;
    font-weight:600!important;
}

.lph-roadmap-share-modal .lph-share-field>em{
    color:#939ba3!important;
    font-size:10.5px!important;
    font-style:normal!important;
}

.lph-roadmap-share-modal .lph-email-chip-box,
.lph-roadmap-share-modal .lph-share-field textarea{
    border:1px solid #d8dee3!important;
    border-radius:12px!important;
    background:#fbfcfd!important;
    box-shadow:0 1px 1px rgba(15,23,42,.015)!important;
    transition:border-color 170ms ease,box-shadow 170ms ease,background 170ms ease!important;
}

.lph-roadmap-share-modal .lph-email-chip-box{
    min-height:54px!important;
    padding:7px 10px!important;
}

.lph-roadmap-share-modal .lph-email-chip-box:focus-within,
.lph-roadmap-share-modal .lph-share-field textarea:focus{
    border-color:#9d516c!important;
    background:#fff!important;
    box-shadow:0 0 0 4px rgba(123,29,61,.075)!important;
}

.lph-roadmap-share-modal .lph-email-chip-box input{
    min-height:38px!important;
    padding:7px 4px!important;
    color:#2e353c!important;
    font-size:13px!important;
}

.lph-roadmap-share-modal .lph-email-chip-box span{
    min-height:34px!important;
    padding:7px 9px!important;
    border:1px solid #edd9e1!important;
    border-radius:9px!important;
    background:#f8ebf0!important;
    color:#7b1d3d!important;
    font-size:11px!important;
}

.lph-roadmap-share-modal .lph-share-field textarea{
    min-height:120px!important;
    padding:13px 14px!important;
    color:#2e353c!important;
    font-size:13px!important;
    line-height:1.5!important;
    resize:vertical!important;
}

.lph-roadmap-share-modal .lph-share-link-result{
    display:grid!important;
    gap:6px!important;
    margin-top:3px!important;
    padding:14px 15px!important;
    border:1px solid #cce6d6!important;
    border-radius:12px!important;
    background:linear-gradient(180deg,#f4fbf6,#f0f8f3)!important;
}

.lph-roadmap-share-modal .lph-share-link-result[hidden]{
    display:none!important;
}

.lph-roadmap-share-modal .lph-share-link-result>span{
    color:#237c55!important;
    font-size:10px!important;
    font-weight:850!important;
    letter-spacing:.065em!important;
    text-transform:uppercase!important;
}

.lph-roadmap-share-modal .lph-share-link-result strong{
    display:none!important;
}

.lph-roadmap-share-modal .lph-share-link-result small{
    color:#617269!important;
    font-size:10.5px!important;
    line-height:1.45!important;
}

.lph-roadmap-share-modal .lph-share-status{
    min-height:19px!important;
    margin-top:9px!important;
    color:#6f7880!important;
    font-size:11.5px!important;
    font-weight:680!important;
}

.lph-roadmap-share-modal .lph-share-status.is-success{color:#24805a!important}
.lph-roadmap-share-modal .lph-share-status.is-error{color:#a22143!important}

/* Fixed white footer like the Insurance modal. */
.lph-roadmap-share-modal .lph-share-foot{
    position:relative!important;
    bottom:auto!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:15px!important;
    padding:15px 24px!important;
    border-top:1px solid #e5e9ec!important;
    background:#fff!important;
    color:#31383f!important;
    box-shadow:0 -10px 26px rgba(15,23,42,.045)!important;
}

.lph-roadmap-share-modal .lph-share-security{
    color:#899198!important;
    font-size:10.5px!important;
    white-space:nowrap!important;
}

.lph-roadmap-share-modal .lph-share-foot>div{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:9px!important;
    flex-wrap:wrap!important;
}

@media(max-width:720px){
    .lph-roadmap-share-overlay{
        align-items:flex-start!important;
        padding:10px!important;
    }

    .lph-roadmap-share-modal{
        width:100%!important;
        max-height:calc(100vh - 20px)!important;
        border-radius:16px!important;
    }

    .lph-roadmap-share-modal .lph-global-modal-head{
        min-height:auto!important;
        padding:20px 18px!important;
    }

    .lph-roadmap-share-modal .lph-global-modal-head h2{
        font-size:24px!important;
    }

    .lph-roadmap-share-modal .lph-share-body{
        padding:19px 18px 21px!important;
    }

    .lph-roadmap-share-modal .lph-share-foot{
        align-items:stretch!important;
        flex-direction:column!important;
        padding:13px 16px!important;
    }

    .lph-roadmap-share-modal .lph-share-security{
        white-space:normal!important;
    }

    .lph-roadmap-share-modal .lph-share-foot>div{
        display:grid!important;
        grid-template-columns:1fr 1fr!important;
        width:100%!important;
    }

    .lph-roadmap-share-modal .lph-share-foot [data-lph-send-share]{
        grid-column:1 / -1!important;
    }

    .lph-roadmap-share-modal .lph-share-foot .lph-button{
        width:100%!important;
    }
}


/* =========================================================
   v1.3.4 — Global premium toast notification system
   ========================================================= */

.lph-toast-container{
    position:fixed;
    top:18px;
    right:18px;
    z-index:2147483600;
    display:grid;
    gap:10px;
    width:min(360px,calc(100vw - 28px));
    pointer-events:none;
}

.admin-bar .lph-toast-container{
    top:50px;
}

.lph-toast{
    --lph-toast-accent:#4f6574;
    --lph-toast-soft:#eef4f7;
    position:relative;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 30px;
    align-items:center;
    gap:10px;
    min-height:66px;
    overflow:hidden;
    padding:11px 10px 12px 12px;
    border:1px solid rgba(208,216,221,.94);
    border-radius:14px;
    background:rgba(255,255,255,.98);
    color:#252c32;
    box-shadow:
        0 18px 46px rgba(15,23,42,.14),
        0 3px 10px rgba(15,23,42,.055);
    pointer-events:auto;
    opacity:0;
    transform:translate3d(18px,-4px,0) scale(.985);
    transition:
        opacity 190ms ease,
        transform 260ms cubic-bezier(.16,1,.3,1),
        box-shadow 180ms ease;
    backdrop-filter:blur(12px) saturate(125%);
    -webkit-backdrop-filter:blur(12px) saturate(125%);
}

.lph-toast.is-visible{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
}

.lph-toast.is-leaving{
    opacity:0;
    transform:translate3d(16px,-2px,0) scale(.985);
}

.lph-toast:hover{
    box-shadow:
        0 22px 54px rgba(15,23,42,.17),
        0 4px 12px rgba(15,23,42,.06);
}

.lph-toast-success{
    --lph-toast-accent:#23895d;
    --lph-toast-soft:#eaf7ef;
}

.lph-toast-error{
    --lph-toast-accent:#b12a4f;
    --lph-toast-soft:#faebef;
}

.lph-toast-warning{
    --lph-toast-accent:#ad741f;
    --lph-toast-soft:#fff5df;
}

.lph-toast-info{
    --lph-toast-accent:#426d88;
    --lph-toast-soft:#eaf3f8;
}

.lph-toast-icon{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:11px;
    background:var(--lph-toast-soft);
    color:var(--lph-toast-accent);
}

.lph-toast-icon svg{
    display:block;
    width:20px;
    height:20px;
}

.lph-toast-copy{
    display:grid;
    gap:2px;
    min-width:0;
}

.lph-toast-copy strong{
    color:#20272d;
    font-size:12px;
    line-height:1.25;
    font-weight:800;
}

.lph-toast-copy span{
    overflow-wrap:anywhere;
    color:#626c74;
    font-size:11.5px;
    line-height:1.42;
    font-weight:560;
}

.lph-toast-close{
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    padding:0;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#8c959c;
    cursor:pointer;
    transition:background 150ms ease,color 150ms ease,transform 150ms ease;
}

.lph-toast-close:hover{
    background:#f1f3f4;
    color:#343c43;
    transform:scale(1.03);
}

.lph-toast-close svg{
    width:16px;
    height:16px;
}

.lph-toast-progress{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:3px;
    background:var(--lph-toast-accent);
    transform-origin:left center;
    animation:lphToastProgress var(--lph-toast-duration,3000ms) linear forwards;
    opacity:.88;
}

.lph-toast.is-paused .lph-toast-progress{
    animation-play-state:paused;
}

@keyframes lphToastProgress{
    from{transform:scaleX(1)}
    to{transform:scaleX(0)}
}

@media(max-width:782px){
    .admin-bar .lph-toast-container{
        top:58px;
    }
}

@media(max-width:520px){
    .lph-toast-container,
    .admin-bar .lph-toast-container{
        top:10px;
        right:10px;
        left:10px;
        width:auto;
    }

    .lph-toast{
        grid-template-columns:34px minmax(0,1fr) 28px;
        min-height:62px;
        border-radius:13px;
    }

    .lph-toast-icon{
        width:33px;
        height:33px;
        border-radius:10px;
    }
}

@media(prefers-reduced-motion:reduce){
    .lph-toast{
        transition:opacity 120ms ease!important;
        transform:none!important;
    }

    .lph-toast-progress{
        animation:none!important;
    }
}


/* =========================================================
   v1.3.5 — Tablet responsiveness hardening
   ========================================================= */

@media (min-width:768px) and (max-width:1180px){
  html,body{min-width:0!important;overflow-x:hidden!important}
  .lph-app{width:100%!important;max-width:100%!important;min-width:0!important;height:100dvh!important;min-height:100dvh!important;overflow:hidden!important}
  .lph-app *,.lph-app *::before,.lph-app *::after{min-width:0;box-sizing:border-box}

  /* Sidebar: no clipping; own scroll area. */
  .lph-sidebar{
    width:clamp(220px,25vw,280px)!important;
    min-width:clamp(220px,25vw,280px)!important;
    max-width:clamp(220px,25vw,280px)!important;
    height:100%!important;min-height:0!important;overflow:hidden!important
  }
  .lph-sidebar.is-collapsed,.lph-app.is-sidebar-collapsed .lph-sidebar{
    width:72px!important;min-width:72px!important;max-width:72px!important
  }
  .lph-sidebar-inner,.lph-sidebar-content,.lph-sidebar-nav{
    min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;scrollbar-color:#aeb5bb transparent!important;padding-bottom:18px!important
  }
  .lph-sidebar-inner::-webkit-scrollbar,.lph-sidebar-content::-webkit-scrollbar,.lph-sidebar-nav::-webkit-scrollbar{width:5px!important}
  .lph-sidebar-inner::-webkit-scrollbar-thumb,.lph-sidebar-content::-webkit-scrollbar-thumb,.lph-sidebar-nav::-webkit-scrollbar-thumb{background:#aeb5bb!important;border-radius:999px!important}
  .lph-sidebar a,.lph-sidebar button,.lph-sidebar .lph-nav-item{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .lph-sidebar .lph-nav-label,.lph-sidebar .lph-section-label{font-size:13px!important;line-height:1.35!important}

  /* Stable app shell. */
  .lph-main,.lph-main-panel,.lph-workspace,.lph-content{
    min-width:0!important;min-height:0!important;height:100%!important;overflow:hidden!important
  }

  /* Inner tabs: horizontal touch scrolling with visible thin scrollbar. */
  .lph-tabs,.lph-health-tabs,.lph-inner-tabs,.lph-tab-strip{
    display:flex!important;flex-wrap:nowrap!important;gap:8px!important;
    width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important;
    scrollbar-width:thin!important;scrollbar-color:#b7bec4 transparent!important;
    scroll-snap-type:x proximity!important;padding-bottom:7px!important
  }
  .lph-tabs::-webkit-scrollbar,.lph-health-tabs::-webkit-scrollbar,.lph-inner-tabs::-webkit-scrollbar,.lph-tab-strip::-webkit-scrollbar{height:5px!important}
  .lph-tabs::-webkit-scrollbar-thumb,.lph-health-tabs::-webkit-scrollbar-thumb,.lph-inner-tabs::-webkit-scrollbar-thumb,.lph-tab-strip::-webkit-scrollbar-thumb{background:#b7bec4!important;border-radius:999px!important}
  .lph-tabs>*,.lph-health-tabs>*,.lph-inner-tabs>*,.lph-tab-strip>*{flex:0 0 auto!important;scroll-snap-align:center!important}

  /* Footer stays visible. */
  .lph-footer,.lph-bottom-bar,.lph-course-footer,.lph-footer-actions{
    position:sticky!important;bottom:0!important;z-index:100!important;flex:0 0 auto!important;width:100%!important;
    min-height:58px!important;padding:10px 14px!important;border-top:1px solid #e2e6e9!important;
    background:rgba(255,255,255,.98)!important;box-shadow:0 -10px 28px rgba(15,23,42,.06)!important;
    backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important
  }

  .lph-async-region,[data-lph-section-panel="health"]{min-height:0!important;height:100%!important;overflow:hidden!important}

  /* Course panes: reliable independent scrollbars. */
  .lph-course-shell{width:100%!important;max-width:100%!important;height:100%!important;min-height:0!important;overflow:hidden!important}
  .lph-course-left,.lph-course-right{
    min-width:0!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin!important;scrollbar-color:#aeb5bb transparent!important
  }
  .lph-course-left::-webkit-scrollbar,.lph-course-right::-webkit-scrollbar{width:5px!important}
  .lph-course-left::-webkit-scrollbar-thumb,.lph-course-right::-webkit-scrollbar-thumb{background:#aeb5bb!important;border-radius:999px!important}
  .lph-course-video{width:100%!important;max-width:100%!important;aspect-ratio:16/9!important;min-height:0!important;overflow:hidden!important;border-radius:12px!important}
  .lph-course-video iframe{width:100%!important;height:100%!important}
  .lph-course-label{white-space:normal!important;overflow-wrap:anywhere!important}

  /* Summary/Roadmap scroll properly above footer. */
  .lph-summary-shell{
    height:100%!important;min-height:0!important;overflow-y:auto!important;padding-bottom:86px!important;
    -webkit-overflow-scrolling:touch!important
  }
  .lph-action-summary-grid{grid-template-columns:1fr!important}

  /* Tablet modal sizing. */
  .lph-global-modal,.lph-insurance-modal,.lph-roadmap-share-modal{
    width:min(92vw,820px)!important;max-height:calc(100dvh - 32px)!important
  }
  .lph-global-modal-body,.lph-insurance-edit-scroll,.lph-roadmap-share-modal .lph-share-body{
    min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important
  }
}

/* Tablet portrait: stacked video/form layout. */
@media (min-width:768px) and (max-width:900px) and (orientation:portrait){
  .lph-sidebar{width:220px!important;min-width:220px!important;max-width:220px!important}

  .lph-course-shell,
  .lph-app.is-nutrition-workspace .lph-course-shell,
  .lph-app.is-exercise-workspace .lph-course-shell,
  .lph-app.is-medical-team-workspace .lph-course-shell,
  .lph-app.is-insurance-workspace .lph-course-shell,
  .lph-app.is-social-workspace .lph-course-shell{
    display:block!important;height:100%!important;overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:78px!important
  }

  .lph-course-left,.lph-course-right,
  .lph-app.is-nutrition-workspace .lph-course-left,.lph-app.is-nutrition-workspace .lph-course-right,
  .lph-app.is-exercise-workspace .lph-course-left,.lph-app.is-exercise-workspace .lph-course-right,
  .lph-app.is-medical-team-workspace .lph-course-left,.lph-app.is-medical-team-workspace .lph-course-right,
  .lph-app.is-insurance-workspace .lph-course-left,.lph-app.is-insurance-workspace .lph-course-right,
  .lph-app.is-social-workspace .lph-course-left,.lph-app.is-social-workspace .lph-course-right{
    width:100%!important;height:auto!important;min-height:0!important;overflow:visible!important;border-right:0!important
  }

  .lph-course-left{border-bottom:1px solid #dde2e5!important}
  .lph-course-chapter{grid-template-columns:52px 24px minmax(0,1fr)!important;gap:8px!important;padding:10px 11px!important}

  .lph-course-form-actions{
    position:sticky!important;bottom:0!important;z-index:40!important;
    margin:12px -14px -14px!important;padding:12px 14px!important;
    border-top:1px solid #e5e9ec!important;background:rgba(255,255,255,.98)!important;
    box-shadow:0 -8px 22px rgba(15,23,42,.05)!important
  }

  .lph-roadmap-hero{grid-template-columns:1fr!important;align-items:start!important}
  .lph-export-wrap{justify-self:start!important}
}

/* Tablet landscape: keep premium split view, but give each side its own scroll. */
@media (min-width:901px) and (max-width:1180px) and (orientation:landscape){
  .lph-sidebar{width:232px!important;min-width:232px!important;max-width:232px!important}

  .lph-course-shell,
  .lph-app.is-nutrition-workspace .lph-course-shell,
  .lph-app.is-exercise-workspace .lph-course-shell,
  .lph-app.is-medical-team-workspace .lph-course-shell,
  .lph-app.is-insurance-workspace .lph-course-shell,
  .lph-app.is-social-workspace .lph-course-shell{
    display:grid!important;grid-template-columns:minmax(0,48%) minmax(0,52%)!important;
    height:100%!important;min-height:0!important;overflow:hidden!important
  }

  .lph-course-left{padding:12px!important}
  .lph-course-right{padding:14px 16px 76px!important}

  .lph-course-form-actions{
    position:sticky!important;bottom:0!important;z-index:40!important;
    margin:14px -16px -76px!important;padding:12px 16px 14px!important;
    border-top:1px solid #e5e9ec!important;background:rgba(255,255,255,.98)!important;
    box-shadow:0 -8px 22px rgba(15,23,42,.05)!important
  }
}

/* Covers 110–125% zoom and shorter tablet/small-laptop viewports. */
@media (min-width:1024px) and (max-width:1366px) and (max-height:900px){
  .lph-app{height:100dvh!important;min-height:100dvh!important}
  .lph-sidebar{overflow:hidden!important}
  .lph-sidebar-inner,.lph-sidebar-content{min-height:0!important;overflow-y:auto!important}
  .lph-course-right{padding-bottom:78px!important}
  .lph-summary-shell{padding-bottom:88px!important}
}

/* Touch targets. */
@media (pointer:coarse) and (min-width:768px) and (max-width:1180px){
  .lph-button,.lph-course-chapter,.lph-tabs button,.lph-health-tabs button,.lph-inner-tabs button,.lph-sidebar button,.lph-sidebar a{
    min-height:42px!important
  }
  .lph-sidebar-toggle,.lph-global-modal-close,.lph-modal-close{
    min-width:42px!important;min-height:42px!important
  }
}


/* =========================================================
   v1.3.6 — Tablet inner-content scrolling fix
   Fixes Background + all Health tabs not exposing a usable
   inner scrollbar while keeping the bottom navigation visible.
   ========================================================= */

@media (min-width:768px) and (max-width:1180px){

    /* The middle grid row owns the available viewport space. */
    .lph-main{
        height:100dvh!important;
        min-height:100dvh!important;
        overflow:hidden!important;
        grid-template-rows:auto minmax(0,1fr) auto!important;
    }

    /* The actual footer class used by the Health shell. */
    .lph-footer-nav{
        position:relative!important;
        z-index:120!important;
        flex:0 0 auto!important;
        min-height:58px!important;
        padding:10px 16px!important;
        background:rgba(255,255,255,.985)!important;
        border-top:1px solid #e2e6e9!important;
        box-shadow:0 -10px 28px rgba(15,23,42,.065)!important;
        backdrop-filter:blur(14px)!important;
        -webkit-backdrop-filter:blur(14px)!important;
    }

    .lph-footer-nav .lph-button{
        min-height:40px!important;
        padding:9px 15px!important;
    }

    /*
     * Do not make .lph-content itself the scroll container on tablet.
     * It is the viewport for the currently active Health tab.
     */
    .lph-content{
        display:block!important;
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        overflow:hidden!important;
    }

    .lph-content > [data-lph-section-panel="health"]{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        overflow:hidden!important;
    }

    /*
     * Default Health-tab behavior:
     * Background, Introduction and any standard tab content scroll here.
     */
    .lph-async-region{
        width:100%!important;
        height:100%!important;
        min-height:0!important;
        max-height:100%!important;
        overflow-y:scroll!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
        scrollbar-gutter:stable!important;
        scrollbar-width:thin!important;
        scrollbar-color:#9fa8af #edf0f2!important;
        padding-right:4px!important;
    }

    .lph-async-region::-webkit-scrollbar{
        width:7px!important;
    }

    .lph-async-region::-webkit-scrollbar-track{
        background:#edf0f2!important;
        border-radius:999px!important;
    }

    .lph-async-region::-webkit-scrollbar-thumb{
        min-height:44px!important;
        background:#9fa8af!important;
        border:2px solid #edf0f2!important;
        border-radius:999px!important;
    }

    .lph-async-region::-webkit-scrollbar-thumb:hover{
        background:#7f8991!important;
    }

    /* Background native form must grow inside the async scroller. */
    .lph-native-form-view{
        width:100%!important;
        max-width:100%!important;
        min-height:min-content!important;
        margin:0 auto!important;
        padding-bottom:20px!important;
    }

    .lph-native-form{
        min-height:0!important;
    }

    .lph-native-form-actions{
        position:sticky!important;
        bottom:0!important;
        z-index:35!important;
        margin-top:18px!important;
        border-top:1px solid #e3e7ea!important;
        background:rgba(255,255,255,.98)!important;
        box-shadow:0 -8px 24px rgba(15,23,42,.045)!important;
    }

    /*
     * Course tabs use two dedicated pane scrollers instead of the outer
     * async-region scrollbar.
     */
    .lph-app.is-nutrition-workspace .lph-async-region,
    .lph-app.is-exercise-workspace .lph-async-region,
    .lph-app.is-medical-team-workspace .lph-async-region,
    .lph-app.is-insurance-workspace .lph-async-region,
    .lph-app.is-social-workspace .lph-async-region{
        overflow:hidden!important;
        padding-right:0!important;
        scrollbar-gutter:auto!important;
    }

    .lph-app.is-nutrition-workspace .lph-course-shell,
    .lph-app.is-exercise-workspace .lph-course-shell,
    .lph-app.is-medical-team-workspace .lph-course-shell,
    .lph-app.is-insurance-workspace .lph-course-shell,
    .lph-app.is-social-workspace .lph-course-shell{
        width:100%!important;
        max-width:100%!important;
        height:100%!important;
        min-height:0!important;
        max-height:100%!important;
        overflow:hidden!important;
    }

    .lph-app.is-nutrition-workspace .lph-course-left,
    .lph-app.is-nutrition-workspace .lph-course-right,
    .lph-app.is-exercise-workspace .lph-course-left,
    .lph-app.is-exercise-workspace .lph-course-right,
    .lph-app.is-medical-team-workspace .lph-course-left,
    .lph-app.is-medical-team-workspace .lph-course-right,
    .lph-app.is-insurance-workspace .lph-course-left,
    .lph-app.is-insurance-workspace .lph-course-right,
    .lph-app.is-social-workspace .lph-course-left,
    .lph-app.is-social-workspace .lph-course-right{
        height:100%!important;
        min-height:0!important;
        max-height:100%!important;
        overflow-y:scroll!important;
        overflow-x:hidden!important;
        overscroll-behavior:contain!important;
        -webkit-overflow-scrolling:touch!important;
        scrollbar-gutter:stable!important;
        scrollbar-width:thin!important;
        scrollbar-color:#9fa8af #edf0f2!important;
    }

    .lph-course-left::-webkit-scrollbar,
    .lph-course-right::-webkit-scrollbar{
        width:7px!important;
    }

    .lph-course-left::-webkit-scrollbar-track,
    .lph-course-right::-webkit-scrollbar-track{
        background:#edf0f2!important;
        border-radius:999px!important;
    }

    .lph-course-left::-webkit-scrollbar-thumb,
    .lph-course-right::-webkit-scrollbar-thumb{
        min-height:44px!important;
        background:#9fa8af!important;
        border:2px solid #edf0f2!important;
        border-radius:999px!important;
    }

    /*
     * Summary tabs already have their own inner scroller. Keep the outer
     * region fixed so we never get a double scrollbar.
     */
    .lph-app.is-summary-workspace .lph-async-region{
        overflow:hidden!important;
        padding-right:0!important;
    }

    .lph-app.is-summary-workspace .lph-summary-shell{
        height:100%!important;
        max-height:100%!important;
        min-height:0!important;
        overflow-y:scroll!important;
        overflow-x:hidden!important;
        scrollbar-gutter:stable!important;
        scrollbar-width:thin!important;
        scrollbar-color:#9fa8af #edf0f2!important;
    }

    .lph-app.is-summary-workspace .lph-summary-shell::-webkit-scrollbar{
        width:7px!important;
    }

    .lph-app.is-summary-workspace .lph-summary-shell::-webkit-scrollbar-track{
        background:#edf0f2!important;
        border-radius:999px!important;
    }

    .lph-app.is-summary-workspace .lph-summary-shell::-webkit-scrollbar-thumb{
        min-height:44px!important;
        background:#9fa8af!important;
        border:2px solid #edf0f2!important;
        border-radius:999px!important;
    }
}

/* Portrait tablets:
   one single inner course scroller is more reliable than two nested scrollers. */
@media (min-width:768px) and (max-width:900px) and (orientation:portrait){

    .lph-app.is-nutrition-workspace .lph-async-region,
    .lph-app.is-exercise-workspace .lph-async-region,
    .lph-app.is-medical-team-workspace .lph-async-region,
    .lph-app.is-insurance-workspace .lph-async-region,
    .lph-app.is-social-workspace .lph-async-region{
        overflow-y:scroll!important;
        overflow-x:hidden!important;
        scrollbar-gutter:stable!important;
        padding-right:4px!important;
    }

    .lph-app.is-nutrition-workspace .lph-course-shell,
    .lph-app.is-exercise-workspace .lph-course-shell,
    .lph-app.is-medical-team-workspace .lph-course-shell,
    .lph-app.is-insurance-workspace .lph-course-shell,
    .lph-app.is-social-workspace .lph-course-shell{
        display:block!important;
        height:auto!important;
        min-height:100%!important;
        max-height:none!important;
        overflow:visible!important;
        padding-bottom:72px!important;
    }

    .lph-app.is-nutrition-workspace .lph-course-left,
    .lph-app.is-nutrition-workspace .lph-course-right,
    .lph-app.is-exercise-workspace .lph-course-left,
    .lph-app.is-exercise-workspace .lph-course-right,
    .lph-app.is-medical-team-workspace .lph-course-left,
    .lph-app.is-medical-team-workspace .lph-course-right,
    .lph-app.is-insurance-workspace .lph-course-left,
    .lph-app.is-insurance-workspace .lph-course-right,
    .lph-app.is-social-workspace .lph-course-left,
    .lph-app.is-social-workspace .lph-course-right{
        width:100%!important;
        height:auto!important;
        max-height:none!important;
        overflow:visible!important;
        scrollbar-gutter:auto!important;
    }
}

/* Landscape tablet:
   explicit height containment keeps left/right pane scrollbars visible. */
@media (min-width:901px) and (max-width:1180px) and (orientation:landscape){

    .lph-app.is-nutrition-workspace .lph-course-shell,
    .lph-app.is-exercise-workspace .lph-course-shell,
    .lph-app.is-medical-team-workspace .lph-course-shell,
    .lph-app.is-insurance-workspace .lph-course-shell,
    .lph-app.is-social-workspace .lph-course-shell{
        margin:0!important;
        grid-template-columns:minmax(0,48%) minmax(0,52%)!important;
    }
}


/* =========================================================
   v1.4.0 — LifePlan Core module integration
   Core owns the global sidebar/header/footer.
   Health owns only the inner Health tabs + workspace.
   ========================================================= */

.lph-app.lph-core-health-module{
	display:block!important;
	grid-template-columns:none!important;
	width:100%!important;
	max-width:none!important;
	height:100%!important;
	min-height:0!important;
	margin:0!important;
	overflow:hidden!important;
	background:var(--lph-color-page)!important;
}

.lph-core-health-module .lph-main{
	display:grid!important;
	grid-template-rows:auto minmax(0,1fr)!important;
	width:100%!important;
	height:100%!important;
	min-height:0!important;
	overflow:hidden!important;
	background:var(--lph-color-page)!important;
}

.lph-core-health-module .lph-top{
	position:relative!important;
	z-index:30!important;
	flex:0 0 auto!important;
}

.lph-core-health-module .lph-content{
	width:100%!important;
	height:100%!important;
	min-height:0!important;
	overflow-y:auto!important;
	overflow-x:hidden!important;
	scrollbar-gutter:stable!important;
}

.lph-core-health-module .lph-core-nav-bridge{
	display:none!important;
}

/* There is no Health-owned outer sidebar/footer in Core mode. */
.lph-core-health-module .lph-sidebar,
.lph-core-health-module .lph-footer-nav{
	display:none!important;
}

/* Keep the Health workspace flush inside the Core content frame. */
.lph-core-health-module .lph-tab-panel,
.lph-core-health-module .lph-section-panel,
.lph-core-health-module [data-lph-section-panel="health"]{
	width:100%!important;
	max-width:none!important;
}

/* Tablet: let the existing Health tablet logic manage only its inner workspace. */
@media (min-width:768px) and (max-width:1180px){
	.lph-app.lph-core-health-module,
	.lph-core-health-module .lph-main{
		height:100%!important;
		min-height:0!important;
		overflow:hidden!important;
	}

	.lph-core-health-module .lph-content{
		height:100%!important;
		min-height:0!important;
	}
}

/* Mobile Core module stays within the Core application flow. */
@media(max-width:760px){
	.lph-app.lph-core-health-module{
		height:auto!important;
		min-height:0!important;
		overflow:visible!important;
	}

	.lph-core-health-module .lph-main{
		height:auto!important;
		min-height:0!important;
		overflow:visible!important;
	}

	.lph-core-health-module .lph-content{
		height:auto!important;
		min-height:60vh!important;
		overflow:visible!important;
	}
}


/* =========================================================
   v1.4.1 — LifePlan Core universal design bridge
   Health preserves its specialized learning layout while
   inheriting the global LifePlan brand/type/component tokens.
   ========================================================= */
.lifeplan-app .lph-core-health-module{
	--lph-font-family:var(--lp-font-family,Inter,system-ui,sans-serif)!important;
	--lph-color-primary:var(--lp-primary,#7b1d3d)!important;
	--lph-color-primary-dark:var(--lp-primary-dark,#64172f)!important;
	font-family:var(--lp-font-family,inherit)!important;
	color:var(--lp-text,#242a2f)!important;
}
.lifeplan-app .lph-core-health-module .lph-content{
	font-size:var(--lp-body-size,15px);
}
.lifeplan-app .lph-core-health-module h1,
.lifeplan-app .lph-core-health-module .lph-h1{
	font-size:var(--lp-title-size,38px)!important;
	font-weight:var(--lp-title-weight,500)!important;
}
.lifeplan-app .lph-core-health-module h2,
.lifeplan-app .lph-core-health-module .lph-h2{
	font-size:var(--lp-section-size,18px);
	font-weight:var(--lp-section-weight,700);
}
.lifeplan-app .lph-core-health-module input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.lifeplan-app .lph-core-health-module select{
	min-height:var(--lp-field-height,44px);
	border-radius:var(--lp-field-radius,10px);
}
.lifeplan-app .lph-core-health-module textarea{
	border-radius:var(--lp-field-radius,10px);
}
.lifeplan-app .lph-core-health-module .lph-card,
.lifeplan-app .lph-core-health-module .lph-course-card,
.lifeplan-app .lph-core-health-module .lph-form-card{
	border-radius:var(--lp-card-radius,16px);
}


/* =========================================================
   v1.4.3 — Core full-canvas paint lock
   Prevents any transient half-width Health render.
   ========================================================= */

/* Core's content frame is position:relative. Pin the Health module to all
   four edges so legacy standalone/grid rules can never place it in column 2. */
.lifeplan-content.is-full-bleed > .lph-core-health-module,
.lifeplan-content[data-lifeplan-layout="full"] > .lph-core-health-module{
	position:absolute!important;
	inset:0!important;
	display:block!important;
	width:auto!important;
	max-width:none!important;
	min-width:0!important;
	height:auto!important;
	min-height:0!important;
	margin:0!important;
	transform:none!important;
	justify-self:stretch!important;
	align-self:stretch!important;
	overflow:hidden!important;
}

.lifeplan-content.is-full-bleed > .lph-core-health-module > .lph-main,
.lifeplan-content[data-lifeplan-layout="full"] > .lph-core-health-module > .lph-main{
	position:absolute!important;
	inset:0!important;
	width:auto!important;
	max-width:none!important;
	height:auto!important;
	min-height:0!important;
	margin:0!important;
	transform:none!important;
}

/* Never animate the Health root's dimensions/position in Core mode. */
.lifeplan-app .lph-core-health-module,
.lifeplan-app .lph-core-health-module .lph-main,
.lifeplan-app .lph-core-health-module .lph-top{
	transition-property:background,color,border-color,box-shadow,opacity!important;
}

/* Inner Health course split remains exactly 50/50; only the outer module is
   locked to the full Core canvas. */
.lifeplan-app .lph-core-health-module .lph-top,
.lifeplan-app .lph-core-health-module .lph-health-header,
.lifeplan-app .lph-core-health-module .lph-content,
.lifeplan-app .lph-core-health-module [data-lph-section-panel="health"],
.lifeplan-app .lph-core-health-module .lph-async-region{
	width:100%!important;
	max-width:none!important;
	min-width:0!important;
	margin-left:0!important;
	margin-right:0!important;
}


/* ==========================================================================
   v1.5.0 — LifePlan Core UI Kit bridge
   In Core mode, shared visual language comes from LifePlan Core. Health keeps
   only its specialist course/workspace layout. Standalone shortcode mode
   continues to use the legacy Health tokens.
   ========================================================================== */
.lph-core-health-module{
    --lph-font-family:var(--lp-font-family,Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);
    --lph-color-primary:var(--lp-primary,#7b1d3d);
    --lph-color-primary-strong:var(--lp-primary-dark,#64172f);
    --lph-color-primary-soft:color-mix(in srgb,var(--lp-primary,#7b1d3d) 8%,#fff);
    --lph-color-success:var(--lp-success,#2f7d57);
    --lph-color-success-soft:var(--lp-success-bg,#edf8f1);
    --lph-color-text:var(--lp-text,#242a2f);
    --lph-color-muted:var(--lp-muted,#6f7881);
    --lph-color-border:var(--lp-border,#dde3e7);
    --lph-color-border-strong:color-mix(in srgb,var(--lp-border,#dde3e7) 82%,#9aa5ad);
    --lph-color-surface:var(--lp-surface,#fff);
    --lph-color-page:var(--lp-page,#f4f6f7);
    --lph-radius-sm:var(--lp-field-radius,10px);
    --lph-radius-md:12px;
    --lph-radius-lg:var(--lp-card-radius,16px);
    --lph-shadow-card:var(--lp-shadow-surface,0 8px 26px rgba(15,23,42,.055));
    --lph-font-h1:var(--lp-title-size,38px);
    --lph-font-h2:var(--lp-section-size,18px);
    --lph-font-body:var(--lp-body-size,15px);
    --lph-font-label:var(--lp-label-size,12px);
    --lph-font-sidebar:var(--lp-body-size,15px);
    --lph-font-tabs:var(--lp-label-size,12px);
    --lph-weight-h1:var(--lp-title-weight,500);
    --lph-weight-h2:var(--lp-section-weight,700);
    --lph-weight-body:var(--lp-body-weight,400);
    --lph-weight-label:var(--lp-label-weight,600);
    --lph-weight-sidebar:var(--lp-label-weight,600);
    --lph-weight-tabs:var(--lp-label-weight,600);
}

/* Shared UI Kit owns general controls in the embedded Core application. */
.lph-core-health-module button.lp-ui-button{
    font-family:var(--lp-font-family,inherit);
}
.lph-core-health-module .lph-add-row.lp-ui-button--add,
.lph-core-health-module .lph-remove-row.lp-ui-button--secondary{
    min-height:38px;
}
.lph-core-health-module .lp-ui-skeleton{
    width:100%;
    min-height:360px;
}

/* Native Health fields inherit the shared Core control geometry while their
   question/choice layouts remain Health-specific. */
.lph-core-health-module .lph-native-field .lp-ui-control,
.lph-core-health-module .lph-medical-details-grid .lp-ui-control,
.lph-core-health-module .lph-insurance-field .lp-ui-control{
    font-family:var(--lp-font-family,inherit);
    border-radius:var(--lp-field-radius,10px);
}

/* Specialized Health modals remain domain-specific, but their close control
   follows the same restrained glass treatment used by Core. */
body .lph-global-modal-close.lp-ui-modal__close,
body .lph-modal-close.lp-ui-modal__close{
    appearance:none;
    display:grid;
    place-items:center;
    width:38px;
    min-width:38px;
    height:38px;
    min-height:38px;
    padding:0;
    border:1px solid rgba(255,255,255,.30);
    border-radius:10px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font:400 21px/1 var(--lp-font-family,inherit);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
body .lph-global-modal-close.lp-ui-modal__close:hover,
body .lph-modal-close.lp-ui-modal__close:hover{
    border-color:rgba(255,255,255,.48);
    background:rgba(255,255,255,.16);
    color:#fff;
}
body .lph-global-modal-close.lp-ui-modal__close:focus-visible,
body .lph-modal-close.lp-ui-modal__close:focus-visible{
    outline:0;
    box-shadow:0 0 0 3px rgba(255,255,255,.2);
}


/* =========================================================
   v1.5.1 — Core UI Kit deep integration (safe pass)
   ========================================================= */

/* Background form: Core owns surfaces/controls; Health owns domain layout. */
.lph-core-health-module .lph-native-form-view{
	background:transparent!important;
	border:0!important;
	outline:0!important;
	border-radius:0!important;
	box-shadow:none!important;
	overflow:visible!important;
}
.lph-core-health-module .lph-native-heading{
	padding:8px 2px 16px!important;
	border:0!important;
	background:transparent!important;
}
.lph-core-health-module .lph-native-form{
	padding:0!important;
}
.lph-core-health-module .lph-native-section.lp-ui-card{
	margin:0 0 var(--lp-component-gap,14px)!important;
	padding:var(--lp-card-padding,18px)!important;
	border:1px solid var(--lp-ui-border,#e3e8eb)!important;
	border-radius:var(--lp-card-radius,14px)!important;
	background:var(--lp-card-bg,#fff)!important;
	box-shadow:var(--lp-shadow-card,0 8px 24px rgba(15,23,42,.045))!important;
}
.lph-core-health-module .lph-native-section-head{
	margin-bottom:14px!important;
}
.lph-core-health-module .lph-native-section-head h2{
	color:var(--lp-text,#242a2f)!important;
	font-family:var(--lp-font-family,inherit)!important;
	font-size:var(--lp-section-size,17px)!important;
	font-weight:var(--lp-section-weight,700)!important;
}
.lph-core-health-module .lph-native-section-head p,
.lph-core-health-module .lph-native-save-note{
	color:var(--lp-muted,#6f7881)!important;
	font-family:var(--lp-font-family,inherit)!important;
	font-size:var(--lp-body-size,14px)!important;
	font-weight:var(--lp-body-weight,400)!important;
}
.lph-core-health-module .lph-native-label,
.lph-core-health-module .lp-ui-field__label{
	color:var(--lp-text,#242a2f)!important;
	font-family:var(--lp-font-family,inherit)!important;
	font-size:var(--lp-label-size,12px)!important;
	font-weight:var(--lp-label-weight,600)!important;
}
.lph-core-health-module .lph-native-field .lp-ui-control{
	min-height:var(--lp-field-height,44px)!important;
	padding:9px 11px!important;
	border:1px solid var(--lp-ui-border,#d7dde2)!important;
	border-radius:var(--lp-field-radius,10px)!important;
	background:var(--lp-surface-subtle,#fbfcfd)!important;
	color:var(--lp-text,#242a2f)!important;
	font-family:var(--lp-font-family,inherit)!important;
	font-size:var(--lp-body-size,14px)!important;
	font-weight:var(--lp-body-weight,400)!important;
	box-shadow:none!important;
	transform:none!important;
}
.lph-core-health-module .lph-native-field .lp-ui-control:hover{
	border-color:#cbd3d9!important;
	background:#fff!important;
}
.lph-core-health-module .lph-native-field .lp-ui-control:focus{
	border-color:color-mix(in srgb,var(--lp-primary,#7b1d3d) 56%,#fff)!important;
	background:#fff!important;
	box-shadow:0 0 0 4px var(--lp-ui-focus,rgba(123,29,61,.10))!important;
	transform:none!important;
}
.lph-core-health-module .lph-native-form-actions{
	padding:8px 0 0!important;
}

/* Insurance record/actions use the same shared LifePlan action language. */
.lph-core-health-module .lph-insurance-add-new.lp-ui-button--add,
.lph-core-health-module .lph-insurance-details-button.lp-ui-button--secondary{
	font-family:var(--lp-font-family,inherit)!important;
}
.lph-core-health-module .lph-insurance-plan-card{
	border-color:var(--lp-ui-border,#e3e8eb)!important;
	border-radius:var(--lp-card-radius,14px)!important;
	background:var(--lp-card-bg,#fff)!important;
	box-shadow:var(--lp-shadow-card,0 8px 24px rgba(15,23,42,.045))!important;
}

/* One compact insurance-modal adapter replaces the historical v0.9.2/v0.9.3
   global modal implementations. Core supplies the shared modal visual system. */
.lph-insurance-overlay.lp-ui-modal{
	position:fixed!important;
	inset:0!important;
	z-index:2147483500!important;
	display:grid!important;
	place-items:center!important;
	padding:22px!important;
	overflow:auto!important;
	background:rgba(17,21,26,.56)!important;
	backdrop-filter:blur(9px) saturate(110%)!important;
	-webkit-backdrop-filter:blur(9px) saturate(110%)!important;
}
.lph-insurance-overlay .lp-ui-modal__dialog{
	width:min(900px,calc(100vw - 44px))!important;
	max-height:calc(100dvh - 44px)!important;
	margin:auto!important;
	overflow:hidden!important;
	border:1px solid rgba(255,255,255,.72)!important;
	border-radius:18px!important;
	background:#fff!important;
	box-shadow:var(--lp-shadow-floating,0 24px 64px rgba(15,23,42,.22))!important;
}
.lph-insurance-overlay .lp-ui-modal__header{
	position:relative!important;
	top:auto!important;
	flex:0 0 auto!important;
	min-height:0!important;
	padding:18px 20px!important;
	padding-right:72px!important;
	border:0!important;
	background:var(--lp-primary,#7b1d3d)!important;
	color:#fff!important;
	backdrop-filter:none!important;
	-webkit-backdrop-filter:none!important;
}
.lph-insurance-overlay .lp-ui-modal__header h2,
.lph-insurance-overlay .lp-ui-modal__header p,
.lph-insurance-overlay .lp-ui-modal__header .lph-insurance-modal-kicker{
	color:#fff!important;
}
.lph-insurance-overlay .lp-ui-modal__header p,
.lph-insurance-overlay .lp-ui-modal__header .lph-insurance-modal-kicker{
	opacity:.78!important;
}
.lph-insurance-overlay .lp-ui-modal__header .lp-ui-modal__close{
	position:absolute!important;
	top:50%!important;
	right:20px!important;
	transform:translateY(-50%)!important;
}
.lph-insurance-overlay .lp-ui-modal__header .lp-ui-modal__close:hover{
	transform:translateY(calc(-50% - 1px))!important;
}
.lph-insurance-overlay .lp-ui-modal__body{
	flex:1 1 auto!important;
	min-height:0!important;
	overflow:auto!important;
	padding:20px!important;
	background:#fff!important;
}
.lph-insurance-overlay .lp-ui-modal__footer{
	flex:0 0 auto!important;
	position:relative!important;
	bottom:auto!important;
	margin:0!important;
	padding:13px 18px!important;
	border-top:1px solid #e4e8eb!important;
	background:#fff!important;
	color:var(--lp-text,#242a2f)!important;
	box-shadow:0 -8px 24px rgba(15,23,42,.045)!important;
}
.lph-insurance-overlay .lph-insurance-modal-footnote,
.lph-insurance-overlay .lph-global-modal-footnote{
	color:var(--lp-muted,#6f7881)!important;
}
.lph-insurance-overlay .lph-insurance-details-form--fixed{
	flex:1 1 auto!important;
	min-height:0!important;
	display:flex!important;
	flex-direction:column!important;
	overflow:hidden!important;
	padding:0!important;
}
.lph-insurance-overlay .lph-insurance-edit-scroll{
	padding:20px!important;
}

/* Dynamic insurance form fields now inherit the Core field controls. */
.lph-insurance-overlay .lph-insurance-field.lp-ui-field{
	display:grid;
	gap:7px;
}
.lph-insurance-overlay .lph-insurance-field .lp-ui-control{
	width:100%;
	min-height:var(--lp-field-height,44px);
}

/* Share modal uses Core header/body/footer classes while retaining the
   roadmap-specific content treatment and security messaging. */
.lph-roadmap-share-overlay .lp-ui-modal__header{
	color:#fff;
}
.lph-roadmap-share-overlay .lp-ui-modal__body{
	min-height:0;
}
.lph-roadmap-share-overlay .lph-share-field.lp-ui-field{
	display:grid;
	gap:7px;
}
.lph-roadmap-share-overlay .lph-share-field .lp-ui-control{
	width:100%;
}

@media(max-width:700px){
	.lph-insurance-overlay.lp-ui-modal{padding:10px!important}
	.lph-insurance-overlay .lp-ui-modal__dialog{
		width:100%!important;
		max-height:calc(100dvh - 20px)!important;
	}
	.lph-insurance-overlay .lp-ui-modal__header{padding:16px 68px 16px 16px!important}
	.lph-insurance-overlay .lp-ui-modal__header .lp-ui-modal__close{right:15px!important}
	.lph-insurance-overlay .lp-ui-modal__body,
	.lph-insurance-overlay .lph-insurance-edit-scroll{padding:16px!important}
}


/* =========================================================
   v1.5.2 — Core Background edge cleanup
   ========================================================= */
/* The outer Background view is part of the Core canvas, not a card.
   Remove the legacy one-pixel "physical edge" outline on all four sides.
   Individual questionnaire sections remain proper Core cards. */
.lifeplan-content[data-lifeplan-layout="full"] .lph-core-health-module .lph-native-form-view,
.lifeplan-content.is-full-bleed .lph-core-health-module .lph-native-form-view{
	border:none!important;
	outline:none!important;
	box-shadow:none!important;
}


/* =========================================================
   v1.5.4 — Action Plan + Roadmap Core UI Kit integration
   ========================================================= */

.lph-core-health-module .lph-action-plan-shell,
.lph-core-health-module .lph-roadmap-shell{
    background:var(--lp-surface-subtle,#f6f8f9)!important;
    font-family:var(--lp-font-family,inherit)!important;
}

/* Action Plan overview remains a purpose-built composition, but its surface
   is now governed by the shared Core card design tokens. */
.lph-core-health-module .lph-plan-overview.lp-ui-card{
    border-color:var(--lp-ui-border,#e3e8eb)!important;
    border-radius:var(--lp-card-radius,16px)!important;
    background:linear-gradient(
        135deg,
        var(--lp-card-bg,#fff) 0%,
        var(--lp-card-bg,#fff) 62%,
        color-mix(in srgb,var(--lp-primary,#7b1d3d) 4%,#fff) 100%
    )!important;
    box-shadow:var(--lp-shadow-card,0 8px 24px rgba(15,23,42,.045))!important;
}
.lph-core-health-module .lph-plan-overview h1,
.lph-core-health-module .lph-roadmap-banner h1{
    font-family:var(--lp-font-family,inherit)!important;
    font-weight:var(--lp-title-weight,500)!important;
}
.lph-core-health-module .lph-plan-overview p,
.lph-core-health-module .lph-roadmap-banner p{
    font-family:var(--lp-font-family,inherit)!important;
    font-weight:var(--lp-body-weight,400)!important;
}
.lph-core-health-module .lph-plan-eyebrow{
    font-family:var(--lp-font-family,inherit)!important;
}

/* Commitment and journey cards share the same Core surface language. */
.lph-core-health-module .lph-plan-area.lp-ui-card,
.lph-core-health-module .lph-roadmap-stop-card.lp-ui-card{
    border-color:var(--lp-ui-border,#e3e8eb)!important;
    border-radius:var(--lp-card-radius,16px)!important;
    background:var(--lp-card-bg,#fff)!important;
    box-shadow:var(--lp-shadow-card,0 8px 24px rgba(15,23,42,.045))!important;
}
.lph-core-health-module .lph-plan-area.lp-ui-card:hover{
    transform:translateY(-1px)!important;
    border-color:color-mix(in srgb,var(--lp-ui-border,#e3e8eb) 72%,var(--lp-primary,#7b1d3d))!important;
    box-shadow:0 12px 30px rgba(15,23,42,.065)!important;
}
.lph-core-health-module .lph-plan-area-head{
    border-bottom-color:var(--lp-ui-border,#edf0f2)!important;
    background:var(--lp-surface-subtle,#fbfcfd)!important;
}
.lph-core-health-module .lph-plan-area-head h2,
.lph-core-health-module .lph-roadmap-stop-head h2{
    font-family:var(--lp-font-family,inherit)!important;
    font-weight:var(--lp-section-weight,700)!important;
}
.lph-core-health-module .lph-plan-task p,
.lph-core-health-module .lph-roadmap-actions p,
.lph-core-health-module .lph-roadmap-stop-card>p{
    font-family:var(--lp-font-family,inherit)!important;
    font-weight:var(--lp-body-weight,400)!important;
}

/* The Roadmap count badge is a Core badge; keep only Roadmap-specific sizing. */
.lph-core-health-module .lph-roadmap-stop-head>.lp-ui-badge{
    min-height:24px!important;
    padding:4px 8px!important;
    border-color:var(--lp-ui-border,#dfe5e9)!important;
    background:var(--lp-surface-subtle,#f5f6f7)!important;
    color:var(--lp-muted,#6f7881)!important;
}

/* Empty Action Plan/Roadmap states now use the same Core empty-state surface. */
.lph-core-health-module .lph-summary-empty.lp-ui-empty-state{
    min-height:220px!important;
    border:1px dashed var(--lp-ui-border,#d5dbe0)!important;
    border-radius:var(--lp-card-radius,16px)!important;
    background:var(--lp-card-bg,#fff)!important;
    box-shadow:none!important;
}
.lph-core-health-module .lph-summary-empty.lp-ui-empty-state>span{
    color:var(--lp-muted,#6f7881)!important;
    font-size:var(--lp-body-size,14px)!important;
    line-height:1.5!important;
}

/* Export is an application action, so Core owns hover/focus/press behavior.
   The Roadmap banner keeps the white secondary-button treatment. */
.lph-core-health-module .lph-export-button.lp-ui-button{
    font-family:var(--lp-font-family,inherit)!important;
}
.lph-core-health-module .lph-roadmap-banner .lph-export-button.lp-ui-button--secondary{
    border-color:rgba(255,255,255,.38)!important;
    background:#fff!important;
    color:var(--lp-primary,#7b1d3d)!important;
    box-shadow:none!important;
}
.lph-core-health-module .lph-roadmap-banner .lph-export-button.lp-ui-button--secondary:hover{
    border-color:#fff!important;
    background:#faf5f7!important;
    color:var(--lp-primary-dark,#64172f)!important;
}

/* Roadmap Share already carries Core button classes in its markup.
   Keep only Health-specific footer layout; visual states come from Core. */
.lph-roadmap-share-modal .lph-share-foot .lp-ui-button{
    flex:0 0 auto;
}
@media(max-width:720px){
    .lph-roadmap-share-modal .lph-share-foot .lp-ui-button{
        width:100%;
    }
}


/* =========================================================
   v1.5.7 — final cross-module control rhythm
   ========================================================= */
.lph-core-health-module .lph-native-field input.lp-ui-control:not([type="radio"]):not([type="checkbox"]),
.lph-core-health-module .lph-native-field select.lp-ui-control,
.lph-core-health-module .lph-medical-details-grid input.lp-ui-control:not([type="radio"]):not([type="checkbox"]),
.lph-core-health-module .lph-medical-details-grid select.lp-ui-control,
.lph-insurance-overlay input.lp-ui-control:not([type="radio"]):not([type="checkbox"]),
.lph-insurance-overlay select.lp-ui-control{
	height:var(--lp-field-height,48px)!important;
	min-height:var(--lp-field-height,48px)!important;
	padding:0 14px!important;
	line-height:1.2!important;
}
.lph-core-health-module .lph-native-field textarea.lp-ui-control,
.lph-core-health-module .lph-medical-details-grid textarea.lp-ui-control,
.lph-insurance-overlay textarea.lp-ui-control{
	min-height:104px!important;
	padding:12px 14px!important;
	line-height:1.45!important;
}


/* =========================================================
   v1.6.0 — Household Health / two-person planning
   Shared learning remains on the left. Personal answers live in
   independent person workspaces on the right.
   ========================================================= */

.lph-person-switcher{
    display:none;
    align-items:center;
    gap:6px;
    padding:6px;
    border:1px solid var(--lp-ui-border,#dde3e7);
    border-radius:12px;
    background:var(--lp-surface-subtle,#f7f9fa);
}
.lph-person-switcher button{
    appearance:none;
    flex:1 1 0;
    min-height:38px;
    padding:8px 12px;
    border:0;
    border-radius:9px;
    background:transparent;
    color:var(--lp-muted,#66717a);
    font:650 12px/1.2 var(--lp-font-family,inherit);
    cursor:pointer;
    transition:background 150ms ease,color 150ms ease,box-shadow 150ms ease;
}
.lph-person-switcher button:hover{
    background:#fff;
    color:var(--lp-primary,#7b1d3d);
}
.lph-person-switcher button.is-active{
    background:#fff;
    color:var(--lp-primary,#7b1d3d);
    box-shadow:0 3px 10px rgba(15,23,42,.07);
}

.lph-person-health-panel{
    min-width:0;
}
.lph-person-health-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:62px;
    padding:12px 14px;
    border-bottom:1px solid var(--lp-ui-border,#e6eaed);
    background:linear-gradient(180deg,#fff,#fcfdfd);
}
.lph-person-health-head>div{
    min-width:0;
}
.lph-person-health-role{
    display:block;
    margin-bottom:3px;
    color:var(--lp-primary,#7b1d3d);
    font:700 9px/1.2 var(--lp-font-family,inherit);
    letter-spacing:.07em;
    text-transform:uppercase;
}
.lph-person-health-head h3{
    margin:0;
    overflow:hidden;
    color:var(--lp-text,#242a2f);
    font:650 16px/1.2 var(--lp-font-family,inherit);
    letter-spacing:-.01em;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.lph-person-health-status{
    flex:0 0 auto;
    padding:5px 8px;
    border:1px solid #e1e6e9;
    border-radius:999px;
    background:#f6f8f9;
    color:var(--lp-muted,#6f7881);
    font:650 9.5px/1 var(--lp-font-family,inherit);
    white-space:nowrap;
}
.lph-person-health-status.is-complete{
    border-color:#d4eadf;
    background:#eef9f3;
    color:#21895c;
}

/* Course workspace — wide desktop: 35% shared learning / 65% people. */
@media(min-width:1351px){
    .lph-app.has-health-partner:is(.is-nutrition-workspace,.is-exercise-workspace,.is-medical-team-workspace,.is-insurance-workspace,.is-social-workspace) .lph-course-shell{
        grid-template-columns:minmax(300px,35%) minmax(0,65%)!important;
    }
    .lph-app.has-health-partner:is(.is-nutrition-workspace,.is-exercise-workspace,.is-medical-team-workspace,.is-insurance-workspace,.is-social-workspace) .lph-course-right{
        padding:12px!important;
        overflow:hidden!important;
    }
    .lph-course-people{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
        width:100%;
        height:100%;
        min-height:0;
    }
    .lph-course-people>.lph-person-health-panel{
        display:flex!important;
        flex-direction:column;
        height:100%;
        min-height:0;
        overflow:hidden;
        border:1px solid var(--lp-ui-border,#e2e7ea);
        border-radius:14px;
        background:#fff;
        box-shadow:0 7px 20px rgba(15,23,42,.035);
    }
    .lph-course-people>.lph-person-health-panel .lph-person-health-head{
        flex:0 0 auto;
    }
    .lph-course-people>.lph-person-health-panel .lph-course-panel{
        flex:1 1 auto;
        width:100%!important;
        max-width:none!important;
        min-height:0;
        padding:14px;
        overflow-y:auto;
        overflow-x:hidden;
        scrollbar-width:thin;
    }
}

/* Intermediate laptops: keep the 35/65 learning split but show one person
   form at a time so each form retains comfortable input widths. */
@media(min-width:901px) and (max-width:1350px){
    .lph-app.has-health-partner:is(.is-nutrition-workspace,.is-exercise-workspace,.is-medical-team-workspace,.is-insurance-workspace,.is-social-workspace) .lph-course-shell{
        grid-template-columns:minmax(300px,38%) minmax(0,62%)!important;
    }
    .lph-app.has-health-partner:is(.is-nutrition-workspace,.is-exercise-workspace,.is-medical-team-workspace,.is-insurance-workspace,.is-social-workspace) .lph-course-right{
        padding:12px!important;
        overflow:hidden!important;
    }
    .lph-course-right>.lph-person-switcher{
        display:flex;
        margin-bottom:10px;
    }
    .lph-course-people{
        height:calc(100% - 58px);
        min-height:0;
    }
    .lph-course-people>.lph-person-health-panel{
        display:none;
        height:100%;
        min-height:0;
        overflow:hidden;
        border:1px solid var(--lp-ui-border,#e2e7ea);
        border-radius:14px;
        background:#fff;
    }
    .lph-course-people>.lph-person-health-panel.is-active{
        display:flex;
        flex-direction:column;
    }
    .lph-course-people>.lph-person-health-panel .lph-course-panel{
        flex:1 1 auto;
        width:100%!important;
        max-width:none!important;
        min-height:0;
        padding:16px;
        overflow-y:auto;
        overflow-x:hidden;
    }
}

/* Mobile/tablet stacked course mode: person switcher sits above the selected
   form and never squeezes two forms side-by-side. */
@media(max-width:900px){
    .lph-course-right>.lph-person-switcher{
        display:flex;
        margin:0 0 10px;
    }
    .lph-course-people>.lph-person-health-panel{
        display:none;
        border:1px solid var(--lp-ui-border,#e2e7ea);
        border-radius:14px;
        background:#fff;
        overflow:hidden;
    }
    .lph-course-people>.lph-person-health-panel.is-active{
        display:block;
    }
    .lph-course-people .lph-course-panel{
        width:100%!important;
        max-width:none!important;
        padding:14px;
    }
}

/* Compact the personal course forms just enough for two-column desktop use. */
@media(min-width:1351px){
    .lph-course-people .lph-course-content-head{
        margin-bottom:12px!important;
    }
    .lph-course-people .lph-course-content-head h1{
        font-size:22px!important;
        line-height:1.18!important;
    }
    .lph-course-people .lph-course-content-head p{
        font-size:12.5px!important;
        line-height:1.45!important;
    }
    .lph-course-people .lph-course-question{
        margin-bottom:12px!important;
    }
    .lph-course-people .lph-course-radio-grid,
    .lph-course-people .lph-medical-details-grid,
    .lph-course-people .lph-insurance-details-grid{
        grid-template-columns:1fr!important;
    }
    .lph-course-people .lph-course-radio,
    .lph-course-people .lph-course-choice,
    .lph-course-people .lph-course-next-option,
    .lph-course-people .lph-exercise-radio{
        padding:11px 12px!important;
    }
    .lph-course-people .lph-course-form-actions{
        gap:10px!important;
    }
}

/* Background — no shared lesson column, so each person gets half the canvas. */
.lph-household-background{
    padding:0 14px 18px!important;
}
.lph-household-background>.lph-native-heading{
    padding-left:0!important;
    padding-right:0!important;
}
.lph-background-people{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    align-items:start;
}
.lph-background-people>.lph-person-health-panel{
    overflow:hidden;
    border:1px solid var(--lp-ui-border,#e2e7ea);
    border-radius:14px;
    background:var(--lp-card-bg,#fff);
    box-shadow:0 8px 24px rgba(15,23,42,.035);
}
.lph-background-people .lph-person-background-form{
    padding:14px;
}
.lph-background-people .lph-native-section{
    padding:14px!important;
}
.lph-background-people .lph-native-section-head h2{
    font-size:15px!important;
}
.lph-background-people .lph-native-grid{
    gap:10px!important;
}
.lph-background-people .lph-native-form-actions{
    padding-top:12px!important;
}
@media(max-width:1180px){
    .lph-background-person-switcher{
        display:flex;
        margin:0 0 10px;
    }
    .lph-background-people{
        display:block;
    }
    .lph-background-people>.lph-person-health-panel{
        display:none;
    }
    .lph-background-people>.lph-person-health-panel.is-active{
        display:block;
    }
}

/* Household Action Plan / Roadmap — 50/50 wide desktop, person switcher on
   smaller canvases. */
.lph-household-summary{
    padding:16px!important;
}
.lph-summary-household-head{
    margin:0 0 14px;
    padding:18px 20px;
    border:1px solid var(--lp-ui-border,#e3e8eb);
    border-radius:16px;
    background:linear-gradient(135deg,#fff 0%,#fff 65%,color-mix(in srgb,var(--lp-primary,#7b1d3d) 4%,#fff) 100%);
}
.lph-summary-household-head h1{
    margin:5px 0 6px;
    color:var(--lp-text,#242a2f);
    font:var(--lp-title-weight,500) 28px/1.15 var(--lp-font-family,inherit);
}
.lph-summary-household-head p{
    margin:0;
    color:var(--lp-muted,#6f7881);
    font:var(--lp-body-weight,400) 14px/1.55 var(--lp-font-family,inherit);
}
.lph-summary-people{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    align-items:start;
}
.lph-summary-people>.lph-person-health-panel{
    min-width:0;
    overflow:visible;
    border:1px solid var(--lp-ui-border,#e2e7ea);
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 24px rgba(15,23,42,.035);
}
.lph-person-summary-body{
    padding:14px;
}
.lph-person-plan-stats{
    margin:0 0 12px!important;
}
.lph-summary-people .lph-plan-board{
    grid-template-columns:1fr!important;
    gap:10px!important;
}
.lph-summary-people .lph-plan-area{
    margin:0!important;
}
.lph-household-roadmap-banner{
    margin-bottom:14px!important;
}
.lph-roadmap-people>.lph-person-health-panel{
    overflow:hidden;
}
.lph-person-roadmap-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border-bottom:1px solid var(--lp-ui-border,#e7ebee);
    background:var(--lp-surface-subtle,#fbfcfd);
}
.lph-person-roadmap-toolbar>span{
    color:var(--lp-muted,#6f7881);
    font:600 10.5px/1.3 var(--lp-font-family,inherit);
}
.lph-roadmap-people .lph-roadmap-journey{
    margin:0!important;
    padding:14px 14px 14px 38px!important;
}
.lph-roadmap-people .lph-roadmap-stop-card{
    padding:14px!important;
}
.lph-roadmap-people .lph-roadmap-stop-head{
    gap:8px;
}
.lph-roadmap-people .lph-roadmap-stop-head h2{
    font-size:15px!important;
}
.lph-roadmap-people .lph-roadmap-stop-card>p,
.lph-roadmap-people .lph-roadmap-actions p{
    font-size:12px!important;
}
@media(max-width:1180px){
    .lph-summary-person-switcher{
        display:flex;
        margin:0 0 10px;
    }
    .lph-summary-people{
        display:block;
    }
    .lph-summary-people>.lph-person-health-panel{
        display:none;
    }
    .lph-summary-people>.lph-person-health-panel.is-active{
        display:block;
    }
}

/* On very narrow screens remove unnecessary outer card nesting. */
@media(max-width:700px){
    .lph-household-background,
    .lph-household-summary{
        padding:10px!important;
    }
    .lph-person-health-head{
        min-height:56px;
        padding:10px 12px;
    }
    .lph-person-health-head h3{
        font-size:15px;
    }
    .lph-person-health-status{
        font-size:9px;
    }
    .lph-background-people .lph-person-background-form,
    .lph-person-summary-body{
        padding:10px;
    }
}


/* =========================================================
   v1.6.1 — Household course synchronization + premium spacing
   ========================================================= */

/* Shared lesson on the left, two clearly separated personal workspaces on
   the right. The right side needs its own canvas padding so the person cards
   never visually touch the divider or one another. */
@media(min-width:1351px){
    .lph-app.has-health-partner:is(.is-nutrition-workspace,.is-exercise-workspace,.is-medical-team-workspace,.is-insurance-workspace,.is-social-workspace) .lph-course-right{
        padding:16px 18px 16px 16px!important;
        background:linear-gradient(180deg,#f8fafb 0%,#f5f7f8 100%)!important;
    }

    .lph-course-people{
        gap:18px!important;
    }

    .lph-course-people>.lph-person-health-panel{
        border-color:#dfe5e9!important;
        border-radius:16px!important;
        box-shadow:0 10px 28px rgba(15,23,42,.055)!important;
    }

    .lph-course-people>.lph-person-health-panel:first-child{
        border-top:3px solid var(--lp-primary,#7b1d3d)!important;
    }

    .lph-course-people>.lph-person-health-panel:last-child{
        border-top:3px solid color-mix(in srgb,var(--lp-primary,#7b1d3d) 55%,#d9a8b8)!important;
    }

    .lph-course-people>.lph-person-health-panel .lph-person-health-head{
        min-height:70px!important;
        padding:14px 16px!important;
    }

    .lph-course-people>.lph-person-health-panel .lph-course-panel{
        padding:18px 16px 20px!important;
        scroll-padding-top:18px;
    }

    .lph-person-health-head h3{
        font-size:17px!important;
    }

    .lph-person-health-status{
        padding:6px 9px!important;
        font-size:10px!important;
    }
}

/* Intermediate layouts get the same inner breathing room even though only
   one person's form is visible at a time. */
@media(min-width:901px) and (max-width:1350px){
    .lph-app.has-health-partner:is(.is-nutrition-workspace,.is-exercise-workspace,.is-medical-team-workspace,.is-insurance-workspace,.is-social-workspace) .lph-course-right{
        padding:14px 16px 16px!important;
        background:linear-gradient(180deg,#f8fafb 0%,#f5f7f8 100%)!important;
    }

    .lph-course-right>.lph-person-switcher{
        margin-bottom:12px!important;
    }

    .lph-course-people>.lph-person-health-panel{
        border-radius:16px!important;
        box-shadow:0 8px 24px rgba(15,23,42,.045)!important;
    }

    .lph-course-people>.lph-person-health-panel .lph-person-health-head{
        padding:14px 16px!important;
    }

    .lph-course-people>.lph-person-health-panel .lph-course-panel{
        padding:18px 16px 20px!important;
    }
}

/* Shared syllabus click updates both personal forms together. A very small
   reveal makes that relationship visually obvious without making the app feel slow. */
@media(prefers-reduced-motion:no-preference){
    .lph-course-people.is-chapter-syncing>.lph-person-health-panel .lph-course-panel{
        animation:lphHouseholdChapterSync 180ms ease both;
    }
}
@keyframes lphHouseholdChapterSync{
    from{opacity:.72;transform:translateY(3px)}
    to{opacity:1;transform:translateY(0)}
}

/* Slightly cleaner internal form rhythm for the narrower dual-person columns. */
@media(min-width:1351px){
    .lph-course-people .lph-course-content-head{
        padding-bottom:2px!important;
    }

    .lph-course-people .lph-course-content-head h1{
        margin-bottom:7px!important;
    }

    .lph-course-people .lph-course-form{
        display:grid;
        gap:14px;
    }

    .lph-course-people .lph-course-next-options,
    .lph-course-people .lph-exercise-choice-list{
        display:grid;
        gap:10px!important;
    }

    .lph-course-people .lph-course-next-option,
    .lph-course-people .lph-exercise-radio,
    .lph-course-people .lph-course-radio,
    .lph-course-people .lph-course-choice{
        border-radius:12px!important;
    }
}


/* =========================================================
   v1.6.3 — Household Health visual refinement
   Compact person headers, tighter 35/65 composition, calmer premium cards.
   ========================================================= */

/* Large desktop: reduce the dead space between learning and the two forms
   while keeping a clean visual seam. */
@media(min-width:1351px){
    .lph-app.has-health-partner:is(
        .is-nutrition-workspace,
        .is-exercise-workspace,
        .is-medical-team-workspace,
        .is-insurance-workspace,
        .is-social-workspace
    ) .lph-course-shell{
        grid-template-columns:minmax(0,34.5%) minmax(0,65.5%)!important;
    }

    .lph-app.has-health-partner:is(
        .is-nutrition-workspace,
        .is-exercise-workspace,
        .is-medical-team-workspace,
        .is-insurance-workspace,
        .is-social-workspace
    ) .lph-course-left{
        padding:14px 12px 16px 14px!important;
        border-right:1px solid var(--lp-ui-border,#e1e6ea)!important;
    }

    .lph-app.has-health-partner:is(
        .is-nutrition-workspace,
        .is-exercise-workspace,
        .is-medical-team-workspace,
        .is-insurance-workspace,
        .is-social-workspace
    ) .lph-course-right{
        padding:12px 14px 14px 12px!important;
    }

    .lph-course-people{
        gap:12px!important;
    }

    /* Person header: shorter, cleaner, more information-dense. */
    .lph-course-people>.lph-person-health-panel .lph-person-health-head{
        min-height:54px!important;
        padding:9px 13px!important;
        gap:10px!important;
    }

    .lph-person-health-role{
        margin-bottom:2px!important;
        font-size:9.5px!important;
        line-height:1.1!important;
        letter-spacing:.075em!important;
    }

    .lph-person-health-head h3{
        margin:0!important;
        font-size:15.5px!important;
        line-height:1.15!important;
        font-weight:600!important;
        letter-spacing:-.01em!important;
    }

    .lph-person-health-status{
        min-height:28px!important;
        padding:4px 9px!important;
        font-size:9.5px!important;
        line-height:1!important;
        border-radius:999px!important;
        white-space:nowrap!important;
    }

    /* Less visual bulk in the cards while preserving separation. */
    .lph-course-people>.lph-person-health-panel{
        border-radius:14px!important;
        box-shadow:0 7px 20px rgba(15,23,42,.045)!important;
        overflow:hidden!important;
    }

    .lph-course-people>.lph-person-health-panel:first-child{
        border-top-width:2px!important;
    }

    .lph-course-people>.lph-person-health-panel:last-child{
        border-top-width:2px!important;
    }

    .lph-course-people>.lph-person-health-panel .lph-course-panel{
        padding:14px 14px 18px!important;
    }

    /* Slightly tighter content hierarchy inside each person column. */
    .lph-course-people .lph-course-content-head{
        margin-bottom:14px!important;
    }

    .lph-course-people .lph-course-content-head .lph-step-kicker{
        margin-bottom:8px!important;
    }

    .lph-course-people .lph-course-content-head h1{
        margin-bottom:6px!important;
        font-size:25px!important;
        line-height:1.14!important;
        letter-spacing:-.025em!important;
    }

    .lph-course-people .lph-course-content-head p{
        font-size:13px!important;
        line-height:1.45!important;
    }

    .lph-course-people .lph-course-form{
        gap:12px!important;
    }

    .lph-course-people .lph-course-question{
        margin-top:0!important;
    }

    .lph-course-people .lph-course-next-options,
    .lph-course-people .lph-exercise-choice-list,
    .lph-course-people .lph-course-radio-grid{
        gap:9px!important;
    }

    .lph-course-people .lph-course-next-option,
    .lph-course-people .lph-exercise-radio,
    .lph-course-people .lph-course-radio,
    .lph-course-people .lph-course-choice{
        min-height:58px!important;
        padding:11px 12px!important;
    }

    /* Learning side: slightly leaner card treatment so the right-side forms
       remain the visual focus. */
    .lph-course-left .lph-course-video{
        border-radius:13px!important;
        box-shadow:0 6px 18px rgba(15,23,42,.05)!important;
    }

    .lph-course-left .lph-course-syllabus{
        margin-top:12px!important;
        padding:14px!important;
        border-radius:14px!important;
        box-shadow:0 6px 18px rgba(15,23,42,.04)!important;
    }

    .lph-course-left .lph-course-syllabus h3{
        margin-bottom:11px!important;
        font-size:18px!important;
    }

    .lph-course-left [data-lph-chapter],
    .lph-course-left [data-lph-exercise-chapter],
    .lph-course-left [data-lph-social-chapter],
    .lph-course-left [data-lph-medical-chapter],
    .lph-course-left [data-lph-insurance-chapter]{
        min-height:50px!important;
        padding:9px 12px!important;
        border-radius:11px!important;
    }
}

/* Medium screens: compact the same header without making the switcher cramped. */
@media(min-width:901px) and (max-width:1350px){
    .lph-course-people>.lph-person-health-panel .lph-person-health-head{
        min-height:56px!important;
        padding:10px 13px!important;
    }

    .lph-person-health-head h3{
        font-size:15.5px!important;
    }

    .lph-person-health-role{
        font-size:9.5px!important;
    }

    .lph-course-people>.lph-person-health-panel .lph-course-panel{
        padding:15px 14px 18px!important;
    }
}

/* Prevent nested scrollbars from feeling visually heavy. */
.lph-course-people>.lph-person-health-panel{
    scrollbar-color:rgba(108,118,128,.34) transparent;
}
.lph-course-people>.lph-person-health-panel::-webkit-scrollbar,
.lph-course-people>.lph-person-health-panel .lph-course-panel::-webkit-scrollbar{
    width:6px;
}
.lph-course-people>.lph-person-health-panel::-webkit-scrollbar-thumb,
.lph-course-people>.lph-person-health-panel .lph-course-panel::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(108,118,128,.30);
}


/* =========================================================
   v1.6.4 — final Household Health UI refinement
   ========================================================= */

/* 1) Selected radio/checkbox markers should visibly use the LifePlan maroon.
   This targets the marker itself, not just the surrounding choice tile. */
.lph-core-health-module input[type="radio"],
.lph-core-health-module input[type="checkbox"]{
    accent-color:var(--lp-primary,#7b1d3d)!important;
}

.lph-core-health-module .lph-course-radio input[type="radio"],
.lph-core-health-module .lph-course-choice input[type="radio"],
.lph-core-health-module .lph-course-next-option input[type="radio"],
.lph-core-health-module .lph-exercise-radio input[type="radio"],
.lph-core-health-module .lph-course-next-option input[type="checkbox"],
.lph-core-health-module .lph-native-choice input[type="radio"],
.lph-core-health-module .lph-native-choice input[type="checkbox"]{
    accent-color:var(--lp-primary,#7b1d3d)!important;
}

.lph-core-health-module .lph-radio-dot,
.lph-core-health-module .lph-checkbox-dot{
    transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,color .16s ease!important;
}

.lph-core-health-module input[type="radio"]:checked + .lph-radio-dot,
.lph-core-health-module input[type="checkbox"]:checked + .lph-checkbox-dot{
    border-color:var(--lp-primary,#7b1d3d)!important;
    background:var(--lp-primary,#7b1d3d)!important;
    color:#fff!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--lp-primary,#7b1d3d) 12%,transparent)!important;
}

/* 2) Course footer/status rows: vertically center message + action instead of
   letting the text sit low or look detached from the button. */
.lph-course-people .lph-course-form-actions,
.lph-core-health-module .lph-native-form-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
}

.lph-course-people .lph-native-save-note,
.lph-core-health-module .lph-native-form-actions .lph-native-save-note{
    display:flex!important;
    align-items:center!important;
    min-height:44px!important;
    margin:0!important;
    line-height:1.35!important;
}

.lph-course-people .lph-course-form-actions .lp-ui-button,
.lph-core-health-module .lph-native-form-actions .lp-ui-button{
    flex:0 0 auto!important;
    min-width:154px!important;
}

/* Background save rows need a little inner breathing room and should not touch
   the edge of the person card. */
.lph-household-background .lph-person-background-form{
    padding:18px 18px 20px!important;
}

.lph-household-background .lph-native-form-actions{
    margin-top:16px!important;
    padding-top:14px!important;
    border-top:1px solid var(--lp-ui-border,#e5eaed)!important;
}

.lph-household-background .lph-native-save-note{
    max-width:70%!important;
}

/* 3) Reduce oversized status pills and roadmap/action-plan headers. */
.lph-summary-people .lph-person-health-head{
    min-height:56px!important;
    padding:10px 14px!important;
}

.lph-summary-people .lph-person-health-head h3{
    font-size:15.5px!important;
    font-weight:600!important;
}

.lph-summary-people .lph-person-health-status{
    min-height:26px!important;
    padding:4px 8px!important;
    font-size:9.5px!important;
}

.lph-summary-people .lph-person-health-role{
    font-size:9px!important;
    margin-bottom:2px!important;
}

/* 4) Action Plan / Roadmap refinement:
   lighter top summary, more compact export row, more space for actual actions. */
.lph-core-health-module .lph-roadmap-shell,
.lph-core-health-module .lph-action-plan-shell{
    background:linear-gradient(180deg,#f8fafb 0%,#f4f6f7 100%)!important;
}

.lph-core-health-module .lph-roadmap-banner,
.lph-core-health-module .lph-plan-overview{
    border-radius:16px!important;
    box-shadow:0 9px 26px rgba(15,23,42,.055)!important;
}

.lph-core-health-module .lph-roadmap-banner{
    padding:20px 24px!important;
    margin-bottom:16px!important;
}

.lph-core-health-module .lph-roadmap-banner h1,
.lph-core-health-module .lph-plan-overview h1{
    font-size:28px!important;
    line-height:1.15!important;
    letter-spacing:-.025em!important;
}

.lph-core-health-module .lph-roadmap-banner p,
.lph-core-health-module .lph-plan-overview p{
    max-width:900px!important;
    font-size:13.5px!important;
    line-height:1.5!important;
}

.lph-summary-people{
    gap:16px!important;
}

.lph-summary-people>.lph-person-summary{
    border-radius:16px!important;
    border:1px solid var(--lp-ui-border,#e2e7ea)!important;
    box-shadow:0 8px 22px rgba(15,23,42,.045)!important;
    overflow:hidden!important;
    background:#fff!important;
}

.lph-summary-people .lph-summary-person-toolbar{
    min-height:58px!important;
    padding:12px 16px!important;
    border-top:1px solid var(--lp-ui-border,#edf0f2)!important;
    border-bottom:1px solid var(--lp-ui-border,#edf0f2)!important;
    background:#fbfcfd!important;
}

.lph-summary-people .lph-summary-person-toolbar>span{
    font-size:14px!important;
    line-height:1.3!important;
    color:var(--lp-muted,#6f7881)!important;
}

.lph-summary-people .lph-export-button{
    min-height:40px!important;
    padding:8px 13px!important;
    border-radius:10px!important;
    font-size:11.5px!important;
}

.lph-roadmap-journey{
    padding:16px 18px 20px!important;
}

.lph-roadmap-stop-card{
    border-radius:14px!important;
    box-shadow:0 6px 18px rgba(15,23,42,.04)!important;
}

.lph-roadmap-stop-card+.lph-roadmap-stop-card{
    margin-top:12px!important;
}

.lph-roadmap-stop-head{
    padding:14px 16px 10px!important;
}

.lph-roadmap-stop-head h2{
    font-size:17px!important;
    line-height:1.2!important;
}

.lph-roadmap-actions{
    padding:0 16px 15px!important;
}

.lph-roadmap-action{
    border-radius:11px!important;
    padding:10px 12px!important;
    line-height:1.4!important;
}

/* 5) Slightly more balanced inner padding for Background card content. */
.lph-household-background .lph-person-health-panel{
    border-radius:15px!important;
}

.lph-household-background .lph-person-health-head{
    min-height:58px!important;
    padding:10px 14px!important;
}

.lph-household-background .lph-native-section{
    margin-bottom:14px!important;
}

.lph-household-background .lph-native-section:last-child{
    margin-bottom:0!important;
}

/* Small screens: stack the save row instead of squeezing text/button. */
@media(max-width:760px){
    .lph-course-people .lph-course-form-actions,
    .lph-core-health-module .lph-native-form-actions{
        align-items:stretch!important;
        flex-direction:column!important;
    }

    .lph-course-people .lph-course-form-actions .lp-ui-button,
    .lph-core-health-module .lph-native-form-actions .lp-ui-button{
        width:100%!important;
        min-width:0!important;
    }

    .lph-household-background .lph-native-save-note{
        max-width:none!important;
    }
}


/* =========================================================
   v1.6.5 — radio marker geometry + premium Export control
   ========================================================= */

/* Radio markers were inheriting flexible sizing from choice rows, which could
   make the selected dot look tall/oval. Lock the custom marker to a true circle
   and center the inner maroon dot. */
.lph-core-health-module .lph-radio-dot{
    position:relative!important;
    display:inline-grid!important;
    place-items:center!important;
    width:22px!important;
    height:22px!important;
    min-width:22px!important;
    min-height:22px!important;
    max-width:22px!important;
    max-height:22px!important;
    flex:0 0 22px!important;
    padding:0!important;
    margin:0!important;
    border:1.5px solid #cbd4da!important;
    border-radius:50%!important;
    background:#fff!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    line-height:1!important;
    vertical-align:middle!important;
    box-shadow:none!important;
}

/* Keep the native radio visually hidden; the custom circle is the only marker. */
.lph-core-health-module .lph-course-radio>input[type="radio"],
.lph-core-health-module .lph-course-choice>input[type="radio"],
.lph-core-health-module .lph-course-next-option>input[type="radio"],
.lph-core-health-module .lph-exercise-radio>input[type="radio"]{
    position:absolute!important;
    opacity:0!important;
    width:1px!important;
    height:1px!important;
    pointer-events:none!important;
}

/* Selected state: white ring + centered maroon dot. This avoids the stretched
   solid pill seen in narrower two-person columns. */
.lph-core-health-module input[type="radio"]:checked + .lph-radio-dot{
    border-color:var(--lp-primary,#7b1d3d)!important;
    background:#fff!important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--lp-primary,#7b1d3d) 10%,transparent)!important;
}
.lph-core-health-module input[type="radio"]:checked + .lph-radio-dot::after{
    content:""!important;
    display:block!important;
    width:10px!important;
    height:10px!important;
    border-radius:50%!important;
    background:var(--lp-primary,#7b1d3d)!important;
}
.lph-core-health-module input[type="radio"]:focus-visible + .lph-radio-dot{
    outline:2px solid color-mix(in srgb,var(--lp-primary,#7b1d3d) 35%,transparent)!important;
    outline-offset:2px!important;
}

/* Choice rows keep the marker vertically centered even when text wraps. */
.lph-core-health-module .lph-course-radio,
.lph-core-health-module .lph-course-choice,
.lph-core-health-module .lph-course-next-option,
.lph-core-health-module .lph-exercise-radio{
    align-items:center!important;
}

/* Premium compact export control: it should read as a real action, not a loose
   word floating in a large white block. */
.lph-core-health-module .lph-export-wrap{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
}

.lph-core-health-module .lph-export-button.is-roadmap{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    min-width:104px!important;
    min-height:38px!important;
    padding:7px 12px!important;
    border:1px solid color-mix(in srgb,var(--lp-primary,#7b1d3d) 20%,#dfe5e9)!important;
    border-radius:10px!important;
    background:#fff!important;
    color:var(--lp-primary,#7b1d3d)!important;
    font-size:11.5px!important;
    font-weight:650!important;
    line-height:1!important;
    box-shadow:0 3px 10px rgba(15,23,42,.035)!important;
    transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease!important;
}

.lph-core-health-module .lph-export-button.is-roadmap:hover{
    border-color:color-mix(in srgb,var(--lp-primary,#7b1d3d) 42%,#dfe5e9)!important;
    background:color-mix(in srgb,var(--lp-primary,#7b1d3d) 4%,#fff)!important;
    box-shadow:0 6px 16px rgba(15,23,42,.06)!important;
    transform:translateY(-1px)!important;
}

.lph-core-health-module .lph-export-button.is-roadmap[aria-expanded="true"]{
    border-color:color-mix(in srgb,var(--lp-primary,#7b1d3d) 50%,#dfe5e9)!important;
    background:color-mix(in srgb,var(--lp-primary,#7b1d3d) 6%,#fff)!important;
    box-shadow:0 5px 14px rgba(123,29,61,.08)!important;
}

.lph-core-health-module .lph-export-chevron{
    display:grid!important;
    place-items:center!important;
    width:15px!important;
    height:15px!important;
    flex:0 0 15px!important;
}
.lph-core-health-module .lph-export-chevron svg{
    display:block!important;
    width:15px!important;
    height:15px!important;
}

/* Make the roadmap toolbar less visually empty around the smaller button. */
.lph-summary-people .lph-summary-person-toolbar{
    min-height:52px!important;
    padding:9px 14px!important;
}

/* Export menu: slightly narrower, stronger hierarchy and cleaner hover. */
.lph-core-health-module .lph-export-menu{
    width:226px!important;
    top:calc(100% + 7px)!important;
    padding:6px!important;
    border-radius:12px!important;
    border-color:#dfe5e9!important;
    box-shadow:0 16px 42px rgba(15,23,42,.14)!important;
}
.lph-core-health-module .lph-export-menu button{
    min-height:48px!important;
    grid-template-columns:26px 1fr!important;
    gap:9px!important;
    padding:8px 9px!important;
    border-radius:9px!important;
}
.lph-core-health-module .lph-export-menu button:hover{
    background:color-mix(in srgb,var(--lp-primary,#7b1d3d) 4%,#f7f8f9)!important;
    transform:none!important;
}
.lph-core-health-module .lph-export-menu button>span{
    width:25px!important;
    height:25px!important;
    border-radius:7px!important;
    font-size:12px!important;
}
.lph-core-health-module .lph-export-menu strong{
    font-size:11.5px!important;
    line-height:1.25!important;
}
.lph-core-health-module .lph-export-menu small{
    margin-top:1px!important;
    font-size:9.5px!important;
    line-height:1.3!important;
}


/* =========================================================
   v1.6.6 — Roadmap containment + readability
   ========================================================= */

/* Keep timeline nodes fully inside each person's Roadmap column.
   Older roadmap geometry positioned the numbered node partly outside the
   journey canvas, which caused clipping/overflow in the dual-person layout. */
.lph-core-health-module .lph-summary-people .lph-roadmap-journey{
    position:relative!important;
    padding:18px 18px 22px 52px!important;
    overflow:hidden!important;
}

.lph-core-health-module .lph-summary-people .lph-roadmap-stop{
    position:relative!important;
    display:block!important;
    min-width:0!important;
}

.lph-core-health-module .lph-summary-people .lph-roadmap-stop::before{
    left:-27px!important;
}

.lph-core-health-module .lph-summary-people .lph-roadmap-node{
    position:absolute!important;
    left:-42px!important;
    top:18px!important;
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
    margin:0!important;
    z-index:2!important;
}

.lph-core-health-module .lph-summary-people .lph-roadmap-node span{
    display:grid!important;
    place-items:center!important;
    width:34px!important;
    height:34px!important;
    border-radius:50%!important;
    font-size:10px!important;
    font-weight:750!important;
    line-height:1!important;
    box-sizing:border-box!important;
}

.lph-core-health-module .lph-summary-people .lph-roadmap-stop-card{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
}

/* Prevent any roadmap content from leaking across the person-column boundary. */
.lph-core-health-module .lph-summary-people>.lph-person-health-panel,
.lph-core-health-module .lph-summary-people>.lph-person-summary{
    min-width:0!important;
    overflow:hidden!important;
}

/* Increase roadmap reading size slightly. The previous polish made the roadmap
   too compact at real laptop widths. */
.lph-core-health-module .lph-summary-people .lph-roadmap-stop-head h2{
    font-size:18px!important;
    line-height:1.25!important;
    font-weight:650!important;
}

.lph-core-health-module .lph-summary-people .lph-roadmap-stop-card>p{
    padding:0 16px!important;
    margin:0 0 12px!important;
    font-size:13.5px!important;
    line-height:1.55!important;
    color:var(--lp-muted,#68737d)!important;
}

.lph-core-health-module .lph-summary-people .lph-roadmap-actions{
    gap:8px!important;
}

.lph-core-health-module .lph-summary-people .lph-roadmap-actions>div,
.lph-core-health-module .lph-summary-people .lph-roadmap-action{
    min-height:46px!important;
    padding:10px 12px!important;
    border-radius:10px!important;
}

.lph-core-health-module .lph-summary-people .lph-roadmap-actions p,
.lph-core-health-module .lph-summary-people .lph-roadmap-action p{
    margin:0!important;
    font-size:13px!important;
    line-height:1.5!important;
}

.lph-core-health-module .lph-summary-people .lph-roadmap-actions>div>span,
.lph-core-health-module .lph-summary-people .lph-roadmap-action>span{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    flex:0 0 24px!important;
    border-radius:8px!important;
    font-size:11px!important;
}

/* Count badges should remain small and secondary, while body text gets larger. */
.lph-core-health-module .lph-summary-people .lph-roadmap-stop-head>.lp-ui-badge,
.lph-core-health-module .lph-summary-people .lph-roadmap-stop-head>span:last-child{
    min-height:27px!important;
    padding:5px 9px!important;
    font-size:10px!important;
}

/* Slightly more breathing room between roadmap areas. */
.lph-core-health-module .lph-summary-people .lph-roadmap-stop + .lph-roadmap-stop{
    margin-top:16px!important;
}

/* Compact laptop widths: keep nodes within bounds and preserve readable text. */
@media(max-width:1450px){
    .lph-core-health-module .lph-summary-people .lph-roadmap-journey{
        padding-left:48px!important;
        padding-right:14px!important;
    }

    .lph-core-health-module .lph-summary-people .lph-roadmap-node{
        left:-39px!important;
        width:32px!important;
        height:32px!important;
        min-width:32px!important;
        min-height:32px!important;
    }

    .lph-core-health-module .lph-summary-people .lph-roadmap-node span{
        width:32px!important;
        height:32px!important;
    }

    .lph-core-health-module .lph-summary-people .lph-roadmap-stop-head h2{
        font-size:17px!important;
    }

    .lph-core-health-module .lph-summary-people .lph-roadmap-stop-card>p,
    .lph-core-health-module .lph-summary-people .lph-roadmap-actions p{
        font-size:12.5px!important;
    }
}

/* Tablet / one-person-at-a-time layout can use a slightly more generous inset. */
@media(max-width:900px){
    .lph-core-health-module .lph-summary-people .lph-roadmap-journey{
        padding-left:50px!important;
    }
}


/* =========================================================
   v1.6.7 — Roadmap node number centering
   ========================================================= */

/* The old roadmap node combined content-box sizing with a thick border.
   At some browser zoom levels this pushed "01/02/03" toward the lower-right.
   Make the whole node border-box and let the parent grid center plain text. */
.lph-core-health-module .lph-summary-people .lph-roadmap-node{
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
    max-width:38px!important;
    max-height:38px!important;
    padding:0!important;
    border:5px solid #f6f8f9!important;
    border-radius:50%!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    background:var(--lp-primary,#7b1d3d)!important;
    box-shadow:0 0 0 1px #d8b3c0!important;
}

.lph-core-health-module .lph-summary-people .lph-roadmap-node span{
    position:static!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    color:#fff!important;
    font-size:9px!important;
    font-weight:750!important;
    font-variant-numeric:tabular-nums!important;
    line-height:1!important;
    letter-spacing:0!important;
    text-align:center!important;
    white-space:nowrap!important;
}

/* Keep the node aligned with the vertical timeline after the geometry fix. */
.lph-core-health-module .lph-summary-people .lph-roadmap-node{
    left:-44px!important;
    top:16px!important;
}

@media(max-width:1450px){
    .lph-core-health-module .lph-summary-people .lph-roadmap-node{
        left:-40px!important;
        width:36px!important;
        height:36px!important;
        min-width:36px!important;
        min-height:36px!important;
        max-width:36px!important;
        max-height:36px!important;
        border-width:5px!important;
    }
}


/* =========================================================
   v1.7.0 — Health UX refinement
   Household progress, person-state feedback, syllabus hierarchy,
   action-plan edit links, Roadmap controls, and responsive polish.
   ========================================================= */

/* ---------- Household progress header ---------- */
.lph-progress-row{
    gap:14px;
}
.lph-progress-copy{
    display:flex;
    align-items:baseline;
    gap:8px;
    min-width:0;
}
.lph-progress-copy strong{
    flex:0 0 auto;
}
.lph-progress-context{
    overflow:hidden;
    color:var(--lp-muted,#7a838c);
    font-size:10px;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.lph-household-progress{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:7px;
    margin-left:auto;
}
.lph-household-progress[hidden]{
    display:none!important;
}
.lph-household-progress-person{
    display:flex;
    align-items:center;
    gap:7px;
    min-height:32px;
    padding:4px 9px 4px 5px;
    border:1px solid var(--lp-ui-border,#e0e6e9);
    border-radius:999px;
    background:#fff;
    box-shadow:0 2px 7px rgba(15,23,42,.035);
}
.lph-household-progress-person.is-complete{
    border-color:#cfe7da;
    background:#f1faf5;
}
.lph-household-progress-avatar{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    flex:0 0 24px;
    border-radius:50%;
    background:color-mix(in srgb,var(--lp-primary,#7b1d3d) 8%,#fff);
    color:var(--lp-primary,#7b1d3d);
    font-size:9px;
    font-weight:750;
}
.lph-household-progress-person.is-complete .lph-household-progress-avatar{
    background:#dff2e8;
    color:#21875a;
}
.lph-household-progress-copy{
    display:grid;
    gap:0;
    min-width:0;
}
.lph-household-progress-copy strong{
    overflow:hidden;
    max-width:94px;
    color:var(--lp-text,#242a2f);
    font-size:10px;
    font-weight:700;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.lph-household-progress-copy small{
    color:var(--lp-muted,#77818a);
    font-size:8.5px;
    font-weight:550;
    line-height:1.2;
}

/* ---------- Person identity + state feedback ---------- */
.lph-person-health-head{
    position:sticky;
    top:0;
    z-index:6;
    backdrop-filter:saturate(130%) blur(8px);
    background:rgba(255,255,255,.96)!important;
}
.lph-person-health-identity{
    display:flex!important;
    align-items:center;
    gap:9px;
    min-width:0;
}
.lph-person-avatar{
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    flex:0 0 30px;
    border:1px solid color-mix(in srgb,var(--lp-primary,#7b1d3d) 14%,#e1e6e9);
    border-radius:50%;
    background:color-mix(in srgb,var(--lp-primary,#7b1d3d) 5%,#fff);
    color:var(--lp-primary,#7b1d3d);
    font-size:11px;
    font-weight:750;
}
.lph-person-health-copy{
    min-width:0;
}
.lph-person-health-status.is-progress{
    border-color:#dce4e9;
    background:#f7f9fa;
    color:#59656f;
}
.lph-person-health-status.is-dirty{
    border-color:#ead6aa;
    background:#fff9eb;
    color:#8b6518;
}
.lph-person-health-status.is-saved{
    border-color:#cfe7da;
    background:#edf8f2;
    color:#21875a;
}
.lph-person-health-status.is-error{
    border-color:#efd1d3;
    background:#fff2f3;
    color:#a13b43;
}
.lph-person-health-panel.has-unsaved-changes{
    border-color:color-mix(in srgb,#c79a3b 35%,var(--lp-ui-border,#e2e7ea))!important;
}

/* ---------- Course syllabus hierarchy ---------- */
.lph-core-health-module .lph-course-syllabus{
    overflow:hidden;
}
.lph-core-health-module .lph-course-chapter{
    position:relative;
    border-color:#e0e6e9!important;
    background:#fff!important;
    color:var(--lp-text,#242a2f)!important;
    transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
.lph-core-health-module .lph-course-chapter:not(.is-reached):not(.is-active){
    opacity:.72;
}
.lph-core-health-module .lph-course-chapter.is-reached:not(.is-complete-step):not(.is-active){
    background:#fbfcfd!important;
}
.lph-core-health-module .lph-course-chapter.is-complete-step:not(.is-active){
    border-color:#cfe8dc!important;
    background:#f2faf5!important;
    color:#237b57!important;
}
.lph-core-health-module .lph-course-chapter.is-active{
    border-color:color-mix(in srgb,var(--lp-primary,#7b1d3d) 30%,#dce3e7)!important;
    background:color-mix(in srgb,var(--lp-primary,#7b1d3d) 6%,#fff)!important;
    color:var(--lp-primary,#7b1d3d)!important;
    box-shadow:0 4px 12px rgba(123,29,61,.06)!important;
}
.lph-core-health-module .lph-course-chapter:hover{
    transform:translateY(-1px);
}
.lph-core-health-module .lph-course-play{
    display:grid!important;
    place-items:center!important;
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    color:var(--lp-primary,#7b1d3d)!important;
    font-size:9px!important;
    font-weight:800!important;
}
.lph-core-health-module .lph-course-chapter.is-complete-step:not(.is-active) .lph-course-play::before{
    content:"✓";
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#dff2e8;
    color:#21875a;
}
.lph-core-health-module .lph-course-chapter.is-complete-step:not(.is-active) .lph-course-play{
    font-size:0!important;
}

/* ---------- Calmer scrollbars ---------- */
.lph-core-health-module .lph-course-panel,
.lph-core-health-module .lph-course-left,
.lph-core-health-module .lph-course-right{
    scrollbar-width:thin;
    scrollbar-color:transparent transparent;
}
.lph-core-health-module .lph-course-panel:hover,
.lph-core-health-module .lph-course-panel:focus-within,
.lph-core-health-module .lph-course-left:hover,
.lph-core-health-module .lph-course-right:hover{
    scrollbar-color:rgba(105,116,126,.28) transparent;
}
.lph-core-health-module .lph-course-panel::-webkit-scrollbar,
.lph-core-health-module .lph-course-left::-webkit-scrollbar,
.lph-core-health-module .lph-course-right::-webkit-scrollbar{
    width:5px;
    height:5px;
}
.lph-core-health-module .lph-course-panel::-webkit-scrollbar-thumb,
.lph-core-health-module .lph-course-left::-webkit-scrollbar-thumb,
.lph-core-health-module .lph-course-right::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:transparent;
}
.lph-core-health-module .lph-course-panel:hover::-webkit-scrollbar-thumb,
.lph-core-health-module .lph-course-panel:focus-within::-webkit-scrollbar-thumb,
.lph-core-health-module .lph-course-left:hover::-webkit-scrollbar-thumb,
.lph-core-health-module .lph-course-right:hover::-webkit-scrollbar-thumb{
    background:rgba(105,116,126,.27);
}

/* ---------- Form density + consistency ---------- */
.lph-course-people .lph-course-question{
    padding-bottom:2px!important;
}
.lph-course-people .lph-course-question>label,
.lph-course-people .lph-course-label{
    margin-bottom:8px!important;
    font-size:12.5px!important;
    line-height:1.4!important;
}
.lph-course-people .lph-course-radio,
.lph-course-people .lph-course-choice,
.lph-course-people .lph-course-next-option,
.lph-course-people .lph-exercise-radio{
    min-height:54px!important;
    padding:10px 12px!important;
    border-radius:11px!important;
}
.lph-course-people .lph-course-radio strong,
.lph-course-people .lph-course-choice strong,
.lph-course-people .lph-course-next-option strong,
.lph-course-people .lph-exercise-radio strong{
    font-size:12px!important;
    line-height:1.35!important;
}
.lph-course-people .lph-course-form-actions{
    margin-top:8px!important;
    padding-top:12px!important;
    border-top:1px solid #edf0f2!important;
}
.lph-course-people .lph-native-save-note{
    color:var(--lp-muted,#6f7881)!important;
    font-size:10.5px!important;
}

/* ---------- Action Plan: edit-source shortcut ---------- */
.lph-plan-area-head{
    grid-template-columns:auto minmax(0,1fr) auto auto!important;
}
.lph-plan-edit-source{
    appearance:none;
    min-height:30px;
    padding:5px 8px;
    border:1px solid #e1e6e9;
    border-radius:8px;
    background:#fff;
    color:var(--lp-primary,#7b1d3d);
    font:650 9.5px/1 var(--lp-font-family,inherit);
    cursor:pointer;
    white-space:nowrap;
    transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.lph-plan-edit-source:hover{
    border-color:color-mix(in srgb,var(--lp-primary,#7b1d3d) 30%,#dfe5e9);
    background:color-mix(in srgb,var(--lp-primary,#7b1d3d) 4%,#fff);
    transform:translateY(-1px);
}

/* ---------- Roadmap filters + collapsible areas ---------- */
.lph-roadmap-filters{
    display:flex;
    align-items:center;
    gap:6px;
    margin:10px 14px 0;
    padding:0 0 2px;
    overflow-x:auto;
    scrollbar-width:none;
}
.lph-roadmap-filters::-webkit-scrollbar{
    display:none;
}
.lph-roadmap-filters button{
    appearance:none;
    flex:0 0 auto;
    min-height:30px;
    padding:6px 10px;
    border:1px solid #dfe5e9;
    border-radius:999px;
    background:#fff;
    color:#66717a;
    font:650 9.5px/1 var(--lp-font-family,inherit);
    cursor:pointer;
    white-space:nowrap;
}
.lph-roadmap-filters button:hover{
    border-color:color-mix(in srgb,var(--lp-primary,#7b1d3d) 24%,#dfe5e9);
    color:var(--lp-primary,#7b1d3d);
}
.lph-roadmap-filters button.is-active{
    border-color:color-mix(in srgb,var(--lp-primary,#7b1d3d) 26%,#dfe5e9);
    background:color-mix(in srgb,var(--lp-primary,#7b1d3d) 7%,#fff);
    color:var(--lp-primary,#7b1d3d);
}
.lph-summary-people .lph-roadmap-stop-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:8px!important;
}
.lph-roadmap-collapse{
    appearance:none;
    display:grid;
    place-items:center;
    width:28px;
    height:28px;
    padding:0;
    border:1px solid #e0e5e8;
    border-radius:8px;
    background:#fff;
    color:#64707a;
    cursor:pointer;
}
.lph-roadmap-collapse span{
    display:block;
    font-size:13px;
    line-height:1;
    transition:transform .16s ease;
}
.lph-roadmap-stop.is-collapsed .lph-roadmap-collapse span{
    transform:rotate(180deg);
}
.lph-roadmap-stop.is-collapsed [data-lph-roadmap-body]{
    display:none!important;
}
.lph-roadmap-stop.is-collapsed .lph-roadmap-stop-card{
    box-shadow:0 3px 10px rgba(15,23,42,.035)!important;
}
.lph-roadmap-stop-body{
    min-width:0;
}
.lph-summary-people .lph-roadmap-stop-body>p,
.lph-roadmap-shell>.lph-roadmap-journey .lph-roadmap-stop-body>p{
    padding:0 16px!important;
    margin:0 0 12px!important;
    color:var(--lp-muted,#68737d)!important;
    font-size:13px!important;
    line-height:1.55!important;
}
.lph-roadmap-empty{
    margin:14px!important;
    min-height:160px!important;
}

/* ---------- Responsive final pass ---------- */
@media(min-width:901px) and (max-width:1350px){
    .lph-course-right>.lph-person-switcher,
    .lph-summary-person-switcher,
    .lph-background-person-switcher{
        position:sticky;
        top:0;
        z-index:9;
        box-shadow:0 5px 14px rgba(15,23,42,.04);
    }
    .lph-person-switcher{
        padding:5px!important;
        border-radius:11px!important;
    }
    .lph-person-switcher button{
        min-height:36px!important;
        font-size:11px!important;
    }
}

@media(max-width:980px){
    .lph-household-progress-copy{
        display:none;
    }
    .lph-household-progress-person{
        padding-right:5px;
    }
    .lph-progress-context{
        display:none;
    }
}

@media(max-width:760px){
    .lph-household-progress{
        display:none!important;
    }
    .lph-person-avatar{
        width:28px;
        height:28px;
        flex-basis:28px;
    }
    .lph-plan-area-head{
        grid-template-columns:auto minmax(0,1fr) auto!important;
    }
    .lph-plan-edit-source{
        grid-column:2;
        justify-self:start;
        margin-top:5px;
    }
    .lph-plan-complete-mark{
        grid-column:3;
        grid-row:1 / span 2;
    }
    .lph-roadmap-filters{
        margin-left:10px;
        margin-right:10px;
    }
}