:root {
    --paper: #fbfaf7;
    --surface: #ffffff;
    --ink: #17191a;
    --muted: #666b67;
    --line: #ded8cd;
    --navy: #1f6b57;
    --navy-soft: #154a3d;
    --bronze: #9a6a3c;
    --bronze-soft: #f2e6d8;
    --success: #315f49;
    --success-soft: #e4efe8;
    --danger: #a64d48;
    --shadow: 0 18px 45px rgba(29,35,31,.06);
}

* {
    box-sizing: border-box
}

html {
    font-size: 16px
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea {
    font: inherit
}

.app-shell {
    width: min(1480px,calc(100% - 48px));
    margin: 0 auto;
    padding: 30px 0 48px
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 0 0 28px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 40px
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 24px;
    min-width: 0
}

    .app-brand img {
        width: 190px;
        height: auto;
        display: block
    }

.app-brand-copy {
    padding-left: 24px;
    border-left: 1px solid var(--line)
}

    .app-brand-copy strong {
        display: block;
        font-family: "Source Serif 4",Georgia,serif;
        font-size: 30px;
        font-weight: 400;
        line-height: 1.08
    }

    .app-brand-copy span {
        display: block;
        margin-top: 7px;
        color: var(--muted);
        font-size: 15px
    }

.app-top-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

.home-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: #313432;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700
}

    .home-link:hover {
        background: #f2eee7;
        color: #17191a
    }

#btnClearPlan {
    border-radius: 999px;
    min-height: 44px;
    padding: 0 17px;
    border-color: #d8c5c1;
    color: #8c4944;
    background: transparent;
    font-size: 14px;
    font-weight: 700
}

    #btnClearPlan:hover {
        background: #f4e8e5;
        color: #7b3d38
    }

