: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;
    }
}


/* =========================================================
   v0.7.0 — Exercise module, using global Health course design
   ========================================================= */

/* Exercise intentionally reuses the same course shell/classes as Nutrition. */
.lph-app.is-exercise-workspace .lph-content{
    padding:0 !important;
    margin:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
}

.lph-app.is-exercise-workspace .lph-async-region{
    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-exercise-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-exercise-workspace .lph-course-shell{
    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-exercise-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;
    scrollbar-width:thin;
}

.lph-app.is-exercise-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;
    scrollbar-width:thin;
}

.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-app.is-medical-team-workspace .lph-content{
    padding:0!important;margin:0!important;min-height:0!important;overflow:hidden!important
}
.lph-app.is-medical-team-workspace .lph-async-region,
.lph-app.is-medical-team-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-medical-team-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-medical-team-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-medical-team-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
}

.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%;
    }
}


/* =========================================================
   v0.9.2 — Global premium modal system
   Reuse these .lph-global-modal* classes for future modals.
   ========================================================= */

:root{
    --lph-modal-header-bg: var(--lph-color-primary);
    --lph-modal-header-text: #ffffff;
    --lph-modal-footer-bg: #171a1f;
    --lph-modal-footer-text: #ffffff;
    --lph-modal-border: rgba(15,23,42,.10);
    --lph-modal-shadow: 0 32px 100px rgba(15,23,42,.30),0 10px 30px rgba(15,23,42,.14);
}

.lph-global-modal-overlay{
    background:rgba(17,21,26,.58)!important;
    backdrop-filter:blur(10px) saturate(115%)!important;
    -webkit-backdrop-filter:blur(10px) saturate(115%)!important;
}

.lph-global-modal{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.68)!important;
    background:#fff!important;
    box-shadow:var(--lph-modal-shadow)!important;
}

.lph-global-modal-head{
    position:sticky!important;
    top:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px 24px!important;
    border-bottom:0!important;
    background:var(--lph-modal-header-bg)!important;
    color:var(--lph-modal-header-text)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}

.lph-global-modal-head .lph-insurance-modal-kicker,
.lph-global-modal-head h2,
.lph-global-modal-head p{
    color:#fff!important;
}

.lph-global-modal-head .lph-insurance-modal-kicker{
    opacity:.78;
}

.lph-global-modal-head p{
    opacity:.78;
}

.lph-global-modal-close{
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,.22)!important;
    background:rgba(255,255,255,.10)!important;
    color:#fff!important;
}

.lph-global-modal-close:hover{
    background:rgba(255,255,255,.18)!important;
    color:#fff!important;
    transform:scale(1.03)!important;
}

.lph-global-modal-body{
    background:#fff;
}

.lph-global-modal-foot{
    position:sticky!important;
    bottom:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border-top:0!important;
    background:var(--lph-modal-footer-bg)!important;
    color:var(--lph-modal-footer-text)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}

.lph-global-modal-foot .lph-insurance-modal-footnote,
.lph-global-modal-foot .lph-global-modal-footnote{
    color:rgba(255,255,255,.72)!important;
}

.lph-global-modal-foot .lph-button-secondary{
    border-color:rgba(255,255,255,.22)!important;
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
}

.lph-global-modal-foot .lph-button-secondary:hover{
    border-color:rgba(255,255,255,.34)!important;
    background:rgba(255,255,255,.14)!important;
    color:#fff!important;
}

.lph-global-modal-foot .lph-button:not(.lph-button-secondary){
    background:#fff!important;
    color:var(--lph-color-primary)!important;
    border-color:#fff!important;
    box-shadow:0 6px 18px rgba(0,0,0,.16)!important;
}

.lph-global-modal-foot .lph-button:not(.lph-button-secondary):hover{
    background:#f4f5f6!important;
    color:var(--lph-color-primary)!important;
    border-color:#f4f5f6!important;
}

/* Insurance card actions */
.lph-insurance-card-actions{
    display:flex;
    align-items:center;
    gap:7px;
}

.lph-insurance-view-plan,
.lph-insurance-edit-plan{
    min-width:62px;
    min-height:34px;
    padding:7px 11px;
    border-radius:9px;
    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,
        background 200ms ease,
        color 200ms ease;
}

