.demo-page{background:#f6f8fc}.demo-nav{margin-left:auto}.demo-hero{background:linear-gradient(130deg,#112039,#253d59);padding:43px 0 46px;color:#fff;position:relative;overflow:hidden}.demo-hero:after{content:"";position:absolute;border:1px solid #d9b0697c;border-radius:50%;width:480px;height:300px;right:-270px;top:-180px;transform:rotate(-20deg)}.demo-hero .breadcrumbs{margin-bottom:23px}.demo-hero h1{font-size:clamp(30px,4vw,48px);margin:0 0 10px;color:#fff}.demo-hero p{max-width:660px;color:#c8d4e3;margin:0 0 15px;font-size:15px}.demo-pill{display:inline-block;color:#ead1a3;border:1px solid #9f895f60;background:#fbdba50b;padding:6px 12px;border-radius:25px;font-size:11px}.demo-content{padding-top:30px;padding-bottom:75px}.demo-toprow{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:32px}.demo-switcher{display:grid;gap:6px}.demo-switcher label{font-size:11px;font-weight:780;color:#6b7a8d}.demo-switcher select{border:1px solid #dfe5ed;border-radius:11px;background:#fff;padding:11px 36px 11px 12px;font-weight:760;color:#203147;min-width:230px}.demo-links{display:flex;gap:10px}.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:66px;align-items:start}.phone-area{display:flex;flex-direction:column;align-items:center;position:relative}.phone-area:before{content:"";position:absolute;width:min(100%,520px);height:490px;border-radius:50%;background:radial-gradient(ellipse,#cedcf0,transparent 70%);top:25px}.demo-phone{z-index:1;width:316px;max-width:100%;height:630px;background:#0e1520;border:8px solid #192333;border-radius:43px;overflow:hidden;box-shadow:0 20px 0 -15px #a77d3f,0 30px 65px #1d30434b;position:relative}.demo-phone:before{content:"";position:absolute;width:115px;height:19px;background:#0d1420;border-radius:0 0 14px 14px;top:0;left:50%;transform:translateX(-50%);z-index:4}.phone-status{height:28px;display:flex;justify-content:space-between;align-items:center;background:#142337;color:#fff;padding:5px 22px 3px;font-size:9px;font-weight:800;position:relative;z-index:3}.demo-phone-screen{height:calc(100% - 28px);overflow-y:auto;overscroll-behavior:contain;background:#f5f7fb;scrollbar-width:thin}.phone-caption{font-size:12px;color:#7a889b;margin-top:21px;z-index:1}.demo-info{display:grid;gap:15px}.demo-aside-card{padding:30px;background:#fff;border:1px solid #e4e8f0;border-radius:18px;box-shadow:0 12px 34px #2638550a}.demo-aside-icon{font-size:35px;color:#bf934a;margin-bottom:10px}.demo-aside-card h2{font-size:27px;margin:0 0 12px}.demo-aside-card p{font-size:13px;color:#68758b;line-height:1.7}.demo-aside-card ul{list-style:none;margin:19px 0 22px;padding:0}.demo-aside-card li{font-size:12.5px;color:#2d3d54;position:relative;padding-left:20px;margin-bottom:11px}.demo-aside-card li:before{content:'✓';color:#b6873c;position:absolute;left:0;font-weight:850}.demo-aside-card.subtle{background:#edf2f9;box-shadow:none}.demo-aside-card.subtle strong{font-size:14px}.demo-actions{display:flex;flex-wrap:wrap;gap:8px}.demo-feedback{border:1px solid #c7dfcc;border-radius:12px;padding:16px;color:#22543a;background:#effaf1;font-size:12px;display:none}.demo-feedback.shown{display:block}.demo-end{background:#14243c;color:#fff;text-align:center;padding:45px 15px}.demo-end h2{font-size:29px;color:#fff;margin-bottom:8px}.demo-end h2 em{color:#e0b873}.demo-end p{color:#b9c8d9;font-size:13px;margin-bottom:22px}.demo-footer{text-align:center;background:#101b2e;color:#aebbd1;font-size:11px;padding:20px}.demo-footer a{color:#efc77f}
/* App inside device */
.mini-app-hero{height:132px;background:linear-gradient(125deg,#422117,#1c2637);color:#fff;padding:16px 17px;position:relative;overflow:hidden}.mini-app-hero .mini-hero-emoji{font-size:69px;position:absolute;right:12px;top:15px;filter:drop-shadow(0 5px 8px #10151a50)}.mini-app-hero h2{color:#fff;font-size:24px;margin:6px 0 6px;position:relative}.mini-app-hero small{font-size:11px;color:#f8dfb9;position:relative}.mini-app-hero.restaurant{background:linear-gradient(125deg,#273b2a,#64432b)}.mini-app-hero.snack{background:linear-gradient(125deg,#621d1a,#a35320)}.mini-body{padding:14px 15px 75px}.mini-topnote{background:#fff;border:1px solid #e4e8ee;border-radius:11px;padding:10px 11px;margin-bottom:14px;font-size:10.5px;color:#627189}.mini-topnote strong{display:block;color:#1e304a;font-size:13px}.mini-title{font-size:17px;font-weight:850;margin:0 0 10px}.mini-item{background:#fff;border:1px solid #e3e9f2;border-radius:11px;display:flex;align-items:center;gap:9px;padding:10px;margin-bottom:9px;min-height:75px}.mini-item-img{height:48px;width:55px;border-radius:10px;background:#fff1de;display:grid;place-items:center;font-size:31px;flex-shrink:0}.mini-item-text{flex:1;min-width:0}.mini-item-text strong{display:block;font-size:11.8px;color:#243349;line-height:1.3}.mini-item-text small{display:block;font-size:9px;color:#7d8997;line-height:1.5;margin:3px 0}.mini-item-text b{font-size:11px;color:#99702d}.mini-add{width:28px;height:28px;border:0;border-radius:8px;background:#dba858;color:#11233f;font-weight:850;font-size:20px;display:grid;place-items:center}.mini-cart{background:#113b7b;position:absolute;bottom:8px;left:12px;right:12px;border:0;display:flex;justify-content:space-between;align-items:center;color:white;font-weight:800;font-size:11.5px;border-radius:12px;padding:13px 14px;box-shadow:0 6px 20px #164a8a4b}.demo-phone-screen .mini-cart{position:sticky;bottom:9px;margin:0 11px 10px;left:auto;right:auto;width:calc(100% - 22px)}.mini-cart:disabled{opacity:.75;cursor:default}.mini-order-review{border:1px solid #e5e9ef;background:white;border-radius:11px;padding:13px;margin-top:12px}.mini-order-review h3{font-size:15px;margin:0 0 11px}.mini-order-review p{font-size:11px;color:#5d6980}.mini-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:11px;gap:8px}.mini-confirm{display:block;width:100%;border:0;border-radius:9px;background:#0d63de;color:#fff;font-weight:800;padding:12px;margin-top:12px;font-size:12px}.mini-done{text-align:center;padding:26px 5px}.mini-done span{font-size:45px}.mini-done h3{font-size:18px;margin:12px 0 6px}.mini-done p{font-size:11px;color:#67748a}.mini-back{border:0;background:#e9eef6;border-radius:7px;padding:8px 11px;font-size:10px;color:#34445b;font-weight:750;margin-bottom:10px}.mini-dash-head{background:linear-gradient(120deg,#143059,#255792);color:#fff;padding:20px 15px 23px}.mini-dash-head small{color:#b7cee9}.mini-dash-head h2{color:#fff;margin:8px 0 3px;font-size:23px}.mini-dash-body{padding:15px}.mini-dash-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:15px}.mini-stat{padding:12px 10px;border-radius:11px;background:#fff;border:1px solid #e4e9ef}.mini-stat small{display:block;color:#8a96a8;font-size:9px}.mini-stat strong{display:block;margin-top:5px;font-size:20px}.mini-action{background:#1763cf;color:#fff;border:0;border-radius:9px;padding:11px 13px;width:100%;font-size:11px;font-weight:800;margin-bottom:16px}.mini-section-label{font-size:14px;font-weight:850;margin-bottom:10px}.mini-task{border:1px solid #e2e8f0;background:white;border-radius:10px;padding:12px;margin-bottom:9px}.mini-task strong{display:block;font-size:11.5px}.mini-task span{font-size:9.5px;color:#7e8c9d}.mini-task b{float:right;background:#e6f6e9;color:#37815b;font-size:9px;border-radius:7px;padding:3px 6px}.mini-hint{color:#8695a6;font-size:10px;margin:10px 0}.mini-total-green{font-size:11px;color:#a7e8c1}.mini-money{font-size:30px;color:white;font-weight:850}.mini-entry{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #e8ecf2;padding:10px 0;font-size:11.5px}.mini-entry b.in{color:#27875e}.mini-entry b.out{color:#c56351}
@media(max-width:850px){.demo-grid{grid-template-columns:1fr;gap:32px}.demo-info{max-width:650px;width:100%;margin:auto}.demo-toprow{flex-wrap:wrap}.phone-area:before{width:100%}}
@media(max-width:520px){.demo-nav{font-size:10.5px;padding:10px;min-height:37px}.demo-hero{padding:32px 0 34px}.demo-hero p{font-size:13px}.demo-toprow{display:block}.demo-switcher select{width:100%}.demo-links{justify-content:space-between;margin-top:12px}.demo-links .btn{font-size:11px;padding:9px 11px}.demo-grid{gap:30px}.demo-phone{height:609px;width:310px}.demo-aside-card{padding:22px}.demo-aside-card h2{font-size:24px}.demo-content{padding-bottom:50px}.phone-caption{text-align:center}}