.demo-page{background:#0a111b}
.demo-page .product-hero{padding-bottom:24px}
.real-demo-wrap{margin-top:26px;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 90px rgba(0,0,0,.35);background:#fff}
.real-demo-note{margin:18px 0 0;padding:12px 14px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#9eb1c2;font-size:.86rem}
.appdemo{min-height:620px;display:grid;grid-template-columns:230px minmax(0,1fr);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;text-align:left}
.appdemo *{box-sizing:border-box}.appdemo button{font:inherit}.appdemo-side{padding:17px 13px;display:flex;flex-direction:column}.appdemo-brand{display:flex;align-items:center;gap:10px;padding:4px 7px 17px;font-weight:900}.appdemo-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:950}.appdemo-brand small{display:block;font-size:11px;margin-top:2px;font-weight:600}.appdemo-nav{display:grid;gap:4px}.appdemo-nav button{border:0;background:transparent;text-align:left;padding:10px 11px;border-radius:10px;cursor:pointer;font-weight:750}.appdemo-nav button.active{font-weight:850}.appdemo-server{margin-top:auto;padding:13px 8px 3px;border-top:1px solid currentColor;opacity:.72;font-size:11px}.appdemo-main{min-width:0}.appdemo-top{height:68px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid}.appdemo-top h2{font-size:19px;margin:0}.appdemo-top p{font-size:11px;margin:3px 0 0}.appdemo-online{font-size:11px;font-weight:800;padding:7px 10px;border-radius:999px;border:1px solid}.appdemo-screen{display:none;padding:20px}.appdemo-screen.active{display:block}.appdemo-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:14px}.appdemo-metric{border:1px solid;border-radius:15px;padding:14px}.appdemo-metric small{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.appdemo-metric strong{display:block;font-size:25px;margin-top:5px}.appdemo-grid{display:grid;grid-template-columns:1.6fr .8fr;gap:13px}.appdemo-panel{border:1px solid;border-radius:16px;overflow:hidden;background:#fff}.appdemo-panel-head{padding:14px 15px;border-bottom:1px solid;display:flex;align-items:center;justify-content:space-between;gap:10px}.appdemo-panel-head h3{font-size:15px;margin:0}.appdemo-panel-head small{font-size:10px}.appdemo-row{display:grid;grid-template-columns:80px 1fr 1fr auto;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid;font-size:12px}.appdemo-row:last-child{border-bottom:0}.appdemo-row b{font-size:12px}.appdemo-row small{display:block;margin-top:2px}.appdemo-badge{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:850}.appdemo-cardlist{display:grid;gap:9px;padding:13px}.appdemo-card{border:1px solid;border-radius:13px;padding:12px}.appdemo-card h4{margin:0 0 4px;font-size:13px}.appdemo-card p{margin:0;font-size:11px;line-height:1.5}.appdemo-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.appdemo-btn{border:1px solid;border-radius:9px;padding:7px 9px;background:#fff;font-size:10px;font-weight:800}.appdemo-btn.primary{color:#fff}.appdemo-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}.appdemo-field{border:1px solid;border-radius:11px;padding:10px}.appdemo-field small{display:block;font-size:9px;text-transform:uppercase;font-weight:850;margin-bottom:5px}.appdemo-field b{font-size:12px}.appdemo-agenda{display:grid;grid-template-columns:58px repeat(2,minmax(150px,1fr));min-width:440px}.appdemo-agenda>div{border-right:1px solid;border-bottom:1px solid;min-height:52px;padding:7px;font-size:10px;position:relative}.appdemo-agenda .head{font-weight:850;min-height:40px}.booking-chip{border-radius:8px;padding:7px;font-size:10px;font-weight:750}.kds-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.kds-col{border:1px solid;border-radius:14px;padding:10px}.kds-col h4{margin:0 0 8px;font-size:12px}.ticket{background:#fff;border:1px solid;border-radius:11px;padding:10px;margin-bottom:8px;font-size:11px}.ticket b{display:block;margin-bottom:5px}.mapbox{height:230px;border-radius:14px;border:1px solid;position:relative;overflow:hidden;background:linear-gradient(135deg,#eef4f8,#dce8f0)}.mapbox:before,.mapbox:after{content:"";position:absolute;background:#cbd7df}.mapbox:before{width:150%;height:8px;left:-20%;top:48%;transform:rotate(-17deg)}.mapbox:after{height:150%;width:8px;top:-20%;left:56%;transform:rotate(25deg)}.pin{position:absolute;width:16px;height:16px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 2px 5px #0002}.pin:after{content:"";position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;left:5px;top:5px}.pin.p1{left:22%;top:35%}.pin.p2{left:65%;top:22%}.pin.p3{left:70%;top:67%}
/* MultiBooking */
.multi-demo{background:#f4f7fb;color:#172033}.multi-demo .appdemo-side{background:#101a2d;color:#c9d2e3}.multi-demo .appdemo-mark{background:linear-gradient(135deg,#2f62f2,#7457ff)}.multi-demo .appdemo-brand small{color:#9ba7bd}.multi-demo .appdemo-nav button{color:#c9d2e3}.multi-demo .appdemo-nav button.active{background:#1d2a40;color:#fff}.multi-demo .appdemo-server{border-color:#28364f}.multi-demo .appdemo-top{background:#fff;border-color:#e5eaf2}.multi-demo .appdemo-top p{color:#6e7890}.multi-demo .appdemo-online{border-color:#e5eaf2;color:#13a36f;background:#fff}.multi-demo .appdemo-metric,.multi-demo .appdemo-panel,.multi-demo .appdemo-card,.multi-demo .appdemo-field,.multi-demo .appdemo-agenda>div{border-color:#e5eaf2}.multi-demo .appdemo-metric{background:#fff}.multi-demo .appdemo-metric small,.multi-demo .appdemo-panel-head small,.multi-demo .appdemo-row small,.multi-demo .appdemo-card p,.multi-demo .appdemo-field small{color:#6e7890}.multi-demo .appdemo-panel-head,.multi-demo .appdemo-row{border-color:#e5eaf2}.multi-demo .appdemo-badge{background:#e8f7f1;color:#19795b}.multi-demo .appdemo-btn{border-color:#e5eaf2;color:#172033}.multi-demo .appdemo-btn.primary{background:#2f62f2;border-color:#2f62f2}.multi-demo .booking-chip{background:#e9f3ff;color:#245d98;border:1px solid #d3e8ff}
/* AgroFlow */
.agro-demo{background:#f4f7f3;color:#17211a}.agro-demo .appdemo-side{background:#15251b;color:#c9dbce}.agro-demo .appdemo-mark{background:linear-gradient(135deg,#245e3d,#72a989)}.agro-demo .appdemo-brand small{color:#a9c1b0}.agro-demo .appdemo-nav button{color:#c9dbce}.agro-demo .appdemo-nav button.active{background:#2a4a36;color:#fff}.agro-demo .appdemo-server{border-color:#294035}.agro-demo .appdemo-top{background:#fff;border-color:#dfe7df}.agro-demo .appdemo-top p{color:#6b776e}.agro-demo .appdemo-online{border-color:#dfe7df;color:#245e3d;background:#fff}.agro-demo .appdemo-metric,.agro-demo .appdemo-panel,.agro-demo .appdemo-card,.agro-demo .appdemo-field{border-color:#dfe7df}.agro-demo .appdemo-metric{background:#fff}.agro-demo .appdemo-metric small,.agro-demo .appdemo-panel-head small,.agro-demo .appdemo-row small,.agro-demo .appdemo-card p,.agro-demo .appdemo-field small{color:#6b776e}.agro-demo .appdemo-panel-head,.agro-demo .appdemo-row{border-color:#dfe7df}.agro-demo .appdemo-badge{background:#fff5dc;color:#996c18}.agro-demo .appdemo-badge.ok{background:#e8f2eb;color:#245e3d}.agro-demo .appdemo-btn{border-color:#d7e0d8;color:#2e4135}.agro-demo .appdemo-btn.primary{background:#245e3d;border-color:#245e3d}.agro-demo .appdemo-card{background:#fff}
/* ServeFlow */
.serve-demo{background:#f3f5f8;color:#162033}.serve-demo .appdemo-side{background:#0f1725;color:#99a4b8}.serve-demo .appdemo-mark{background:#111827}.serve-demo .appdemo-brand{color:#fff}.serve-demo .appdemo-brand small{color:#78849a}.serve-demo .appdemo-nav button{color:#99a4b8}.serve-demo .appdemo-nav button.active{background:#202a3b;color:#fff}.serve-demo .appdemo-server{border-color:#283247}.serve-demo .appdemo-top{background:#fff;border-color:#e8ebef}.serve-demo .appdemo-top p{color:#9299a6}.serve-demo .appdemo-online{border-color:#e7eaf0;color:#168149;background:#fff}.serve-demo .appdemo-metric,.serve-demo .appdemo-panel,.serve-demo .appdemo-card,.serve-demo .appdemo-field,.serve-demo .kds-col,.serve-demo .ticket{border-color:#e7eaf0}.serve-demo .appdemo-metric{background:#fff}.serve-demo .appdemo-metric small,.serve-demo .appdemo-panel-head small,.serve-demo .appdemo-row small,.serve-demo .appdemo-card p,.serve-demo .appdemo-field small{color:#8a93a2}.serve-demo .appdemo-panel-head,.serve-demo .appdemo-row{border-color:#e7eaf0}.serve-demo .appdemo-badge{background:#e7f8ee;color:#168149}.serve-demo .appdemo-btn{border-color:#dde2e9;color:#162033}.serve-demo .appdemo-btn.primary{background:#111827;border-color:#111827}.serve-demo .kds-col{background:#f7f8fa}.serve-demo .ticket{background:#fff}
/* BuildSync */
.build-demo{background:#f4f6f9;color:#172033}.build-demo .appdemo-side{background:#111827;color:#cbd5e1}.build-demo .appdemo-mark{background:#2563eb}.build-demo .appdemo-brand{color:#fff}.build-demo .appdemo-brand small{color:#93c5fd}.build-demo .appdemo-nav button{color:#cbd5e1}.build-demo .appdemo-nav button.active{background:#1f2937;color:#fff}.build-demo .appdemo-server{border-color:#334155}.build-demo .appdemo-top{background:#fff;border-color:#e5e7eb}.build-demo .appdemo-top p{color:#6b7280}.build-demo .appdemo-online{border-color:#e5e7eb;color:#16a34a;background:#fff}.build-demo .appdemo-metric,.build-demo .appdemo-panel,.build-demo .appdemo-card,.build-demo .appdemo-field,.build-demo .mapbox{border-color:#e5e7eb}.build-demo .appdemo-metric{background:#fff}.build-demo .appdemo-metric small,.build-demo .appdemo-panel-head small,.build-demo .appdemo-row small,.build-demo .appdemo-card p,.build-demo .appdemo-field small{color:#6b7280}.build-demo .appdemo-panel-head,.build-demo .appdemo-row{border-color:#e5e7eb}.build-demo .appdemo-badge{background:#fef3c7;color:#92400e}.build-demo .appdemo-badge.ok{background:#dcfce7;color:#166534}.build-demo .appdemo-btn{border-color:#e5e7eb;color:#172033}.build-demo .appdemo-btn.primary{background:#2563eb;border-color:#2563eb}.build-demo .pin{background:#2563eb}.build-demo .pin.p2{background:#16a34a}.build-demo .pin.p3{background:#d97706}
@media(max-width:900px){.appdemo{grid-template-columns:1fr;min-height:0}.appdemo-side{padding:11px}.appdemo-brand{padding-bottom:10px}.appdemo-nav{display:flex;overflow:auto;gap:5px}.appdemo-nav button{white-space:nowrap}.appdemo-server{display:none}.appdemo-top{height:auto;min-height:62px;padding:12px 14px}.appdemo-screen{padding:12px}.appdemo-metrics{grid-template-columns:1fr 1fr}.appdemo-grid{grid-template-columns:1fr}.appdemo-row{grid-template-columns:64px 1fr auto}.appdemo-row>:nth-child(3){grid-column:2}.kds-columns{grid-template-columns:1fr}.appdemo-form{grid-template-columns:1fr}.appdemo-agenda{min-width:500px}.agenda-scroll{overflow:auto}}
@media(max-width:520px){.real-demo-wrap{border-radius:18px}.appdemo-metrics{grid-template-columns:1fr 1fr}.appdemo-metric strong{font-size:21px}.appdemo-top h2{font-size:17px}.appdemo-online{display:none}.appdemo-row{font-size:11px}.appdemo-screen{padding:9px}.appdemo-panel-head{padding:12px}.appdemo-cardlist{padding:10px}}

/* v0.1.4 · profile/perspective switcher */
[hidden]{display:none!important}.demo-role-block{margin:22px 0 18px;padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}.demo-role-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:14px}.demo-role-head h2{margin:5px 0 0;font-size:1.4rem}.demo-role-head p{margin:0;max-width:520px;color:#94a8ba;font-size:.85rem;line-height:1.55}.demo-role-switch{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}.demo-role-switch button{appearance:none;border:1px solid rgba(255,255,255,.1);background:#0b1624;color:#c8d5e1;border-radius:13px;padding:12px 14px;text-align:left;cursor:pointer}.demo-role-switch button b{display:block;color:#f4f8fb;font-size:.9rem}.demo-role-switch button small{display:block;color:#7f95a9;font-size:.73rem;margin-top:4px;line-height:1.4}.demo-role-switch button.active{border-color:rgba(97,230,255,.45);background:linear-gradient(135deg,rgba(47,167,255,.18),rgba(99,118,255,.12));box-shadow:inset 0 0 0 1px rgba(97,230,255,.05)}
.demo-role-summary{margin-top:12px}.demo-role-summary>div{display:none;padding:12px 14px;border-radius:13px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);color:#99adbf;font-size:.82rem}.demo-role-summary>div.active{display:flex;gap:10px;align-items:center}.demo-role-summary b{color:#e7eff6}.demo-explain-strip{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:0 0 18px 18px;background:#eef4ff;color:#50617a;border-top:1px solid #dce7f5;font-size:.82rem}.demo-explain-strip b{color:#1a2b44;white-space:nowrap}.owner-strip{margin-top:-1px;border-radius:0 0 18px 18px}

/* MultiBooking public customer experience */
.public-demo-wrap{background:#f5f7fb}.public-booking-demo{max-width:860px;margin:auto;padding:28px;color:#172033}.public-booking-hero{display:flex;gap:16px;align-items:center;padding:20px;border-radius:20px;background:linear-gradient(135deg,#ffffff,#eef3ff);border:1px solid #e2e8f2}.public-logo{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#2f62f2,#7457ff);color:white;font-weight:950}.public-booking-hero small{color:#7a8497}.public-booking-hero h2{margin:4px 0 4px;font-size:1.55rem}.public-booking-hero p{margin:0;color:#6b7486;font-size:.85rem}.booking-progress{display:flex;gap:8px;overflow:auto;margin:18px 0}.booking-progress button{border:1px solid #e2e8f2;background:white;color:#798399;border-radius:999px;padding:8px 12px;font-size:.72rem;font-weight:850;white-space:nowrap}.booking-progress button.active{background:#2f62f2;border-color:#2f62f2;color:white}.booking-stage{display:none;background:white;border:1px solid #e3e9f2;border-radius:20px;padding:22px}.booking-stage.active{display:block}.booking-stage h3{margin:0 0 15px;font-size:1.2rem}.booking-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.booking-options button{appearance:none;border:1px solid #e2e8f2;background:#fff;border-radius:14px;padding:16px;text-align:left;color:#172033;cursor:pointer}.booking-options button:hover{border-color:#b9c9ff}.booking-options b{display:block}.booking-options span{display:inline-block;margin-top:5px;color:#2f62f2;font-size:.75rem;font-weight:850}.booking-options small{display:block;margin-top:7px;color:#788295;line-height:1.45}.booking-date{padding:14px;border-radius:13px;background:#f5f7fb;border:1px solid #e5eaf2}.booking-date b,.booking-date span{display:block}.booking-date span{margin-top:4px;color:#788295;font-size:.78rem}.booking-times{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px}.booking-times button{border:1px solid #dfe6f0;border-radius:12px;background:white;color:#234;padding:12px;font-weight:850;cursor:pointer}.public-form{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.public-form label{font-size:.73rem;color:#6c778c;font-weight:800}.public-form span{display:block;margin-top:6px;padding:12px;border-radius:11px;border:1px solid #dfe6f0;background:#fbfcfe;color:#172033;font-size:.85rem;font-weight:650}.public-primary,.public-secondary{border:0;border-radius:12px;padding:12px 15px;font-weight:850;cursor:pointer}.public-primary{background:#2f62f2;color:white}.public-secondary{margin-top:14px;background:#edf2fb;color:#345}.booking-success{text-align:center;padding:18px}.booking-success>span{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:#e5f7ef;color:#14865c;font-weight:950;font-size:1.5rem}.booking-success p{color:#344158}.booking-success small{display:block;color:#7a8597;max-width:500px;margin:auto}
@media(max-width:760px){.demo-role-head{display:block}.demo-role-head p{margin-top:8px}.booking-options{grid-template-columns:1fr}.public-form{grid-template-columns:1fr}.booking-times{grid-template-columns:repeat(2,1fr)}.public-booking-demo{padding:14px}.public-booking-hero{align-items:flex-start}.demo-explain-strip{display:block}.demo-explain-strip b{display:block;margin-bottom:4px}}