:root{--gold:#e4b647;--gold-soft:#8c6824;--dark:#040807;--dark-card:#0b0f0e;--dark-line:#282820;--green:#0b503d;--cream:#fcf9f2;--cream-line:#e3d7c5;--ink:#123f32;--phone-width:430px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at 50% 8%,#18201f,#050707 52%,#000);color:#f8f5ed;min-height:100vh}.demo-toolbar{position:sticky;top:0;z-index:80;height:68px;padding:10px max(18px,env(safe-area-inset-left));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(3,7,7,.9);border-bottom:1px solid #26302f;backdrop-filter:blur(18px)}.back-link{display:flex;align-items:center;gap:8px;color:#d8dedc;text-decoration:none;font-size:13px}.back-link svg{width:18px}.demo-tabs{display:flex;padding:4px;background:#111817;border:1px solid #2c3937;border-radius:14px}.demo-tabs button{min-width:105px;height:38px;padding:0 22px;border:0;border-radius:10px;background:transparent;color:#9ba6a3;font:600 13px Inter;cursor:pointer}.demo-tabs button.active{background:linear-gradient(115deg,#7440ef,#9a35ff);color:#fff;box-shadow:0 8px 20px #6525de55}.demo-hint{justify-self:end;color:#87918e;font-size:11px}.device-stage{display:grid;place-items:start center;padding:28px 20px 70px}.phone-shell{position:relative;width:min(100%,var(--phone-width));height:min(850px,calc(100vh - 112px));min-height:680px;border:10px solid #151918;border-radius:48px;background:#070b0a;box-shadow:0 34px 90px #000c,0 0 0 1px #4a514f;overflow:hidden}.phone-speaker{position:absolute;top:9px;left:50%;z-index:20;transform:translateX(-50%);width:95px;height:22px;border-radius:0 0 16px 16px;background:#121615}.menu-app{height:100%;overflow-y:auto;overflow-x:hidden;padding-bottom:84px;scrollbar-width:none}.menu-app::-webkit-scrollbar{display:none}.menu-header{height:82px;padding:24px 20px 10px;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px}.round-button,.language-button{border:1px solid var(--gold-soft);background:transparent;color:var(--gold);cursor:pointer}.round-button{width:40px;height:40px;border:0;display:grid;place-items:center}.round-button svg{width:25px}.restaurant-brand{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--gold);text-decoration:none;text-align:center}.brand-emblem{width:45px;height:45px;border:1px solid var(--gold);clip-path:polygon(50% 0,63% 13%,81% 10%,87% 27%,100% 37%,90% 53%,94% 71%,76% 79%,66% 96%,49% 88%,33% 98%,24% 80%,6% 72%,11% 53%,0 38%,14% 27%,18% 9%,38% 13%);display:grid;place-items:center;font:600 17px 'Cormorant Garamond'}.restaurant-brand strong{display:block;font:600 17px 'Cormorant Garamond';letter-spacing:2px}.restaurant-brand small{display:block;font:500 7px Inter;letter-spacing:2px}.language-button{height:38px;border-radius:10px;padding:0 10px;display:flex;align-items:center;gap:6px}.language-button svg{width:15px}.language-button svg:last-child{width:12px}.welcome-banner{display:none}.menu-title{display:flex;align-items:center;justify-content:center;gap:13px;margin:10px 24px 16px}.menu-title h1{font:600 25px 'Cormorant Garamond';margin:0}.menu-title i{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold-soft),transparent)}.menu-search{display:flex;align-items:center;margin:0 18px 14px;height:47px;padding:0 14px;border:1px solid var(--dark-line);border-radius:13px;background:#0b100f}.menu-search>svg{width:19px;color:var(--gold)}.menu-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;padding:0 11px;font:13px Inter}.menu-search button{border:0;background:transparent;color:var(--gold)}.menu-search button svg{width:17px}.category-strip{display:flex;gap:8px;padding:0 18px 16px;overflow-x:auto;scrollbar-width:none}.category-strip::-webkit-scrollbar{display:none}.category-strip button{height:39px;padding:0 15px;white-space:nowrap;border:1px solid var(--dark-line);border-radius:12px;background:#0a0e0d;color:#ddd8cc;font:500 11px Inter;display:flex;align-items:center;gap:7px;cursor:pointer}.category-strip button svg{width:17px;color:var(--gold)}.category-strip button.active{border-color:var(--gold-soft);background:linear-gradient(120deg,#392c17,#1b1710);color:#fff}.product-section{padding:0 18px 12px}.section-title{display:flex;align-items:center;justify-content:space-between;margin:0 0 9px}.section-title h2{display:flex;align-items:center;gap:8px;font-size:18px;margin:0}.section-title svg{width:22px;color:var(--gold)}.section-title button{border:0;background:transparent;color:var(--gold);font:12px Inter}.product-list{display:grid;gap:8px}.product-card{min-height:95px;border:1px solid var(--dark-line);border-radius:13px;background:linear-gradient(110deg,#0c100f,#0a0d0c);display:grid;grid-template-columns:104px 1fr 48px;overflow:hidden}.product-card>img{width:100%;height:100%;object-fit:cover}.product-info{padding:12px 10px;min-width:0}.product-info h3{font-size:13px;margin:0 0 7px}.product-info p{color:#aaa9a2;font-size:9px;line-height:1.5;margin:0}.product-action{display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:8px 5px}.product-action strong{color:var(--gold);font-size:12px;white-space:nowrap}.product-action button{width:34px;height:34px;border:1px solid var(--gold-soft);border-radius:9px;background:transparent;color:var(--gold);display:grid;place-items:center;cursor:pointer;font-size:25px}.qr-promo{margin:5px 18px 17px;padding:13px;border:1px solid var(--gold-soft);border-radius:14px;display:grid;grid-template-columns:42px 1fr 54px;align-items:center;gap:10px}.qr-promo>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#261d0f;color:var(--gold)}.qr-promo svg{width:22px}.qr-promo b{display:block;font-size:11px}.qr-promo small{display:block;color:#99998f;font-size:8px;margin-top:5px}.fake-qr{width:48px;height:48px;background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 50%/8px 8px;border:4px solid #fff}.menu-bottom-space{height:20px}.cart-bar{position:absolute;z-index:30;left:12px;right:12px;bottom:12px;height:64px;border:1px solid var(--gold-soft);border-radius:15px;background:linear-gradient(110deg,#0a0e0d,#111611);color:#fff;display:grid;grid-template-columns:1fr auto 44px;align-items:center;padding:7px 8px 7px 15px;cursor:pointer}.cart-bar span{display:flex;align-items:center;gap:10px}.cart-bar span>svg{width:20px;color:var(--gold)}.cart-bar b{font-size:13px}.cart-bar em{font-style:normal}.cart-bar>strong{font-size:14px;margin-right:12px}.cart-bar>svg{width:42px;height:42px;padding:12px;border-radius:10px;background:linear-gradient(145deg,#efc768,#c99535);color:#15120c}.cart-drawer,.order-success{position:fixed;z-index:100;inset:0;display:none}.cart-drawer.open,.order-success.open{display:block}.drawer-backdrop{position:absolute;inset:0;border:0;background:#000a}.cart-drawer>section{position:absolute;left:50%;bottom:0;width:min(430px,100%);max-height:72vh;transform:translateX(-50%);border-radius:24px 24px 0 0;background:#101614;color:#fff;padding:20px;overflow:auto}.cart-drawer header{display:flex;justify-content:space-between;align-items:center}.cart-drawer h2{margin:0}.cart-drawer header button{border:0;background:transparent;color:#fff}.cart-line{display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;border-bottom:1px solid #28302e;padding:12px 0}.cart-line img{width:50px;height:45px;border-radius:8px;object-fit:cover}.cart-line b{font-size:12px}.cart-line small{display:block;color:#aaa;font-size:9px;margin-top:4px}.cart-drawer footer{position:sticky;bottom:-20px;background:#101614;padding:14px 0 0}.cart-drawer footer span{display:flex;justify-content:space-between;font-size:14px}.cart-drawer footer button{width:100%;height:47px;margin-top:13px;border:0;border-radius:11px;background:linear-gradient(100deg,#6b22ec,#922dff);color:#fff;font-weight:700}.order-success{background:#000d;place-items:center;padding:20px}.order-success.open{display:grid}.order-success section{width:min(360px,100%);padding:35px 25px;border:1px solid #33413e;border-radius:24px;background:#08100e;text-align:center}.order-success section>span{width:70px;height:70px;margin:auto;border:2px solid #53dc65;border-radius:50%;display:grid;place-items:center;color:#53dc65}.order-success section>span svg{width:36px}.order-success h2{font-size:20px;margin:22px 0}.order-success p,.order-success small{color:#aab4b0}.order-success strong{display:block;color:#963cff;font-size:27px;margin:8px}.order-success small{display:block;font-size:11px;line-height:1.6}.order-success button{margin-top:22px;height:44px;padding:0 25px;border:0;border-radius:9px;background:#7324e2;color:#fff}
/* Light green demo */
body.demo-light{background:radial-gradient(circle at 50% 10%,#f0e9da,#8c968f 55%,#303a36);color:var(--ink)}body.demo-light .phone-shell{border-color:#e7e1d8;background:var(--cream);box-shadow:0 35px 90px #091a153d,0 0 0 1px #fff}body.demo-light .phone-speaker{background:#e5dfd5}body.demo-light .menu-header{height:90px;background:#fffdf8}body.demo-light .round-button{order:3;width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff}body.demo-light .restaurant-brand{justify-content:flex-start;color:var(--ink)}body.demo-light .brand-emblem{color:#a37834;border-color:#a37834}body.demo-light .language-button{order:2;border-color:#d8c5a5;color:#222;background:#fff}body.demo-light .welcome-banner{display:block;margin:0 16px 14px;min-height:157px;padding:28px 24px;border:1px solid #d8bc8e;border-radius:18px;background:linear-gradient(90deg,#fffaf0e8,#fff9ef7d),url('assets/menu-food-01.png') right center/55% 100% no-repeat;box-shadow:0 10px 24px #8069321b}body.demo-light .welcome-banner span{font:600 17px 'Cormorant Garamond'}body.demo-light .welcome-banner h1{font:700 32px/1 'Cormorant Garamond';margin:7px 0;color:var(--ink)}body.demo-light .welcome-banner p{display:flex;align-items:center;gap:8px;margin:15px 0 0;font:600 15px 'Cormorant Garamond'}body.demo-light .welcome-banner svg{width:18px;color:#b88d3f}body.demo-light .menu-title{display:none}body.demo-light .menu-search{background:#fff;border-color:#ddd5c9;box-shadow:0 7px 17px #59451412}body.demo-light .menu-search input{color:#222}body.demo-light .menu-search>svg,body.demo-light .menu-search button{color:#222}body.demo-light .category-strip button{background:#fff;border-color:#e4ddd2;color:#363c39;box-shadow:0 5px 13px #6d583b14}body.demo-light .category-strip button svg{color:#a77d33}body.demo-light .category-strip button.active{background:var(--green);border-color:var(--green);color:#fff}body.demo-light .section-title h2{font-family:'Cormorant Garamond';font-size:22px;color:var(--ink)}body.demo-light .section-title svg,body.demo-light .section-title button{color:var(--ink)}body.demo-light .product-card{min-height:87px;grid-template-columns:102px 1fr 54px;border-color:#e8dfd3;background:#fff;box-shadow:0 8px 18px #6c543a12}body.demo-light .product-info h3{font:700 15px 'Cormorant Garamond';color:var(--ink)}body.demo-light .product-info p{color:#6b6c68}body.demo-light .product-action strong{color:var(--ink)}body.demo-light .product-action button{border-color:#799081;color:var(--ink)}body.demo-light .qr-promo{border-color:#ded3c1;background:#f8f4e9}body.demo-light .qr-promo>span{background:var(--green);color:#fff}body.demo-light .qr-promo small{color:#6d706b}body.demo-light .cart-bar{border-color:#1a5d48;background:linear-gradient(105deg,#0a4837,#0b6349)}body.demo-light .cart-bar>svg{background:linear-gradient(145deg,#e8c173,#c99439)}body.demo-light .cart-drawer>section{background:#fffdf8;color:var(--ink)}body.demo-light .cart-drawer header button{color:var(--ink)}body.demo-light .cart-drawer footer{background:#fffdf8}
@media(max-width:520px){.demo-toolbar{height:58px;grid-template-columns:40px 1fr 40px;padding:8px 10px}.back-link span,.demo-hint{display:none}.demo-tabs{justify-self:center}.demo-tabs button{min-width:95px;height:34px;padding:0 16px}.device-stage{padding:0}.phone-shell{width:100%;height:calc(100dvh - 58px);min-height:0;border:0;border-radius:0;box-shadow:none}.phone-speaker{display:none}.menu-header{padding-top:max(14px,env(safe-area-inset-top));height:70px}.cart-bar{bottom:max(8px,env(safe-area-inset-bottom))}.cart-drawer>section{padding-bottom:max(20px,env(safe-area-inset-bottom))}}@media(min-width:521px) and (max-height:820px){.phone-shell{height:700px;min-height:620px}}