.my-journey-nav {
    display: inline-flex;
    gap: 4px;
    margin: -18px 0 36px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(255,255,255,.7);
}
.my-journey-nav a {
    min-height: 39px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    border-radius: 9px;
    color: #68706b;
    font-size: 13px;
    font-weight: 750;
    text-decoration: none;
}
.my-journey-nav a:hover { color: #29332e; background: #f3eee6; }
.my-journey-nav a.active { color: #fff; background: var(--navy); box-shadow: 0 5px 14px rgba(13,38,58,.14); }
.my-journey-nav i { font-size: 14px; }
.app-brand { color:var(--ink); text-decoration:none; }
.app-brand:hover { color:var(--ink); }
.app-primary-nav { display:inline-flex; align-items:center; gap:4px; padding:5px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.82); box-shadow:0 7px 22px rgba(30,36,32,.045); }
.app-primary-nav a { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; border-radius:10px; color:#66716b; font-size:13px; font-weight:780; text-decoration:none; white-space:nowrap; }
.app-primary-nav a:hover { color:#28352f; background:#f3eee6; }
.app-primary-nav a.active { color:#fff; background:var(--navy); box-shadow:0 5px 14px rgba(13,38,58,.14); }
.app-primary-nav i { font-size:14px; }
.app-primary-nav a:focus-visible,.group-context-breadcrumbs a:focus-visible,.group-section-nav a:focus-visible { outline:3px solid rgba(180,123,54,.28); outline-offset:2px; }
.app-account-danger { color:#944944!important; }
.app-account-danger:hover { background:#fff0ee!important; color:#7d3834!important; }
.group-context-navigation { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin:-18px 0 28px; padding:9px 12px 9px 17px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.78); box-shadow:0 8px 25px rgba(30,36,32,.035); }
.group-context-breadcrumbs { min-width:0; display:flex; align-items:center; gap:8px; overflow:hidden; margin:0; padding:0; list-style:none; }
.group-context-breadcrumbs li { min-width:0; display:flex; align-items:center; }
.group-context-breadcrumbs a,.group-context-breadcrumbs span { overflow:hidden; color:#53615a; font-size:13px; font-weight:760; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.group-context-breadcrumbs a:hover { color:#244c40; text-decoration:underline; }
.group-context-breadcrumbs span[aria-current="page"] { color:#25342e; }
.group-context-breadcrumbs i { color:#aaa096; font-size:10px; }
.group-context-selectors { display:flex; align-items:center; gap:16px; }
.group-context-picker { position:relative; z-index:91; display:flex; align-items:center; gap:8px; }
.group-context-picker.open { z-index:92; }
.group-context-picker-label { color:#887b6d; font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.group-context-menu-wrap { position:relative; width:190px; }
.group-context-trigger { width:100%; min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 13px; border:1px solid #d8d0c5; border-radius:11px; background:linear-gradient(180deg,#fff 0%,#fcfaf7 100%); color:#34413b; box-shadow:0 2px 5px rgba(41,47,43,.035); font-size:12px; font-weight:760; text-align:left; transition:border-color .16s ease,box-shadow .16s ease,background .16s ease; }
.group-context-trigger:hover { border-color:#bdae9e; background:#fff; box-shadow:0 5px 15px rgba(41,47,43,.07); }
.group-context-trigger:focus-visible,.group-context-picker.open .group-context-trigger { border-color:#9e8c79; outline:0; box-shadow:0 0 0 3px rgba(169,120,73,.13),0 5px 15px rgba(41,47,43,.07); }
.group-context-trigger-value { min-width:0; display:flex; align-items:center; gap:9px; }
.group-context-trigger-value>i { color:#a96f39; font-size:14px; }
.group-context-trigger-value>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-context-trigger-chevron { flex:0 0 auto; color:#766c62; font-size:11px; transition:transform .16s ease; }
.group-context-picker.open .group-context-trigger-chevron { transform:rotate(180deg); }
.group-context-menu-scrim { position:fixed; z-index:90; inset:0; width:100%; height:100%; padding:0; border:0; background:transparent; cursor:default; }
.group-context-menu { position:absolute; z-index:93; top:calc(100% + 8px); right:0; width:max(100%,230px); max-height:300px; overflow-y:auto; padding:6px; border:1px solid #d9d0c5; border-radius:13px; background:#fff; box-shadow:0 18px 45px rgba(33,40,36,.17),0 3px 10px rgba(33,40,36,.07); }
.group-context-option { width:100%; min-height:42px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 10px; border:0; border-radius:8px; background:transparent; color:#4e5b55; font-size:12px; font-weight:700; text-align:left; }
.group-context-option>span { min-width:0; display:flex; align-items:center; gap:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.group-context-option>span>i { flex:0 0 auto; color:#a89581; font-size:14px; }
.group-context-option>i { flex:0 0 auto; color:#2b6653; }
.group-context-option:hover,.group-context-option:focus-visible { outline:0; background:#f5f1ea; color:#28372f; }
.group-context-option.selected { background:#edf4f0; color:#214f40; }
.group-context-option.selected>span>i { color:#35735e; }
.group-section-nav { display:flex; gap:4px; margin:-8px 0 20px; padding:5px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.72); }
.group-section-nav a { min-height:38px; display:inline-flex; align-items:center; gap:7px; padding:0 14px; border-radius:8px; color:#65716a; font-size:12px; font-weight:780; text-decoration:none; }
.group-section-nav a:hover { color:#2e4038; background:#f3eee6; }
.workspace-intro {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 44px;
    align-items: end;
    margin-bottom: 28px
}

    .workspace-intro .eyebrow {
        margin: 0 0 9px;
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .20em;
        text-transform: uppercase;
        color: #817669
    }

    .workspace-intro h1 {
        margin: 0;
        font-family: "Source Serif 4",Georgia,serif;
        font-weight: 400;
        font-size: clamp(42px,4vw,62px);
        line-height: 1;
        letter-spacing: -.025em
    }

    .workspace-intro p {
        max-width: 680px;
        margin: 13px 0 0;
        color: var(--muted);
        font-size: 17px;
        line-height: 1.72
    }

.workspace-mark {
    font-size: 14px;
    color: #858883;
    text-align: right;
    line-height: 1.65;
    font-weight: 600
}

.workspace-menu-create { border-top:1px solid var(--line); }
.group-workspace-placeholder { min-height:360px; display:grid; place-items:center; align-content:center; gap:10px; padding:48px 24px; border:1px dashed var(--line); border-radius:20px; background:#fffdfa; text-align:center; }.group-workspace-placeholder>i { color:var(--bronze); font-size:36px; }.group-workspace-placeholder h2 { margin:0; font-family:"Source Serif 4",Georgia,serif; font-size:32px; font-weight:400; }.group-workspace-placeholder p { max-width:520px; margin:0 0 10px; color:var(--muted); font-size:16px; }.group-workspace-hero { align-items:start; }.group-workspace-intro-actions { display:grid; justify-items:end; gap:26px; margin-top:46px; }
.group-dashboard-overview,.group-directory-card { margin-bottom:20px; padding:28px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow); }.group-dashboard-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--line); }.group-dashboard-stats article { display:grid; grid-template-columns:32px 1fr; align-items:center; gap:2px 10px; padding:18px; background:#fffdfa; }.group-dashboard-stats i { grid-row:1 / 3; color:var(--bronze); font-size:20px; }.group-dashboard-stats span { color:#7a807a; font-size:13px; }.group-dashboard-stats strong { font-size:25px; line-height:1; }.group-directory-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:22px; }.group-directory-head .eyebrow { display:block; margin-bottom:5px; }.group-directory-head h2 { margin:0; font-family:"Source Serif 4",Georgia,serif; font-size:32px; font-weight:400; }.group-directory-head p { margin:4px 0 0; color:var(--muted); font-size:15px; }.group-directory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.group-directory-item { display:grid; gap:7px; padding:20px; border:1px solid var(--line); border-radius:15px; background:#fffdfa; color:#26352f; text-align:left; }.group-directory-item:hover,.group-directory-row:hover { border-color:#b8aca0; background:#f8f4ec; }.group-directory-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#edf2f4; color:#294b5a; }.group-directory-item strong { font-size:18px; }.group-directory-item small { color:var(--muted); font-size:13px; }.group-directory-table { border:1px solid var(--line); border-radius:14px; overflow:hidden; }.group-directory-row { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 130px 130px 30px; align-items:center; gap:12px; min-height:60px; padding:0 18px; border:0; border-bottom:1px solid var(--line); background:#fff; color:#303d37; text-align:left; }.group-directory-row:last-child { border-bottom:0; }.group-directory-row span { color:var(--muted); font-size:14px; }.group-directory-row i { color:#708078; }.group-directory-labels { min-height:38px; background:#f8f4ec; color:#7d7469; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }.group-directory-empty { display:grid; justify-items:center; gap:8px; padding:48px 24px; border:1px dashed var(--line); border-radius:14px; text-align:center; }.group-directory-empty i { color:var(--bronze); font-size:30px; }.group-directory-empty h3 { margin:0; font-family:"Source Serif 4",Georgia,serif; font-size:28px; font-weight:400; }.group-directory-empty p { margin:0 0 8px; color:var(--muted); font-size:15px; }
.group-dashboard-title { margin-bottom:22px; }.group-dashboard-title .eyebrow { display:block; margin-bottom:5px; }.group-dashboard-title h2 { margin:0; font-family:"Source Serif 4",Georgia,serif; font-size:32px; font-weight:400; }.group-dashboard-title p { margin:5px 0 0; color:var(--muted); font-size:15px; }
.group-data-card { overflow:hidden; margin-bottom:20px; padding:0; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:var(--shadow); }.group-data-card .group-directory-head { align-items:flex-start; margin:0; padding:28px 28px 20px; }.group-data-card .group-directory-head h2 { font-size:32px; }.group-data-card .group-directory-table { border-width:1px 0 0; border-radius:0; }.group-data-card .group-directory-row { grid-template-columns:minmax(0,1fr) 130px 160px 130px; min-height:76px; padding:0 28px; }.group-data-card .group-directory-labels { min-height:52px; background:#f8f4ec; font-size:12px; }.group-data-card .group-directory-grid { padding:0 28px 28px; }.group-data-card .group-directory-item { min-height:164px; padding:20px; }.row-icon-actions { display:flex; gap:0; }.row-icon-actions button,.row-icon-actions a { width:36px; height:36px; display:grid; place-items:center; border:1px solid #cdd9d3; border-right-width:0; border-radius:0; background:#fff; color:#345046; text-decoration:none; }.row-icon-actions>:first-child { border-radius:9px 0 0 9px; }.row-icon-actions>:last-child { border-right-width:1px; border-radius:0 9px 9px 0; }.row-icon-actions button:hover,.row-icon-actions a:hover { background:#f4f0e9; }.group-directory-item .row-icon-actions { margin-top:auto; }
.journey-detail-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:22px 0; }.journey-detail-list div,.journey-progress-modal>div { padding:15px; border:1px solid var(--line); border-radius:12px; background:#fffdfa; }.journey-detail-list dt,.journey-progress-modal span { color:var(--muted); font-size:13px; }.journey-detail-list dd,.journey-progress-modal strong { display:block; margin:3px 0 0; font-size:22px; font-weight:750; }.journey-progress-modal { display:grid; gap:12px; margin:22px 0; }.modal-progress-track { height:10px; overflow:hidden; margin-top:12px; border-radius:99px; background:#e9e2d8; }.modal-progress-track i { display:block; height:100%; border-radius:inherit; background:#315f49; }
.group-modal .group-primary-btn,.group-modal .group-secondary-btn,.group-modal .group-danger-btn { min-height:42px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 17px; border-radius:10px; font-size:14px; font-weight:750; line-height:1; text-decoration:none; }.group-modal .group-primary-btn { border:1px solid #1f6b57; background:#1f6b57; color:#fff; }.group-modal .group-secondary-btn { border:1px solid var(--line); background:#fff; color:#35423c; }.group-modal .group-danger-btn { border:1px solid #bd625a; background:#b64f48; color:#fff; }.group-modal .group-danger-btn:hover { border-color:#9f403a; background:#9f403a; }
.group-modal .group-primary-btn:hover { border-color:#1d4035; background:#1d4035; color:#fff; text-decoration:none; }.group-modal .group-secondary-btn:hover { border-color:#b8aca0; background:#f8f4ec; color:#26352f; }.group-modal .group-danger-btn:focus-visible,.group-modal .group-primary-btn:focus-visible,.group-modal .group-secondary-btn:focus-visible { outline:3px solid rgba(180,123,54,.28); outline-offset:2px; }
.group-modal .journey-step-progress span.journey-step-active { background:#876347!important; }
.group-directory-head-actions { display:flex; align-items:center; gap:12px; }.group-directory-head-actions .group-secondary-btn { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }.group-invite-feedback { display:flex; align-items:center; gap:7px; margin:16px 0 0; color:#315f49; font-size:14px; font-weight:700; }
.row-icon-actions button:disabled { opacity:.4; cursor:not-allowed; }.row-icon-actions button:disabled:hover { background:#fff; }.group-journey-empty { min-height:250px; margin:0 28px 28px; border-style:dashed; }
.add-member-modal { width:min(720px,100%); padding:30px; }.add-member-modal .journey-composer-head { margin-bottom:0; }.add-member-modal .journey-composer-head h2 { margin:4px 0 0; font-family:"Source Serif 4",Georgia,serif; font-size:32px; font-weight:400; }.add-member-modal .journey-composer-head p { max-width:600px; margin:7px 0 0; color:#66746c; font-size:15px; line-height:1.55; }.add-member-modal .member-invite-section { display:grid; gap:9px; margin-top:24px; padding:0; border:0; }.add-member-modal .member-invite-section label { margin:0; color:#3d4943; font-size:14px; font-weight:750; }.add-member-modal .invite-copy-line { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; }.add-member-modal .invite-copy-line .form-control { min-width:0; min-height:46px; font-size:14px; }.add-member-modal .invite-copy-line .group-secondary-btn { min-width:116px; min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }.add-member-modal .invite-copy-line strong { min-height:46px; display:flex; align-items:center; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:#fffdfa; font-size:16px; letter-spacing:.08em; }.add-member-modal .group-invite-feedback { margin:20px 0 0; }.add-member-modal .icon-close-btn { flex:0 0 auto; }
@media (max-width:560px) { .add-member-modal { padding:22px; }.add-member-modal .journey-composer-head { gap:12px; }.add-member-modal .journey-composer-head h2 { font-size:29px; }.add-member-modal .invite-copy-line { grid-template-columns:1fr; }.add-member-modal .invite-copy-line .group-secondary-btn { width:100%; }.add-member-modal .invite-copy-line strong { width:100%; } }
.workspace-intro-actions { display:grid; justify-items:end; gap:26px; }
.group-workspace-switcher { width:min(640px,100%); display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; justify-content:flex-end; gap:0; }
.workspace-menu-wrap { position:relative; min-width:0; }
.group-workspace-switcher > .workspace-switch-btn { min-width:0; }
.workspace-switch-btn { width:100%; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; overflow:hidden; padding:0 15px; border:1px solid var(--line); border-right:0; border-radius:0; background:#fff; color:#26352f; font-size:14px; font-weight:750; line-height:1; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.group-workspace-switcher > .workspace-switch-btn:first-child,.group-workspace-switcher > .workspace-menu-wrap:first-child > .workspace-switch-btn { border-radius:12px 0 0 12px; }.group-workspace-switcher > .workspace-switch-btn:last-child,.group-workspace-switcher > .workspace-menu-wrap:last-child > .workspace-switch-btn { border-right:1px solid var(--line); border-radius:0 12px 12px 0; }
.workspace-switch-btn:hover:not(:disabled) { background:#f2eee7; color:#17191a; }.workspace-switch-btn:disabled { opacity:.55; cursor:not-allowed; }.workspace-switch-btn .bi-chevron-down { font-size:11px; }
.workspace-menu { position:absolute; z-index:100; top:calc(100% + 8px); right:0; min-width:260px; overflow:hidden; padding:9px; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 18px 45px rgba(29,35,31,.14); text-align:left; }.workspace-menu strong,.workspace-menu a,.workspace-menu button,.workspace-menu-empty { display:block; width:100%; padding:10px 12px; color:#35423c; font-size:14px; text-decoration:none; text-align:left; }.workspace-menu strong { padding:5px 10px 8px; color:#7c7165; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }.workspace-menu a:hover,.workspace-menu button:hover { border-radius:9px; background:#f4f0e9; }.workspace-menu button { border:0; background:transparent; }.workspace-menu-empty { color:var(--muted); font-size:13px; }.workspace-menu-create { display:flex!important; align-items:center; gap:10px; margin-top:8px; padding:11px 10px!important; border-top:1px solid var(--line)!important; border-radius:9px; color:#1f6b57!important; font-weight:750; }.workspace-menu-create:hover { background:#eef5f0!important; }.workspace-menu-create i { display:grid; flex:0 0 auto; width:22px; height:22px; place-items:center; border-radius:50%; background:#e3efe7; color:#315f49; font-size:12px; }
.group-modal-backdrop { position:fixed; z-index:1050; inset:0; display:grid; place-items:center; padding:20px; background:rgba(24,31,27,.45); }.group-modal { width:min(620px,100%); max-height:calc(100vh - 40px); overflow:auto; padding:28px; border:1px solid var(--line); border-radius:18px; background:#fffdfa; box-shadow:0 24px 70px rgba(0,0,0,.2); }.group-entry-card .journey-composer-head { display:flex; justify-content:space-between; gap:20px; }.group-entry-card .journey-composer-head h2 { margin:4px 0; font-family:"Source Serif 4",Georgia,serif; font-size:30px; font-weight:400; }.group-entry-card .journey-composer-head p { margin:0; color:var(--muted); font-size:15px; }.icon-close-btn { width:38px; height:38px; border:1px solid var(--line); border-radius:50%; background:#fff; }.journey-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:22px; }.journey-field { display:grid; gap:7px; }.journey-field label { color:#3d4943; font-size:14px; font-weight:750; }.journey-field-full { grid-column:1/-1; }.journey-field textarea { resize:vertical; }.group-entry-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }.group-primary-btn,.group-secondary-btn { min-height:42px; padding:0 16px; border-radius:10px; font-size:14px; font-weight:750; }.group-primary-btn { border:1px solid #1f6b57; background:#1f6b57; color:#fff; }.group-secondary-btn { border:1px solid var(--line); background:#fff; color:#35423c; }.group-inline-error { margin-top:14px; color:#9a4843; font-size:14px; }.workspace-menu-join { display:flex!important; align-items:center; gap:10px; padding:11px 10px!important; border:0!important; border-radius:9px; color:#53645b!important; font-weight:750; }.workspace-menu-join:hover { background:#f4f0e9!important; }.workspace-menu-join i { display:grid; flex:0 0 auto; width:22px; height:22px; place-items:center; border-radius:50%; background:#f0ebe3; color:#9b714e; font-size:12px; }

.workspace-menu-back {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    padding: 7px 10px 11px !important;
    border-bottom: 1px solid var(--line);
    border-radius: 0 !important;
    color: #53645b !important;
    font-weight: 750;
}

.workspace-menu-back:hover {
    background: transparent !important;
    color: #263e37 !important;
}

.workspace-menu-back i {
    width: 22px;
    height: 22px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: #f0ebe3;
    color: #806a58;
    font-size: 12px;
}

.workspace-menu-back span {
    font-size: 13px;
}

.card {
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    box-shadow: var(--shadow) !important;
    background: rgba(255,255,255,.92)
}

.card-body {
    padding: 30px !important
}

.card.mb-4 {
    margin-bottom: 20px !important
}

.card.mb-3 {
    margin-bottom: 20px !important
}

.form-label {
    font-size: 14px;
    font-weight: 700;
    color: #4e534f;
    margin-bottom: 8px;
    letter-spacing: .01em
}

.form-control,
.form-select,
.input-group-text {
    min-height: 50px;
    border-color: #d7d1c7;
    background: #fff;
    font-size: 16px
}

.form-control,
.form-select {
    border-radius: 11px
}

.input-group .input-group-text {
    border-radius: 11px 0 0 11px;
    color: #747973;
    background: #f7f3ec;
    font-size: 17px
}

.input-group .form-control {
    border-radius: 0 11px 11px 0
}

.form-control:focus,
.form-select:focus {
    border-color: #9b8b7b;
    box-shadow: 0 0 0 .22rem rgba(169,120,73,.11)
}

#btnEstimate,
#btnGenerate {
    min-height: 46px;
    border-radius: 999px;
    padding: 0 21px;
    font-size: 14px;
    font-weight: 800
}

#btnEstimate {
    border-color: #cfc8bd;
    color: #525552;
    background: #fff
}

#btnGenerate {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff
}

    #btnGenerate:hover {
        background: var(--navy-soft)
    }

#estimateBox {
    border: 0;
    border-left: 4px solid var(--bronze);
    border-radius: 10px;
    background: #f4ede4;
    color: #554d45;
    font-size: 15px;
    line-height: 1.6;
    padding: 15px 18px;
    margin-top: 20px;
}

.progress-tools .card-body {
    padding: 24px 28px !important
}

.progress-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px
}

.progress-overview-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0
}

.progress-overview-title strong {
    color: #252a27;
    font-size: 16px;
    font-weight: 800
}

.progress-overview-title span {
    color: #7a7f7a;
    font-size: 13px;
    font-weight: 700
}

.progress-overview-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
}

.progress-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

    .progress-stat i {
        color: var(--bronze);
        font-size: 15px;
    }

    .progress-stat strong {
        color: var(--ink);
        font-size: 15px;
        font-weight: 800;
    }

.progress-stat-streak {
    border: 0;
    background: transparent;
    color: var(--muted);
}

    .progress-stat-streak i {
        color: var(--bronze);
    }

    .progress-stat-streak strong {
        color: var(--ink);
    }

.progress {
    height: 12px !important;
    background: #ebe5db;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 14px
}

.progress-full {
    width: 100% !important
}

.progress-bar {
    background: var(--navy);
    font-size: 0;
    border-radius: 999px
}

#progressText,
#streakBadge {
    padding: 0
}

#searchNotes {
    min-height: 48px
}

.schedule-search-row {
    padding: 16px 28px;
    border-bottom: 1px solid var(--line);
    background: #fcfaf6
}

.schedule-search-input {
    width: 100%;
    max-width: none
}

.schedule-search-input .input-group-text {
    min-width: 48px;
    justify-content: center;
    border-color: #d8d2c8;
    background: #f6f2eb;
    color: #777c77
}

.schedule-search-input .form-control {
    border-color: #d8d2c8;
    background: #fff
}

.schedule-search-input .form-control:focus {
    position: relative;
    z-index: 2
}

.schedule-search-clear {
    min-width: 48px;
    border: 1px solid #d8d2c8;
    border-left: 0;
    border-radius: 0 11px 11px 0;
    background: #fff;
    color: #747a74
}

.schedule-search-clear:hover {
    background: #f3efe8;
    color: #303531
}

.schedule-search-input .form-control.has-clear {
    border-radius: 0
}

.schedule-card .card-body {
    padding: 0 !important;
    overflow: hidden
}

.schedule-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 25px 28px 20px;
    border-bottom: 1px solid var(--line)
}

.schedule-toolbar-copy {
    min-width: 0
}

.schedule-toolbar h2 {
    margin: 0;
    font-family: "Source Serif 4",Georgia,serif;
    font-size: 34px;
    font-weight: 400
}

.schedule-toolbar p {
    margin: 6px 0 0;
    font-size: 15px;
    color: var(--muted)
}

.view-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f5f1ea;
    flex: 0 0 auto
}

    .view-switch button {
        width: 38px;
        height: 36px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #686d69;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        transition: background .16s ease,color .16s ease,box-shadow .16s ease
    }

        .view-switch button:hover {
            background: #fff;
            color: var(--ink)
        }

        .view-switch button.active {
            background: #fff;
            color: var(--navy);
            box-shadow: 0 2px 8px rgba(31,36,33,.10)
        }

.table-responsive {
    margin: 0
}

.table {
    margin-bottom: 0;
    font-size: 15px
}

    .table thead th {
        background: #f3eee6 !important;
        color: #606560;
        border-bottom: 1px solid var(--line);
        padding: 15px 16px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: .07em;
        font-weight: 800;
        white-space: nowrap
    }

    .table tbody td {
        padding: 17px 16px;
        border-color: #ece7df;
        vertical-align: middle;
        color: #303331;
        line-height: 1.48
    }

    .table tbody tr {
        transition: background .16s ease
    }

        .table tbody tr:hover {
            background: #fbf9f5
        }

        .table tbody tr.today-row {
            background: #fffaf2
        }

            .table tbody tr.today-row td:first-child {
                box-shadow: inset 4px 0 0 var(--bronze)
            }

    .table tbody td:nth-child(2) {
        font-weight: 700;
        color: #23303a
    }

    .table .text-muted.small {
        font-size: 14px !important;
        color: #747873 !important
    }

.badge {
    font-size: 13px;
    font-weight: 800;
    border-radius: 999px;
    padding: 7px 10px;
    letter-spacing: .01em
}

    .badge.bg-success {
        background: #e2eee6 !important;
        color: #315f49 !important
    }

    .badge.bg-secondary {
        background: #ece8e2 !important;
        color: #666966 !important
    }

    .badge.bg-warning {
        background: #f3ead8 !important;
        color: #866b3f !important
    }

.today-badge {
    background: var(--bronze-soft) !important;
    color: #76502f !important;
    margin-left: 7px
}

.schedule-actions.btn-group {
    gap: 0
}

    .schedule-actions.btn-group > .btn {
        width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        margin: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 !important;
        font-size: 16px;
        font-weight: 700;
        background: #fff
    }

        .schedule-actions.btn-group > .btn:first-child {
            border-radius: 9px 0 0 9px !important
        }

        .schedule-actions.btn-group > .btn:last-child {
            border-radius: 0 9px 9px 0 !important
        }

.schedule-actions .btn-success {
    background: #315f49 !important;
    border-color: #315f49 !important;
    color: #fff
}

.schedule-actions .btn-done-pending {
    background: #fff !important;
    border-color: #c9d3cd !important;
    color: #567064 !important
}

    .schedule-actions .btn-done-pending:hover {
        background: #f3f7f4 !important;
        border-color: #aebfb5 !important;
        color: #315f49 !important
    }

.schedule-actions .btn-outline-secondary {
    border-color: #d2ccc2;
    color: #5e615e
}

.schedule-actions .btn-outline-primary {
    border-color: #c4d1db;
    color: #31546d
}

.schedule-actions .btn-outline-dark {
    border-color: #d2ccc2;
    color: #5c5f5c
}

.schedule-actions .btn:hover {
    position: relative;
    z-index: 2
}

.schedule-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 16px;
    padding: 22px 24px 8px
}

.reading-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 22px;
    border: 1px solid #e2ddd4;
    border-radius: 16px;
    background: #fff;
    transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease
}

    .reading-card:hover {
        transform: translateY(-1px);
        border-color: #d0c7ba;
        box-shadow: 0 10px 26px rgba(30,35,32,.06)
    }

    .reading-card.is-today {
        grid-column: 1/-1;
        padding: 26px;
        border: 2px solid #c99d72;
        background: linear-gradient(135deg,#fffaf3 0%,#fff 62%);
        box-shadow: 0 16px 36px rgba(96,68,43,.09)
    }

        .reading-card.is-today::before {
            content: "";
            position: absolute;
            left: -2px;
            top: 20px;
            bottom: 20px;
            width: 5px;
            border-radius: 0 6px 6px 0;
            background: var(--bronze)
        }

.reading-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px
}

.reading-card-date {
    font-size: 15px;
    font-weight: 800;
    color: #353a36
}

.reading-card.is-today .reading-card-date {
    font-size: 17px;
    color: #68472d
}

.reading-card-reading {
    font-family: "Source Serif 4",Georgia,serif;
    font-size: 26px;
    line-height: 1.22;
    color: #172b3a;
    margin-bottom: 14px
}

.reading-card.is-today .reading-card-reading {
    font-size: clamp(29px,3vw,38px);
    max-width: 980px
}

.reading-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 14px;
    color: #666c67;
    font-size: 14px;
    margin-bottom: 15px
}

    .reading-card-meta span {
        display: inline-flex;
        align-items: center;
        gap: 6px
    }

.reading-card-note {
    margin-top: auto;
    padding: 13px 14px;
    border-radius: 10px;
    background: #fbfaf7;
    color: #656a66;
    font-size: 14px;
    line-height: 1.55
}

    .reading-card-note.has-note {
        color: #303633;
        background: #f4f1ea
    }

.reading-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 17px;
    padding-top: 16px;
    border-top: 1px solid #ece7df
}

    .reading-card-footer .action-label {
        font-size: 13px;
        color: #7a7f79;
        font-weight: 700
    }

.empty-schedule {
    padding: 54px 24px;
    text-align: center;
    color: #727771;
    font-size: 15px
}

    .empty-schedule i {
        display: block;
        font-size: 28px;
        color: #aaa49a;
        margin-bottom: 10px
    }

.schedule-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px 22px;
    border-top: 1px solid #ece7df;
    background: #fcfaf6
}

.pager-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: #777c77;
    font-size: 14px
}

    .pager-summary strong {
        color: #333834;
        font-size: 14px
    }

.pager-range {
    white-space: nowrap
}

.pager-controls {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #d8d2c8;
    border-radius: 11px;
    background: #fff
}

    .pager-controls button {
        width: 42px;
        height: 40px;
        border: 0;
        background: #fff;
        color: #343a35;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px
    }

        .pager-controls button + button {
            border-left: 1px solid #e3ded5
        }

        .pager-controls button:hover:not(:disabled) {
            background: #f2eee7;
            color: var(--navy)
        }

        .pager-controls button:disabled {
            opacity: .36;
            cursor: not-allowed
        }

/* =========================================================
   DIALOGS / MODALS
   ========================================================= */

.modal-content {
    border: 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(10,20,28,.18)
}

.modal-header,
.modal-footer {
    border-color: #ece7df
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px
}

.modal-body {
    padding: 24px;
    font-size: 16px
}

.modal-title {
    font-family: "Source Serif 4",Georgia,serif;
    font-size: 28px;
    font-weight: 400
}

.modal-close-btn,
.toast-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #7b7f7c;
    padding: 0
}

.modal-close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px
}

    .modal-close-btn:hover {
        background: #f2eee7;
        color: #292d2a
    }

.toast-close-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 14px
}

    .toast-close-btn:hover {
        background: #f2eee7;
        color: #292d2a
    }

#noteModalDay {
    font-size: 14px
}

#noteText {
    font-size: 16px
}

#sharePreview {
    border-color: #ded8cd !important;
    background: #faf7f1;
    font-size: 15px
}

/* STANDARD FOOTER ACTIONS */
.modal-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 20px 24px !important
}

    .modal-footer .modal-action-btn {
        width: 150px !important;
        min-width: 150px !important;
        height: 44px !important;
        padding: 0 16px !important;
        border-radius: 9px !important;
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        white-space: nowrap !important
    }

        .modal-footer .modal-action-btn i {
            font-size: 15px;
            line-height: 1;
            flex: 0 0 auto
        }

        .modal-footer .modal-action-btn .spinner-border {
            width: 13px;
            height: 13px;
            margin: 0;
            flex: 0 0 auto
        }

.toast {
    border: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(0,0,0,.10);
    font-size: 14px
}

.footer-note {
    text-align: center;
    color: #858a85;
    font-size: 14px;
    margin: 26px 0 0;
    letter-spacing: .02em
}

/* =========================================================
   RESPONSIVE
   ========================================================= */


@media(max-width:767.98px) {
    .progress-overview-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px
    }

    .progress-overview-stats {
        width: 100%;
        justify-content: flex-start
    }

    .schedule-search-row {
        padding: 14px 20px
    }
}

@media(max-width:1200px) { .app-brand-copy { display:none; }.app-topbar { gap:18px; } }
@media(max-width:900px) {
    .app-primary-nav { width:100%; order:3; }
    .app-primary-nav a { flex:1; }
    .group-context-navigation { align-items:stretch; flex-direction:column; margin-top:-16px; }
    .group-context-selectors { width:100%; }
    .group-context-picker { flex:1; }
    .group-context-menu-wrap { width:100%; }


    .app-shell {
        width: min(100% - 28px,1480px)
    }

    .app-topbar,
    .workspace-intro {
        align-items: flex-start;
        flex-direction: column;
        display: flex
    }

    .workspace-mark {
        text-align: left
    }

    .app-brand-copy {
        display: none
    }

    .app-top-actions {
        width: 100%;
        justify-content: flex-end
    }

    .schedule-grid {
        grid-template-columns: 1fr
    }

    .reading-card.is-today {
        grid-column: auto
    }
}

@media(max-width:767.98px) {

    body {
        font-size: 16px
    }

    .view-switch {
        display: none
    }

    #scheduleTableWrap {
        display: none !important
    }

    #scheduleCards {
        display: grid !important
    }

    .schedule-toolbar {
        align-items: flex-start;
        padding: 22px 20px 17px
    }

        .schedule-toolbar h2 {
            font-size: 31px
        }

        .schedule-toolbar p {
            font-size: 15px
        }

    .schedule-grid {
        padding: 16px 16px 6px;
        gap: 14px
    }

    .reading-card {
        padding: 19px
    }

        .reading-card.is-today {
            padding: 21px
        }

            .reading-card-reading,
            .reading-card.is-today .reading-card-reading {
                font-size: 27px
            }

            .reading-card-date,
            .reading-card.is-today .reading-card-date {
                font-size: 16px
            }

    .reading-card-meta,
    .reading-card-note {
        font-size: 15px
    }

    .reading-card-footer {
        align-items: flex-end
    }

        .reading-card-footer .action-label {
            display: none
        }

    .schedule-actions.btn-group > .btn {
        width: 42px;
        height: 42px;
        min-height: 42px;
        font-size: 18px
    }

    .schedule-pager {
        padding: 17px 16px 19px
    }

    .pager-summary {
        font-size: 13px;
        gap: 7px;
        flex-direction: column;
        align-items: flex-start
    }

        .pager-summary strong {
            font-size: 14px
        }
}

@media(max-width:560px) {
    .app-primary-nav { position:fixed; z-index:1040; right:10px; bottom:10px; left:10px; width:auto; padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); border-color:#d9d1c6; background:rgba(255,255,255,.94); box-shadow:0 14px 38px rgba(31,40,35,.18); backdrop-filter:blur(16px); }
    .app-primary-nav a { min-width:0; min-height:48px; flex-direction:column; gap:2px; padding:4px 6px; font-size:10px; }
    .app-primary-nav i { font-size:17px; }
    .app-shell { padding-bottom:96px; }
    .group-context-navigation { gap:12px; padding:12px; }
    .group-context-breadcrumbs { width:100%; overflow-x:auto; }
    .group-context-selectors { display:grid; grid-template-columns:1fr; }
    .group-context-picker { display:grid; grid-template-columns:62px minmax(0,1fr); }


    .group-workspace-intro-actions {
        width: 100%;
        justify-items: start;
    }

    .group-workspace-switcher {
        width: 100%;
        overflow: visible;
        grid-auto-columns: minmax(0, 1fr);
        justify-content: flex-start;
    }

    .group-workspace-switcher > .workspace-switch-btn,
    .group-workspace-switcher > .workspace-menu-wrap {
        min-width: 0;
    }

    .app-shell {
        padding-top: 18px;
        width: min(100% - 20px,1480px)
    }

    .app-brand img {
        width: 156px
    }

    .card-body {
        padding: 22px !important
    }

    .workspace-intro h1 {
        font-size: 42px
    }

    .workspace-intro p {
        font-size: 16px
    }

    .home-link span {
        display: none
    }

    .home-link,
    #btnClearPlan {
        min-height: 44px
    }

    .form-label {
        font-size: 15px
    }

    .form-control,
    .form-select,
    .input-group-text {
        font-size: 16px;
        min-height: 52px
    }

    #btnEstimate,
    #btnGenerate {
        min-height: 48px;
        font-size: 15px
    }

    .progress-tools .card-body {
        padding: 22px !important
    }

    .progress-tools .d-flex {
        align-items: stretch !important
    }

    .progress-tools .input-group {
        max-width: none !important;
        width: 100%
    }

    .progress-tools .progress {
        width: 100% !important
    }

    #progressText,
    #streakBadge {
        font-size: 13px
    }

    .schedule-toolbar h2 {
        font-size: 30px
    }

    .reading-card-reading,
    .reading-card.is-today .reading-card-reading {
        font-size: 25px
    }

    .reading-card-top {
        gap: 10px
    }

    .footer-note {
        font-size: 12px
    }

    .modal-footer {
        gap: 10px !important;
        padding: 18px 20px !important
    }

        .modal-footer .modal-action-btn {
            width: 140px !important;
            min-width: 140px !important;
            height: 44px !important;
            padding: 0 12px !important;
            font-size: 13px !important
        }
}

@media(max-width:380px) {

    .modal-footer .modal-action-btn {
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 0 !important
    }
}

/* =========================================================
   READING PLAN BUILDER WIZARD
   ========================================================= */

.plan-builder-card {
    overflow: hidden;
    background: rgba(255,255,255,.96) !important;
}

.plan-builder-card > .card-body {
    padding: 0 !important;
}

.plan-builder-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding: 30px 32px 22px;
}

.plan-builder-kicker,
.plan-summary-kicker {
    display: block;
    margin-bottom: 7px;
    color: #817669;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.plan-builder-head h2 {
    margin: 0;
    font-family: "Source Serif 4",Georgia,serif;
    font-size: clamp(30px,3vw,40px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.015em;
    color: var(--ink);
}

.plan-builder-head p {
    max-width: 720px;
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.plan-step-count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid #ddd6cc;
    border-radius: 999px;
    background: #fbfaf7;
    color: #6e716d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    white-space: nowrap;
}

.plan-stepper {
    display: grid;
    grid-template-columns: minmax(0,1fr) 42px minmax(0,1fr);
    align-items: center;
    gap: 10px;
    padding: 0 32px 28px;
}

.plan-step {
    appearance: none;
    width: 100%;
    min-width: 0;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 13px 15px;
    border: 1px solid #ded8cd;
    border-radius: 14px;
    background: #faf8f4;
    color: #70746f;
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}

.plan-step:hover:not(:disabled) {
    border-color: #c9beb1;
    background: #fff;
}

.plan-step:disabled {
    cursor: default;
    opacity: .62;
}

.plan-step.active {
    border-color: rgba(13,38,58,.35);
    background: #f7fafc;
    color: var(--navy);
    box-shadow: inset 0 0 0 1px rgba(13,38,58,.06);
}

.plan-step.complete {
    border-color: #cddccf;
    background: #f5faf7;
    color: var(--success);
}

.plan-step-number {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8d1c7;
    border-radius: 50%;
    background: #fff;
    color: #717570;
    font-size: 13px;
    font-weight: 800;
}

.plan-step.active .plan-step-number {
    border-color: var(--navy);
    background: var(--navy);
    color: #fff;
}

.plan-step.complete .plan-step-number {
    border-color: var(--success);
    background: var(--success);
    color: #fff;
}

.plan-step-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.plan-step-copy strong {
    color: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.plan-step-copy small {
    overflow: hidden;
    color: #858985;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-step.active .plan-step-copy small,
.plan-step.complete .plan-step-copy small {
    color: #66717a;
}

.plan-step-line {
    height: 2px;
    border-radius: 999px;
    background: #e4ded5;
}

.plan-step-line.complete {
    background: #9eb9a8;
}

.plan-step-panel {
    padding: 30px 32px 32px;
    border-top: 1px solid #e8e2d9;
    background: linear-gradient(180deg,#fff 0%,#fff 72%,#fdfbf8 100%);
}

.plan-step-panel-head {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 24px;
}

.plan-step-icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfd6ca;
    border-radius: 12px;
    background: #f5eee5;
    color: var(--bronze);
    font-size: 19px;
}

.plan-step-panel-head h3 {
    margin: 0;
    font-family: "Source Serif 4",Georgia,serif;
    color: var(--ink);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.12;
}

.plan-step-panel-head p {
    max-width: 780px;
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.plan-fields {
    --bs-gutter-x: 18px;
    --bs-gutter-y: 18px;
}

.plan-fields > [class*="col-"] {
    display: flex;
}

.plan-field {
    width: 100%;
    min-width: 0;
    padding: 20px;
    border: 1px solid #e2dcd2;
    border-radius: 15px;
    background: #fbfaf7;
    box-shadow: 0 7px 20px rgba(29,35,31,.025);
}

.plan-field-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 7px;
}

.plan-field-heading .form-label {
    margin: 0;
    color: #2f3431;
    font-size: 14px;
    font-weight: 800;
}

.plan-field-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1ebe2;
    color: #876342;
    font-size: 14px;
}

.plan-field-help {
    min-height: 64px;
    margin: 0 0 14px;
    color: #686d68;
    font-size: 13px;
    line-height: 1.55;
}

.plan-field .form-control,
.plan-field .form-select,
.plan-field .input-group-text {
    min-height: 48px;
}

.plan-field .form-control,
.plan-field .form-select {
    border-color: #d8d0c5;
    background-color: #fff;
}

.plan-field .form-control:focus,
.plan-field .form-select:focus {
    border-color: #9b8b7b;
    box-shadow: 0 0 0 .2rem rgba(169,120,73,.10);
}

.plan-inline-field {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ddd5ca;
}

.plan-inline-field .form-label {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 800;
    color: #545954;
}

.plan-inline-field .form-text {
    margin-top: 7px;
    color: #7d817c;
    font-size: 12px;
}

.plan-field-note {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin-top: 12px;
    color: #7a7f7a;
    font-size: 12px;
    line-height: 1.45;
}

.plan-field-note i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: #9a826b;
}

.plan-validation {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 11px 13px;
    border: 1px solid #e7c9c5;
    border-radius: 10px;
    background: #fbf1ef;
    color: #8a4944;
    font-size: 13px;
    font-weight: 700;
}

.plan-step-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #ebe5dc;
}

.plan-step-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #747974;
    font-size: 13px;
    line-height: 1.45;
}

