/* Two complete themes; no account data or browser persistence. */
html[data-demo="workspace"] { --ui-canvas:#f4f6fa; --ui-surface:#ffffff; --ui-raised:#f8f9fc; --ui-nav:#ffffff; --ui-ink:#1e293b; --ui-muted:#64748b; --ui-line:#e2e8f0; --ui-accent:#4f63d8; --ui-accent-hover:#3f50bc; --ui-accent-soft:#edf0ff; --card-bg:var(--ui-surface); --text:var(--ui-ink); --muted:var(--ui-muted); --border:var(--ui-line); }
html[data-demo="workspace"][data-theme="dark"] { --ui-canvas:#10151e; --ui-surface:#192230; --ui-raised:#202c3c; --ui-nav:#141d29; --ui-ink:#e7edf7; --ui-muted:#acb9ce; --ui-line:#334155; --ui-accent:#9daaff; --ui-accent-hover:#bac3ff; --ui-accent-soft:#2d3759; --card-bg:var(--ui-surface); --text:var(--ui-ink); --muted:var(--ui-muted); --border:var(--ui-line); --input-bg:var(--ui-surface); --heading:var(--ui-ink); }
/* KeeperBMA demo design system: quiet surfaces, clear hierarchy, one workspace. */
html[data-demo="workspace"] { --text:var(--ui-ink); --muted:var(--ui-muted); --heading:var(--ui-ink); --card-bg:var(--ui-surface); --surface:var(--ui-raised); --border:var(--ui-line); --input-bg:var(--ui-surface); --table-border:var(--ui-line); --shadow:none; --primary-start:var(--ui-accent); --primary-end:var(--ui-accent); font-size:16px; }
html[data-demo="workspace"] body { background:var(--ui-canvas); color:var(--ui-ink); font-family:Inter,"Segoe UI",Arial,sans-serif; line-height:1.55; }
html[data-demo="workspace"] .page { max-width:1600px; padding:24px; }
html[data-demo="workspace"] h1,html[data-demo="workspace"] h2,html[data-demo="workspace"] h3,html[data-demo="workspace"] h4 { color:var(--ui-ink); letter-spacing:-.025em; }
html[data-demo="workspace"] button { font-family:inherit; background:var(--ui-accent); color:white; border:1px solid transparent; border-radius:8px; box-shadow:none; padding:10px 16px; font-size:.88rem; font-weight:600; transition:background .15s,border-color .15s; }
html[data-demo="workspace"] button:hover { background:var(--ui-accent-hover); transform:none; }
html[data-demo="workspace"] button.secondary { background:var(--ui-surface); color:var(--ui-ink); border:1px solid var(--ui-line); }
html[data-demo="workspace"] button.secondary:hover { background:var(--ui-raised); border-color:var(--ui-accent); }
html[data-demo="workspace"] button:disabled { opacity:.42; cursor:not-allowed; }
html[data-demo="workspace"] button:focus-visible,html[data-demo="workspace"] a:focus-visible,html[data-demo="workspace"] summary:focus-visible { outline:3px solid var(--ui-accent); outline-offset:3px; }
html[data-demo="workspace"] input,html[data-demo="workspace"] select,html[data-demo="workspace"] textarea { background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:7px; padding:10px 12px; color:var(--ui-ink); box-shadow:none; font:inherit; font-size:.9rem; min-height:42px; }
html[data-demo="workspace"] input:focus,html[data-demo="workspace"] select:focus,html[data-demo="workspace"] textarea:focus { outline:2px solid var(--ui-accent-soft); outline-offset:1px; border-color:var(--ui-accent); }
html[data-demo="workspace"] label { color:var(--ui-ink); font-size:.84rem; font-weight:600; }
html[data-demo="workspace"] .card { border:1px solid var(--ui-line); box-shadow:none; border-radius:12px; }
html[data-demo="workspace"] #appScreen .top { background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:10px; color:var(--ui-ink); padding:12px 18px; margin-bottom:20px; gap:12px; box-shadow:none; }
html[data-demo="workspace"] .top h1 { font-size:1.25rem; margin:0; }
html[data-demo="workspace"] .top-logo { width:32px; height:32px; border-radius:7px; }
html[data-demo="workspace"] #userBadge { color:var(--ui-muted); font-size:.8rem; font-weight:400; }
html[data-demo="workspace"] .top-right { gap:10px; }
html[data-demo="workspace"] .top #btnOpenSettings,html[data-demo="workspace"] .top #btnLogout { background:var(--ui-raised); color:var(--ui-muted); padding:7px 12px; border:1px solid var(--ui-line); }
html[data-demo="workspace"] #appModeSwitch { background:var(--ui-raised); border:1px solid var(--ui-line); box-shadow:none; }
html[data-demo="workspace"] #appModeSwitch .toggle-thumb { background:var(--ui-accent); box-shadow:none; }
html[data-demo="workspace"] #appModeSwitch button { background:transparent; border:0; color:var(--ui-muted); }
html[data-demo="workspace"] #appModeSwitch button.active { color:white; }
html[data-demo="workspace"] .demo-banner { background:var(--ui-accent-soft); color:var(--ui-muted); border:1px solid var(--ui-line); border-radius:9px; padding:12px 18px; font-size:.83rem; }
html[data-demo="workspace"] .demo-banner p { margin-top:5px; }
html[data-demo="workspace"] .demo-directory { padding:24px; }
html[data-demo="workspace"] .demo-directory h1 { font-size:1.65rem; }
html[data-demo="workspace"] .demo-directory nav button { background:var(--ui-raised); color:var(--ui-muted); border-color:var(--ui-line); }
html[data-demo="workspace"] .demo-directory nav button:hover { background:var(--ui-accent-soft); }
/* The demo entry directory: workspace cards, quiet shortcuts and a clear footer. */
html[data-demo="workspace"] .demo-directory [hidden] { display:none!important; }
.demo-directory-tabs { display:flex; gap:22px; border-bottom:1px solid var(--ui-line); margin:0 0 16px; }
html[data-demo="workspace"] .demo-directory-tabs button { width:auto; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--ui-muted); padding:10px 0 12px; font-size:.82rem; }
html[data-demo="workspace"] .demo-directory-tabs button:hover { background:transparent; color:var(--ui-ink); }
html[data-demo="workspace"] .demo-directory-tabs button[aria-selected="true"] { color:var(--ui-accent); border-bottom-color:var(--ui-accent); }
html[data-demo="workspace"] .demo-directory nav.demo-direct-tools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; padding:0; overflow:visible; grid-auto-flow:row; grid-auto-columns:auto; grid-template-rows:none; }
html[data-demo="workspace"] .demo-directory nav.demo-direct-tools button { display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:start; min-height:46px; width:100%; padding:11px 14px; font-size:.8rem; font-weight:500; color:var(--ui-ink); background:var(--ui-raised); }