.lph-insurance-view-plan{
    border:1px solid #d8dde1;
    background:#fff;
    color:#424b54;
}

.lph-insurance-view-plan:hover{
    transform:translateY(-1px);
    border-color:#c3cbd1;
    background:#f6f7f8!important;
    color:#303840!important;
    box-shadow:0 6px 15px rgba(15,23,42,.06);
}

.lph-insurance-edit-plan{
    border:1px solid var(--lph-color-primary)!important;
    background:var(--lph-color-primary)!important;
    color:#fff!important;
}

.lph-insurance-edit-plan:hover{
    transform:translateY(-1px);
    border-color:#64172f!important;
    background:#64172f!important;
    color:#fff!important;
    box-shadow:0 7px 18px rgba(117,28,57,.20)!important;
}

/* Add New: stay neutral/maroon; do not flash white or pink */
.lph-insurance-add-new{
    border:1px solid rgba(117,28,57,.28)!important;
    background:var(--lph-color-primary)!important;
    color:#fff!important;
}

.lph-insurance-add-new span{
    color:#fff!important;
}

.lph-insurance-add-new:hover{
    transform:translateY(-1px);
    border-color:#64172f!important;
    background:#64172f!important;
    color:#fff!important;
    box-shadow:0 7px 18px rgba(117,28,57,.18)!important;
}

/* Avoid inherited pink hover treatments on insurance controls */
.lph-insurance-details-button:hover{
    background:#f6f7f8!important;
    color:#303840!important;
    border-color:#c8d0d5!important;
}

.lph-insurance-details-button:hover .lph-insurance-plus{
    color:#303840!important;
}

/* View modal */
.lph-insurance-view-modal{
    width:min(720px,100%);
}

.lph-insurance-view-body{
    padding:22px 24px 24px;
}

.lph-insurance-view-summary{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px;
    align-items:center;
    margin-bottom:18px;
    padding:14px;
    border:1px solid #e3e7ea;
    border-radius:13px;
    background:#fafbfc;
}

.lph-insurance-view-summary .lph-insurance-view-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:#f2f3f4;
    color:var(--lph-color-primary);
    font-size:18px;
}

.lph-insurance-view-summary strong,
.lph-insurance-view-summary span{
    display:block;
}

.lph-insurance-view-summary strong{
    color:#232a31;
    font-size:14px;
    font-weight:780;
}

.lph-insurance-view-summary span{
    margin-top:2px;
    color:#6b747d;
    font-size:12.5px;
}

.lph-insurance-view-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.lph-insurance-view-row{
    display:grid;
    gap:5px;
    min-height:70px;
    padding:12px 13px;
    border:1px solid #e4e8eb;
    border-radius:11px;
    background:#fff;
}

.lph-insurance-view-row span{
    color:#7a838c;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.01em;
}

.lph-insurance-view-row strong{
    overflow-wrap:anywhere;
    color:#2a3239;
    font-size:12.5px;
    font-weight:700;
}

.lph-insurance-view-footer{
    padding:14px 24px!important;
}

.lph-global-modal-footnote{
    display:flex;
    align-items:center;
    gap:7px;
    color:rgba(255,255,255,.72);
    font-size:10.5px;
}

.lph-global-modal-footnote span{
    display:grid;
    place-items:center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    color:#fff;
    font-size:10px;
}

.lph-global-modal-actions{
    display:flex;
    align-items:center;
    gap:9px;
}

@media(max-width:700px){
    .lph-insurance-card-actions{
        grid-column:1/-1;
        width:100%;
    }

    .lph-insurance-view-plan,
    .lph-insurance-edit-plan{
        flex:1;
    }

    .lph-insurance-view-grid{
        grid-template-columns:1fr;
    }

    .lph-global-modal-foot{
        align-items:stretch!important;
        flex-direction:column!important;
    }

    .lph-global-modal-actions{
        width:100%;
        flex-direction:column-reverse;
    }

    .lph-global-modal-actions .lph-button{
        width:100%;
    }
}