.plan-step-tip i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--bronze);
}

.plan-primary-action,
.plan-secondary-action,
.plan-final-actions .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    padding: 0 17px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.plan-primary-action {
    border-color: var(--navy) !important;
    background: var(--navy) !important;
    color: #fff !important;
}

.plan-primary-action:hover:not(:disabled) {
    border-color: var(--navy-soft) !important;
    background: var(--navy-soft) !important;
}

.plan-summary {
    margin-top: 22px;
    padding: 18px 20px;
    border: 1px solid #dfd7cc;
    border-radius: 14px;
    background: #f6f1ea;
}

.plan-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 15px;
}

.plan-summary-head strong {
    display: block;
    color: #353a36;
    font-size: 15px;
    font-weight: 800;
}

.plan-summary-kicker {
    margin-bottom: 3px;
    font-size: 10px;
}

.plan-edit-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 11px;
    border: 1px solid #d3cabe;
    border-radius: 9px;
    background: #fff;
    color: #525752;
    font-size: 12px;
    font-weight: 800;
}

.plan-edit-step:hover:not(:disabled) {
    background: #fdfbf8;
    color: var(--navy);
}

.plan-summary-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 10px;
}

.plan-summary-grid > div {
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid #e4ddd3;
    border-radius: 10px;
    background: rgba(255,255,255,.72);
}