@media(max-width:700px) { html[data-demo="workspace"] .demo-directory nav.demo-direct-tools { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:420px) { .demo-directory-tabs { gap:16px; } html[data-demo="workspace"] .demo-directory-tabs button { font-size:.75rem; } html[data-demo="workspace"] .demo-directory nav.demo-direct-tools { grid-template-columns:minmax(0,1fr); } }
html[data-demo="workspace"] .demo-directory { padding:32px; border-radius:18px; overflow:hidden; }
.demo-directory-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:26px; }
html[data-demo="workspace"] .demo-directory .demo-directory-eyebrow { display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:.68rem; font-weight:700; letter-spacing:.13em; color:var(--ui-accent); }
.demo-directory-eyebrow > span { width:7px; height:7px; background:currentColor; border-radius:50%; }
html[data-demo="workspace"] .demo-directory h1 { margin:0; font-size:clamp(1.6rem,2.5vw,2rem); line-height:1.2; }
.demo-directory-heading > div > p:last-child { margin:10px 0 0; color:var(--ui-muted); font-size:.9rem; }
.demo-directory-access { flex-shrink:0; background:var(--ui-accent-soft); color:var(--ui-accent); border:1px solid var(--ui-line); padding:7px 12px; border-radius:30px; font-size:.73rem; font-weight:600; }
html[data-demo="workspace"] .demo-directory .demo-workspace-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; padding:0; overflow:visible; }
html[data-demo="workspace"] .demo-directory button.demo-workspace-card { display:flex; align-items:flex-start; gap:13px; width:100%; min-height:112px; padding:20px 16px; text-align:start; background:var(--ui-surface); border:1px solid var(--ui-line); border-radius:12px; color:var(--ui-ink); transition:border-color .18s,background .18s,box-shadow .18s; }
html[data-demo="workspace"] .demo-directory button.demo-workspace-card:hover { background:var(--ui-raised); border-color:var(--ui-accent); box-shadow:0 4px 14px #132b4b08; }
.demo-workspace-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:var(--ui-accent-soft); color:var(--ui-accent); flex-shrink:0; }
.demo-workspace-icon svg { width:21px; height:21px; }
.demo-workspace-copy { display:flex; flex-direction:column; gap:6px; min-width:0; }
.demo-workspace-copy strong { font-size:.86rem; font-weight:650; line-height:1.35; }
.demo-workspace-copy > span { color:var(--ui-muted); font-size:.76rem; font-weight:400; line-height:1.5; }
.demo-workspace-arrow { margin-inline-start:auto; color:var(--ui-muted); font-size:1rem; font-weight:400; }
.demo-utility-row { display:flex; align-items:baseline; gap:18px; padding:18px 0; margin-top:6px; }
.demo-utility-label { flex-shrink:0; color:var(--ui-muted); font-size:.73rem; }
html[data-demo="workspace"] .demo-directory .demo-utility-row nav { display:flex; flex-wrap:wrap; gap:4px 16px; margin:0; padding:0; overflow:visible; }
html[data-demo="workspace"] .demo-directory .demo-utility-row button { background:transparent; color:var(--ui-muted); border:0; border-radius:4px; padding:5px 0; min-height:32px; font-size:.75rem; font-weight:500; }
html[data-demo="workspace"] .demo-directory .demo-utility-row button:hover { color:var(--ui-accent); background:transparent; text-decoration:underline; text-underline-offset:4px; }
.demo-directory-footer { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-top:26px; padding-top:22px; border-top:1px solid var(--ui-line); }
.demo-directory-note { max-width:620px; }
.demo-directory-note > strong { display:block; color:var(--ui-ink); font-size:.75rem; font-weight:600; }
.demo-directory-note p { color:var(--ui-muted); font-size:.72rem; line-height:1.65; margin:5px 0 0; }
.demo-directory-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px 16px; flex-shrink:0; max-width:300px; }
html[data-demo="workspace"] .demo-directory-actions button { width:auto; padding:9px 14px; min-height:38px; font-size:.75rem; }
.demo-directory-actions a { text-decoration:none; font-size:.75rem; font-weight:600; }
.demo-directory-actions .demo-plans-link { color:var(--ui-accent); }
.demo-directory-actions .demo-exit-link { color:var(--ui-muted); }
.demo-directory-actions a:hover { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:1100px) { html[data-demo="workspace"] .demo-directory .demo-workspace-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .demo-directory-footer { align-items:flex-start; } .demo-directory-actions { max-width:180px; } }
@media(max-width:640px) { html[data-demo="workspace"] .demo-directory { padding:20px; } .demo-directory-heading { align-items:flex-start; flex-direction:column; gap:14px; margin-bottom:20px; } html[data-demo="workspace"] .demo-directory .demo-workspace-grid { grid-template-columns:minmax(0,1fr); grid-auto-flow:row; grid-auto-columns:auto; grid-template-rows:none; } html[data-demo="workspace"] .demo-directory button.demo-workspace-card { min-height:96px; } .demo-utility-row { flex-direction:column; gap:5px; } .demo-directory-collections { grid-template-columns:minmax(0,1fr); } .demo-directory-footer { flex-direction:column; gap:18px; margin-top:20px; } .demo-directory-actions { max-width:none; justify-content:flex-start; } }
/* Keep the entry menu concise, with comfortable targets and less empty space. */
html[data-demo="workspace"] .demo-directory { padding:24px; }
.demo-directory-heading { margin-bottom:14px; }
html[data-demo="workspace"] .demo-directory h1 { font-size:1.5rem; }
html[data-demo="workspace"] .demo-directory .demo-directory-eyebrow { margin-bottom:6px; }
.demo-directory-heading > div > p:last-child { margin-top:6px; font-size:.82rem; }
html[data-demo="workspace"] .demo-directory button.demo-workspace-card { min-height:78px; padding:14px; gap:10px; }
.demo-workspace-icon { width:32px; height:32px; border-radius:8px; }
.demo-workspace-icon svg { width:18px; height:18px; }
.demo-workspace-copy { gap:3px; }
.demo-workspace-copy strong { font-size:.8rem; }
.demo-workspace-copy > span { font-size:.72rem; }
.demo-utility-row { padding:12px 0 0; margin-top:0; }
.demo-directory-footer { margin-top:18px; padding-top:14px; gap:20px; }
@media(max-width:640px) { html[data-demo="workspace"] .demo-directory { padding:18px; } .demo-directory-heading { gap:10px; } .demo-directory-access { font-size:.68rem; padding:5px 9px; } .demo-directory-footer { gap:12px; } }
html[data-demo="workspace"] #businessWorkspace.business-demo-organized { display:grid; grid-template-columns:216px minmax(0,1fr); gap:0; align-items:start; background:var(--ui-canvas); border:1px solid var(--ui-line); border-radius:16px; padding:0; min-height:850px; overflow:clip; }
html[data-demo="workspace"] #businessWorkspace.hidden { display:none !important; }
.business-sidebar { background:var(--ui-nav); align-self:stretch; padding:28px 16px; display:flex; flex-direction:column; min-height:850px; color:var(--ui-ink); }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:0 10px 30px; font-weight:650; font-size:1.05rem; letter-spacing:-.03em; color:var(--ui-surface); }
.sidebar-mark { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--ui-accent-soft); color:#194c36; font-size:1.2rem; }
.sidebar-brand small { display:block; font-size:.58rem; letter-spacing:.12em; color:var(--ui-muted); margin-top:2px; font-weight:500; }
.sidebar-section-label { color:var(--ui-muted); font-size:.65rem; letter-spacing:.13em; padding:0 14px; margin:4px 0 12px; }
html[data-demo="workspace"] .business-sidebar .business-category-nav { background:transparent; display:flex; flex-direction:column; padding:0; margin:0; gap:6px; border-radius:0; }
html[data-demo="workspace"] .business-sidebar .business-category-nav button { display:flex; align-items:center; justify-content:flex-start; gap:12px; flex:initial; width:100%; min-width:0; padding:12px 14px; min-height:46px; border-radius:8px; color:var(--ui-muted); background:transparent; font-size:.9rem; font-weight:500; border:1px solid transparent; box-shadow:none; }
.business-category-nav svg { width:19px; height:19px; flex-shrink:0; }
html[data-demo="workspace"] .business-sidebar .business-category-nav button:hover { color:var(--ui-ink); background:var(--ui-raised); }
html[data-demo="workspace"] .business-sidebar .business-category-nav button[aria-pressed="true"] { color:#e3f7eb; background:var(--ui-accent-soft); border-color:var(--ui-line); font-weight:600; }
.sidebar-footer { margin-top:auto; padding:60px 12px 4px; color:var(--ui-muted); font-size:.78rem; }
.sidebar-live-dot { display:inline-block; width:6px; height:6px; border-radius:100%; background:#9cd8ae; margin-right:5px; }
.sidebar-footer p { color:var(--ui-muted); font-size:.75rem; line-height:1.7; margin:10px 0; }
.sidebar-footer a { color:var(--ui-muted); font-size:.73rem; text-decoration:none; }
.business-app-main { padding:30px 32px 70px; min-width:0; }
html[data-demo="workspace"] .business-demo-header { padding:0 0 26px; background:transparent; border:0; box-shadow:none; border-radius:0; }
html[data-demo="workspace"] .business-demo-heading { align-items:flex-start; gap:10px; }
html[data-demo="workspace"] .business-demo-heading h2 { font-size:1.85rem; font-weight:650; margin:5px 0 8px; color:var(--ui-ink); }
html[data-demo="workspace"] .business-demo-heading .pos-eyebrow { color:var(--ui-muted); font-size:.65rem; letter-spacing:.13em; font-weight:600; margin:0; }
html[data-demo="workspace"] .business-demo-heading p { color:var(--ui-muted); font-size:.87rem; }
html[data-demo="workspace"] .business-demo-badge { background:var(--ui-surface); border:1px solid var(--ui-line); color:var(--ui-muted); border-radius:6px; padding:6px 10px; font-size:.7rem; }
html[data-demo="workspace"] .business-breadcrumb { margin:0 0 10px; color:var(--ui-muted); font-size:.72rem; }
html[data-demo="workspace"] .business-demo-header .business-breadcrumb { margin-top:10px; }
html[data-demo="workspace"] .business-app-main > .pos-demo { margin:0; padding:22px 24px; border-radius:12px; border:1px solid var(--ui-line); background:var(--ui-surface); }
html[data-demo="workspace"] .business-app-main > [data-business-screen] .card { margin:0; padding:24px; }
html[data-demo="workspace"] .business-demo-organized .pos-tabs { border-bottom:1px solid var(--ui-line); margin:0 0 24px; padding-bottom:12px; gap:4px; }
html[data-demo="workspace"] .business-demo-organized .pos-tabs button { color:var(--ui-muted); font-size:.8rem; padding:8px 11px; border-radius:6px; background:transparent; border:1px solid transparent; box-shadow:none; }
html[data-demo="workspace"] .business-demo-organized .pos-tabs button[aria-pressed="true"] { color:var(--ui-accent); background:var(--ui-accent-soft); border-color:var(--ui-line); font-weight:650; }
html[data-demo="workspace"] .business-demo-organized .pos-tabs button:hover { background:var(--ui-raised); color:var(--ui-accent); }
html[data-demo="workspace"] .business-demo-organized h3 { font-size:1.13rem; margin:6px 0 7px; font-weight:650; }
html[data-demo="workspace"] .business-demo-organized h4 { font-size:.95rem; margin:20px 0 12px; }
html[data-demo="workspace"] .business-demo-organized p { font-size:.86rem; color:var(--ui-muted); }
html[data-demo="workspace"] .business-demo-organized .pos-fields { gap:18px; margin-block:24px; }
html[data-demo="workspace"] .business-demo-organized .branch-toolbar { background:var(--ui-raised); border:1px solid var(--ui-line); border-radius:8px; margin-bottom:8px; }
html[data-demo="workspace"] .branch-toolbar p { color:var(--ui-ink); font-size:.8rem; font-weight:500; }
html[data-demo="workspace"] .business-demo-organized .branch-scope { font-size:.72rem; margin-bottom:24px; color:var(--ui-muted); }
html[data-demo="workspace"] .pos-table-wrap { border:1px solid var(--ui-line); border-radius:8px; margin:20px 0; }
html[data-demo="workspace"] table { border-collapse:collapse; }
html[data-demo="workspace"] th { background:var(--ui-raised); color:var(--ui-muted); font-size:.72rem; letter-spacing:.02em; font-weight:600; border-bottom:1px solid var(--ui-line); padding:12px 14px; white-space:nowrap; }
html[data-demo="workspace"] td { color:var(--ui-ink); padding:15px 14px; border-bottom:1px solid var(--ui-line); font-size:.82rem; }
html[data-demo="workspace"] tr:last-child td { border-bottom:0; }
html[data-demo="workspace"] tbody tr:hover { background:var(--ui-raised); }
html[data-demo="workspace"] .pos-table-wrap button { padding:6px 10px; min-height:34px; font-size:.75rem; }
html[data-demo="workspace"] .pos-metrics { gap:16px; margin:24px 0; }
html[data-demo="workspace"] .pos-metrics > div,html[data-demo="workspace"] .pos-metrics > article { border:1px solid var(--ui-line); border-radius:10px; padding:21px; background:var(--ui-surface); }
html[data-demo="workspace"] .pos-metrics span { color:var(--ui-muted); font-size:.78rem; }
html[data-demo="workspace"] .pos-metrics strong { font-size:1.9rem; letter-spacing:-.04em; font-weight:600; color:var(--ui-ink); margin-top:12px; }
.dashboard-columns { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:24px 0; }
.dashboard-panel { border:1px solid var(--ui-line); border-radius:10px; padding:20px; background:var(--ui-surface); min-width:0; }
.dashboard-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
html[data-demo="workspace"] .dashboard-panel-heading h4 { margin:0; font-weight:650; font-size:.88rem; }
.design-status { color:var(--ui-muted); font-size:.67rem; }
.attention-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--ui-line); }
.attention-row:last-child { border-bottom:0; }
.attention-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; font-weight:600; flex-shrink:0; }
.attention-icon.amber { color:#ac8239; background:#fbf3e4; }.attention-icon.blue { color:#5e91ab; background:#edf5fa; }.attention-icon.violet { color:#9674ac; background:#f4eef8; }
.attention-row strong { font-size:.8rem; font-weight:600; color:var(--ui-ink); }
html[data-demo="workspace"] .attention-row p { font-size:.72rem; margin:3px 0 0; color:var(--ui-muted); }
html[data-demo="workspace"] button.dashboard-action { display:flex; width:100%; text-align:left; justify-content:space-between; align-items:center; padding:14px 0; border:0; border-bottom:1px solid var(--ui-line); background:transparent; color:var(--ui-accent); border-radius:0; min-height:70px; }
html[data-demo="workspace"] button.dashboard-action:hover { background:var(--ui-raised); }
.dashboard-action strong { display:block; font-size:.8rem; font-weight:600; }
.dashboard-action small { display:block; font-size:.72rem; color:var(--ui-muted); font-weight:400; margin-top:4px; }
html[data-demo="workspace"] .dashboard-footnote { font-size:.69rem; color:var(--ui-muted); border-top:1px solid var(--ui-line); padding-top:16px; margin:20px 0 0; }
html[data-demo="workspace"] #supportLauncher { background:var(--ui-accent); box-shadow:0 4px 16px #143d2520; border-radius:50px; padding:10px 18px; font-size:.8rem; }
html[data-demo="workspace"] .demo-menu-return { background:var(--ui-surface); color:var(--ui-muted); border:1px solid var(--ui-line); border-radius:7px; box-shadow:0 2px 8px #183b2510; font-size:.8rem; padding:9px 14px; }
@media(max-width:1050px) {
 html[data-demo="workspace"] #businessWorkspace.business-demo-organized { grid-template-columns:190px minmax(0,1fr); }
 .business-app-main { padding:24px 20px 70px; }
 .dashboard-columns { grid-template-columns:1fr; }
 html[data-demo="workspace"] .pos-metrics > div,html[data-demo="workspace"] .pos-metrics > article { padding:16px; }
}
@media(max-width:700px) {
 html[data-demo="workspace"] .page { padding:8px; }
 html[data-demo="workspace"] #businessWorkspace.business-demo-organized { display:block; border-radius:12px; min-height:0; }
 .business-sidebar { padding:12px; min-height:0; display:block; }
 .sidebar-brand,.sidebar-section-label,.sidebar-footer { display:none; }
 html[data-demo="workspace"] .business-sidebar .business-category-nav { display:flex; flex-direction:row; gap:4px; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
 html[data-demo="workspace"] .business-sidebar .business-category-nav button { flex:0 0 auto; width:auto; gap:7px; min-height:42px; padding:9px 12px; }
 .business-category-nav svg { width:16px; height:16px; }
 .business-app-main { padding:22px 14px 75px; }
 html[data-demo="workspace"] .business-demo-heading h2 { font-size:1.5rem; }
 html[data-demo="workspace"] .business-demo-heading p { font-size:.8rem; }
 html[data-demo="workspace"] .business-demo-badge { display:none; }
 html[data-demo="workspace"] .business-app-main > .pos-demo { padding:16px; }
 html[data-demo="workspace"] .pos-metrics { grid-template-columns:1fr; gap:10px; }
 html[data-demo="workspace"] .pos-metrics > div { display:flex; align-items:center; justify-content:space-between; }
 html[data-demo="workspace"] .pos-metrics strong { font-size:1.5rem; margin:0; }
 .dashboard-panel { padding:16px; }
 html[data-demo="workspace"] #userBadge { display:none; }
 html[data-demo="workspace"] #appScreen .top { padding:10px 12px; gap:10px; }
 html[data-demo="workspace"] #appScreen .top-right { width:100%; justify-content:space-between; }
 html[data-demo="workspace"] .top #btnOpenSettings,html[data-demo="workspace"] .top #btnLogout { padding:6px 9px; font-size:.75rem; }
}

@media(max-width:700px) { html[data-demo="workspace"] .business-sidebar .business-category-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); } html[data-demo="workspace"] .business-sidebar .business-category-nav button { justify-content:center; padding:9px 5px; font-size:.76rem; gap:5px; } .business-category-nav svg { width:15px; height:15px; } }
html[data-demo="workspace"] .business-app-main [data-hub-panel="overview"] > h3,
html[data-demo="workspace"] .business-app-main [data-hub-panel="overview"] > p:first-of-type { display:none; }
html[data-demo="workspace"] input[type="checkbox"] { width:16px; height:16px; min-height:16px; padding:0; accent-color:var(--ui-accent); }
html[data-demo="workspace"] #scheduleForm label:has(input[type="checkbox"]) { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:9px; margin:8px 0; }
html[data-demo="workspace"] #scheduleForm fieldset { border:1px solid var(--ui-line); border-radius:8px; padding:14px 16px; }
html[data-demo="workspace"] #scheduleForm legend { color:var(--ui-muted); font-size:.8rem; padding:0 6px; }

/* Neutral navigation and visible appearance controls. */
.business-sidebar { border-right:1px solid var(--ui-line); }
.sidebar-brand { color:var(--ui-ink); }.sidebar-mark { color:var(--ui-accent); }
html[data-demo="workspace"] .business-sidebar .business-category-nav button[aria-pressed="true"] { color:var(--ui-accent); background:var(--ui-accent-soft); border-color:transparent; }
html[data-demo="workspace"] .business-sidebar .business-category-nav button:hover { color:var(--ui-ink); background:var(--ui-raised); }
.business-header-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.demo-theme-picker { display:flex; gap:3px; background:var(--ui-raised); padding:4px; border:1px solid var(--ui-line); border-radius:9px; }
html[data-demo="workspace"] .demo-theme-picker button { padding:6px 12px; background:transparent; color:var(--ui-muted); min-height:34px; font-size:.78rem; }
html[data-demo="workspace"] .demo-theme-picker button[aria-pressed="true"] { background:var(--ui-surface); color:var(--ui-ink); border-color:var(--ui-line); }
html[data-demo="workspace"][data-theme="dark"] button:not(.secondary):not([aria-pressed]):not(.dashboard-action) { color:#10182a; }
html[data-demo="workspace"][data-theme="dark"] .top #btnOpenSettings,html[data-demo="workspace"][data-theme="dark"] .top #btnLogout { color:var(--ui-ink); }
html[data-demo="workspace"] #supportWidget { width:min(440px,calc(100vw - 24px)); padding:20px; background:var(--ui-surface); border:1px solid var(--ui-line); box-shadow:0 16px 60px #0003; }
html[data-demo="workspace"] #supportWidget .support-message { background:var(--ui-raised); border:1px solid var(--ui-line); color:var(--ui-ink); border-radius:10px; }
html[data-demo="workspace"] #supportWidget .support-message.user { background:var(--ui-accent-soft); }
html[data-demo="workspace"] #supportWidget .support-message-body { white-space:pre-wrap; color:var(--ui-ink); }
html[data-demo="workspace"] #supportWidget .support-message-escalation { color:var(--ui-muted); background:transparent; border-top:1px solid var(--ui-line); font-size:.75rem; }
html[data-demo="workspace"] #supportWidget .support-note::after { content:none; }
html[data-demo="workspace"] #supportWidget .support-note,html[data-demo="workspace"] #supportSubtitle { font-size:.78rem; color:var(--ui-muted); }
html[data-demo="workspace"] #supportWidget textarea { min-height:72px; }
html[data-demo="workspace"] #supportWidget .support-messages { min-height:100px; max-height:40vh; }
html[data-demo="workspace"] #supportWidget .support-suggestion-btn { font-size:.72rem; min-height:34px; padding:6px 10px; }
@media(max-width:700px){ .business-sidebar{border-right:0;border-bottom:1px solid var(--ui-line);} .business-header-controls{width:100%;} .business-demo-heading{gap:12px;} html[data-demo="workspace"] #supportWidget{right:12px;bottom:68px;max-height:calc(100dvh - 88px);padding:14px;} }

html[data-demo="workspace"][data-theme="dark"] #appModeSwitch button.active { color:#10182a; }

/* Compact workspace rhythm: a clear header and one active tool. */
html[data-demo="workspace"] .business-app-main { padding:22px 24px 36px; }
html[data-demo="workspace"] .business-demo-header { padding-bottom:16px; }
html[data-demo="workspace"] .business-demo-organized .pos-tabs { gap:4px; margin:12px 0; padding-bottom:10px; }
html[data-demo="workspace"] .business-demo-organized .pos-tabs button { min-height:40px; padding:8px 12px; }
html[data-demo="workspace"] .business-demo-organized .pos-tabs button[aria-pressed="false"] { background:transparent; color:var(--ui-muted); border-color:transparent; }
html[data-demo="workspace"] .business-sidebar .business-category-nav button[aria-pressed="false"] { background:transparent; color:var(--ui-muted); }
html[data-demo="workspace"] .business-demo-organized .card { padding:20px; }
html[data-demo="workspace"] .business-demo-organized h3 { margin:12px 0 8px; }
html[data-demo="workspace"] .business-demo-organized .pos-metrics { gap:10px; margin:12px 0; }
html[data-demo="workspace"] .business-demo-organized .pos-metrics article { padding:14px 16px; }
@media(max-width:700px) { html[data-demo="workspace"] .business-app-main { padding:16px 12px 28px; } html[data-demo="workspace"] .business-demo-organized .card { padding:14px; } .demo-directory-tabs { gap:14px; } html[data-demo="workspace"] .demo-directory-tabs button { min-height:44px; } }

html[data-demo="workspace"] .customer-consent { display:flex; flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; margin:12px 0; font-weight:400; }
html[data-demo="workspace"] .customer-consent input { width:18px; min-height:18px; height:18px; flex:0 0 18px; margin:0; }

.demo-register { margin:12px 0; padding:16px; background:var(--ui-raised); border:1px solid var(--ui-line); border-radius:9px; }
/* Touch-friendly POS and the dedicated back-office clock. */
.pos-mode-switch{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.pos-mode-switch button[aria-pressed="true"]{outline:2px solid currentColor;outline-offset:2px}.pos-workflow{margin-bottom:20px;padding:16px;border:1px solid var(--border,#d4dce7);border-radius:14px}.restaurant-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}.restaurant-tile{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px!important;border-radius:14px!important;background:var(--surface,#fff)!important;color:var(--text,#17263a)!important;border:1px solid var(--border,#d4dce7)!important;text-align:left;min-height:180px}.restaurant-tile img{width:100%;height:110px;object-fit:contain;border-radius:8px}.restaurant-tile strong{line-height:1.4}.restaurant-dialog{width:min(480px,calc(100vw - 32px));box-sizing:border-box;max-height:90vh;overflow:auto;border:1px solid var(--border,#d4dce7);border-radius:18px;padding:24px;background:var(--surface,#fff);color:var(--text,#17263a)}.restaurant-dialog::backdrop{background:#10203399}.restaurant-dialog label{display:flex;flex-direction:column;gap:8px;margin:14px 0}.restaurant-dialog .restaurant-check{flex-direction:row;align-items:center}.restaurant-check input{width:20px;height:20px}.kiosk-actions{display:flex;gap:12px;flex-wrap:wrap}.kiosk-actions button{min-height:48px}.kiosk-focus{position:fixed;inset:0;z-index:5000;overflow:auto;padding:clamp(20px,5vw,64px);background:var(--surface,#fff);color:var(--text,#17263a)}.kiosk-focus .kiosk-manager{display:none}.kiosk-focus #staffKioskForm{max-width:720px;margin:36px auto}.kiosk-focus .kiosk-actions button{flex:1;font-size:1.2rem;min-height:72px}.kiosk-focus #kioskStatus{font-size:1.2rem}html[data-theme="dark"] .restaurant-tile,html[data-theme="dark"] .restaurant-dialog,html[data-theme="dark"] .kiosk-focus{background:#172333!important;color:#e8edf5!important;border-color:#34435a!important}@media(max-width:400px){.restaurant-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.restaurant-tile{padding:8px!important}.restaurant-tile img{height:90px}.restaurant-dialog{padding:16px}}