/* 演示外壳：顶栏 + 双屏舞台 + 手机框 */
#app { height: 100%; }
.demo-shell { height: 100%; display: flex; flex-direction: column; }
.demo-bar { flex-shrink: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 8px 16px; background: var(--c-sunken); border-bottom: 1px solid var(--c-line); }
.demo-brand { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); }
.demo-brand .xs { font-family: var(--f-sans); }
.demo-stage { flex: 1; min-height: 0; display: flex; gap: 0; }
.stage-admin { flex: 1; min-width: 0; position: relative; }
.stage-h5 { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 16px 20px; background: var(--c-sunken); border-left: 1px solid var(--c-line); }
.mode-h5 .stage-h5 { flex: 1; border-left: 0; }
.phone { width: 390px; height: min(844px, 100%); border-radius: 44px; background: #10140f; padding: 12px; box-shadow: var(--shadow-2); display: flex; flex-direction: column; }
.phone-status { display: flex; justify-content: space-between; padding: 4px 22px 6px; color: #e8ede9; font-size: 12px; font-weight: 600; }
.phone-screen { flex: 1; min-height: 0; border-radius: 32px; overflow: hidden; position: relative; background: var(--c-bg); }
.scenarios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: sc; }
.scenarios li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: var(--r-md); counter-increment: sc; }
.scenarios li::before { content: counter(sc); font-family: var(--f-mono); font-weight: 700; color: var(--c-accent); font-size: 18px; width: 20px; flex-shrink: 0; }

@media (max-width: 900px) {
  .demo-bar { padding: 8px 16px; gap: 8px; }
  .demo-brand .xs { display: none; }
  .stage-h5 { padding: 0; background: var(--c-bg); }
  .phone { width: 100%; height: 100%; border-radius: 0; padding: 0; box-shadow: none; background: var(--c-bg); }
  .phone-status { display: none; }
  .phone-screen { border-radius: 0; }
}