.plan-summary-grid small {
    display: block;
    margin-bottom: 3px;
    color: #818681;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.plan-summary-grid span {
    display: block;
    overflow: hidden;
    color: #313632;
    font-size: 13px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-replace-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 16px;
    padding: 13px 15px;
    border: 1px solid #e5d6c4;
    border-radius: 11px;
    background: #fbf6ef;
    color: #5c5145;
}

.plan-replace-note > i {
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--bronze);
    font-size: 16px;
}

.plan-replace-note strong,
.plan-replace-note span {
    display: block;
}

.plan-replace-note strong {
    margin-bottom: 2px;
    font-size: 13px;
}

.plan-replace-note span {
    color: #777067;
    font-size: 12px;
    line-height: 1.45;
}

.plan-step-footer-final {
    align-items: center;
}

.plan-final-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.plan-final-actions #btnEstimate,
.plan-final-actions #btnGenerate {
    min-height: 44px;
    border-radius: 10px;
    padding: 0 17px;
}

.plan-final-actions #btnGenerate {
    min-width: 176px;
}

@media(max-width:991.98px) {
    .plan-stepper {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .plan-step-line {
        width: 2px;
        height: 14px;
        margin-left: 34px;
    }

    .plan-field-help {
        min-height: 0;
    }
}

@media(max-width:767.98px) {
    .plan-builder-head,
    .plan-step-panel {
        padding-left: 22px;
        padding-right: 22px;
    }

    .plan-stepper {
        padding-left: 22px;
        padding-right: 22px;
    }

    .plan-builder-head {
        flex-direction: column;
        gap: 14px;
    }

    .plan-step-count {
        align-self: flex-start;
    }

    .plan-step-footer,
    .plan-step-footer-final {
        flex-direction: column;
        align-items: stretch;
    }

    .plan-step-tip {
        order: 2;
    }

    .plan-primary-action,
    .plan-secondary-action {
        width: 100%;
    }

    .plan-final-actions {
        width: 100%;
        margin-left: 0;
    }

    .plan-final-actions .btn {
        flex: 1 1 0;
    }

    .plan-summary-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:520px) {
    .plan-builder-head,
    .plan-step-panel {
        padding-left: 18px;
        padding-right: 18px;
    }

    .plan-builder-head {
        padding-top: 22px;
    }

    .plan-stepper {
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 22px;
    }

    .plan-builder-head h2 {
        font-size: 31px;
    }

    .plan-step {
        min-height: 66px;
        padding: 11px 12px;
    }

    .plan-step-copy small {
        white-space: normal;
    }

    .plan-step-panel-head h3 {
        font-size: 25px;
    }

    .plan-field {
        padding: 17px;
    }

    .plan-final-actions {
        flex-direction: column;
    }

    .plan-final-actions .btn,
    .plan-final-actions #btnGenerate {
        width: 100%;
        min-width: 0;
    }
}

