.demo-banner { padding: 16px 20px; margin-bottom: 16px; background: #e9f7f3; color: #103a35; border: 1px solid #86c6b5; border-radius: 14px; }
.demo-banner-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.demo-banner p { margin: 8px 0 0; }
.demo-banner button { width: auto; }
.demo-notice:empty { display: none; }
.demo-directory nav { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 16px; }
.demo-directory nav button { width: auto; min-height: 44px; }
.demo-directory { margin-bottom: 16px; }
.demo-directory h1 { margin: 0 0 10px; }
.demo-directory nav button { box-shadow: none; background: #edf4ff; color: #173e6c; border: 1px solid #c8d9f2; }
.demo-directory nav button:hover { background: #dceaff; }
.demo-directory > .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.demo-directory > .row button { width: auto; }
.demo-menu-return { position: fixed; left: 14px; bottom: 14px; z-index: 35; padding: 10px 14px; background: #173e6c; color: white; border-radius: 10px; text-decoration: none; box-shadow: 0 3px 14px #0002; }
html[data-demo] #workspaceNavigation { display: none; }
html[data-demo] #appScreen .top { flex-wrap: wrap; gap: 16px; }
html[data-demo] #appScreen .top-right { flex-wrap: wrap; }
html[data-demo] #appScreen .top-right > .theme-switch,
html[data-demo] #appScreen #langLabelApp,
html[data-demo] #appScreen #appLangSelect,
html[data-demo] #appScreen #appModeLabel { display: none; }
html[data-demo] #supportLauncher { width: auto; left: auto; right: 14px; bottom: 14px; max-width: calc(100vw - 24px); }
.demo-dialog { background: var(--card-bg, white); color: var(--text, #172b45); border: 1px solid #86c6b5; border-radius: 16px; padding: 24px; max-width: min(520px, calc(100vw - 32px)); box-sizing: border-box; }
.demo-settings-dialog { width: min(1100px, calc(100vw - 16px)); height: 92dvh; max-width: none; padding: 8px; border: 1px solid #86c6b5; border-radius: 14px; background: var(--card-bg, white); }
.demo-settings-dialog[open] { display: flex; flex-direction: column; gap: 8px; }
.demo-settings-dialog iframe { width: 100%; flex: 1; min-height: 0; border: 0; border-radius: 8px; }
dialog::backdrop { background: rgb(5 20 34 / 65%); }
html[data-demo] { scroll-behavior: auto; }
html[data-demo] #supportWidget .support-note::after { content: " Demo: replies are simulated and no messages are sent."; }
html[data-demo] h2, html[data-demo] #businessWorkspace { scroll-margin-top: 16px; }
html[data-demo="settings"] .page { max-width: 100%; }
@media (max-width: 640px) {
  .demo-banner { padding: 12px; }
  .demo-directory nav { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, minmax(44px, auto)); grid-auto-columns: 165px; overflow-x: auto; padding-bottom: 8px; }
}
.pos-demo { margin-block: 16px; }
.pos-eyebrow { color: #187a5b; font-weight: 700; letter-spacing: .08em; font-size: .8rem; }
.pos-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; margin-block: 20px; }
.pos-metrics article { padding: 16px; border: 1px solid var(--border, #d7e3f0); border-radius: 12px; background: var(--bg, #f2f7fc); }
.pos-metrics strong, .pos-metrics span { display: block; }
.pos-metrics strong { font-size: 1.4rem; margin-top: 8px; }
.pos-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pos-tabs button { width: auto; min-height: 44px; box-shadow: none; background: #eaf2ff; color: #173e6c; }
.pos-tabs button[aria-pressed="true"] { background: #173e6c; color: white; }
.pos-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; align-items: end; margin-block: 16px; }
.pos-fields label, .pos-demo form > label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pos-demo input, .pos-demo select, .pos-demo textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.pos-demo button { min-height: 44px; }
.pos-table-wrap { overflow-x: auto; margin-block: 16px; }
.pos-table-wrap table { min-width: 600px; width: 100%; }
.pos-table-wrap td { vertical-align: top; overflow-wrap: anywhere; max-width: 280px; }
.pos-table-wrap button { width: auto; margin: 2px; }
.pos-thumb { width: 48px; height: 48px; object-fit: cover; float: left; margin-right: 8px; border-radius: 6px; }
.pos-low-stock { color: #a44408; font-weight: 700; }
.pos-total { font-weight: 700; font-size: 1.1rem; }
.pos-import { padding: 16px; margin-block: 20px; border: 1px solid #b7cfe9; border-radius: 10px; }
.pos-import summary { cursor: pointer; font-weight: 700; }
.pos-receipt { width: min(760px, calc(100vw - 24px)); max-width: none; }
.pos-demo [hidden] { display: none !important; }
#scheduleForm label:has(input[type="checkbox"]) { display: flex; align-items: center; justify-content: flex-start; gap: .6rem; padding: .5rem 0; }
#scheduleForm input[type="checkbox"] { width: auto; margin: 0; flex: 0 0 auto; }
#scheduleForm fieldset { margin: .75rem 0; border: 1px solid #cfe0ff; border-radius: 12px; }
.branch-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; padding:1rem; margin:1rem 0 .4rem; border:1px solid #cfe0ff; border-radius:12px; background:#f2f7ff; }
.branch-toolbar label { min-width:200px; flex:1; max-width:400px; }
.branch-toolbar p { flex:2; margin:0; font-weight:600; }
.branch-scope { color:#51627b; font-size:.9rem; }
.hub-quick-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
#demoBusinessHub .pos-tabs { border-bottom:1px solid #dbe7fa; padding-bottom:1rem; }
/* Business demo: one workspace and one task at a time. */
.business-demo-organized > .business-hero,
.business-demo-organized > #businessUpgradeCard,
.business-demo-organized #demoBusinessHub > .pos-eyebrow,
.business-demo-organized #demoBusinessHub > h2,
.business-demo-organized #demoBusinessHub > h2 + p,
.business-demo-organized .hub-quick-actions,
.business-demo-organized #demoPos > .section-head { display:none !important; }
.business-demo-organized [hidden] { display:none !important; }
.business-demo-header { padding:24px; background:#fff; border:1px solid #d8e5f4; border-radius:18px; box-shadow:0 8px 30px #15385b08; }
.business-demo-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.business-demo-heading h2 { margin:4px 0 8px; font-size:1.9rem; letter-spacing:-.03em; }
.business-demo-heading p { margin:0 0 10px; color:#53667b; }
.business-demo-badge { font-size:.8rem; border-radius:30px; padding:8px 12px; background:#edf8f3; color:#236a50; }
.business-category-nav { display:flex; gap:4px; padding:6px; border-radius:12px; background:#f0f4fa; margin-top:20px; flex-wrap:wrap; }
.business-category-nav button { flex:1; min-width:90px; min-height:46px; padding:10px 16px; border-radius:8px; background:transparent; color:#425973; box-shadow:none; font-weight:650; }
.business-category-nav button[aria-pressed="true"] { background:#173e6c; color:white; box-shadow:0 2px 6px #173e6c22; }
.business-breadcrumb { font-size:.85rem; color:#5b6d81; margin:16px 2px 0; }
.business-demo-organized > .card { margin-top:16px; padding:24px; }
.business-demo-organized .pos-tabs { gap:6px; padding:0 0 16px; margin:16px 0; border-bottom:1px solid #e1e9f3; }
.business-demo-organized .pos-tabs button { background:transparent; border-radius:7px; color:#4c6076; min-height:40px; padding:8px 14px; }
.business-demo-organized .pos-tabs button[aria-pressed="true"] { background:#eaf2ff; color:#173e6c; font-weight:750; }
.business-demo-organized .branch-toolbar { margin-top:0; background:#f8faff; padding:14px; }
.business-demo-organized .branch-scope { font-size:.8rem; margin:8px 0; }
.demo-tool-directory { padding:12px 0; border-top:1px solid #e2eaf5; }
.demo-tool-directory summary { cursor:pointer; font-weight:650; color:#173e6c; padding:8px 0; }
.demo-tool-directory nav { padding:12px 0; }
@media(max-width:640px) {
 .business-demo-header,.business-demo-organized > .card { padding:16px; }
 .business-demo-heading h2 { font-size:1.5rem; }
 .business-category-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .business-category-nav button { min-width:0; padding:10px 6px; }
 .business-demo-organized .pos-tabs { flex-wrap:nowrap; overflow-x:auto; }
 .business-demo-organized .pos-tabs button { flex:0 0 auto; }
 .branch-toolbar label { min-width:0; max-width:none; flex-basis:100%; }
 .branch-toolbar p { flex-basis:100%; font-size:.85rem; }
}
.business-demo-organized #demoBusinessHub:not([data-business-category="team"]) > .branch-toolbar,
.business-demo-organized #demoBusinessHub:not([data-business-category="team"]) > .branch-scope { display:none; }
.business-demo-organized #demoBusinessHub > .pos-tabs:first-child { margin-top:0; }
.business-demo-organized { padding-bottom:70px; }