:root {
                --bg: #f4efe8;
                --bg-accent: #f8f4ee;
                --shell: rgba(255, 252, 248, 0.9);
                --card: rgba(255, 255, 255, 0.98);
                --line: #d8d0c4;
                --line-strong: #b8ac9a;
                --ink: #241d17;
                --muted: #6f655b;
                --accent: #8f5a33;
                --accent-soft: #f3e1d1;
                --accent-strong: #6b3f20;
                --navy: #223040;
                --navy-soft: #2f4052;
                --warn: #9a5d0f;
                --warn-soft: #f8ead3;
                --good: #24553c;
                --good-soft: #e4f1ea;
                --bad: #9f3528;
                --bad-soft: #f7e2dc;
                --shadow: 0 22px 52px rgba(35, 24, 16, 0.08);
                --shadow-soft: 0 14px 34px rgba(35, 24, 16, 0.06);
                --transition: 180ms cubic-bezier(0.22, 1, 0.36, 1);
            }

            * { box-sizing: border-box; }

            body {
                margin: 0;
                font-family: "Manrope", "Aptos", "Segoe UI", sans-serif;
                color: var(--ink);
                background:
                    radial-gradient(circle at top left, rgba(143, 90, 51, 0.12), transparent 24%),
                    radial-gradient(circle at top right, rgba(34, 48, 64, 0.10), transparent 28%),
                    linear-gradient(180deg, #fcf8f4 0%, var(--bg) 100%);
                min-height: 100vh;
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
            }

            a { color: inherit; text-decoration: none; }
            p { margin: 0; line-height: 1.65; }
            h1, h2, h3, h4 {
                margin: 0;
                font-family: "Cormorant Garamond", Georgia, serif;
                font-weight: 600;
                letter-spacing: -0.02em;
            }

            ::selection {
                background: rgba(143, 90, 51, 0.18);
                color: var(--ink);
            }

            ::-webkit-scrollbar { width: 11px; height: 11px; }
            ::-webkit-scrollbar-track { background: rgba(36, 29, 23, 0.05); }
            ::-webkit-scrollbar-thumb {
                background: rgba(107, 63, 32, 0.32);
                border-radius: 999px;
                border: 2px solid rgba(255, 255, 255, 0.6);
            }

            .shell { max-width: 1600px; margin: 0 auto; padding: 14px 18px 32px; }

            .workspace-shell,
            .main-panel {
                display: grid;
                gap: 14px;
            }

            .workspace-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                padding: 12px 16px;
                border-radius: 24px;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 242, 234, 0.95));
                border: 1px solid rgba(216, 208, 196, 0.88);
                box-shadow: var(--shadow);
            }

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

            .workspace-brand-copy {
                display: grid;
                gap: 2px;
                min-width: 0;
            }

            .workspace-brand-copy h1 {
                font-size: 1.15rem;
                line-height: 1;
                letter-spacing: -0.04em;
            }

            .workspace-brand-copy p {
                color: var(--muted);
                line-height: 1.35;
            }

            .workspace-brand .brand-logo {
                width: 42px;
                height: 42px;
                border-radius: 14px;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 225, 209, 0.72));
                border: 1px solid rgba(216, 208, 196, 0.92);
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
                flex: 0 0 auto;
                box-shadow: var(--shadow-soft);
            }

            .workspace-brand .brand-logo img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                padding: 8px;
            }

            .brand-logo-fallback {
                font-size: 1.25rem;
                font-weight: 800;
                color: var(--accent-strong);
            }

            .workspace-meta {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 8px;
                flex-wrap: wrap;
            }

            .workspace-status-indicator {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 4px 2px;
                font-size: 0.78rem;
                font-weight: 800;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: var(--muted);
            }

            .workspace-status-dot {
                width: 10px;
                height: 10px;
                border-radius: 999px;
                display: inline-block;
                box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.82);
            }

            .workspace-status-dot.good {
                background: #2e8b57;
            }

            .workspace-status-dot.bad {
                background: #c44433;
            }

            .workspace-user-text {
                font-size: 0.84rem;
                font-weight: 700;
                color: var(--muted);
            }

            .workspace-global-link,
            .workspace-primary-tab,
            .workspace-secondary-link {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 8px 12px;
                border-radius: 12px;
                font-weight: 700;
                transition: var(--transition);
            }

            .workspace-global-link {
                border: 1px solid rgba(216, 208, 196, 0.9);
                background: rgba(255, 255, 255, 0.82);
                box-shadow: var(--shadow-soft);
            }

            .workspace-global-link:hover,
            .workspace-primary-tab:hover,
            .workspace-secondary-link:hover {
                transform: translateY(-1px);
                box-shadow: var(--shadow-soft);
            }

            .workspace-taskbar {
                display: grid;
                gap: 8px;
                padding: 10px 12px;
                border-radius: 22px;
                background: linear-gradient(180deg, rgba(34, 48, 64, 0.96), rgba(24, 34, 45, 0.98));
                color: #f4ece3;
                border: 1px solid rgba(255, 255, 255, 0.08);
                box-shadow: 0 26px 56px rgba(34, 48, 64, 0.18);
            }

            .workspace-topline {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                padding-bottom: 6px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            }

            .workspace-primary-nav {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                align-items: center;
            }

            .workspace-primary-tab {
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.08);
                color: rgba(248, 241, 233, 0.9);
                min-height: 38px;
                padding-inline: 14px;
            }

            .workspace-primary-tab.active {
                background: rgba(243, 225, 209, 0.18);
                border-color: rgba(243, 225, 209, 0.26);
                color: white;
                box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
            }

            .workspace-secondary-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                padding: 8px 10px;
                border-radius: 16px;
                background: rgba(255, 255, 255, 0.06);
                border: 1px solid rgba(255, 255, 255, 0.08);
            }

            .workspace-secondary-copy {
                display: flex;
                align-items: center;
                min-width: 0;
            }

            .workspace-secondary-copy p {
                display: none;
            }

            .workspace-secondary-links {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                justify-content: flex-end;
            }

            .workspace-nav-label {
                font-size: 0.68rem;
                text-transform: uppercase;
                letter-spacing: 0.12em;
                font-weight: 800;
                color: rgba(244, 236, 227, 0.7);
            }

            .workspace-secondary-link {
                background: rgba(255, 255, 255, 0.92);
                color: var(--ink);
                border: 1px solid rgba(216, 208, 196, 0.92);
                box-shadow: var(--shadow-soft);
            }

            .workspace-secondary-link.active {
                background: linear-gradient(135deg, var(--accent-strong), var(--accent));
                color: white;
                border-color: rgba(107, 63, 32, 0.22);
                box-shadow: 0 14px 26px rgba(107, 63, 32, 0.24);
            }

            .masthead {
                background: linear-gradient(145deg, rgba(255, 248, 241, 0.96), rgba(255, 255, 255, 0.92));
                border: 1px solid rgba(216, 208, 196, 0.88);
                border-radius: 24px;
                box-shadow: var(--shadow);
                padding: 16px 18px;
                display: flex;
                justify-content: space-between;
                gap: 14px;
                align-items: center;
                margin-bottom: 10px;
                position: relative;
                overflow: hidden;
            }

            .masthead::after {
                content: "";
                position: absolute;
                right: -50px;
                bottom: -70px;
                width: 170px;
                height: 170px;
                border-radius: 999px;
                background: radial-gradient(circle, rgba(143, 90, 51, 0.12), transparent 65%);
                pointer-events: none;
            }

            .shell-compact {
                padding-top: 0;
            }

            .shell-compact .workspace-shell,
            .shell-compact .main-panel {
                gap: 10px;
            }

            .shell-compact .workspace-bar {
                padding: 8px 12px;
                border-radius: 18px;
                background: linear-gradient(180deg, rgba(34, 48, 64, 0.96), rgba(24, 34, 45, 0.98));
                border: 1px solid rgba(255, 255, 255, 0.08);
                box-shadow: 0 26px 56px rgba(34, 48, 64, 0.18);
                min-height: 58px;
            }

            .shell-compact .workspace-brand {
                gap: 10px;
            }

            .shell-compact .workspace-brand .brand-logo {
                display: flex;
                width: 34px;
                height: 34px;
                border-radius: 12px;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(243, 225, 209, 0.72));
                border: 1px solid rgba(255, 255, 255, 0.12);
            }

            .shell-compact .workspace-brand .brand-logo img {
                padding: 6px;
            }

            .shell-compact .workspace-brand-copy {
                gap: 1px;
            }

            .shell-compact .workspace-brand-copy h1 {
                font-size: 1rem;
                line-height: 1.05;
                color: #fff7ef;
            }

            .shell-compact .workspace-brand-copy .eyebrow {
                padding: 0;
                font-size: 0.64rem;
                background: transparent;
                border: none;
                box-shadow: none;
                border-radius: 0;
                letter-spacing: 0.14em;
                line-height: 1.05;
                color: rgba(244, 236, 227, 0.72);
            }

            .shell-compact .workspace-meta {
                gap: 10px;
                margin-left: auto;
                flex-wrap: nowrap;
                flex: 0 0 auto;
            }

            .shell-compact .workspace-user-text {
                color: rgba(244, 236, 227, 0.78);
            }

            .shell-compact .workspace-status-indicator {
                padding: 0;
                font-size: 0.76rem;
                font-weight: 800;
                color: rgba(244, 236, 227, 0.78);
            }

            .shell-compact .workspace-status-dot.good {
                background: #2fb36f;
            }

            .shell-compact .workspace-status-dot.bad {
                background: #d94b64;
            }

            .shell-compact .workspace-taskbar {
                padding: 8px 10px;
                gap: 6px;
                border-radius: 18px;
            }

            .shell-compact .workspace-taskbar .workspace-brand-copy h1 {
                color: #fff7ef;
            }

            .shell-compact .workspace-taskbar .workspace-brand-copy .eyebrow {
                color: rgba(244, 236, 227, 0.72);
            }

            .shell-compact .workspace-taskbar .workspace-user-text {
                color: rgba(244, 236, 227, 0.78);
            }

            .shell-compact .workspace-taskbar .workspace-meta {
                justify-content: flex-end;
                align-items: flex-start;
            }

            .shell-compact .workspace-topline {
                align-items: flex-start;
            }

            .shell-compact .workspace-primary-tab,
            .shell-compact .workspace-secondary-link,
            .shell-compact .workspace-global-link {
                min-height: 34px;
                padding: 7px 10px;
                border-radius: 10px;
                font-size: 0.92rem;
            }

            .shell-compact .workspace-secondary-bar {
                padding: 6px 8px;
                border-radius: 14px;
            }

            .shell-compact .workspace-logout-link {
                min-height: auto;
                padding: 0;
                border: none;
                background: transparent;
                box-shadow: none;
                color: rgba(244, 236, 227, 0.78);
                border-radius: 0;
                font-size: 0.84rem;
            }

            .shell-compact .workspace-logout-link:hover {
                transform: none;
                box-shadow: none;
                color: #fff7ef;
            }

            .shell-compact .workspace-secondary-copy {
                display: none;
            }

            .shell-compact .workspace-secondary-links {
                width: 100%;
                justify-content: flex-start;
                gap: 8px;
            }

            .shell-compact .workspace-nav-label {
                font-size: 0.62rem;
            }

            .masthead-compact {
                padding: 12px 14px;
                border-radius: 18px;
            }

            .masthead-compact .brand {
                gap: 4px;
            }

            .masthead-compact .brand h1 {
                font-size: clamp(1.6rem, 2.4vw, 2.2rem);
            }

            .masthead-compact .brand p {
                line-height: 1.3;
            }

            .brand { display: grid; gap: 6px; max-width: 960px; }
            .brand h1 {
                font-size: clamp(1.9rem, 3vw, 2.8rem);
                line-height: 0.95;
                letter-spacing: -0.04em;
                position: relative;
                z-index: 1;
            }
            .brand p { color: var(--muted); line-height: 1.4; }

            .hero-logo {
                width: 78px;
                height: 78px;
                border-radius: 24px;
                background: rgba(255, 255, 255, 0.82);
                border: 1px solid rgba(216, 208, 196, 0.92);
                box-shadow: var(--shadow-soft);
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .hero-logo img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                padding: 10px;
            }

            .eyebrow {
                display: inline-flex;
                width: fit-content;
                padding: 6px 10px;
                border-radius: 999px;
                background: var(--accent-soft);
                color: var(--accent-strong);
                font-size: 0.68rem;
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                box-shadow: inset 0 0 0 1px rgba(143, 90, 51, 0.08);
            }

            .top-links, .nav-strip, .toolbar, .button-row, .search-row { display: flex; gap: 10px; flex-wrap: wrap; }

            .pill, .nav-link, .button, .ghost-button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                border-radius: 14px;
                padding: 10px 15px;
                border: 1px solid rgba(36, 29, 23, 0.08);
                background: rgba(255, 255, 255, 0.82);
                font-weight: 600;
                transition: var(--transition);
                box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65) inset;
            }

            .button, button.button {
                background: linear-gradient(135deg, var(--accent-strong), var(--accent));
                color: white;
                cursor: pointer;
                border-color: rgba(107, 63, 32, 0.2);
                box-shadow: 0 12px 24px rgba(107, 63, 32, 0.22);
            }

            .button.secondary {
                background: white;
                color: var(--ink);
                border-color: var(--line);
                box-shadow: var(--shadow-soft);
            }

            .button.subtle {
                background: transparent;
                color: var(--muted);
                border-color: transparent;
            }

            .button:hover, .pill:hover, .nav-link:hover {
                transform: translateY(-1px);
                box-shadow: 0 14px 26px rgba(35, 24, 16, 0.09);
            }

            .button:active, .pill:active, .nav-link:active {
                transform: translateY(0);
            }

            .flash, .error-summary {
                border-radius: 18px;
                padding: 14px 16px;
                margin-bottom: 16px;
                border: 1px solid transparent;
                box-shadow: var(--shadow-soft);
            }

            .flash { background: var(--good-soft); border-color: rgba(22, 101, 52, 0.15); color: var(--good); }
            .error-summary { background: var(--bad-soft); border-color: rgba(185, 28, 28, 0.12); color: var(--bad); }

            .stats-grid, .panel-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                gap: 14px;
            }

            .card, .panel, .table-card, .detail-card, .timeline-card {
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 251, 247, 0.96));
                border: 1px solid rgba(217, 226, 236, 0.9);
                border-radius: 24px;
                padding: 20px;
                box-shadow: var(--shadow);
                transition: var(--transition);
            }

            .table-card, .detail-card, .summary-card, .card {
                backdrop-filter: blur(12px);
            }

            .card:hover,
            .panel:hover,
            .table-card:hover,
            .detail-card:hover,
            .timeline-card:hover {
                transform: translateY(-1px);
                box-shadow: 0 26px 48px rgba(35, 24, 16, 0.1);
            }

            .stat-card { display: grid; gap: 8px; }
            .stat-label, .label, .muted { color: var(--muted); }
            .stat-value, .stat {
                font-size: clamp(1.7rem, 3vw, 2.5rem);
                font-weight: 800;
                letter-spacing: -0.03em;
                font-family: "Manrope", "Aptos", sans-serif;
            }

            .workspace-grid, .content-grid {
                display: grid;
                grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.95fr);
                gap: 18px;
                margin-top: 18px;
            }

            .split-grid, .two-col {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 18px;
            }

            .three-col {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 18px;
            }

            .stack, .timeline, .detail-list { display: grid; gap: 12px; }

            .shell-compact .flash,
            .shell-compact .error-summary {
                padding: 12px 14px;
                margin-bottom: 12px;
            }

            .shell-compact .stats-grid,
            .shell-compact .panel-grid {
                gap: 10px;
            }

            .shell-compact .card,
            .shell-compact .panel,
            .shell-compact .table-card,
            .shell-compact .detail-card,
            .shell-compact .timeline-card,
            .shell-compact .summary-card,
            .shell-compact .toolbar-card {
                padding: 16px 18px;
                border-radius: 20px;
            }

            .shell-compact .workspace-grid,
            .shell-compact .content-grid {
                gap: 14px;
                margin-top: 12px;
            }

            .shell-compact .split-grid,
            .shell-compact .two-col,
            .shell-compact .three-col {
                gap: 14px;
            }

            .shell-compact .stack,
            .shell-compact .timeline,
            .shell-compact .detail-list {
                gap: 10px;
            }

            .shell-compact .section-title {
                margin-bottom: 8px;
                gap: 10px;
            }

            .shell-compact .section-title h2,
            .shell-compact .section-title h3 {
                font-size: 1.22rem;
            }

            .shell-compact th,
            .shell-compact td {
                padding: 10px 6px 10px 0;
            }

            .shell-compact .detail-item {
                gap: 4px;
                padding: 10px 0;
            }

            .shell-compact .top-links,
            .shell-compact .nav-strip,
            .shell-compact .toolbar,
            .shell-compact .button-row,
            .shell-compact .search-row {
                gap: 8px;
            }

            .section-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 14px;
                margin-bottom: 10px;
            }

            .section-title h2, .section-title h3 { font-size: 1.4rem; letter-spacing: -0.03em; }

            .page-help-shell {
                display: flex;
                justify-content: flex-end;
                margin-bottom: 2px;
            }

            .help-trigger {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                flex: 0 0 auto;
                border-radius: 999px;
                border: 1px solid rgba(143, 90, 51, 0.22);
                background: rgba(255, 255, 255, 0.96);
                color: var(--accent-strong);
                font-weight: 800;
                line-height: 1;
                box-shadow: var(--shadow-soft);
                cursor: pointer;
                transition: var(--transition);
            }

            .help-trigger:hover,
            .help-trigger:focus-visible {
                transform: translateY(-1px);
                border-color: rgba(107, 63, 32, 0.36);
                box-shadow: var(--shadow);
                outline: none;
            }

            .help-trigger-inline {
                width: 30px;
                height: 30px;
                font-size: 0.86rem;
            }

            .help-trigger-page {
                width: 40px;
                height: 40px;
                font-size: 1rem;
            }

            .help-tooltip {
                position: absolute;
                z-index: 80;
                max-width: 280px;
                padding: 10px 12px;
                border-radius: 14px;
                background: rgba(24, 34, 45, 0.96);
                color: #f7f0e7;
                box-shadow: 0 22px 44px rgba(24, 34, 45, 0.22);
                font-size: 0.84rem;
                line-height: 1.45;
                pointer-events: none;
            }

            .workspace-help-dialog {
                width: min(580px, calc(100vw - 32px));
                border: 1px solid rgba(216, 208, 196, 0.92);
                border-radius: 28px;
                padding: 0;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 242, 234, 0.98));
                box-shadow: 0 36px 70px rgba(35, 24, 16, 0.22);
            }

            .workspace-help-dialog::backdrop {
                background: rgba(25, 20, 16, 0.42);
                backdrop-filter: blur(6px);
            }

            .workspace-help-dialog-panel {
                display: grid;
                gap: 16px;
                padding: 24px;
            }

            .workspace-help-dialog-header {
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                gap: 12px;
            }

            .workspace-help-dialog-body {
                display: grid;
                gap: 12px;
            }

            .workspace-help-list {
                display: grid;
                gap: 10px;
                margin: 0;
                padding-left: 20px;
            }

            .workspace-help-list li {
                line-height: 1.55;
            }

            .sr-only {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }

            .table-card { overflow: hidden; }
            .table-wrap { overflow-x: auto; }

            table { width: 100%; border-collapse: collapse; }
            th, td {
                text-align: left;
                padding: 13px 8px 13px 0;
                border-bottom: 1px solid rgba(217, 226, 236, 0.9);
                vertical-align: top;
            }

            th {
                font-size: 0.78rem;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--muted);
                font-weight: 800;
            }

            tr:last-child td { border-bottom: none; }
            tbody tr { transition: var(--transition); }
            tbody tr:hover { background: rgba(143, 90, 51, 0.04); }

            [data-href],
            tr[data-href],
            [data-href].day-book-item,
            [data-href].document-row,
            [data-href].week-appt {
                cursor: pointer;
            }

            tr[data-href]:hover td {
                background: rgba(143, 90, 51, 0.04);
            }

            [data-href]:focus-visible,
            tr[data-href]:focus-visible,
            [data-href].day-book-item:focus-visible,
            [data-href].document-row:focus-visible,
            [data-href].week-appt:focus-visible {
                outline: 3px solid rgba(143, 90, 51, 0.22);
                outline-offset: 2px;
            }

            .badge {
                display: inline-flex;
                align-items: center;
                padding: 6px 10px;
                border-radius: 999px;
                font-size: 0.8rem;
                font-weight: 700;
                background: #eef2f7;
                box-shadow: inset 0 0 0 1px rgba(36, 29, 23, 0.05);
            }

            .badge.good { background: var(--good-soft); color: var(--good); }
            .badge.warn { background: var(--warn-soft); color: var(--warn); }
            .badge.bad { background: var(--bad-soft); color: var(--bad); }

            .timeline-item {
                border-left: 3px solid rgba(15, 118, 110, 0.16);
                padding-left: 14px;
                display: grid;
                gap: 4px;
                transition: var(--transition);
            }

            .timeline-item:hover {
                transform: translateX(2px);
                border-left-color: rgba(143, 90, 51, 0.26);
            }

            .timeline-item[data-href]:hover {
                background: rgba(143, 90, 51, 0.03);
            }

            .detail-item {
                display: grid;
                gap: 5px;
                padding: 12px 0;
                border-bottom: 1px solid rgba(217, 226, 236, 0.82);
            }

            .detail-item:last-child { border-bottom: none; padding-bottom: 0; }
            .detail-item strong {
                font-size: 0.76rem;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--muted);
            }

            details.card > summary {
                list-style: none;
                cursor: pointer;
                font-weight: 700;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                font-family: "Manrope", "Aptos", sans-serif;
            }

            details.card > summary::-webkit-details-marker { display: none; }
            details.card[open] > summary { margin-bottom: 16px; }

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

            .form-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
            .form-grid.single { grid-template-columns: 1fr; }
            .span-2 { grid-column: span 2; }
            .span-4 { grid-column: span 4; }

            .field { display: grid; gap: 7px; }

            .field label {
                font-size: 0.78rem;
                font-weight: 700;
                color: var(--muted);
                text-transform: uppercase;
                letter-spacing: 0.08em;
            }

            input, select, textarea {
                width: 100%;
                border: 1px solid var(--line);
                border-radius: 16px;
                padding: 12px 14px;
                background: linear-gradient(180deg, #ffffff, #fffaf5);
                color: var(--ink);
                font: inherit;
                transition: var(--transition);
            }

            textarea { min-height: 112px; resize: vertical; }
            input:focus, select:focus, textarea:focus {
                outline: none;
                border-color: rgba(143, 90, 51, 0.55);
                box-shadow: 0 0 0 4px rgba(143, 90, 51, 0.08);
                background: white;
            }

            .check-row {
                display: flex;
                gap: 16px;
                flex-wrap: wrap;
                align-items: center;
                padding-top: 6px;
            }

            .check-row label {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-size: 0.94rem;
                color: var(--ink);
                text-transform: none;
                letter-spacing: 0;
            }

            .check-row input { width: auto; margin: 0; }

            .item-grid {
                display: grid;
                gap: 10px;
                padding: 14px;
                border-radius: 18px;
                background: linear-gradient(180deg, #fffdf9, #f7f1e9);
                border: 1px solid rgba(217, 226, 236, 0.9);
            }

            .item-row {
                display: grid;
                grid-template-columns: 2.2fr 0.8fr 1fr 1fr 0.9fr;
                gap: 10px;
            }

            .gallery {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
                gap: 16px;
            }

            .workflow-hero { display: grid; gap: 18px; }
            .workflow-progress { display: grid; gap: 8px; }
            .progress-bar {
                width: 100%;
                height: 12px;
                border-radius: 999px;
                background: #dbe7f3;
                overflow: hidden;
            }

            .progress-bar span {
                display: block;
                height: 100%;
                border-radius: inherit;
                background: linear-gradient(135deg, var(--accent-strong), #22c55e);
            }

            .workflow-grid {
                display: flex;
                gap: 10px;
                overflow-x: auto;
                padding-bottom: 4px;
                scroll-padding-inline: 4px;
            }

            .workflow-grid::-webkit-scrollbar {
                height: 8px;
            }

            .workflow-grid::-webkit-scrollbar-thumb {
                background: rgba(107, 63, 32, 0.18);
                border-width: 1px;
            }

            .workflow-step {
                display: grid;
                grid-template-columns: auto minmax(0, 1fr);
                align-items: center;
                gap: 8px 10px;
                padding: 10px 12px;
                border-radius: 16px;
                background: linear-gradient(180deg, #ffffff, #f6fafc);
                border: 1px solid rgba(217, 226, 236, 0.9);
                min-height: 0;
                min-width: 220px;
                transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
            }

            .workflow-step.done { background: var(--good-soft); }
            .workflow-step.required { background: var(--warn-soft); }
            .workflow-step.current { border-color: rgba(143, 90, 51, 0.45); box-shadow: inset 0 0 0 1px rgba(143, 90, 51, 0.18); }
            .workflow-step-link:hover .workflow-step {
                transform: translateY(-2px);
                box-shadow: 0 18px 34px rgba(15, 23, 42, 0.08);
            }
            .pathway-card { min-height: 320px; }
            .workflow-step-link {
                display: block;
                flex: 0 0 auto;
            }
            .stage-meta {
                display: flex;
                align-items: center;
                gap: 10px;
                grid-column: 1 / 2;
                grid-row: 1 / span 2;
            }
            .stage-chip {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 28px;
                height: 28px;
                border-radius: 999px;
                background: rgba(143, 90, 51, 0.12);
                color: var(--accent-strong);
                font-weight: 800;
                font-size: 0.82rem;
            }

            .workflow-step > strong {
                display: block;
                font-size: 0.95rem;
                line-height: 1.2;
                grid-column: 2 / 3;
            }

            .workflow-step > .muted {
                grid-column: 2 / 3;
                font-size: 0.78rem;
                line-height: 1.25;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
            }

            .workflow-step .badge {
                white-space: nowrap;
                font-size: 0.66rem;
                padding: 5px 8px;
            }

            .step-link {
                grid-column: 2 / 3;
                font-size: 0.72rem;
                font-weight: 700;
                color: var(--accent-strong);
            }

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

            .choice-card {
                display: grid;
                grid-template-columns: auto 1fr;
                gap: 10px;
                align-items: start;
                padding: 16px;
                border: 1px solid rgba(217, 226, 236, 0.9);
                border-radius: 18px;
                background: linear-gradient(180deg, #fffdf9, #f8f1e8);
                cursor: pointer;
                transition: var(--transition);
            }

            .choice-card small {
                display: block;
                color: var(--muted);
                margin-top: 4px;
                line-height: 1.45;
            }

            .choice-card input { width: auto; margin-top: 3px; }
            .choice-card.active {
                border-color: rgba(143, 90, 51, 0.4);
                box-shadow: inset 0 0 0 1px rgba(143, 90, 51, 0.16);
                background: linear-gradient(180deg, #fff9f4, #f8efe5);
            }

            .simple-item-row {
                display: grid;
                grid-template-columns: minmax(0, 2.6fr) minmax(220px, 1fr);
                gap: 12px;
            }

            .flow-shell {
                display: grid;
                grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.9fr);
                gap: 18px;
            }

            .summary-card {
                padding: 18px;
                border-radius: 22px;
                border: 1px solid rgba(217, 226, 236, 0.9);
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(250, 244, 237, 0.95));
                display: grid;
                gap: 12px;
            }

            .summary-card header {
                display: flex;
                justify-content: space-between;
                gap: 12px;
                align-items: flex-start;
            }

            .summary-card p {
                color: var(--muted);
                line-height: 1.5;
            }

            .lock-chip {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                padding: 8px 12px;
                border-radius: 999px;
                background: rgba(15, 118, 110, 0.09);
                color: var(--accent-strong);
                font-weight: 700;
                width: fit-content;
            }

            .calendar-card {
                display: grid;
                gap: 16px;
            }

            .calendar-board {
                display: grid;
                gap: 10px;
            }

            .calendar-row {
                display: grid;
                grid-template-columns: 110px repeat(var(--calendar-columns, 1), minmax(120px, 1fr));
                gap: 10px;
                align-items: stretch;
            }

            .calendar-head {
                font-size: 0.76rem;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--muted);
                padding: 0 4px;
            }

            .calendar-time {
                display: flex;
                align-items: center;
                padding: 0 4px;
                color: var(--muted);
                font-weight: 700;
            }

            .slot-button,
            .slot-placeholder {
                min-height: 52px;
                border-radius: 18px;
                border: 1px solid rgba(217, 226, 236, 0.92);
                padding: 10px 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
            }

            .slot-button {
                background: linear-gradient(180deg, #ffffff, #faf1e7);
                cursor: pointer;
                font-weight: 700;
                color: var(--accent-strong);
                transition: var(--transition);
            }

            .slot-button.selected {
                background: linear-gradient(135deg, var(--accent-strong), var(--accent));
                color: white;
                border-color: transparent;
                box-shadow: 0 16px 24px rgba(15, 118, 110, 0.18);
            }

            .slot-placeholder {
                background: rgba(244, 247, 251, 0.75);
                color: #9aa7ba;
            }

            .mini-grid {
                display: grid;
                gap: 10px;
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            }

            .module-grid {
                display: grid;
                gap: 18px;
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            }

            .panel-soft {
                padding: 16px;
                border-radius: 18px;
                background: linear-gradient(180deg, #fffdf9, #f7f0e7);
                border: 1px solid rgba(217, 226, 236, 0.9);
                display: grid;
                gap: 12px;
            }

            .media-strip {
                display: grid;
                gap: 12px;
            }

            .media-tile {
                display: grid;
                grid-template-columns: 92px 1fr;
                gap: 12px;
                align-items: center;
                padding: 10px;
                border-radius: 16px;
                background: #f8fbff;
                border: 1px solid rgba(217, 226, 236, 0.86);
            }

            .media-thumb {
                width: 92px;
                height: 92px;
                border-radius: 16px;
                overflow: hidden;
                background: linear-gradient(180deg, #eff6ff, #dbeafe);
                border: 1px solid rgba(217, 226, 236, 0.8);
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .media-thumb img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .status-row {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                align-items: center;
            }

            .tabs-inline {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
            }

            .step-link {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                border-radius: 999px;
                padding: 8px 12px;
                background: rgba(15, 118, 110, 0.08);
                color: var(--accent-strong);
                font-weight: 700;
            }

            .document-list {
                display: grid;
                gap: 12px;
            }

            .document-row {
                display: flex;
                justify-content: space-between;
                gap: 12px;
                align-items: flex-start;
                padding: 14px;
                border-radius: 18px;
                background: linear-gradient(180deg, #fffdf9, #f8f1e8);
                border: 1px solid rgba(217, 226, 236, 0.86);
                transition: var(--transition);
            }

            .document-row:hover {
                transform: translateY(-1px);
                box-shadow: var(--shadow-soft);
            }

            .document-row p {
                line-height: 1.5;
            }

            .sticky-stack {
                position: sticky;
                top: 88px;
                align-self: start;
            }

            .photo {
                min-height: 180px;
                border-radius: 22px;
                border: 1px solid rgba(217, 226, 236, 0.9);
                background:
                    linear-gradient(180deg, rgba(143, 90, 51, 0.08), rgba(34, 48, 64, 0.14)),
                    linear-gradient(135deg, #fff9f2, #eadfce);
                padding: 16px;
                display: flex;
                align-items: flex-end;
                box-shadow: var(--shadow);
                overflow: hidden;
                position: relative;
            }

            .photo img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .photo small {
                display: inline-block;
                background: rgba(255, 255, 255, 0.88);
                border-radius: 14px;
                padding: 8px 10px;
                line-height: 1.4;
                position: relative;
                z-index: 1;
            }

            .amount { font-variant-numeric: tabular-nums; font-weight: 800; }

            .empty-state {
                padding: 18px;
                border-radius: 18px;
                background: #f8fbff;
                color: var(--muted);
                border: 1px dashed rgba(97, 112, 137, 0.25);
            }

            .hero-actions { margin-top: 12px; }

            .toolbar-card {
                background: rgba(255, 255, 255, 0.74);
                border: 1px solid rgba(216, 208, 196, 0.88);
                border-radius: 18px;
                padding: 10px 12px;
                display: flex;
                justify-content: space-between;
                gap: 10px;
                flex-wrap: wrap;
                align-items: center;
            }

            .segmented {
                display: inline-flex;
                gap: 6px;
                padding: 4px;
                border-radius: 14px;
                background: rgba(36, 29, 23, 0.05);
                box-shadow: inset 0 0 0 1px rgba(36, 29, 23, 0.04);
            }

            .segmented a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 8px 12px;
                border-radius: 10px;
                font-weight: 700;
                color: var(--muted);
            }

            .segmented a.active {
                background: white;
                color: var(--accent-strong);
                box-shadow: 0 8px 18px rgba(36, 29, 23, 0.08);
            }

            .menu-dropdown {
                position: relative;
            }

            .menu-dropdown summary {
                list-style: none;
            }

            .menu-dropdown summary::-webkit-details-marker {
                display: none;
            }

            .menu-trigger {
                cursor: pointer;
            }

            .dropdown-panel {
                position: absolute;
                top: calc(100% + 10px);
                left: 0;
                min-width: 240px;
                z-index: 20;
                padding: 10px;
                border-radius: 20px;
                background: rgba(255, 255, 255, 0.98);
                border: 1px solid rgba(216, 208, 196, 0.92);
                box-shadow: var(--shadow);
                display: grid;
                gap: 8px;
            }

            .dropdown-link {
                display: grid;
                gap: 4px;
                padding: 12px 14px;
                border-radius: 14px;
                background: linear-gradient(180deg, #fffdf9, #f7efe6);
                border: 1px solid rgba(216, 208, 196, 0.8);
                transition: var(--transition);
            }

            .dropdown-link:hover {
                transform: translateY(-1px);
                box-shadow: var(--shadow-soft);
            }

            .dropdown-link strong {
                font-size: 0.95rem;
            }

            .dropdown-link span {
                color: var(--muted);
                line-height: 1.4;
                font-size: 0.88rem;
            }

            .planner-shell {
                display: grid;
                grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
                gap: 18px;
            }

            .calendar-swipe-surface {
                touch-action: pan-y;
            }

            .calendar-toolbar {
                display: grid;
                gap: 10px;
                justify-items: end;
            }

            .calendar-period-nav {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                align-items: center;
                justify-content: flex-end;
            }

            .calendar-period-controls {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 6px;
                border-radius: 18px;
                background: linear-gradient(180deg, #fffdf9, #f5ede4);
                border: 1px solid rgba(216, 208, 196, 0.88);
                box-shadow: var(--shadow-soft);
            }

            .calendar-period-arrow {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 10px 12px;
                border-radius: 14px;
                color: var(--accent-strong);
                font-weight: 800;
                transition: var(--transition);
                background: rgba(255, 255, 255, 0.84);
                border: 1px solid rgba(216, 208, 196, 0.78);
            }

            .calendar-period-arrow:hover {
                transform: translateY(-1px);
                box-shadow: var(--shadow-soft);
            }

            .calendar-period-arrow-icon {
                width: 28px;
                height: 28px;
                border-radius: 999px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: rgba(143, 90, 51, 0.1);
                font-size: 1rem;
                line-height: 1;
            }

            .calendar-period-label {
                min-width: 180px;
                padding: 0 10px;
                display: grid;
                gap: 3px;
                text-align: center;
            }

            .calendar-period-label strong {
                font-size: 0.95rem;
                letter-spacing: -0.02em;
            }

            .calendar-period-hint {
                display: none;
                color: var(--muted);
                font-size: 0.76rem;
                line-height: 1.3;
            }

            .calendar-date-form {
                display: inline-flex;
                align-items: center;
            }

            .calendar-date-stack {
                display: grid;
                gap: 4px;
                justify-items: center;
            }

            .calendar-weekday-label {
                font-size: 0.72rem;
                font-weight: 800;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: var(--muted);
            }

            .calendar-date-form input[type="date"] {
                min-width: 156px;
                border-radius: 14px;
                border: 1px solid rgba(216, 208, 196, 0.88);
                background: linear-gradient(180deg, #fffdf9, #f7efe6);
                box-shadow: var(--shadow-soft);
            }

            .calendar-header-compact {
                justify-content: center;
                align-items: center;
            }

            .booking-calendar-toolbar {
                display: grid;
                grid-template-columns: 1fr;
                align-items: center;
                gap: 12px;
                width: 100%;
                max-width: 1040px;
                margin-inline: auto;
                justify-items: center;
            }

            .booking-calendar-title {
                display: flex;
                justify-content: center;
                width: 100%;
                text-align: center;
            }

            .booking-calendar-title h2 {
                margin: 0;
            }

            .booking-calendar-toolbar .segmented,
            .booking-calendar-toolbar .search-row,
            .booking-calendar-toolbar .calendar-period-nav {
                margin-inline: auto;
            }

            .booking-calendar-toolbar .search-row,
            .booking-calendar-toolbar .calendar-period-nav {
                justify-content: center;
            }

            .booking-calendar-toolbar .search-row {
                width: fit-content;
            }

            .booking-calendar-toolbar .calendar-period-nav {
                width: 100%;
            }

            .booking-calendar-toolbar .calendar-period-controls {
                width: 100%;
                justify-content: space-between;
                padding-inline: 10px;
            }

            .booking-calendar-toolbar .calendar-date-form input[type="date"] {
                min-width: 174px;
                text-align: center;
            }

            .client-picker {
                display: grid;
                gap: 12px;
            }

            .client-result {
                display: flex;
                justify-content: space-between;
                gap: 12px;
                align-items: center;
                padding: 14px;
                border-radius: 16px;
                background: linear-gradient(180deg, #fffdf9, #f7efe6);
                border: 1px solid rgba(216, 208, 196, 0.86);
                transition: var(--transition);
            }

            .client-result.active {
                border-color: rgba(143, 90, 51, 0.45);
                box-shadow: inset 0 0 0 1px rgba(143, 90, 51, 0.18);
                background: linear-gradient(180deg, #fffaf5, #f7ede3);
            }

            .calendar-shell {
                display: grid;
                gap: 14px;
            }

            .planner-day-board {
                display: grid;
                grid-template-columns: 92px repeat(var(--planner-columns, 1), minmax(170px, 1fr));
                gap: 8px;
                align-items: stretch;
            }

            .planner-week-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(520px, 1fr));
                gap: 16px;
            }

            .planner-head,
            .planner-time-cell,
            .planner-slot {
                border-radius: 16px;
                border: 1px solid rgba(216, 208, 196, 0.88);
                min-height: 62px;
                padding: 10px 12px;
                box-shadow: var(--shadow-soft);
            }

            .planner-head {
                background: linear-gradient(180deg, #fffdf9, #f6efe6);
                display: grid;
                align-content: start;
            }

            .planner-time-head,
            .planner-time-cell {
                background: rgba(36, 29, 23, 0.04);
                color: var(--muted);
                font-size: 0.84rem;
                font-weight: 800;
                justify-content: center;
                align-items: center;
                display: flex;
            }

            .planner-slot {
                display: grid;
                align-content: center;
                gap: 4px;
                text-align: left;
                position: relative;
                transition: var(--transition);
            }

            .planner-slot.is-open {
                background: linear-gradient(180deg, #ffffff, #fcfaf7);
            }

            .planner-slot.is-closed {
                background: rgba(226, 232, 240, 0.7);
                color: #7a8798;
            }

            .planner-slot.is-blocked {
                background: linear-gradient(180deg, #fbf3ea, #f2e3d2);
                color: var(--muted);
            }

            .planner-slot.is-booked {
                background: linear-gradient(180deg, #fff7ef, #f0dfca);
                border-color: rgba(143, 90, 51, 0.22);
                padding-right: 20px;
            }

            .planner-slot.is-booked.is-continuation {
                background: linear-gradient(180deg, #faefe2, #ecd7bb);
                border-color: rgba(143, 90, 51, 0.18);
                box-shadow: inset 4px 0 0 rgba(143, 90, 51, 0.28);
            }

            .planner-slot.selectable {
                cursor: pointer;
            }

            .planner-slot.selectable:hover,
            .planner-slot.is-booked:hover {
                transform: translateY(-1px);
                box-shadow: var(--shadow);
            }

            .planner-slot.selected {
                background: linear-gradient(135deg, var(--accent-strong), var(--accent));
                color: white;
                border-color: transparent;
                box-shadow: 0 16px 26px rgba(107, 63, 32, 0.22);
            }

            .planner-slot-title {
                font-weight: 800;
                line-height: 1.2;
            }

            .planner-slot-meta {
                font-size: 0.82rem;
                color: inherit;
                opacity: 0.9;
                line-height: 1.3;
            }

            .planner-slot-status-text {
                font-size: 0.72rem;
                font-weight: 800;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                color: inherit;
                opacity: 0.82;
            }

            .planner-slot-status-bar {
                position: absolute;
                top: 8px;
                right: 8px;
                bottom: 8px;
                width: 6px;
                border-radius: 999px;
                background: rgba(143, 90, 51, 0.28);
            }

            .planner-journey-booked .planner-slot-status-bar,
            .planner-status-key-bar.planner-journey-booked,
            .day-book-item.planner-journey-booked .day-book-status-bar {
                background: #5a8dee;
            }

            .planner-journey-checked_in .planner-slot-status-bar,
            .planner-status-key-bar.planner-journey-checked_in,
            .day-book-item.planner-journey-checked_in .day-book-status-bar {
                background: #d89b2b;
            }

            .planner-journey-completed .planner-slot-status-bar,
            .planner-status-key-bar.planner-journey-completed,
            .day-book-item.planner-journey-completed .day-book-status-bar {
                background: #2f9e8f;
            }

            .planner-journey-invoiced .planner-slot-status-bar,
            .planner-status-key-bar.planner-journey-invoiced,
            .day-book-item.planner-journey-invoiced .day-book-status-bar {
                background: #2e8b57;
            }

            .planner-journey-cancelled .planner-slot-status-bar,
            .planner-status-key-bar.planner-journey-cancelled,
            .day-book-item.planner-journey-cancelled .day-book-status-bar {
                background: #c44433;
            }

            .planner-journey-no_show .planner-slot-status-bar,
            .planner-status-key-bar.planner-journey-no_show,
            .day-book-item.planner-journey-no_show .day-book-status-bar {
                background: #7a4fd1;
            }

            .planner-slot.is-continuation .planner-slot-title {
                font-size: 0.94rem;
            }

            .planner-mini-button {
                padding: 7px 10px;
                border-radius: 12px;
                font-size: 0.76rem;
            }

            .planner-dialog {
                width: min(560px, calc(100vw - 32px));
                max-width: calc(100vw - 32px);
                max-height: calc(100vh - 32px);
                max-height: calc(100dvh - 32px);
                border: 1px solid rgba(216, 208, 196, 0.92);
                border-radius: 28px;
                padding: 0;
                background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 242, 234, 0.98));
                box-shadow: 0 36px 70px rgba(35, 24, 16, 0.22);
                overflow: hidden;
            }

            .planner-dialog::backdrop {
                background: rgba(25, 20, 16, 0.42);
                backdrop-filter: blur(6px);
            }

            .planner-dialog-form {
                display: grid;
                gap: 14px;
                padding: clamp(16px, 1.8vw, 20px);
                min-height: 0;
                max-height: calc(100vh - 32px);
                max-height: calc(100dvh - 32px);
                overflow-y: auto;
                overscroll-behavior: contain;
            }

            .planner-dialog > form:not(.planner-dialog-form),
            .planner-dialog > div:not(.planner-dialog-form) {
                min-height: 0;
                max-height: calc(100vh - 32px);
                max-height: calc(100dvh - 32px);
                overflow-y: auto;
                overscroll-behavior: contain;
            }

            .address-lookup-grid {
                display: grid;
                grid-template-columns: minmax(118px, 0.78fr) minmax(0, 1.22fr);
                gap: 10px;
                align-items: end;
            }

            .day-book-grid {
                display: grid;
                gap: 12px;
            }

            .planner-status-key {
                display: flex;
                flex-wrap: wrap;
                gap: 10px 16px;
                align-items: center;
                margin: 0 0 12px;
            }

            .planner-status-key-item {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                font-size: 0.8rem;
                font-weight: 700;
                color: var(--muted);
            }

            .planner-status-key-bar {
                width: 5px;
                height: 18px;
                border-radius: 999px;
                background: rgba(143, 90, 51, 0.28);
                display: inline-block;
            }

            .day-book-item {
                display: grid;
                grid-template-columns: 110px minmax(0, 1fr) 8px;
                gap: 16px;
                align-items: center;
                padding: 16px 18px;
                border-radius: 18px;
                background: linear-gradient(180deg, #ffffff, #faf3ea);
                border: 1px solid rgba(216, 208, 196, 0.88);
                box-shadow: var(--shadow-soft);
                transition: var(--transition);
            }

            .day-book-item:hover {
                transform: translateY(-1px);
                box-shadow: var(--shadow);
            }

            .day-book-time {
                font-size: 1.2rem;
                font-weight: 800;
                letter-spacing: -0.03em;
            }

            .day-book-status-bar {
                align-self: stretch;
                width: 6px;
                min-height: 54px;
                border-radius: 999px;
                background: rgba(143, 90, 51, 0.28);
            }

            .week-planner {
                display: grid;
                gap: 10px;
            }

            .week-header,
            .week-row {
                display: grid;
                grid-template-columns: 190px repeat(7, minmax(160px, 1fr));
                gap: 10px;
            }

            .week-head-cell,
            .week-staff,
            .week-cell {
                border-radius: 18px;
                border: 1px solid rgba(216, 208, 196, 0.88);
                background: rgba(255, 255, 255, 0.92);
                padding: 14px;
                box-shadow: var(--shadow-soft);
            }

            .week-head-cell {
                background: rgba(36, 29, 23, 0.04);
                font-size: 0.82rem;
                text-transform: uppercase;
                letter-spacing: 0.08em;
                color: var(--muted);
                font-weight: 700;
            }

            .week-cell {
                display: grid;
                gap: 10px;
                min-height: 180px;
                align-content: start;
            }

            .week-window {
                font-size: 0.82rem;
                color: var(--muted);
                font-weight: 700;
            }

            .week-appt {
                padding: 10px;
                border-radius: 14px;
                background: linear-gradient(180deg, #fff9f1, #f4e7d8);
                border: 1px solid rgba(143, 90, 51, 0.18);
                display: grid;
                gap: 4px;
                transition: var(--transition);
            }

            .week-appt:hover {
                transform: translateY(-1px);
                box-shadow: var(--shadow-soft);
            }

            .week-appt span {
                color: var(--muted);
                font-size: 0.84rem;
                line-height: 1.35;
            }

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

            .main-panel > * {
                animation: fade-slide-up 280ms ease both;
            }

            @media (max-width: 1080px) {
                .workspace-grid, .content-grid, .split-grid, .two-col, .three-col, .flow-shell, .planner-shell { grid-template-columns: 1fr; }
                .form-grid, .form-grid.compact, .item-row, .choice-grid, .simple-item-row { grid-template-columns: 1fr; }
                .calendar-row { grid-template-columns: 90px repeat(var(--calendar-columns, 1), minmax(100px, 1fr)); }
                .planner-day-board { grid-template-columns: 90px repeat(var(--planner-columns, 1), minmax(130px, 1fr)); }
                .span-2, .span-4 { grid-column: auto; }
                .sticky-stack { position: static; }
                .document-row { flex-direction: column; }
                .week-header, .week-row { grid-template-columns: 1fr; }
                .workspace-bar { flex-direction: column; align-items: flex-start; }
                .workspace-meta { justify-content: flex-start; }
                .workspace-topline { flex-direction: column; align-items: flex-start; }
                .workspace-secondary-bar { flex-direction: column; align-items: flex-start; }
                .workspace-secondary-links { justify-content: flex-start; }
                .calendar-toolbar,
                .calendar-period-nav { justify-items: start; justify-content: flex-start; }
            }

            @media (max-width: 760px) {
                .shell { padding: 16px 12px 34px; }
                .masthead { flex-direction: column; padding: 18px; }
                .day-book-item { grid-template-columns: 1fr; }
                .brand h1 { font-size: clamp(2rem, 8vw, 3rem); }
                .planner-week-grid { grid-template-columns: 1fr; }
                .planner-dialog {
                    width: calc(100vw - 16px);
                    max-width: calc(100vw - 16px);
                    max-height: calc(100vh - 16px);
                    max-height: calc(100dvh - 16px);
                    border-radius: 22px;
                }
                .planner-dialog-form,
                .planner-dialog > form:not(.planner-dialog-form),
                .planner-dialog > div:not(.planner-dialog-form) {
                    max-height: calc(100vh - 16px);
                    max-height: calc(100dvh - 16px);
                    padding: 14px;
                }
                .address-lookup-grid {
                    grid-template-columns: 1fr;
                }
                .workspace-bar,
                .workspace-taskbar { padding: 14px; border-radius: 22px; }
                .workspace-primary-nav,
                .workspace-secondary-links { width: 100%; }
                .workspace-primary-tab,
                .workspace-secondary-link { width: 100%; justify-content: flex-start; }
                .calendar-period-nav { width: 100%; gap: 8px; }
                .calendar-period-controls {
                    width: 100%;
                    justify-content: space-between;
                }
                .calendar-period-label {
                    min-width: 0;
                    flex: 1 1 auto;
                }
                .calendar-period-arrow-text {
                    display: none;
                }
                .calendar-period-hint {
                    display: block;
                }
                .calendar-date-form {
                    width: 100%;
                }
                .calendar-date-form input[type="date"] {
                    width: 100%;
                }
            }