/* =========================================================
   ACTIVE READING PLAN SUMMARY
   ========================================================= */

.plan-builder-active .card-body {
    padding: 0 !important;
}

.plan-active-summary {
    padding: 24px 28px;
}

.plan-active-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.plan-active-head h2 {
    margin: 0;
    font-family: "Source Serif 4",Georgia,serif;
    color: var(--ink);
    font-size: 30px;
    font-weight: 400;
    line-height: 1.08;
}

.plan-active-head p {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.45;
}

.plan-edit-schedule-btn {
    flex: 0 0 auto;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-color: var(--navy) !important;
    border-radius: 10px;
    background: var(--navy) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.plan-edit-schedule-btn:hover {
    border-color: var(--navy-soft) !important;
    background: var(--navy-soft) !important;
}

.plan-active-values {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    border: 1px solid #e3ddd4;
    border-radius: 13px;
    background: #faf8f4;
    overflow: hidden;
}

.plan-active-value {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
}

.plan-active-value + .plan-active-value {
    border-left: 1px solid #e6e0d7;
}

.plan-active-value > i {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f0e9df;
    color: #866243;
    font-size: 13px;
}

.plan-active-value > div {
    min-width: 0;
}

.plan-active-value small,
.plan-active-value strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.plan-active-value small {
    margin-bottom: 2px;
    color: #868a85;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.plan-active-value strong {
    color: #313632;
    font-size: 12px;
    font-weight: 800;
}

/* =========================================================
   EDIT SCHEDULE WARNING
   ========================================================= */

.schedule-edit-warning {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid #ead4ba;
    border-radius: 12px;
    background: #fcf6ed;
    color: #574a3d;
}

.schedule-edit-warning-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f2e3d0;
    color: #9a6535;
    font-size: 18px;
}

