.module-demo { border-top:1px solid var(--line); margin-top:32px; padding-top:24px; }
.demo-section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.demo-section-heading h3 { margin:0; font-size:18px; }
.demo-sample-label { font-size:12px; color:var(--muted); }
.demo-player { border:1px solid #cfdde0; border-radius:6px; background:white; margin-top:20px; overflow:hidden; }
.tour-stage { position:relative; aspect-ratio:16/10; min-height:700px; overflow:hidden; background:#fafcfc; }
.tour-topbar { height:60px; padding:12px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:white; border-bottom:1px solid var(--line); font-size:13px; }
.tour-topbar > span:first-child { display:flex; align-items:center; gap:9px; font-weight:600; }
.tour-topbar > span:last-child { font-size:12px; }
.tour-account { display:flex; align-items:center; gap:12px; padding:8px 12px; border:1px solid var(--line); border-radius:4px; }
.tour-workspace { padding:20px 32px 0; }
.tour-context { display:flex; align-items:center; gap:12px; border-left:3px solid var(--teal); background:#edf8f7; padding:12px 18px; }
.tour-context div { display:grid; gap:4px; }
.tour-context strong { font-size:18px; }
.tour-context .subtle, .tour-company .subtle { font-size:12px; }
.tour-company { padding:18px 0; }
.tour-company h4 { font-size:22px; margin:8px 0; }
.tour-stage.is-kiosk .tour-workspace { display:none; }
.tour-stage.is-kiosk .tour-nav > span:not(#tour-nav-scan) { display:none; }
.tour-nav { display:flex; align-items:stretch; gap:4px; padding:0 24px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.tour-nav > span { display:flex; align-items:center; padding:14px 8px; font-size:12px; color:var(--muted); border-bottom:2px solid transparent; }
.tour-nav > .is-active { color:#087f83; border-bottom-color:#087f83; }
.tour-body { padding:24px 32px; max-width:920px; margin:auto; }
.tour-body h4 { font-size:18px; margin:0 0 18px; }
.tour-scan { max-width:600px; margin:auto; }
.tour-clock { font-size:42px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:28px; }
.tour-modes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; font-size:12px; margin-bottom:22px; color:var(--muted); }
.tour-modes > * { border:1px solid var(--line); border-radius:4px; padding:12px; background:white; }
.tour-modes strong { color:#087f83; border-color:#087f83; background:#edf8f7; }
.tour-scan-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; }
.tour-scan-row .tour-button { margin:0; }
.tour-field-label { display:block; font-size:12px; color:#50616b; margin:0 0 6px; }
.tour-input { height:42px; min-width:0; padding:11px 12px; background:white; border:1px solid #cbd9de; border-radius:4px; font-size:13px; font-variant-numeric:tabular-nums; overflow:hidden; white-space:nowrap; }
.tour-input.is-typing { border-color:#087f83; box-shadow:0 0 0 2px #119da31f; }
.tour-input.is-typing::after { content:""; display:inline-block; height:14px; border-left:1px solid #132532; margin-left:2px; vertical-align:middle; }
.tour-button { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; min-height:40px; background:#087f83; border:1px solid #087f83; color:white; border-radius:4px; font-size:12px; font-weight:600; margin:14px 0 0; transition:box-shadow .15s,transform .15s; }
.tour-secondary { background:white; color:#132532; border-color:#cbd9de; }
.tour-button.is-clicked { transform:scale(.96); box-shadow:0 0 0 5px #119da32e; }
.tour-nav .is-clicked { background:#def2ef; }
.tour-identity { display:flex; align-items:center; gap:12px; padding:14px 0 0; height:80px; }
.tour-avatar { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border-radius:4px; background:#e2f1f0; color:#087f83; font-size:13px; }
.tour-identity strong { font-size:14px; }
.tour-identity div > span { display:block; font-size:11px; color:var(--muted); margin-top:5px; }
.tour-notice { font-size:12px; line-height:1.5; color:#24683f; background:#e7f5ed; border-left:3px solid #37a36b; padding:10px 12px; margin-top:14px; }
.tour-date-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.tour-actions { display:flex; gap:10px; flex-wrap:wrap; }
.tour-report-filter { display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:14px; align-items:end; }
.tour-report-filter .tour-actions { grid-column:1/-1; }
.tour-report-filter .tour-button { margin:0; }
.tour-limit { display:flex; align-items:end; gap:14px; margin-bottom:28px; }
.tour-limit .tour-button { margin:0; }
.tour-shift-row { display:grid; grid-template-columns:1.1fr repeat(4,minmax(0,1fr)) auto; align-items:end; gap:12px; border-bottom:1px solid var(--line); padding:18px 0; }
.tour-shift-row > strong { font-size:12px; align-self:center; }
.tour-shift-row .tour-button { margin:0; }
.tour-wide-table table { font-size:11px; }
.tour-wide-table th, .tour-wide-table td { padding:10px 6px; }
.tour-wide-table .tour-button { margin:0; padding:8px; font-size:11px; min-height:34px; }
.tour-wide-table .tour-state { padding:5px; font-size:11px; }
.tour-table { margin-top:18px; }
.tour-table table { width:100%; table-layout:fixed; font-size:12px; margin:0; }
.tour-table th, .tour-table td { padding:10px 12px; white-space:normal; overflow-wrap:anywhere; }
.tour-table th { font-size:11px; }
.tour-table small { color:var(--muted); font-size:10px; }
.tour-caption { color:var(--muted); font-size:12px; margin:12px 0; }
.tour-person-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.tour-select { position:relative; }
.tour-option { position:absolute; z-index:2; top:calc(100% + 4px); left:0; width:100%; background:white; padding:12px; border:1px solid #087f83; border-radius:4px; font-size:12px; box-shadow:0 4px 12px #13253214; }
.tour-extra-person { display:grid; gap:6px; margin-bottom:24px; }
.tour-extra-person strong { font-size:14px; }
.tour-extra-person span { font-size:12px; color:var(--muted); }
.tour-state { display:inline-block; border-radius:3px; background:#fff1cb; color:#815d19; padding:6px 10px; font-size:12px; }
.tour-state.is-approved { background:#e7f5ed; color:#24683f; }
.tour-cursor { position:absolute; top:0; left:0; z-index:4; pointer-events:none; width:22px; height:28px; transition:transform .55s cubic-bezier(.2,.7,.2,1); filter:drop-shadow(0 2px 2px #13253240); }
.tour-cursor::before, .tour-cursor::after { content:""; position:absolute; inset:0; clip-path:polygon(0 0,100% 63%,57% 66%,78% 100%,58% 100%,38% 72%,0 92%); background:white; }
.tour-cursor::after { inset:2px 3px 3px 2px; background:#132532; }
.tour-cursor > span { position:absolute; top:-10px; left:-10px; width:26px; height:26px; border:2px solid #119da3; border-radius:50%; opacity:0; }
.tour-cursor.is-clicking > span { animation:tour-click .24s ease-out; }
.tour-stage.is-paused .tour-cursor { transition:none; }
.tour-stage.is-paused .tour-cursor > span { animation:none; }
@keyframes tour-click { from { opacity:1; transform:scale(.4); } to { opacity:0; transform:scale(1.5); } }
@media(max-width:640px) {
  .tour-stage { aspect-ratio:auto; height:960px; min-height:0; }
  .tour-topbar { padding:12px; }
  .tour-topbar > span:last-child { display:none; }
  .tour-nav { padding:0 8px; gap:0; flex-wrap:wrap; min-height:78px; }
  .tour-nav > span { padding:10px 8px; font-size:11px; }
  .tour-body { padding:20px 16px; }
  .tour-workspace { padding:16px 16px 0; }
  .tour-body h4 { font-size:16px; }
  .tour-person-fields { grid-template-columns:minmax(0,1fr); gap:12px; }
  .tour-report-filter { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tour-report-filter > div:nth-child(3) { grid-column:1/-1; }
  .tour-shift-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tour-shift-row > strong { grid-column:1/-1; }
  .tour-wide-table table { font-size:10px; }
  .tour-wide-table th, .tour-wide-table td { padding:8px 2px; font-size:10px; }
  .tour-wide-table .tour-state, .tour-wide-table .tour-button { font-size:10px; padding:4px 2px; }
  #tour-view-reports .tour-wide-table th:nth-child(1),
  #tour-view-reports .tour-wide-table td:nth-child(1),
  #tour-view-reports .tour-wide-table th:nth-child(3),
  #tour-view-reports .tour-wide-table td:nth-child(3),
  #tour-view-reports .tour-wide-table th:nth-child(7),
  #tour-view-reports .tour-wide-table td:nth-child(7),
  #tour-view-extras .tour-wide-table th:nth-child(3),
  #tour-view-extras .tour-wide-table td:nth-child(3) { display:none; }
  .tour-table th, .tour-table td { padding:10px 6px; }
}
@media(prefers-reduced-motion:reduce) { .tour-cursor, .tour-button { transition:none; } .tour-cursor > span { animation:none !important; } }