/* Client-aligned panel previews. References: ui_assets/tokens.css and settings HTML. */
.demo-panel-note { margin: 0 0 12px; color: #77717c; font-size: 11px; line-height: 1.6; }
.demo-switch { margin-left:auto; flex:none; width:26px; height:15px; border-radius:20px; background:#d9d5de; position:relative; }
.demo-switch::after { content:""; position:absolute; width:11px; height:11px; left:2px; top:2px; border-radius:50%; background:white; transition:transform .2s; }
.demo-switch.on { background:#e36f9d; }
.demo-switch.on::after { transform:translateX(11px); }
.demo-segment .radio { padding:4px; border-radius:4px; }
.demo-segment .radio.on { background:#fbeaf1; color:#8e3e5d; }
.demo-hover-label { font-size:10px; }
.app-body.demo-no-indent p { text-indent:0; }
.featdemo:is([data-feature="display"],[data-feature="basic"]) .deskstage { min-height:640px; }
.featdemo:is([data-feature="display"],[data-feature="basic"]) .deskstage > .prefs-window {
  top:12%; right:3%; width:60%; max-height:none; font-size:11px; background:#faf8fb;
  border:1px solid #e8e0e7; border-radius:16px; box-shadow:0 18px 45px #130b2440;
}
.featdemo:is([data-feature="display"],[data-feature="basic"]) .deskstage > .prefs-window .prefs-in { padding:16px; }
.featdemo:is([data-feature="display"],[data-feature="basic"]) .prow { min-height:32px; gap:7px; border-bottom:1px solid #eee8ef; }
.featdemo:is([data-feature="display"],[data-feature="basic"]) .prow > label { width:32%; color:#4b4350; }
.featdemo:is([data-feature="display"],[data-feature="basic"]) .prow small { font-size:9px; color:#807784; }
.featdemo:is([data-feature="display"],[data-feature="basic"]) .val { min-width:30px; background:white; border:1px solid #e5dce5; padding:3px; border-radius:5px; }
.featdemo:is([data-feature="display"],[data-feature="basic"]) .prefs-done { padding:7px 20px; background:#e36f9d; border-radius:7px; color:white; }
.demo-hover-away .appwin { animation:demo-hover-cycle 3s ease-in-out infinite; }
.demo-mouse-pointer {
  position:absolute; z-index:12; left:28%; top:44%; width:30px; height:38px;
  opacity:0; pointer-events:none; filter:drop-shadow(0 3px 5px #0008);
}
.demo-mouse-pointer svg { display:block; width:100%; height:100%; overflow:visible; }
.demo-mouse-pointer path { fill:#E36F9D; stroke:white; stroke-width:1.7; stroke-linejoin:round; }
.demo-hover-away .demo-mouse-pointer { opacity:1; animation:demo-pointer-move 3s ease-in-out infinite; }
@keyframes demo-pointer-move {
  0%,15%,85%,100% { left:28%; top:44%; }
  35%,65% { left:67%; top:34%; }
}
.prefs-done.demo-applied { outline:3px solid #efb5ca; outline-offset:3px; }
@keyframes demo-hover-cycle { 0%,15%,85%,100% { opacity:1; } 35%,65% { opacity:0; } }
.demo-caption { font-size:12px!important; color:var(--text-faint)!important; }
.shortcut-preview { min-width:0; }
.shortcut-sheet { padding:28px; background:#faf8fb; color:#403746; border:1px solid #e7dfe8; border-radius:20px; box-shadow:0 24px 60px #0004; }
.shortcut-sheet h3 { margin:0 0 8px; font-size:23px; }
.shortcut-sheet > p { font-size:12px; line-height:1.7; color:#7b7181; }
.shortcut-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 8px; border-bottom:1px solid #e8e2eb; font-size:13px; }
.shortcut-row kbd { font-family:inherit; font-size:12px; text-align:right; color:#82516c; }
.featdemo:is([data-feature="display"],[data-feature="basic"]) .prefs-bar { background:#f2edf3; color:#403746; border-bottom:1px solid #e8e0e7; }
.featdemo:is([data-feature="display"],[data-feature="basic"]) .prefs-bar b { color:#403746; }
.shortcut-row.recording { background:#fbeaf1; outline:1px solid #efb5ca; border-radius:8px; }
.shortcut-sheet .shortcut-notice { min-height:70px; margin:16px 0; padding:12px; background:#fbeaf1; border-radius:8px; color:#8e3e5d; box-sizing:border-box; }
.shortcut-actions { display:flex; justify-content:space-between; align-items:center; font-size:13px; }
.shortcut-actions span { padding:9px 18px; border-radius:8px; }
.shortcut-actions [data-demo-save] { background:#e36f9d; color:white; }
.shortcut-actions .active { outline:3px solid #efb5ca; outline-offset:3px; }
[data-shortcut-scenes] [aria-pressed="true"] { background:#f0b3ba22; color:var(--text); border-color:var(--pink); }
@media(max-width:680px) {
  .featdemo[data-feature="display"] .deskstage { min-height:850px; }
  .featdemo[data-feature="basic"] .deskstage { min-height:750px; }
  .featdemo:is([data-feature="display"],[data-feature="basic"]) .appwin { inset:50px 6% auto; height:150px; }
  .featdemo:is([data-feature="display"],[data-feature="basic"]) .deskstage > .prefs-window { top:220px; width:92%; right:4%; }
  .shortcut-sheet { padding:20px 16px; }
  .shortcut-row { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .demo-hover-away .appwin { animation:none; opacity:.2; }
  .demo-hover-away .demo-mouse-pointer { left:67%; top:34%; opacity:1; animation:none; }
}

/* Preserve the client's 392px grid and scale the entire panel together. */
.featdemo:is([data-feature="display"],[data-feature="basic"]) .deskstage { min-height:720px; }
.featdemo:is([data-feature="display"],[data-feature="basic"]) .deskstage > .prefs-window {
  top:54px; right:20px; width:392px; max-height:none; max-width:none;
  transform:scale(var(--settings-scale,1)); transform-origin:top right;
  font:14px/1.5 -apple-system,"PingFang SC","Microsoft YaHei UI",sans-serif;
  color:#2F2A33; background:#F7F4F6; border:0; border-radius:14px;
}
/* 显示设置和基本设置都让正文、面板各占一栏。 */
.featdemo:is([data-feature="display"],[data-feature="basic"]) .appwin {
  top:54px;
  right:calc(var(--settings-panel-width,353px) + 44px);
  bottom:28px;
  left:20px;
}
.featdemo:is([data-feature="display"],[data-feature="basic"]) .deskstage > .prefs-window .prefs-in { padding:16px 24px 24px; }
.prefs-window .demo-panel-note { margin:0 0 16px; color:#8B8190; font-size:13px; line-height:1.5; }
.demo-settings-card { background:white; border:1px solid #E5DCE3; border-radius:16px; padding:8px 16px; box-shadow:0 1px 3px #2f2a330d,0 8px 24px #2f2a330d; }
.demo-settings-card + .demo-settings-card { margin-top:12px; }
.featdemo .prefs-window .demo-settings-card .prow { min-height:0; gap:12px; padding:8px 0; margin:0; border-radius:0; border-bottom:1px solid #F1EBF0; }
.prefs-window .demo-settings-card .prow:last-child { border-bottom:0; }
.featdemo .prefs-window .demo-settings-card .prow > label { width:76px; flex:none; font-size:13px; color:#8B8190; }
.prefs-window .demo-settings-card .prow[data-on] { background:transparent; }
.prefs-window .demo-settings-card .track { height:6px; background:#FBEAF1; }
.prefs-window .demo-settings-card .fill { background:transparent; }
.prefs-window .demo-settings-card .knob { width:18px; height:18px; background:white; border:2px solid #E36F9D; box-shadow:0 1px 4px #2f2a3338; }
.featdemo .prefs-window .demo-settings-card .val { width:52px; min-width:52px; padding:3px 6px; border:1px solid transparent; background:transparent; font-size:13px; color:#2F2A33; }
.prefs-window .demo-settings-card .sw { width:30px; height:30px; flex:none; border:3px solid white; outline:1px solid #D1D1D6; border-radius:9px; }
.prefs-window .demo-settings-card .pick { color:#8B8190; font-size:13px; }
.featdemo .prefs-window .demo-toggle-card .prow > label { flex:1; width:auto; color:#2F2A33; }
.prefs-window .demo-toggle-card .prow small { font-size:12px; color:#8B8190; }
.demo-switch { width:38px; height:22px; border-radius:11px; background:#D6D2DC; }
.demo-switch::after { width:16px; height:16px; left:3px; top:3px; box-shadow:0 1px 3px #0003; }
.demo-switch.on { background:linear-gradient(180deg,#3ECF7E,#22B563); }
.demo-switch.on::after { transform:translateX(16px); }
.prefs-window .demo-segment { display:inline-flex; gap:2px; background:#FBEAF1; padding:3px; border-radius:9px; }
.prefs-window .demo-segment .radio { padding:6px 9px; margin:0; border-radius:7px; font-size:13px; color:#8E3E5D; white-space:nowrap; }
.prefs-window .demo-segment .radio.on { color:#2F2A33; background:white; font-weight:600; box-shadow:0 1px 3px #2f2a331f; }
.demo-checkbox { display:inline-flex; align-items:center; gap:6px; font-size:11px; white-space:nowrap; }
.demo-checkbox::before { content:""; width:14px; height:14px; border:1px solid #D1D1D6; border-radius:4px; background:white; }
.demo-checkbox.on::before { content:"✓"; text-align:center; line-height:14px; color:white; background:#E36F9D; border-color:#E36F9D; }
.demo-checkbox.locked { opacity:.55; }
.featdemo .prefs-window .demo-settings-card .prow[data-row="hover"] { gap:6px; min-height:54px; }
.demo-settings-actions { display:flex; justify-content:space-between; align-items:center; padding:12px 24px; gap:12px; border-top:1px solid #E5DCE3; }
.demo-settings-actions small { color:#8B8190; font-size:12px; }
.featdemo .prefs-window .demo-settings-actions .prefs-done { display:inline-block; float:none; width:auto; min-width:110px; margin:0; padding:9px 16px; border:1.5px solid transparent; border-radius:8px; font-size:13px; font-weight:600; line-height:1.5; white-space:nowrap; text-align:center; background:linear-gradient(180deg,#E36F9D,#D85D8E); color:white; box-shadow:0 2px 8px #e36f9d57; }
.featdemo .prefs-window .prefs-bar,.shortcut-sheet .prefs-bar { height:38px; padding:0 16px; gap:8px; background:linear-gradient(180deg,#FDF7FA,#F7F4F6); border-bottom:1px solid #E5DCE3; }
.featdemo .prefs-window .prefs-bar b,.shortcut-sheet .prefs-bar b { position:static; margin-left:8px; font-size:13px; font-weight:600; color:#8B8190; }
.featdemo .prefs-window .prefs-bar i,.shortcut-sheet .prefs-bar i { width:12px; height:12px; border:.5px solid #0002; }
.shortcut-sheet { max-width:480px; margin:0 auto; padding:0; overflow:hidden; background:#F7F4F6; color:#2F2A33; border-radius:14px; }
.shortcut-sheet > p { margin:16px 24px; font-size:13px; line-height:1.5; color:#8B8190; }
.shortcut-row { margin:0 24px; padding:12px 0; }
.shortcut-sheet .shortcut-notice { min-height:60px; margin:16px 24px; padding:9px 12px; border:1px solid #EFB5CA; border-radius:8px; background:white; color:#2F2A33; font-size:13px; }
.shortcut-actions { padding:12px 24px; border-top:1px solid #E5DCE3; }
.shortcut-actions span { white-space:nowrap; }
.shortcut-actions [data-demo-save] { min-width:96px; text-align:center; }
@media(max-width:680px) {
  .featdemo:is([data-feature="display"],[data-feature="basic"]) .deskstage { min-height:760px; }
  .featdemo:is([data-feature="display"],[data-feature="basic"]) .deskstage > .prefs-window { top:200px; right:12px; }
  .featdemo:is([data-feature="display"],[data-feature="basic"]) .appwin { inset:50px 6% auto; height:122px; }
}