.schedule-edit-warning strong {
    display: block;
    color: #423a32;
    font-size: 14px;
    line-height: 1.4;
}

.schedule-edit-warning p {
    margin: 5px 0 0;
    color: #6f6255;
    font-size: 13px;
    line-height: 1.5;
}

.schedule-edit-progress {
    margin-top: 18px;
}

.schedule-edit-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
    color: #656a66;
    font-size: 12px;
    font-weight: 800;
}

.schedule-edit-progress-head strong {
    color: var(--navy);
    font-size: 14px;
}

.schedule-edit-progress-track {
    height: 9px;
    overflow: hidden;
    border-radius: 999px;
    background: #ebe5dc;
}

.schedule-edit-progress-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--navy);
}

.schedule-edit-warning-note {
    margin: 14px 0 0;
    color: #777c77;
    font-size: 12px;
    line-height: 1.55;
}

@media(max-width:1199.98px) {
    .plan-active-values {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }

    .plan-active-value + .plan-active-value {
        border-left: 0;
    }

    .plan-active-value:nth-child(2),
    .plan-active-value:nth-child(3),
    .plan-active-value:nth-child(5),
    .plan-active-value:nth-child(6) {
        border-left: 1px solid #e6e0d7;
    }

    .plan-active-value:nth-child(n+4) {
        border-top: 1px solid #e6e0d7;
    }
}

@media(max-width:767.98px) {
    .plan-active-summary {
        padding: 22px;
    }

    .plan-active-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .plan-edit-schedule-btn {
        width: 100%;
    }

    .plan-active-values {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }

    .plan-active-value:nth-child(3),
    .plan-active-value:nth-child(5) {
        border-left: 0;
    }

    .plan-active-value:nth-child(2),
    .plan-active-value:nth-child(4),
    .plan-active-value:nth-child(6) {
        border-left: 1px solid #e6e0d7;
    }

    .plan-active-value:nth-child(n+3) {
        border-top: 1px solid #e6e0d7;
    }
}

@media(max-width:520px) {
    .plan-active-summary {
        padding: 18px;
    }

    .plan-active-head h2 {
        font-size: 27px;
    }

    .plan-active-values {
        grid-template-columns: 1fr;
    }

    .plan-active-value:nth-child(n) {
        border-left: 0;
    }

    .plan-active-value:nth-child(n+2) {
        border-top: 1px solid #e6e0d7;
    }
}

/* =========================================================
   READ SCRIPTURE
   ========================================================= */

.schedule-actions .btn-read-scripture {
    border-color: #c9d8cf;
    color: #416b57;
}

.schedule-actions .btn-read-scripture:hover {
    background: #f1f7f3 !important;
    border-color: #aec5b8 !important;
    color: #254f3c !important;
}

.read-scripture-dialog {
    max-width: 860px;
}

.read-scripture-dialog .modal-content {
    max-height: min(88vh, 920px);
}

