:root {
            --brown: #71643C;
            --teal: #006F7A;
            --slate: #3E4E59;
            --sage: #F4F5F0;
            --cream: #FDFCF8;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--cream);
            color: var(--slate);
            min-height: 100vh;
        }


        /* ── TOP BAR ── */
        .app-top-bar {
            background: #fff;
            border-bottom: 2px solid var(--brown);
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 70px;
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .back-link {
            font-size: 0.85rem;
            color: var(--teal) !important;
            text-decoration: none;
            font-weight: 600;
        }

        .back-link:hover { color: var(--brown) !important; }

        #user-sync-pill {
            font-size: 0.75rem;
            color: #fff;
            background: var(--teal);
            padding: 6px 14px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            border: none;
            transition: background 0.2s ease;
        }

        #user-sync-pill:hover { background: var(--brown); }

        #user-sync-pill[data-user="Guest"] {
            background-color: #fff9eb;
            color: var(--brown);
            border: 2px solid #ffa000;
            animation: gentle-pulse 2s infinite;
        }

        @keyframes gentle-pulse {
            0%   { box-shadow: 0 0 0 0 rgba(255,160,0,0.4); }
            70%  { box-shadow: 0 0 0 10px rgba(255,160,0,0); }
            100% { box-shadow: 0 0 0 0 rgba(255,160,0,0); }
        }

        /* ── LOGO HEADER ── */
        .logo-header {
            background: #fff;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100px;
        }

        .logo-header img {
            max-height: 80px;
            width: auto;
            display: block;
        }                       
        
        /* ── PAGE TITLE / SUB-NAVIGATION BAR ── */
        .page-title-bar-nav {
            margin-top: 5px;
            margin-bottom: 10px;
            background-color: #334155; 
            border-bottom: 3px solid #1e293b; 
            width: 100%;
            height: 3.43em;
        }

        .sub-nav-wrapper ul {
            display: flex;
            justify-content: center;
            list-style-type: none;
            max-width: 62.5em;
            margin: 0 auto;
            padding: 0;
        }

        .sub-nav-wrapper ul li {
            display: flex;
            justify-content: center;
            flex: 1 1 auto;
            text-align: center;
            max-width: 62.5em;
            padding: 0;
        }

        .sub-nav-wrapper ul li a {
            max-width: 100%;
            width: 100%;
            height: 3.43em;
            font-family: Arial, Helvetica, sans-serif;
            text-decoration: none;
            color: #FFFFFF !important;
            line-height: 3.43em;
            font-size: 1.1em;
            text-transform: uppercase;
            text-align: center;
            letter-spacing: 0.5px;
            transition: background-color 0.15s ease;
        }

        .sub-nav-wrapper ul li a:hover { 
            background-color: #543d32 !important; 
            color: #ffffff !important;
            padding: 0 !important;
            border-radius: 0 !important;
        }

        /* ── MASTER NAVIGATION PANEL STYLES (Synced with Core Branding CSS) ── */
        #header {
            width: 100%;
            height: 55px;
            margin: 0px auto 5px auto;
            background-color: #0f172a;
        }

        .navbar {
            padding-bottom: 0px;
            margin-top: 5px;
            margin-right: auto;
            margin-left: auto;
            background-color: #334155;
            border-bottom: 3px solid #1e293b;
            width: 100%;
            height: 3.43em;
        }

        .navbar ul {
            display: flex;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            list-style-type: none;
            max-width: 62.5em;
            margin-top: 0px;
            margin-bottom: 0px;
            margin-right: auto;
            margin-left: auto;
            padding: 0px;
            height: 100%;
        }

        .navbar ul li {
            display: flex;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
            padding: 0px;
            flex: 1 1 auto;
            text-align: center;
            max-width: 62.5em;
            height: 100%;
        }

        .navbar ul li a {
            max-width: 100%;
            width: 100%;
            height: 100%;
            font-family: Arial, Helvetica, sans-serif;
            text-decoration: none;
            text-transform: uppercase;
            color: #FFFFFF !important;
            line-height: 3.43em;
            font-size: 1.2em;
            text-align: center;
            transition: background-color 0.2s ease;
            display: block;
        }

        .navbar ul li a:hover {
            background-color: #543d32 !important;
            color: #ffffff !important;
            padding: 0 !important;
            border-radius: 0 !important;
        }

        .navbar .mobile_menu {
            width: 32px;
            height: 32px;
            background: url(Images/icon_menu.svg) no-repeat 0 0;
            background-size: contain;
            margin-top: 5px;
            margin-left: 15px;
            margin-bottom: 0px;
            display: none;
        }


        /* ── CONTENT WRAPPER ── */
        #content-wrapper {
            max-width: 780px;
            width: 100%;
            margin: 18px auto;
            padding: 0 16px 80px;
        }

        /* ── HEADER / CONTROLS SECTION ── */
        .utility-links {
            background: var(--sage);
            border-radius: 8px 8px 0 0;
            padding: 10px 20px 14px;
            text-align: center;
            margin-bottom: 0;
            border-bottom: 1px solid #d4cec6;
        }

        .utility-links h1 {
            color: var(--brown);
            margin: 0 0 6px 0;
            font-size: clamp(1.4rem, 5vw, 1.9rem);
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        /* ── FAMILY WORSHIP DATE PICKER (subtle inline toggle) ── */
        #fw-date-toggle {
            font-size: 0.78rem;
            color: #a0917f;
            text-decoration: none;
            opacity: 0.75;
            transition: opacity 0.2s;
        }

        #fw-date-toggle:hover {
            opacity: 1;
            color: var(--brown);
            background: none;
            padding: 0;
        }

        #target-date-picker {
            font-size: 0.78rem;
            padding: 2px 6px;
            border: 1px solid #c6bfba;
            border-radius: 4px;
            color: var(--slate);
            background: #fff;
            vertical-align: middle;
        }

        .navigation-links-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
        }

        /* ── BUTTONS ── */
        button, .solid-btn-link {
            background-color: var(--teal);
            color: white;
            border: none;
            padding: 10px 20px 14px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, color 0.2s;
        }

        button:hover, .solid-btn-link:hover {
            background-color: var(--brown);
            color: #fff;
            padding: 10px 20px 14px;
        }

        .nav-btn {
            background-color: var(--sage) !important;
            color: var(--teal) !important;
            border: 1px solid var(--teal) !important;
        }

        .nav-btn:hover {
            background-color: var(--teal) !important;
            color: #fff !important;
        }

        /* ── MAIN CARD ── */
        .main-card {
            background: #fff;
            border: 1px solid #d4cec6;
            border-top: none;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 2px 8px rgba(62,78,89,0.07);
            padding: 20px;
            margin-bottom: 28px;
        }

        /* ── CURRENT WEEK / FAMILY WORSHIP BOXES ── */
        .current-week-box {
            border: 1px solid #d4cec6;
            border-radius: 8px;
            padding: 18px;
            background-color: var(--sage);
            text-align: center;
            margin-bottom: 20px;
        }

        .current-week-box p { color: var(--slate); margin-bottom: 6px; font-size: 0.9rem; }

        .current-reading-title {
            margin: 0;
            font-size: clamp(1.1rem, 4vw, 1.5rem);
            color: var(--brown);
        }

        /* ── TABLES ── */
        .table-responsive {
            width: 100%;
            overflow-x: auto;
            margin-bottom: 20px;
            -webkit-overflow-scrolling: touch;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            font-size: clamp(0.85rem, 2vw, 0.95rem);
            background-color: white;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        th {
            background-color: var(--teal);
            color: #fff;
            font-weight: bold;
            padding: 10px 12px;
            text-align: left;
        }

        td {
            padding: 10px 12px;
            border-bottom: 1px solid #e1dfd5;
            text-align: left;
            word-wrap: break-word;
            vertical-align: top;
        }

        .col-date { width: 15%; }
        .col-ot-reading, .col-nt-reading { width: 30%; }
        .col-notes { width: 25%; }
        .col-daily-date { width: 100px; }
        .col-daily-check { width: 65px; text-align: center; }

        tr.current { background-color: var(--sage) !important; font-weight: bold; }

        tr.past td {
            color: #c6bfba;
            text-decoration: line-through;
        }

        tr:hover td { background-color: #f9f8f6; }

        /* ── DAILY BREAKDOWN ── */
        .col-daily-combined { padding: 12px !important; }
        .ot-chunk { font-weight: 600; margin-bottom: 4px; display: block; color: var(--slate); }
        .nt-chunk { border-top: 1px solid #e1dfd5; padding-top: 6px; display: block; }

        .daily-reading-box {
            border: 1px solid #e1dfd5;
            border-radius: 6px;
            overflow: hidden;
        }

        .suggestion-box {
            display: block !important;
            width: 100%;
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 4px;
            border: 1px solid #e1dfd5;
            background-color: #f4f8fd;
            border-left: 4px solid var(--teal);
        }

        .suggestion-label {
            font-size: 0.72rem;
            text-transform: uppercase;
            color: var(--teal);
            font-weight: 800;
            display: block;
            margin-bottom: 4px;
            letter-spacing: 0.8px;
        }

        .connection-note {
            font-size: 0.85rem;
            color: #7f7168;
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid rgba(0,0,0,0.05);
            font-style: italic;
        }

        /* ── CHECKBOXES ── */
        input[type="checkbox"] {
            width: 22px;
            height: 22px;
            cursor: pointer;
            accent-color: var(--teal);
        }

        /* ── NAVIGATION CONTROLS ── */
        .navigation-controls {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
            margin: 16px 0;
        }

        /* ── LINKS ── */
        a { text-decoration: none; color: var(--teal); word-break: break-word; }
        a:not(button):not(.solid-btn-link):not(.back-link):not(.nav-btn):not(.navbar a):hover {
            color: var(--brown);
            background-color: rgba(0, 111, 122, 0.08);
            border-radius: 3px;
            padding: 1px 3px;
        }

        /* ── SPINNER ── */
        .spinner {
            border: 4px solid rgba(0,0,0,0.1);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border-left-color: var(--teal);
            animation: spin 1s linear infinite;
            margin: 40px auto;
        }

        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

        /* ── CACHE NOTICE ── */
        .cache-notice {
            text-align: center;
            font-size: 11px;
            color: #988b82;
            margin-bottom: 10px;
        }

        /* ── SECTION HEADINGS ── */
        .section-heading {
            color: var(--brown);
            font-size: clamp(1.1rem, 4vw, 1.4rem);
            margin-bottom: 15px;
            border-bottom: 1px solid #e1dfd5;
            padding-bottom: 8px;
        }

        /* ── MOBILE ── */
        @media (max-width: 640px) and (orientation: portrait) {
            #full-plan-table-container { display: none; }
            #full-plan-table-container.show-mobile { display: block; }
            #toggle-full-plan-btn {
                display: block;
                width: 100%;
                max-width: 300px;
                margin: 20px auto;
            }
        }

        #toggle-full-plan-btn { display: none; }

        @media (max-width: 768px) {
            #content-wrapper { padding: 10px 8px 80px; margin: 10px auto; }
            table { font-size: 0.88rem; }
            .col-daily-date { width: 80px; font-size: 0.8rem; }
            .utility-links { padding: 8px 14px 12px; }
            .utility-links h1 { margin-bottom: 6px; font-size: 1.4rem; }
            .logo-header { min-height: 70px; padding: 14px; }
            .logo-header img { max-height: 52px; }
            
            /* Responsive stack styles for mobile navigation */
            #header { height: auto; }
        }

        @media screen and (min-width: 450px) and (max-width: 574px) {
            .navbar {
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-justify-content: flex-start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                text-align: left;
                margin-right: auto;
                margin-left: auto;
                padding-left: 0px;
                background-color: #334155;
                width: 100%;
                height: auto;
            }

            .navbar ul {
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-justify-content: flex-start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                margin-left: auto;
                margin-right: auto;
                width: auto;
                height: 0px;
                overflow: hidden;
                text-align: left;
            }

            .navbar ul li { text-align: left; width: 100%; }
            .navbar ul li:hover { width: 100%; text-align: left; }

            .navbar ul li a {
                color: #FFFFFF;
                display: block;
                text-align: left;
                margin: 0px;
                padding: 0px 0px 0px 5px;
                border-bottom: 1px solid #1e293b;
                width: auto;
            }

            .navbar ul li a:hover {
                background-color: #543d32 !important;
                color: #ffffff !important;
                padding: 0 !important;
                border-radius: 0 !important;
            }

            .navbar .mobile_menu { display: block; cursor: pointer; }

            .navbar.menu-open ul { height: auto; overflow: visible; }
        }

        @media screen and (min-width: 300px) and (max-width: 449px) {
            .navbar {
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-justify-content: flex-start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                text-align: left;
                margin-right: auto;
                margin-left: auto;
                padding-left: 0px;
                background-color: #334155;
                width: 100%;
                height: auto;
            }

            .navbar ul {
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                -webkit-justify-content: flex-start;
                -ms-flex-pack: start;
                justify-content: flex-start;
                margin-left: auto;
                margin-right: auto;
                width: auto;
                height: 0px;
                overflow: hidden;
                text-align: left;
            }

            .navbar ul li { text-align: left; width: 100%; }
            .navbar ul li:hover { width: 100%; text-align: left; }

            .navbar ul li a {
                color: #FFFFFF;
                display: block;
                text-align: left;
                margin: 0px;
                padding: 0px 0px 0px 5px;
                border-bottom: 1px solid #1e293b;
                width: auto;
            }

            .navbar ul li a:hover {
                background-color: #543d32 !important;
                color: #ffffff !important;
                padding: 0 !important;
                border-radius: 0 !important;
            }

            .navbar .mobile_menu { display: block; cursor: pointer; }

            .navbar.menu-open ul { height: auto; overflow: visible; }
        }

        /* ── PRINT ── */
        @media print {
            .utility-links, .navigation-controls, input[type="checkbox"],
            #toggle-full-plan-btn, .app-top-bar, .page-title-bar, .logo-header { display: none; }
            .main-card { border: none; box-shadow: none; }
        }
        
        .family-worship-box {
            border: 1px solid #b8dde1;
            border-left: 4px solid var(--teal);
            border-radius: 8px;
            padding: 18px 20px;
            background-color: #f4f8fd;
            text-align: center;
            margin-bottom: 20px;
            box-shadow: 0 2px 6px rgba(0, 111, 122, 0.08);
        }
        
        .family-worship-box h3 {
            margin: 0 0 12px 0;
            font-size: clamp(1.1rem, 3vw, 1.5rem);
            color: var(--teal);
            letter-spacing: 0.3px;
        }
        
        .family-worship-box .worship-details {
            text-align: left;
            font-size: 0.95rem;
            background: #fff;
            border-radius: 6px;
            padding: 12px 14px;
            margin-top: 10px;
        }

        #family-worship-summary-wrapper {
            display: flex;
            flex-direction: column;
        }

        #family-worship-summary-wrapper > div:last-child {
            margin-top: 8px;
            padding-top: 6px;
            border-top: 1px solid rgba(0, 111, 122, 0.15);
            text-align: right;
        }
        
        /* Container for the Scripture Overlay */
        #scripture-container {
          display: none;
          position: fixed;
          top: 10%;
          left: 5%;
          width: 90%;
          height: 80%;
          background: white;
          color: #333;
          z-index: 1000;
          border-radius: 12px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.3);
          padding: 20px;
          overflow-y: auto;
          font-family: 'Gentium Book Basic', 'Georgia', serif; 
          line-height: 1.6;
        }
        
        /* Header with the Close Button */
        .esv-text-header {
          position: sticky;
          top: 0;
          background: white;
          padding-bottom: 10px;
          border-bottom: 1px solid #eee;
          margin-bottom: 15px;
          display: flex;
          justify-content: flex-end;
        }
        
        .close-btn {
          background: #f0f0f0;
          border: none;
          padding: 8px 15px;
          border-radius: 20px;
          font-weight: bold;
          cursor: pointer;
        }
        
        /* ESV Specific Formatting */
        .esv-content h2 { 
          font-size: 1.4em; 
          margin-top: 20px; 
          color: #2c3e50; 
          border-bottom: none;
        }
        
        .chapter-num { 
          font-size: 2.5em; 
          float: left; 
          margin-right: 10px; 
          font-weight: bold; 
          color: #888;
        }
        
        .verse-num { 
          font-size: 0.7em; 
          vertical-align: super; 
          font-weight: bold; 
          color: #999; 
          margin-right: 4px;
        }
        
        /* Sticky Audio Player */
        .sticky-audio {
            position: sticky;
            top: 0;
            z-index: 100;
            background: white;
            padding: 10px;
            border-bottom: 1px solid #d4cec6;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 15px;
        }
        
        .passage-text {
            padding: 15px;
            line-height: 1.6;
        }