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

        /* Guard against stray wide rows (fixed-width time inputs, non-wrapping
           flex rows) turning into a page-level horizontal scroll on phones.
           Vertical scrolling and position: sticky keep working. */
        html { overflow-x: hidden; }

        /* Design tokens. Color is semantic, not "light mode + filter": dark
           mode is its own palette (near-black canvas, surface ladder rising
           ~4-6% per elevation, off-white text, accent shifted to 300-400).
           Radius: inner = outer - padding (a 20px card with 10px padding
           holds 10px inner elements). Type: admin density, nothing over
           24px; >=17px kerned -0.02em, >=20px -0.03em. Shadows: tinted
           blue-grey, low opacity, high blur; cards < popovers < modals. */
        :root {
            color-scheme: light;
            /* Surfaces: near-white page, pure white reserved for cards. */
            --background: oklch(98% 0.004 247);
            --page-top: oklch(99.4% 0.004 247);
            --surface: oklch(100% 0 0);
            --surface-muted: oklch(96.5% 0.006 247);
            --surface-elevated: oklch(100% 0 0);
            /* Text: three levels, never pure black. */
            --text: oklch(20% 0.016 255);
            --muted: oklch(51% 0.018 255);
            --faint: oklch(63% 0.015 255);
            /* Strokes: ~85-90% white, not black borders. */
            --border: oklch(90% 0.009 247);
            --border-strong: oklch(84% 0.012 247);
            /* Accent scale (brand blue): 500 mid, 600 primary fill,
               700 hover, soft = tinted background for active/selected. */
            --accent-300: oklch(74% 0.12 255);
            --accent-400: oklch(65% 0.15 255);
            --accent-500: oklch(57% 0.17 255);
            --accent-600: oklch(50% 0.18 255);
            --accent-700: oklch(44% 0.17 255);
            --accent-soft: oklch(94% 0.025 255);
            /* Semantic aliases: accent text/emphasis + solid action fill. */
            --active: var(--accent-700);
            --active-hover: var(--accent-600);
            --active-soft: var(--accent-soft);
            --action: var(--accent-600);
            --action-hover: var(--accent-700);
            --action-fg: oklch(99% 0.002 247);
            --focus: var(--accent-500);
            /* Radius scale. Small components share --r-sm. */
            --r-xs: 6px;
            --r-sm: 10px;
            --r-md: 14px;
            --r-lg: 20px;
            --r-pill: 999px;
            /* Elevation: tinted, low opacity, high blur. */
            --shadow-1: 0 1px 2px oklch(20% 0.02 255 / 0.05);
            --shadow-2: 0 4px 16px -4px oklch(20% 0.02 255 / 0.10),
                0 2px 6px oklch(20% 0.02 255 / 0.05);
            --shadow-3: 0 24px 48px -12px oklch(20% 0.02 255 / 0.18);
            --shadow-strong: rgb(0 0 0 / 0.20);
            --shadow-soft: rgb(0 0 0 / 0.06);
            --danger:        oklch(45% 0.14 25);
            --danger-bg:     oklch(96% 0.02 25);
            --danger-border: oklch(88% 0.04 25);
            --danger-bg-hover: oklch(92% 0.04 25);
            --danger-border-hover: oklch(80% 0.06 25);
            --success:        oklch(55% 0.18 145);
            --success-soft:   oklch(93% 0.04 145);
            --success-border: oklch(84% 0.08 145);
            --code-bg: oklch(20% 0.016 255);
            --code-fg: oklch(92% 0.006 247);
            --brand-bg: oklch(20% 0.016 255);
            --brand-fg: oklch(100% 0 0);
        }

        :root[data-theme="dark"] {
            color-scheme: dark;
            /* Near-black canvas, not pure #000 (halation). */
            --background: oklch(16% 0.012 255);
            --page-top: oklch(19% 0.013 255);
            --surface: oklch(21% 0.014 255);
            --surface-muted: oklch(25% 0.014 255);
            --surface-elevated: oklch(27% 0.014 255);
            /* Off-white text, never pure #FFF. */
            --text: oklch(92% 0.005 255);
            --muted: oklch(70% 0.012 255);
            --faint: oklch(55% 0.012 255);
            /* Dark mode: dim text, brighten borders. */
            --border: oklch(30% 0.013 255);
            --border-strong: oklch(40% 0.014 255);
            /* Accent shifts brighter: text/links 300-400, hover lighter. */
            --accent-300: oklch(80% 0.10 255);
            --accent-400: oklch(72% 0.13 255);
            --accent-500: oklch(65% 0.15 255);
            --accent-600: oklch(58% 0.16 255);
            --accent-700: oklch(52% 0.16 255);
            --accent-soft: oklch(30% 0.04 255);
            --active: var(--accent-300);
            --active-hover: oklch(86% 0.08 255);
            --active-soft: var(--accent-soft);
            /* Solid action: light accent fill, dark foreground. */
            --action: var(--accent-400);
            --action-hover: var(--accent-300);
            --action-fg: oklch(18% 0.02 255);
            --focus: var(--accent-400);
            /* Shadows do almost nothing on dark; borders carry elevation. */
            --shadow-1: 0 1px 2px rgb(0 0 0 / 0.30);
            --shadow-2: 0 4px 16px -4px rgb(0 0 0 / 0.45),
                0 2px 6px rgb(0 0 0 / 0.30);
            --shadow-3: 0 24px 48px -12px rgb(0 0 0 / 0.55);
            --shadow-strong: rgb(0 0 0 / 0.55);
            --shadow-soft: rgb(0 0 0 / 0.30);
            --danger:        oklch(76% 0.13 25);
            --danger-bg:     oklch(28% 0.05 25);
            --danger-border: oklch(38% 0.07 25);
            --danger-bg-hover: oklch(32% 0.06 25);
            --danger-border-hover: oklch(44% 0.09 25);
            --success:        oklch(74% 0.15 145);
            --success-soft:   oklch(26% 0.05 145);
            --success-border: oklch(38% 0.08 145);
            --code-bg: oklch(24% 0.014 255);
            --code-fg: oklch(90% 0.006 255);
            --brand-bg: oklch(33% 0.018 255);
            --brand-fg: oklch(96% 0.005 255);
        }

        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]):not([data-theme="dark"]) {
                color-scheme: dark;
                --background: oklch(16% 0.012 255);
                --page-top: oklch(19% 0.013 255);
                --surface: oklch(21% 0.014 255);
                --surface-muted: oklch(25% 0.014 255);
                --surface-elevated: oklch(27% 0.014 255);
                --text: oklch(92% 0.005 255);
                --muted: oklch(70% 0.012 255);
                --faint: oklch(55% 0.012 255);
                --border: oklch(30% 0.013 255);
                --border-strong: oklch(40% 0.014 255);
                --accent-300: oklch(80% 0.10 255);
                --accent-400: oklch(72% 0.13 255);
                --accent-500: oklch(65% 0.15 255);
                --accent-600: oklch(58% 0.16 255);
                --accent-700: oklch(52% 0.16 255);
                --accent-soft: oklch(30% 0.04 255);
                --active: var(--accent-300);
                --active-hover: oklch(86% 0.08 255);
                --active-soft: var(--accent-soft);
                --action: var(--accent-400);
                --action-hover: var(--accent-300);
                --action-fg: oklch(18% 0.02 255);
                --focus: var(--accent-400);
                --shadow-1: 0 1px 2px rgb(0 0 0 / 0.30);
                --shadow-2: 0 4px 16px -4px rgb(0 0 0 / 0.45),
                    0 2px 6px rgb(0 0 0 / 0.30);
                --shadow-3: 0 24px 48px -12px rgb(0 0 0 / 0.55);
                --shadow-strong: rgb(0 0 0 / 0.55);
                --shadow-soft: rgb(0 0 0 / 0.30);
                --danger:        oklch(76% 0.13 25);
                --danger-bg:     oklch(28% 0.05 25);
                --danger-border: oklch(38% 0.07 25);
                --danger-bg-hover: oklch(32% 0.06 25);
                --danger-border-hover: oklch(44% 0.09 25);
                --success:        oklch(74% 0.15 145);
                --success-soft:   oklch(26% 0.05 145);
                --success-border: oklch(38% 0.08 145);
                --code-bg: oklch(24% 0.014 255);
                --code-fg: oklch(90% 0.006 255);
                --brand-bg: oklch(33% 0.018 255);
                --brand-fg: oklch(96% 0.005 255);
            }
        }

        body {
            min-height: 100vh;
            background:
                linear-gradient(180deg, var(--page-top), var(--background) 280px);
            color: var(--text);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            font-size: 15px;
            letter-spacing: -0.01em;
            line-height: 1.5;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }

        .shell {
            display: grid;
            grid-template-columns: 170px minmax(0, 1fr);
            min-height: 100vh;
            transition: grid-template-columns 220ms cubic-bezier(0.4, 0, 0.2, 1);
        }

        .shell.sidebar-collapsed {
            grid-template-columns: 80px minmax(0, 1fr);
        }

        .sidebar {
            position: sticky;
            top: 0;
            height: 100vh;
            border-right: 1px solid var(--border);
            background: var(--surface);
            display: flex;
            flex-direction: column;
            padding: 24px 14px;
            z-index: 5;
            transition: padding 180ms ease;
        }

        .shell.sidebar-collapsed .sidebar {
            padding-left: 14px;
            padding-right: 14px;
        }

        .shell.sidebar-collapsed .brand-copy,
        .shell.sidebar-collapsed .tab-label {
            display: none;
        }

        .sidebar-bottom {
            align-items: center;
            display: flex;
            gap: 4px;
            margin-top: auto;
            padding: 10px 12px 0;
        }
        .sidebar-toggle {
            align-items: center;
            background: transparent;
            border: 1px solid transparent;
            border-radius: var(--r-sm);
            color: var(--muted);
            cursor: pointer;
            display: inline-flex;
            flex-shrink: 0;
            font: inherit;
            height: 32px;
            justify-content: center;
            padding: 0;
            transition: background-color 140ms ease, color 140ms ease;
            width: 32px;
        }
        .sidebar-toggle:hover {
            background: var(--surface-muted);
            color: var(--text);
        }
        .sidebar-toggle svg {
            height: 16px;
            width: 16px;
            transition: transform 200ms ease;
        }
        .sidebar-toggle .icon-expand {
            display: none;
        }
        .shell.sidebar-collapsed .sidebar-toggle .icon-collapse {
            display: none;
        }
        .shell.sidebar-collapsed .sidebar-toggle .icon-expand {
            display: block;
        }
        .shell.sidebar-collapsed .sidebar-bottom {
            flex-direction: column;
            gap: 8px;
            padding: 10px 0 0;
        }
        .shell.sidebar-collapsed .sidebar-bottom .theme-toggle { flex: none; }

        .tab:focus-visible {
            box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus) 16%, transparent);
        }

        .brand {
            align-items: center;
            display: flex;
            gap: 12px;
            justify-content: flex-start;
            margin-bottom: 28px;
        }

        .shell.sidebar-collapsed .brand {
            gap: 0;
            justify-content: center;
            margin-bottom: 30px;
        }

        .brand-mark {
            align-items: center;
            color: var(--text);
            display: inline-flex;
            gap: 10px;
            min-width: 0;
            text-decoration: none;
        }

        .brand-logo {
            flex: 0 0 auto;
            height: 28px;
            width: 28px;
        }

        .brand-wordmark {
            font-size: 17px;
            font-weight: 650;
            letter-spacing: -0.02em;
        }

        .shell.sidebar-collapsed .brand-wordmark {
            display: none;
        }

        .tabs {
            display: grid;
            gap: 3px;
        }

        .tab-group-label {
            color: var(--muted);
            display: block;
            font-size: 10px;
            font-weight: 650;
            letter-spacing: 0.04em;
            padding: 8px 12px 2px;
            text-transform: uppercase;
        }

        .shell.sidebar-collapsed .tab-group-label {
            display: none;
        }

        .tab {
            align-items: center;
            background: transparent;
            border: 1px solid transparent;
            border-radius: var(--r-sm);
            color: var(--muted);
            cursor: pointer;
            display: flex;
            font: inherit;
            font-size: 14px;
            font-weight: 560;
            gap: 10px;
            min-height: 44px;
            padding: 0 10px;
            text-align: left;
            text-decoration: none;
            transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
        }

        .shell.sidebar-collapsed .tab {
            gap: 0;
            justify-content: center;
            padding: 0;
        }

        .tab svg {
            color: currentColor;
            flex: 0 0 auto;
            height: 18px;
            stroke: currentColor;
            width: 18px;
        }

        .tab:hover,
        .tab:focus-visible {
            background: var(--surface-muted);
            border-color: var(--border);
            color: var(--text);
            outline: none;
        }

        .tab.active {
            background: var(--active-soft);
            border-color: transparent;
            color: var(--active);
            font-weight: 650;
            position: relative;
        }

        .tab.active::before {
            content: '';
            position: absolute;
            left: -14px;
            top: 0;
            bottom: 0;
            width: 3px;
            border-radius: 0 3px 3px 0;
            background: var(--active);
        }

        /* Settings is a collapsible group: the top-level row opens Settings,
           the nested rows jump straight to one of its sub-tabs. */
        .tab-group {
            display: grid;
            gap: 3px;
            min-width: 0;
        }

        .tab-caret {
            flex: 0 0 auto;
            height: 14px;
            margin-left: auto;
            opacity: 0.7;
            width: 14px;
            transition: transform 180ms ease;
        }

        .tab-group.is-open .tab-caret {
            transform: rotate(180deg);
        }

        .tab-subnav {
            display: grid;
            gap: 2px;
            padding: 2px 0 4px 16px;
        }

        .tab-subnav[hidden] {
            display: none;
        }

        .tab-subtab {
            align-items: center;
            border-radius: var(--r-sm);
            color: var(--muted);
            display: flex;
            font-size: 13px;
            font-weight: 550;
            gap: 8px;
            line-height: 1.3;
            padding: 6px 10px;
            text-decoration: none;
            transition: background-color 140ms ease, color 140ms ease;
        }

        .tab-subtab svg {
            color: currentColor;
            flex: 0 0 auto;
            height: 15px;
            stroke: currentColor;
            width: 15px;
        }

        .tab-subtab:hover,
        .tab-subtab:focus-visible {
            background: var(--surface-muted);
            color: var(--text);
            outline: none;
        }

        .tab-subtab:focus-visible {
            box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus) 16%, transparent);
        }

        .tab-subtab.is-active {
            background: var(--active-soft);
            color: var(--active);
            font-weight: 650;
        }

        /* Group nav (Settings, Integrations): drop the filled "card" behind
           the active row for a soft accent glow instead. Scoped to the groups
           so the primary tabs and other navs are untouched. */
        .tab-group[data-tab-group="settings"] .tab.active,
        .tab-group[data-tab-group="settings"] .tab-subtab.is-active,
        .tab-group[data-tab-group="integrations"] .tab.active,
        .tab-group[data-tab-group="integrations"] .tab-subtab.is-active {
            background:
                radial-gradient(130% 170% at 0% 50%,
                    color-mix(in oklch, var(--active) 14%, transparent),
                    transparent 68%);
            box-shadow: 0 0 16px -2px color-mix(in oklch, var(--active) 35%, transparent);
        }

        /* Collapsed rail: the Settings sub-tabs stay reachable as icon-only
           rows (label and indent dropped) so Boats/Seasons/Pricing/Widget are
           one click away without expanding the sidebar. Desktop only — phones
           keep the bottom bar. */
        @media (min-width: 861px) {
            .shell.sidebar-collapsed .tab-subnav {
                gap: 1px;
                padding: 2px 0;
            }

            .shell.sidebar-collapsed .tab-subtab {
                gap: 0;
                justify-content: center;
                min-height: 32px;
                padding: 0;
            }

            .shell.sidebar-collapsed .tab-subtab > span {
                display: none;
            }

            .shell.sidebar-collapsed .tab-subtab svg {
                height: 15px;
                width: 15px;
            }
        }

        .shell.sidebar-collapsed .tab-caret {
            display: none;
        }

        /* No outer card around the pages: each page owns its own cards so we
           don't stack a card inside a card (padding-on-padding). */
        .content {
            min-width: 0;
            max-width: 100%;
            padding: 0;
        }

        .panel { min-width: 0; }

        .tab-panel { display: none; }
        .tab-panel.active { display: block; }

        /* ---------- Mobile contextual top bar ---------- */
        .app-topbar { display: none; }
        .app-topbar-title {
            font-size: 16px;
            font-weight: 700;
            letter-spacing: -0.02em;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* Primary page action (New booking): a FAB sitting to the right of the
           floating tab pill, vertically centred against it. */
        .app-fab { display: none; }
        .tab-mobile-only { display: none; }

        /* ---------- Bottom sheets ---------- */
        .sheet-backdrop {
            background: rgb(0 0 0 / .32);
            inset: 0;
            position: fixed;
            z-index: 40;
        }
        .sheet-backdrop[hidden] { display: none; }
        .sheet {
            animation: sheet-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1);
            background: var(--surface);
            border-radius: var(--r-lg) var(--r-lg) 0 0;
            border-top: 1px solid var(--border);
            bottom: 0;
            box-shadow: var(--shadow-3);
            display: flex;
            flex-direction: column;
            gap: 4px;
            left: 0;
            max-height: 82vh;
            overflow-y: auto;
            padding: 8px 14px calc(env(safe-area-inset-bottom) + 16px);
            position: fixed;
            right: 0;
            z-index: 41;
        }
        .sheet[hidden] { display: none; }
        @keyframes sheet-in {
            from { opacity: .6; transform: translateY(16px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .sheet-grab { background: var(--border-strong); border-radius: var(--r-pill); height: 4px; margin: 4px auto 6px; width: 40px; }
        .sheet-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; padding: 2px 2px 8px; }
        .sheet-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
        .sheet-close {
            align-items: center;
            background: var(--surface-muted);
            border: 0;
            border-radius: var(--r-pill);
            color: var(--muted);
            cursor: pointer;
            display: inline-flex;
            height: 32px;
            justify-content: center;
            width: 32px;
        }
        .sheet-close:hover { background: var(--active-soft); color: var(--text); }
        .sheet-close svg { height: 16px; width: 16px; }
        .sheet-nav { display: grid; gap: 6px; }
        .sheet-item {
            align-items: center;
            background: transparent;
            border: 0;
            border-radius: var(--r-md);
            color: var(--text);
            cursor: pointer;
            display: flex;
            font: inherit;
            gap: 12px;
            padding: 10px;
            text-align: left;
            width: 100%;
        }
        .sheet-item:hover { background: var(--surface-muted); }
        .sheet-item-icon {
            align-items: center;
            background: var(--surface-muted);
            border-radius: var(--r-sm);
            color: var(--muted);
            display: inline-flex;
            flex-shrink: 0;
            height: 40px;
            justify-content: center;
            width: 40px;
        }
        .sheet-item-icon svg { height: 20px; width: 20px; }
        .sheet-item-text { display: grid; gap: 1px; min-width: 0; }
        .sheet-item-title { font-size: 15px; font-weight: 650; }
        .sheet-item-sub { color: var(--muted); font-size: 13px; }
        .sheet-section { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
        .sheet-account { align-items: center; display: flex; gap: 10px; padding: 4px 10px; }
        .sheet-account-avatar {
            align-items: center;
            background: oklch(55% 0.01 255);
            border-radius: var(--r-sm);
            color: oklch(98% 0.005 255);
            display: flex;
            flex: 0 0 auto;
            font-size: 13px;
            font-weight: 700;
            height: 36px;
            justify-content: center;
            letter-spacing: 0.02em;
            width: 36px;
        }
        .sheet-account-info { display: grid; flex: 1; gap: 1px; min-width: 0; }
        .sheet-account-name {
            font-size: 14px;
            font-weight: 650;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sheet-account-org {
            color: var(--muted);
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sheet-account form { flex: 0 0 auto; margin: 0; }
        .sheet-logout {
            align-items: center;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: var(--r-pill);
            color: var(--muted);
            cursor: pointer;
            display: inline-flex;
            font: inherit;
            font-size: 13px;
            font-weight: 600;
            gap: 6px;
            padding: 6px 12px;
            white-space: nowrap;
        }
        .sheet-logout:hover { background: var(--surface-muted); color: var(--text); }
        .sheet-logout svg { height: 15px; width: 15px; }
        body.sheet-open { overflow: hidden; }

        /* ---------- Theme toggle / profile ---------- */
        .theme-toggle {
            align-items: center;
            background: transparent;
            border: 0;
            border-radius: var(--r-sm);
            color: var(--muted);
            cursor: pointer;
            display: inline-flex;
            height: 32px;
            justify-content: center;
            padding: 0;
            transition: background-color 140ms ease, color 140ms ease;
            width: 32px;
        }
        .sidebar-bottom .theme-toggle { flex: 1; }
        .theme-toggle:hover { background: var(--surface-muted); color: var(--text); }
        .theme-toggle svg { height: 16px; width: 16px; }
        .theme-toggle .theme-icon { display: none; }
        :root[data-theme="light"] .theme-toggle .theme-icon-light { display: block; }
        :root[data-theme="dark"] .theme-toggle .theme-icon-dark { display: block; }
        @media (prefers-color-scheme: light) {
            :root:not([data-theme]) .theme-toggle .theme-icon-light { display: block; }
        }
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme]) .theme-toggle .theme-icon-dark { display: block; }
        }

        .profile {
            margin-top: 16px;
            position: relative;
        }
        .profile-trigger {
            align-items: center;
            background: transparent;
            border: 1px solid transparent;
            border-radius: var(--r-sm);
            color: var(--text);
            cursor: pointer;
            display: flex;
            font: inherit;
            gap: 10px;
            padding: 8px;
            text-align: left;
            transition: background-color 140ms ease, border-color 140ms ease;
            width: 100%;
        }
        .profile-trigger:hover,
        .profile-trigger:focus-visible {
            background: var(--surface-muted);
            outline: none;
        }
        .profile-trigger:focus-visible {
            border-color: var(--border-strong);
            box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus) 16%, transparent);
        }
        .profile-avatar {
            align-items: center;
            background: oklch(55% 0.01 255);
            border-radius: var(--r-sm);
            color: oklch(98% 0.005 255);
            display: flex;
            flex: 0 0 auto;
            font-size: 13px;
            font-weight: 700;
            height: 36px;
            justify-content: center;
            letter-spacing: 0.02em;
            width: 36px;
        }
        .profile-avatar svg { display: none; }
        .profile-avatar-text { line-height: 1; }

        input::placeholder, textarea::placeholder {
            color: var(--faint);
        }
        .profile-info {
            display: flex;
            flex: 1;
            flex-direction: column;
            min-width: 0;
        }
        .profile-name {
            color: var(--text);
            display: block;
            font-size: 13px;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .profile-org {
            color: var(--muted);
            display: block;
            font-size: 11px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .profile-caret {
            display: none;
        }

        .profile-menu {
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            bottom: calc(100% + 6px);
            box-shadow: var(--shadow-2);
            left: 8px;
            padding: 6px;
            position: absolute;
            right: 8px;
            z-index: 10;
        }
        .profile-menu[hidden] { display: none; }
        .profile-menu form { margin: 0; }
        .profile-menu-item {
            align-items: center;
            background: transparent;
            border: 0;
            border-radius: calc(var(--r-md) - 6px);
            color: var(--text);
            cursor: pointer;
            display: flex;
            font: inherit;
            font-size: 13px;
            gap: 10px;
            padding: 9px 10px;
            text-align: left;
            width: 100%;
        }
        .profile-menu-item:hover,
        .profile-menu-item:focus-visible {
            background: var(--surface-muted);
            outline: none;
        }
        .profile-menu-item svg {
            color: var(--muted);
            flex: 0 0 auto;
            height: 16px;
            width: 16px;
        }

        .shell.sidebar-collapsed .profile-info,
        .shell.sidebar-collapsed .profile-caret { display: none; }
        .shell.sidebar-collapsed .profile-trigger { justify-content: center; padding: 6px; }
        .shell.sidebar-collapsed .profile-menu {
            left: calc(100% + 8px);
            right: auto;
            bottom: 0;
            top: auto;
            min-width: 200px;
        }
        .shell.sidebar-collapsed .profile-avatar {
            width: 40px;
            height: 40px;
            font-size: 15px;
        }
        .shell.sidebar-collapsed .tabs {
            gap: 2px;
        }
        .shell.sidebar-collapsed .tab {
            position: relative;
        }

        .shell.sidebar-collapsed .tab.active::after {
            content: '';
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--active);
            pointer-events: none;
        }

        @media (max-width: 860px) {
            .profile { display: none; }
            .sidebar-bottom { display: none; }
            .shell {
                display: block;
            }

            .app-topbar {
                align-items: center;
                background: color-mix(in oklch, var(--page-top) 90%, transparent);
                backdrop-filter: blur(12px);
                border-bottom: 1px solid var(--border);
                display: flex;
                gap: 12px;
                justify-content: space-between;
                left: 0;
                padding: calc(env(safe-area-inset-top) + 5px) 12px 5px;
                position: fixed;
                right: 0;
                top: 0;
                transition: transform 220ms ease;
                will-change: transform;
                z-index: 6;
            }

            .app-topbar.is-hidden {
                transform: translateY(-100%);
            }

            .app-topbar .theme-toggle {
                flex: none;
                height: 32px;
                width: 32px;
            }
            .app-topbar .theme-toggle svg { height: 17px; width: 17px; }

            .app-fab {
                align-items: center;
                background: var(--action);
                border: 1px solid color-mix(in oklch, var(--border) 85%, transparent);
                border-radius: var(--r-pill);
                bottom: calc(env(safe-area-inset-bottom) + 12px);
                box-shadow: 0 14px 34px -14px var(--shadow-strong), 0 3px 10px var(--shadow-soft),
                    inset 0 1px 0 color-mix(in oklch, white 45%, transparent);
                color: var(--action-fg);
                cursor: pointer;
                display: inline-flex;
                height: 64px;
                justify-content: center;
                position: fixed;
                right: max(10px, env(safe-area-inset-right));
                transition: background-color 140ms ease, transform 140ms ease;
                width: 64px;
                z-index: 6;
            }
            .app-fab:hover { background: var(--action-hover); }
            .app-fab:active { transform: scale(0.96); }
            .app-fab:focus-visible {
                box-shadow: 0 0 0 3px color-mix(in oklch, var(--focus) 30%, transparent), 0 10px 24px -8px var(--shadow-strong);
                outline: none;
            }
            .app-fab svg { height: 26px; width: 26px; }

            /* 16px+ inputs stop iOS Safari from zooming on focus, and the
               larger base leans into mobile reading sizes rather than
               shrinking the desktop scale. */
            body { font-size: 16px; }
            input, select, textarea { font-size: 16px !important; }

            /* Floating glass pill tab bar, docked left with the FAB as a
               separate island on its right (8px gap at every width — the bar
               spans the space between the screen edge and the FAB). Both
               islands are 64px tall and sit on the same 12px baseline.
               `tabs` is flex (not a fixed-column grid) so the bar fills its
               width whatever number of tabs remains after the desktop-only
               items drop out. */
            .sidebar,
            .shell.sidebar-collapsed .sidebar {
                -webkit-backdrop-filter: saturate(190%) blur(22px);
                backdrop-filter: saturate(190%) blur(22px);
                align-items: center;
                background: color-mix(in oklch, var(--surface) 82%, transparent);
                border: 1px solid color-mix(in oklch, var(--border) 85%, transparent);
                border-radius: var(--r-pill);
                bottom: calc(12px + env(safe-area-inset-bottom));
                box-shadow: 0 14px 34px -14px var(--shadow-strong), 0 3px 10px var(--shadow-soft),
                    inset 0 1px 0 color-mix(in oklch, white 45%, transparent);
                flex-direction: row;
                gap: 4px;
                height: auto;
                left: max(10px, env(safe-area-inset-left));
                padding: 5px;
                position: fixed;
                right: auto;
                top: auto;
                transform: none;
                width: calc(100% - 92px);
                z-index: 30;
            }

            .shell.sidebar-collapsed .tab-label {
                display: block;
            }

            .shell.sidebar-collapsed .tab::after {
                display: none;
            }

            .brand {
                display: none;
            }

            /* Widget + Integrations live in the More sheet on phones, so their
               sidebar tabs are desktop-only; the More tab is phones-only. */
            .tab-desktop-only { display: none; }
            .tab-mobile-only { display: flex; }

            .tabs {
                display: flex;
                flex: 1;
                gap: 2px;
                margin: 0;
                overflow: visible;
                padding: 0;
                width: 100%;
            }

            .tab-group {
                display: flex;
                flex: 1 1 0;
                margin-top: 0;
                min-width: 0;
            }

            .tab-group > .tab {
                width: 100%;
            }

            .tab-group-label,
            /* Phones use the bottom bar; Settings sub-tabs live on the page
               itself, so the nested rows and caret stay off the bar. */
            .tab-caret,
            .tab-subnav {
                display: none;
            }

            .tabs-primary {
                flex: 1;
            }

            .tabs::-webkit-scrollbar { display: none; }

            .tab,
            .shell.sidebar-collapsed .tab {
                border-radius: var(--r-pill);
                flex: 1 1 0;
                flex-direction: column;
                gap: 3px;
                justify-content: center;
                min-height: 52px;
                min-width: 0;
                padding: 6px 2px;
                white-space: normal;
            }

            .tab.active {
                background: var(--active-soft);
                color: var(--active);
            }

            .tab.active::before {
                display: none;
            }

            .tab-label {
                font-size: 11px;
                font-weight: 600;
                line-height: 1.1;
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .tab svg {
                height: 22px;
                width: 22px;
            }

            /* Bottom padding clears the 64px pill + FAB islands (12px off the
               screen edge) with a 16px gap when scrolled to the end. */
            .content {
                padding: calc(env(safe-area-inset-top) + 48px) 0 calc(92px + env(safe-area-inset-bottom));
            }
        }