.read-scripture-header {
    background: linear-gradient(180deg,#fff 0%,#fcfaf6 100%);
}

.read-scripture-date {
    margin-top: 3px;
    color: #747873;
    font-size: 13px;
    font-weight: 700;
}

.read-scripture-body {
    padding: 0;
    background: #fbfaf7;
}

.read-scripture-controls {
    display: grid;
    grid-template-columns: minmax(240px,320px) minmax(0,1fr);
    gap: 20px;
    align-items: end;
    padding: 20px 24px;
    border-bottom: 1px solid #e8e2d9;
    background: #fff;
}

.read-scripture-selection .form-label {
    margin-bottom: 7px;
    color: #555b57;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.read-scripture-selection .form-select {
    min-height: 44px;
    border-color: #d8d2c8;
    background-color: #fff;
    font-size: 14px;
}

.read-scripture-scheduled {
    min-width: 0;
    padding-bottom: 3px;
}

.read-scripture-scheduled span {
    display: block;
    margin-bottom: 4px;
    color: #858983;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.read-scripture-scheduled strong {
    display: block;
    overflow: hidden;
    color: #25313a;
    font-family: "Source Serif 4",Georgia,serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.read-scripture-loading,
.read-scripture-empty {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #666c67;
}

.read-scripture-loading {
    gap: 16px;
}

.read-scripture-loading .spinner-border {
    width: 30px;
    height: 30px;
    color: var(--bronze);
}

.read-scripture-loading div,
.read-scripture-empty {
    flex-direction: column;
}

.read-scripture-loading strong,
.read-scripture-loading span,
.read-scripture-empty strong,
.read-scripture-empty span {
    display: block;
}

.read-scripture-loading strong,
.read-scripture-empty strong {
    color: #343a36;
    font-size: 15px;
}

.read-scripture-loading span,
.read-scripture-empty span {
    margin-top: 4px;
    font-size: 13px;
}

.read-scripture-empty {
    padding: 40px 24px;
}

.read-scripture-empty i {
    margin-bottom: 12px;
    color: #9a958c;
    font-size: 32px;
}

.read-scripture-passages {
    padding: 8px 24px 6px;
}

.read-scripture-passage {
    padding: 28px 0 30px;
}

.read-scripture-passage + .read-scripture-passage {
    border-top: 1px solid #e5dfd5;
}

.read-scripture-passage-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 19px;
}

.read-scripture-kicker {
    margin-bottom: 4px;
    color: #8a735f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.read-scripture-passage h3 {
    margin: 0;
    color: #173147;
    font-family: "Source Serif 4",Georgia,serif;
    font-size: 30px;
    font-weight: 400;
}

.read-scripture-verses {
    max-width: 740px;
}

.read-scripture-verses p {
    display: inline;
    margin: 0;
    color: #333a35;
    font-family: Georgia,"Times New Roman",serif;
    font-size: 17px;
    line-height: 1.78;
}

.read-scripture-verses p + p::before {
    content: " ";
}

.read-scripture-verses sup {
    position: relative;
    top: -.15em;
    margin-right: 4px;
    color: #9a704b;
    font-family: "Inter",system-ui,sans-serif;
    font-size: 10px;
    font-weight: 800;
}

.read-scripture-error {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 14px 15px;
    border: 1px solid #ead6c5;
    border-radius: 10px;
    background: #fff8f2;
    color: #775844;
    font-size: 14px;
}

.read-scripture-retry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.read-scripture-attribution {
    padding: 16px 24px 18px;
    border-top: 1px solid #e8e2d9;
    background: #f6f2eb;
    color: #7b7f7a;
    font-size: 12px;
    text-align: center;
}

.read-scripture-attribution a {
    color: #526c5d;
    font-weight: 800;
    text-decoration: none;
}

.read-scripture-attribution a:hover {
    text-decoration: underline;
}

@media(max-width:767.98px) {
    .read-scripture-dialog {
        margin: 10px;
        max-width: none;
    }

    .read-scripture-dialog .modal-content {
        max-height: calc(100vh - 20px);
    }

    .read-scripture-controls {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 18px 20px;
    }

    .read-scripture-passages {
        padding: 4px 20px;
    }

    .read-scripture-passage {
        padding: 24px 0 26px;
    }

    .read-scripture-passage h3 {
        font-size: 27px;
    }

    .read-scripture-verses p {
        font-size: 16px;
        line-height: 1.72;
    }

    .read-scripture-attribution {
        padding: 15px 20px 17px;
    }
}

/* =========================================================
   READ SCRIPTURE — BROWSER TEXT TO SPEECH
   ========================================================= */

.read-scripture-audio {
    padding: 16px 24px 18px;
    border-bottom: 1px solid #e8e2d9;
    background: #fbfaf7;
}

.read-scripture-audio-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 13px;
}

.read-scripture-audio-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd5c9;
    border-radius: 10px;
    background: #fff;
    color: var(--bronze);
    font-size: 16px;
}

.read-scripture-audio-heading strong,
.read-scripture-audio-heading span {
    display: block;
}

.read-scripture-audio-heading strong {
    color: #28302c;
    font-size: 14px;
    font-weight: 800;
}

.read-scripture-audio-heading > div > span {
    margin-top: 1px;
    color: #777c77;
    font-size: 12px;
}

.read-scripture-audio-controls {
    display: grid;
    grid-template-columns: minmax(220px,1fr) 100px auto;
    gap: 12px;
    align-items: end;
}

.read-scripture-audio-field label {
    display: block;
    margin-bottom: 5px;
    color: #6b706b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.read-scripture-audio-field .form-select {
    min-height: 38px;
    border-color: #d8d2c8;
    background-color: #fff;
    font-size: 13px;
}

.read-scripture-audio-actions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-self: end;
}

.read-scripture-audio-actions .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.read-scripture-play-btn {
    border-color: var(--navy) !important;
    background: var(--navy) !important;
    color: #fff !important;
}

.read-scripture-play-btn:hover:not(:disabled) {
    border-color: var(--navy-2) !important;
    background: var(--navy-2) !important;
}

.read-scripture-audio-actions .btn:disabled {
    opacity: .42;
}

.read-scripture-audio-unavailable,
.read-scripture-audio-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid #e4d3c5;
    border-radius: 9px;
    background: #fff8f2;
    color: #775844;
    font-size: 12px;
    line-height: 1.45;
}

.read-scripture-audio-error {
    margin-top: 10px;
}

@media(max-width:767.98px) {
    .read-scripture-audio {
        padding: 15px 20px 17px;
    }

    .read-scripture-audio-controls {
        grid-template-columns: minmax(0,1fr) 92px;
    }

    .read-scripture-audio-actions {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .read-scripture-audio-actions .btn {
        flex: 1 1 0;
    }
}

@media(max-width:460px) {
    .read-scripture-audio-controls {
        grid-template-columns: 1fr;
    }

    .read-scripture-audio-actions {
        grid-column: auto;
    }

    .read-scripture-audio-actions .btn span {
        display: none;
    }

    .read-scripture-audio-actions .btn {
        min-height: 42px;
        font-size: 16px;
    }
}

/* =========================================================
   READ SCRIPTURE — SPOKEN WORD HIGHLIGHT
   ========================================================= */

.scripture-verse-text {
    display: inline;
}

.scripture-word {
    border-radius: 4px;
    transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;
}

.scripture-word-active {
    background: #f2dfae;
    color: #18231e;
    box-shadow: 0 0 0 2px #f2dfae;
}

@media (prefers-reduced-motion: reduce) {
    .scripture-word {
        transition: none;
    }
}

/* =========================================================
   READ SCRIPTURE — STICKY READER CONTROLS
   Keep translation + TTS controls accessible while the
   highlighted Scripture follows the spoken word.
   ========================================================= */

.read-scripture-body {
    position: relative;
}

.read-scripture-sticky-controls {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    box-shadow: 0 8px 18px rgba(22, 27, 24, .08);
}

.read-scripture-sticky-controls .read-scripture-controls,
.read-scripture-sticky-controls .read-scripture-audio {
    position: relative;
    z-index: 1;
}

@media(max-width:767.98px) {
    .read-scripture-sticky-controls {
        box-shadow: 0 6px 16px rgba(22, 27, 24, .08);
    }
}


/* =========================================================
   READ SCRIPTURE — SPOKEN WORD HIGHLIGHT (sticky-safe override)
   Keep this after the sticky-control rules so the active word
   always remains visible while the reader controls stay pinned.
   ========================================================= */

.read-scripture-verses .scripture-word-active,
.read-scripture-verses .scripture-word[data-tts-active="true"] {
    background: #f2dfae !important;
    color: #18231e !important;
    box-shadow: 0 0 0 2px #f2dfae !important;
    border-radius: 4px;
}

/* =========================================================
   READ SCRIPTURE — POLISHED READER TOOLBAR
   ========================================================= */

.read-scripture-header-copy {
    min-width: 0;
}

.read-scripture-header-reading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    color: #52635a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.read-scripture-header-reading i {
    color: var(--bronze);
    font-size: 13px;
}

.read-scripture-date {
    margin-top: 4px;
    color: #858983;
    font-size: 12px;
    font-weight: 700;
}

.scripture-reader-toolbar-wrap {
    position: relative;
    padding: 12px 24px;
    border-bottom: 1px solid #e7e1d8;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(10px);
}

.scripture-reader-toolbar {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border: 1px solid #d7d1c7;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20,26,22,.04);
    overflow: visible;
}

.scripture-reader-control-wrap {
    position: relative;
    display: flex;
}

.scripture-reader-control {
    height: 40px;
    min-width: 40px;
    padding: 0 12px;
    border: 0;
    border-left: 1px solid #e2ddd5;
    border-radius: 0;
    background: #fff;
    color: #4f5651;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: "Inter",system-ui,sans-serif;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    transition: background .14s ease,color .14s ease,box-shadow .14s ease;
}

.scripture-reader-toolbar > :first-child > .scripture-reader-control,
.scripture-reader-toolbar > .scripture-reader-control:first-child {
    border-left: 0;
    border-radius: 9px 0 0 9px;
}

.scripture-reader-toolbar > :last-child,
.scripture-reader-toolbar > .scripture-reader-control:last-child {
    border-radius: 0 9px 9px 0;
}

.scripture-reader-control:hover:not(:disabled),
.scripture-reader-control.active {
    background: #f4f1eb;
    color: var(--navy);
}

