/* Spag ShopBook DEMO – yellow bar, picker and notes */
#demoBar{position:relative;z-index:40;display:flex;align-items:center;gap:8px;padding:6px 10px;background:#ffd43b;color:#14213d;font:600 13.5px/1.25 Roboto,"Segoe UI",Arial,sans-serif;border-bottom:1px solid #e0b400}
#demoBar .db-tag{background:#14213d;color:#ffd43b;border-radius:6px;padding:2px 7px;font-weight:800;letter-spacing:.04em;font-size:12px;flex:none}
#demoBar .db-who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
#demoBar .db-btns{display:flex;gap:6px;flex:none}
#demoBar button{border:1.5px solid #14213d;background:#fff8d6;color:#14213d;border-radius:8px;padding:5px 10px;font:700 13px/1 inherit;cursor:pointer}
#demoBar button.armed{background:#c62828;border-color:#c62828;color:#fff}
#demoPick,#demoNote{position:fixed;inset:0;z-index:100;background:rgba(10,15,30,.6);display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
#demoPick[hidden],#demoNote[hidden]{display:none}
.dp-card,.dn-card{position:relative;background:#fff;border-radius:18px;max-width:440px;width:100%;padding:20px 18px;box-shadow:0 12px 40px rgba(0,0,0,.3);font-family:Roboto,"Segoe UI",Arial,sans-serif;color:#1d2433;margin:auto}
.dp-logo{display:block;width:96px;height:96px;margin:0 auto 6px;border-radius:22px}
.dp-card h2{text-align:center;color:#14213d;margin:4px 0 6px;font-size:22px}
.dp-lead{text-align:center;color:#4a5366;margin:0 0 14px;line-height:1.45;font-size:15px}
.dp-ask{font-weight:700;color:#14213d;margin:0 0 8px}
.dp-who{display:block;width:100%;text-align:left;border:2px solid #e2e6ee;background:#f7f8fb;border-radius:14px;padding:12px 14px;margin:0 0 10px;cursor:pointer;font:inherit}
.dp-who b{display:block;color:#14213d;font-size:16.5px}
.dp-who span{display:block;color:#4a5366;font-size:14px;margin-top:2px}
.dp-who:hover,.dp-who.on{border-color:#f77f00;background:#fff4e6}
.dp-foot{text-align:center;color:#6b7385;font-size:13px;margin:8px 0 0;line-height:1.5}
.dp-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:#eef1f6;font-size:22px;cursor:pointer}
.dn-card h3{margin:0 0 8px;color:#14213d}
.dn-card p{margin:0 0 10px;color:#4a5366;line-height:1.45}
.dn-card pre{white-space:pre-wrap;background:#f3f5fa;border-radius:10px;padding:10px 12px;font:14px/1.45 Roboto,Arial,sans-serif;max-height:40vh;overflow:auto;margin:0 0 12px}
.dn-ok{width:100%;border:0;border-radius:12px;background:#f77f00;color:#fff;font:700 16px/1 inherit;padding:13px;cursor:pointer}
@media print{#demoBar,#demoPick,#demoNote{display:none!important}}