/* =========================================================
   v0.9.3 — Modal header/scroll/footer refinement
   ========================================================= */

/* Modal should fit the viewport; only the body scrolls. */
.lph-global-modal{
    display:flex!important;
    flex-direction:column!important;
    width:min(970px,calc(100vw - 48px))!important;
    max-height:calc(100vh - 48px)!important;
    overflow:hidden!important;
}

.lph-global-modal-head{
    flex:0 0 auto!important;
    min-height:106px;
}

.lph-global-modal-body{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    scrollbar-width:thin;
    scrollbar-color:#aab1b7 transparent;
}

.lph-global-modal-body::-webkit-scrollbar{
    width:7px;
}
.lph-global-modal-body::-webkit-scrollbar-track{
    background:transparent;
}
.lph-global-modal-body::-webkit-scrollbar-thumb{
    background:#aab1b7;
    border-radius:999px;
}
.lph-global-modal-body::-webkit-scrollbar-thumb:hover{
    background:#8e969d;
}

/* View modal: exactly two visual header lines. */
.lph-insurance-modal-titleblock--compact{
    gap:5px!important;
}

.lph-insurance-modal-titleblock--compact h2{
    margin:0!important;
}

.lph-insurance-modal-titleblock--compact p{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin:0!important;
    line-height:1.35;
}

.lph-insurance-modal-titleblock--compact p > span:first-child{
    font-weight:760;
    letter-spacing:.03em;
    text-transform:uppercase;
    font-size:10.5px;
}

.lph-modal-meta-dot{
    opacity:.58;
}

/* Close button: fixed centered alignment in top-right. */
.lph-global-modal-head{
    position:relative!important;
    padding-right:86px!important;
}

.lph-global-modal-close{
    position:absolute!important;
    top:50%!important;
    right:24px!important;
    transform:translateY(-50%)!important;
    display:grid!important;
    place-items:center!important;
    width:44px!important;
    height:44px!important;
    padding:0!important;
    margin:0!important;
    font-size:30px!important;
    line-height:1!important;
}

.lph-global-modal-close:hover{
    transform:translateY(-50%) scale(1.03)!important;
}

/* White footer with subtle border/shadow for a cleaner premium finish. */
.lph-global-modal-foot{
    flex:0 0 auto!important;
    position:relative!important;
    bottom:auto!important;
    z-index:5;
    color:#2d343b!important;
    background:#fff!important;
    border-top:1px solid #e3e7ea!important;
    box-shadow:0 -10px 28px rgba(15,23,42,.07)!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
}

.lph-global-modal-foot .lph-insurance-modal-footnote,
.lph-global-modal-foot .lph-global-modal-footnote{
    color:#68727b!important;
}

.lph-global-modal-foot .lph-insurance-modal-footnote span,
.lph-global-modal-foot .lph-global-modal-footnote span{
    background:#eef5f1!important;
    color:#24734f!important;
}

.lph-global-modal-foot .lph-button-secondary{
    border-color:#d7dde1!important;
    background:#fff!important;
    color:#303840!important;
    box-shadow:none!important;
}

.lph-global-modal-foot .lph-button-secondary:hover{
    border-color:#c5ccd2!important;
    background:#f6f7f8!important;
    color:#303840!important;
}

.lph-global-modal-foot .lph-button:not(.lph-button-secondary){
    border-color:var(--lph-color-primary)!important;
    background:var(--lph-color-primary)!important;
    color:#fff!important;
    box-shadow:0 7px 18px rgba(117,28,57,.18)!important;
}

.lph-global-modal-foot .lph-button:not(.lph-button-secondary):hover{
    border-color:#64172f!important;
    background:#64172f!important;
    color:#fff!important;
}

/* Keep the view footer visually balanced. */
.lph-insurance-view-footer{
    min-height:74px;
}

/* Avoid scrollbar sitting over content. */
.lph-insurance-view-body,
.lph-insurance-details-form{
    padding-right:28px!important;
}