.scripture-reader-control:focus-visible {
    position: relative;
    z-index: 2;
    outline: 0;
    box-shadow: inset 0 0 0 2px rgba(16,43,66,.28);
}

.scripture-reader-control:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.scripture-reader-control-primary {
    background: var(--navy);
    color: #fff;
}

.scripture-reader-control-primary:hover:not(:disabled) {
    background: var(--navy-2);
    color: #fff;
}

.scripture-reader-control i:not(.scripture-reader-chevron) {
    flex: 0 0 auto;
    font-size: 14px;
}

.scripture-reader-control-text,
.scripture-reader-control-meta {
    display: inline-block;
}

.scripture-reader-control-meta {
    color: #818781;
    font-size: 10px;
    font-weight: 800;
}

.scripture-reader-control-primary .scripture-reader-control-meta {
    color: rgba(255,255,255,.8);
}

.scripture-reader-chevron {
    margin-left: 1px;
    color: #9a9e9a;
    font-size: 9px;
}

.scripture-reader-voice-meta {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scripture-reader-menu {
    position: absolute;
    z-index: 80;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid #d9d3ca;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(20,26,22,.16);
}

.scripture-reader-menu-translation {
    width: 330px;
}

.scripture-reader-menu-voice {
    width: min(390px, 72vw);
}

.scripture-reader-menu-rate {
    width: 170px;
}

.scripture-reader-menu-title {
    padding: 7px 9px 6px;
    color: #888d88;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.scripture-reader-menu-item {
    width: 100%;
    min-height: 36px;
    padding: 7px 9px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #353b37;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    gap: 8px;
    text-align: left;
    font-size: 12px;
}

.scripture-reader-menu-item:hover,
.scripture-reader-menu-item.selected {
    background: #f4f1eb;
    color: var(--navy);
}

.scripture-reader-menu-item span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 700;
}

.scripture-reader-menu-item small {
    color: #8a8f8a;
    font-size: 10px;
    font-weight: 700;
}

.scripture-reader-menu-item i {
    color: #4b745f;
    font-size: 14px;
}

.read-scripture-audio-unavailable-compact,
.read-scripture-audio-error-compact {
    margin-top: 9px;
    padding: 8px 10px;
    font-size: 11px;
}

@media(max-width:767.98px) {
    .scripture-reader-toolbar-wrap {
        padding: 10px 14px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .scripture-reader-toolbar-wrap::-webkit-scrollbar {
        display: none;
    }

    .scripture-reader-toolbar {
        min-width: max-content;
    }

    .scripture-reader-control {
        width: 42px;
        min-width: 42px;
        height: 40px;
        padding: 0;
        gap: 0;
    }

    .scripture-reader-control-text,
    .scripture-reader-control-meta,
    .scripture-reader-chevron {
        display: none;
    }

    .scripture-reader-control-wrap:first-child .scripture-reader-control {
        width: auto;
        min-width: 112px;
        padding: 0 12px;
        gap: 7px;
    }

    .scripture-reader-control-wrap:first-child .scripture-reader-translation-text,
    .scripture-reader-control-wrap:first-child .scripture-reader-control-meta,
    .scripture-reader-control-wrap:first-child .scripture-reader-chevron {
        display: inline-block;
    }

    .scripture-reader-menu {
        position: fixed;
        left: 14px;
        right: 14px;
        top: auto;
        bottom: 18px;
        width: auto;
        max-width: none;
        max-height: min(52vh, 360px);
        border-radius: 14px;
        box-shadow: 0 22px 60px rgba(15,22,18,.24);
    }

    .read-scripture-header-reading {
        max-width: calc(100vw - 105px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}


/* =========================================================
   READ SCRIPTURE — iOS SAFARI MOBILE PICKER FIX
   Keep reader menus inside the sticky toolbar instead of using
   position:fixed, which Safari can anchor incorrectly inside a
   transformed/scrollable Bootstrap modal.
   ========================================================= */
@media (max-width: 767.98px) {
    .scripture-reader-toolbar-wrap {
        overflow: visible;
    }

    .scripture-reader-toolbar {
        min-width: 0;
        width: 100%;
        display: flex;
    }

    .scripture-reader-control-wrap {
        flex: 0 0 auto;
    }

    .scripture-reader-control-wrap:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .scripture-reader-control-wrap:first-child .scripture-reader-control {
        width: 100%;
        min-width: 0;
    }

    .scripture-reader-menu {
        position: absolute;
        z-index: 120;
        top: calc(100% + 8px);
        bottom: auto;
        left: 0;
        right: auto;
        width: min(340px, calc(100vw - 56px));
        max-width: calc(100vw - 56px);
        max-height: min(46vh, 340px);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border-radius: 12px;
    }

    .scripture-reader-menu-voice {
        left: 50%;
        transform: translateX(-50%);
    }

    .scripture-reader-menu-rate {
        left: auto;
        right: 0;
        width: 180px;
        max-width: calc(100vw - 56px);
        transform: none;
    }

    .scripture-reader-menu-item {
        min-height: 44px;
        padding: 10px 11px;
        font-size: 13px;
    }

    .scripture-reader-menu-item span {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.25;
    }

    .scripture-reader-menu-item small {
        white-space: nowrap;
        font-size: 11px;
    }
}

/* Group Journey mobile directory: rows become compact, readable cards instead
   of squeezing the desktop table columns into the viewport. */
@media (max-width: 767.98px) {
    .group-directory-table {
        display: grid;
        gap: 12px;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .group-directory-labels {
        display: none !important;
    }

    .group-directory-row,
    .group-data-card .group-directory-row {
        min-height: 0;
        padding: 15px 16px;
        border: 1px solid var(--line) !important;
        border-radius: 13px;
        background: #fffdfa;
    }

    .group-directory-card .group-directory-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name members"
            "name journeys";
        gap: 5px 18px;
    }

    .group-directory-card .group-directory-row > strong { grid-area: name; align-self: center; font-size: 16px; }
    .group-directory-card .group-directory-row > span { color: #6d7871; font-size: 13px; }
    .group-directory-card .group-directory-row > span:nth-of-type(1) { grid-area: members; }
    .group-directory-card .group-directory-row > span:nth-of-type(2) { grid-area: journeys; }
    .group-directory-card .group-directory-row > span::before { display: inline-block; min-width: 70px; margin-right: 5px; color: #8b7d6e; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .group-directory-card .group-directory-row > span:nth-of-type(1)::before { content: "Members"; }
    .group-directory-card .group-directory-row > span:nth-of-type(2)::before { content: "Journeys"; }
    .group-directory-card .group-directory-row > i { display: none; }

    .group-data-card .group-directory-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name actions"
            "detail progress";
        gap: 7px 16px;
    }

    .group-data-card .group-directory-row > strong { grid-area: name; align-self: center; font-size: 16px; line-height: 1.25; }
    .group-data-card .group-directory-row > span { color: #68736c; font-size: 13px; }
    .group-data-card .group-directory-row > span:nth-of-type(1) { grid-area: detail; }
    .group-data-card .group-directory-row > span:nth-of-type(2) { grid-area: progress; text-align: right; }
    .group-data-card .group-directory-row > div { grid-area: actions; }
    .group-members-card .group-directory-row > span:nth-of-type(2)::before { content: "Progress "; color: #8b7d6e; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .group-journeys-card .group-directory-row > span:nth-of-type(1)::before { content: "Members "; color: #8b7d6e; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .group-journeys-card .group-directory-row > span:nth-of-type(2)::before { content: "Group progress "; color: #8b7d6e; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

    .group-data-card .group-directory-head { padding: 24px 20px 18px; }
    .group-data-card .group-directory-grid { padding: 0 20px 20px; }
    .group-journey-empty { margin: 0 20px 20px; }
}

.group-member-card-avatar {
    overflow: hidden;
    border-radius: 50%;
}

.group-member-name {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.group-member-name strong {
    overflow: hidden;
    color: #26352f;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-member-table-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid #d7e1dc;
    border-radius: 50%;
    background: #e6eeea;
    color: #245745 !important;
    font-size: 11px !important;
    font-weight: 850;
}

.group-member-table-avatar span {
    color: inherit !important;
    font-size: inherit !important;
}

.group-member-table-row.leader {
    background: linear-gradient(90deg,rgba(177,126,72,.105) 0%,rgba(177,126,72,.045) 72%,rgba(255,255,255,.75) 100%);
    box-shadow: inset 3px 0 0 #b17e48;
}

.group-member-table-row.leader:hover {
    background: linear-gradient(90deg,rgba(177,126,72,.15) 0%,rgba(177,126,72,.07) 72%,#faf7f1 100%);
}

@media(max-width:767.98px) {
    .group-members-card .group-directory-row > .group-member-name {
        grid-area: name;
    }

    .group-members-card .group-directory-row > .row-icon-actions {
        grid-area: actions;
    }
}

.read-scripture-supplemental {
    padding: 0 24px 24px;
}

.read-scripture-footer-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-right: auto;
}

.read-scripture-dialog .modal-footer {
    flex-wrap: wrap !important;
}

@media (max-width: 767px) {
    .read-scripture-footer-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}