/* Small screens */
@media(max-width:700px){
    .lph-global-modal{
        width:min(100%,calc(100vw - 20px))!important;
        max-height:calc(100vh - 20px)!important;
    }

    .lph-global-modal-head{
        min-height:96px;
        padding-right:72px!important;
    }

    .lph-global-modal-close{
        right:16px!important;
        width:40px!important;
        height:40px!important;
        font-size:28px!important;
    }

    .lph-insurance-modal-titleblock--compact p{
        gap:5px;
    }
}


/* =========================================================
   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-content{
    padding:0!important;margin:0!important;min-height:0!important;overflow:hidden!important
}
.lph-app.is-social-workspace .lph-async-region,
.lph-app.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-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:#fff!important
}
.lph-app.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:#eef2f3!important;border-right:1px solid #dde2e5!important
}
.lph-app.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:#fff!important
}
.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;
}

/* The share modal uses the compact modal close class. Keep it aligned and
   clickable regardless of legacy modal button styles. */
.lph-roadmap-share-modal .lph-modal-close{
    flex:0 0 auto!important;
    display:grid!important;
    place-items:center!important;
    width:38px!important;
    height:38px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.22)!important;
    border-radius:10px!important;
    color:#fff!important;
    background:rgba(255,255,255,.08)!important;
    font-size:24px!important;
    line-height:1!important;
    cursor:pointer!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 — Action Plan / Roadmap readability bump
   Keep main headings unchanged; increase supporting text 1–2px.
   ========================================================= */

/* Action Plan */
.lph-summary-card-head h2{
    font-size:16px!important;
}

.lph-summary-card-head>span{
    font-size:10.5px!important;
}

.lph-action-summary-item p{
    font-size:14px!important;
    line-height:1.52!important;
}

/* Roadmap */
.lph-roadmap-content h2{
    font-size:17px!important;
}

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

.lph-roadmap-content ul{
    font-size:13.5px!important;
    line-height:1.52!important;
}

/* Small labels / metadata */
.lph-roadmap-index{
    font-size:11px!important;
}

.lph-export-menu strong{
    font-size:12.5px!important;
}

.lph-export-menu small{
    font-size:10.5px!important;
}

/* Keep mobile readable without becoming oversized */
@media(max-width:520px){
    .lph-action-summary-item p{
        font-size:13.5px!important;
    }

    .lph-roadmap-content h2{
        font-size:16px!important;
    }

    .lph-roadmap-content p,
    .lph-roadmap-content ul{
        font-size:13px!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;
    display:grid!important;
    place-items:center!important;
    width:42px!important;
    height:42px!important;
    margin:1px 0 0 18px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.24)!important;
    border-radius:12px!important;
    background:rgba(255,255,255,.09)!important;
    color:#fff!important;
    font-size:25px!important;
    line-height:1!important;
    cursor:pointer!important;
}

.lph-roadmap-share-modal .lph-modal-close:hover{
    transform:scale(1.03)!important;
    border-color:rgba(255,255,255,.36)!important;
    background:rgba(255,255,255,.16)!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;
}

.lph-roadmap-share-modal .lph-share-foot .lph-button{
    min-height:40px!important;
    padding:9px 15px!important;
    border-radius:10px!important;
    font-size:12px!important;
    font-weight:760!important;
    box-shadow:none!important;
}

.lph-roadmap-share-modal .lph-share-foot .lph-button-secondary{
    border:1px solid #d8dde1!important;
    background:#fff!important;
    color:#343c44!important;
}

.lph-roadmap-share-modal .lph-share-foot .lph-button-secondary:hover{
    border-color:#c4cbd1!important;
    background:#f6f7f8!important;
    color:#2f373e!important;
}

.lph-roadmap-share-modal .lph-share-foot .lph-button:not(.lph-button-secondary){
    border:1px solid var(--lph-color-primary)!important;
    background:var(--lph-color-primary)!important;
    color:#fff!important;
    box-shadow:0 7px 18px rgba(117,28,57,.17)!important;
}

.lph-roadmap-share-modal .lph-share-foot .lph-button:not(.lph-button-secondary):hover{
    border-color:#64172f!important;
    background:#64172f!important;
    color:#fff!important;
}

.lph-roadmap-share-modal .lph-share-foot .lph-button:disabled{
    opacity:.55!important;
    cursor:not-allowed!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;
    }
}