@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,700&display=swap');

:root { --ink:#22201d; --cream:#f5efe3; --paper:#fffaf1; --rust:#a83b25; --mustard:#e4ad32; --green:#3f5b42; --line:#d9cebd; --muted:#756e64; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:'DM Sans',sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; background-image:radial-gradient(#c9bca8 0.7px,transparent 0.7px); background-size:16px 16px; }
.topbar { height:82px; padding:0 max(5vw,24px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(245,239,227,.94); }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.brand-mark { width:46px; height:46px; display:grid; place-items:center; color:var(--paper); background:var(--rust); border-radius:50% 48% 46% 52%; font-family:'Playfair Display',serif; font-size:19px; transform:rotate(-5deg); }
.brand strong,.brand small { display:block; }.brand strong{font-size:16px;letter-spacing:.02em}.brand small{font-size:11px;color:var(--muted);margin-top:2px}
.orders-shortcut { border:1px solid var(--ink); background:transparent; padding:9px 13px; font-weight:700; border-radius:3px; }
.install-button{border:0;background:var(--green);color:white;padding:10px 13px;font-weight:800;border-radius:3px;margin-left:10px}.install-button[hidden]{display:none}
.sync-status{display:flex;align-items:center;gap:6px;margin-left:auto;margin-right:12px;font-size:11px;font-weight:700;color:var(--green)}.sync-status i{width:8px;height:8px;border-radius:50%;background:#4d8f58;box-shadow:0 0 0 3px #4d8f5822}.sync-status.local{color:var(--muted)}.sync-status.local i{background:#a49b8c;box-shadow:none}.sync-status.error{color:var(--rust)}.sync-status.error i{background:var(--rust)}
.orders-shortcut span,.tab-badge { display:inline-grid; place-items:center; min-width:21px; height:21px; padding:0 5px; border-radius:20px; background:var(--rust); color:white; font-size:11px; margin-left:5px; }
main { max-width:1380px; margin:auto; }
.hero { min-height:290px; padding:54px max(5vw,24px) 44px; display:flex; align-items:center; justify-content:space-between; background:var(--mustard); border-bottom:1px solid #b48627; overflow:hidden; position:relative; }
.hero:after { content:'✦'; position:absolute; right:28%; top:24px; font-size:32px; color:#926d1e; transform:rotate(12deg); }
.eyebrow { font-size:11px; font-weight:800; letter-spacing:.22em; margin:0 0 12px; }
h1 { font-size:clamp(38px,5vw,69px); line-height:.94; margin:0; letter-spacing:-.055em; max-width:800px; }
h1 em { font-family:'Playfair Display',serif; font-weight:700; color:var(--rust); }
.hero-copy { max-width:560px; margin:22px 0 0; font-size:15px; line-height:1.55; }
.hero-stamp { flex:0 0 142px; height:142px; border:2px solid var(--ink); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(7deg); box-shadow:inset 0 0 0 5px var(--mustard), inset 0 0 0 6px var(--ink); }
.hero-stamp span{font-size:10px;letter-spacing:.2em;font-weight:800}.hero-stamp strong{font:700 52px/1 'Playfair Display',serif}.hero-stamp small{font-weight:700}
.tabs { padding:0 max(5vw,24px); display:flex; border-bottom:1px solid var(--line); background:var(--paper); }
.tab { padding:19px 22px; border:0; border-bottom:3px solid transparent; background:transparent; color:var(--muted); font-weight:700; }
.tab.active { color:var(--rust); border-bottom-color:var(--rust); }
.view { display:none; }.view.active{display:block}
.order-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(330px,.8fr); }
.menu-panel { padding:42px max(4vw,28px) 70px; }
.cart-panel { padding:42px max(3vw,28px); background:var(--paper); border-left:1px solid var(--line); }
.section-heading,.cart-title,.orders-header,.orders-header>div { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.section-heading>div:first-child,.cart-title { display:flex; align-items:center; }
.step { font:italic 700 16px 'Playfair Display',serif; color:var(--rust); margin-right:9px; }
h2 { font-size:24px; margin:0; letter-spacing:-.03em; }
.category-switch { display:flex; border:1px solid var(--ink); border-radius:3px; overflow:hidden; }
.category { padding:8px 15px; border:0; background:transparent; font-size:13px; font-weight:700; }
.category.active { background:var(--ink); color:white; }
.menu-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:25px; }
.section-help{color:var(--muted);margin:10px 0 18px;font-size:14px}.voice-box{display:flex;align-items:center;gap:13px;padding:13px;margin-bottom:23px;background:#e8dfcf;border-radius:4px}.voice-box small{color:var(--muted)}.voice-main-button{border:0;background:var(--rust);color:white;padding:11px 14px;border-radius:3px;font-weight:800;white-space:nowrap}.voice-main-button.listening{animation:pulse 1s infinite;background:#d32921}.voice-main-button:disabled{background:#999;cursor:not-allowed}@keyframes pulse{50%{box-shadow:0 0 0 7px #a83b2530}}.item-labels{display:grid;grid-template-columns:1fr 105px;gap:12px;margin:0 42px 7px 0;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.custom-items{display:grid;gap:11px}.custom-item{display:grid;grid-template-columns:minmax(0,1fr) 105px 30px;gap:12px;align-items:center}.custom-item input{font-size:15px;padding:14px}.custom-item input[type=number]{text-align:center;font-weight:800}.remove-row{width:30px;height:30px;border:0;background:transparent;color:var(--rust);font-size:21px;border-radius:50%}.remove-row:hover{background:#a83b2512}.add-row-button{margin-top:15px;padding:11px 14px;border:1px dashed var(--rust);background:transparent;color:var(--rust);font-weight:800;border-radius:3px}.simple-order-panel{min-height:560px}
.menu-card { display:grid; grid-template-columns:58px 1fr auto; gap:13px; align-items:center; border:1px solid var(--line); background:rgba(255,250,241,.62); padding:12px; text-align:left; border-radius:4px; transition:.15s; }
.menu-card:hover { transform:translateY(-2px); border-color:var(--rust); box-shadow:0 5px 0 rgba(168,59,37,.12); }
.food-icon { width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:29px;background:#eadfcb; }
.menu-card h3 { margin:0 0 3px; font-size:15px; }.menu-card p { margin:0; color:var(--muted); font-size:11px; line-height:1.35; }.menu-card strong{color:var(--rust);font-size:14px}
.cart-title { justify-content:flex-start; }.cart-title p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.cart-items { margin-top:20px; }
.cart-item { display:grid; grid-template-columns:1fr auto; gap:10px; padding:12px 0; border-bottom:1px dashed var(--line); }
.cart-item h4 { margin:0 0 4px; font-size:14px; }.cart-item small{color:var(--muted)}
.qty { display:flex; align-items:center; gap:9px; }.qty button{width:25px;height:25px;border:1px solid var(--line);background:white;border-radius:50%;}.qty span{font-weight:700;font-size:13px}
.empty-cart,.empty-orders { padding:38px 10px; text-align:center; color:var(--muted); }.empty-cart span,.empty-cart strong,.empty-cart small { display:block; }.empty-cart span{font-size:31px;filter:grayscale(1);margin-bottom:7px}.empty-cart strong{color:var(--ink);font-size:13px}.empty-cart small{font-size:11px;margin-top:4px}
.cart-total { display:flex; justify-content:space-between; margin:17px 0 23px; padding-top:14px; border-top:2px solid var(--ink); }.cart-total strong{font-size:20px;color:var(--rust)}
label { display:block; font-size:11px; font-weight:800; margin:13px 0 6px; text-transform:uppercase; letter-spacing:.06em; } label small{text-transform:none;letter-spacing:0;font-weight:500}
input,textarea { width:100%; border:1px solid var(--line); border-radius:3px; padding:11px 12px; background:white; outline:none; resize:vertical; } input:focus,textarea:focus{border-color:var(--rust);box-shadow:0 0 0 2px rgba(168,59,37,.12)}
.form-row { display:grid; grid-template-columns:1fr 1.3fr; gap:12px; }
.primary-button { width:100%; display:flex; justify-content:space-between; margin-top:18px; border:0; border-radius:3px; padding:14px 17px; background:var(--rust); color:white; font-weight:800; box-shadow:0 4px 0 #702719; }
.primary-button:active{transform:translateY(2px);box-shadow:0 2px 0 #702719}.form-error{min-height:17px;color:var(--rust);font-size:12px;margin:8px 0 0}
#orders { padding:42px max(5vw,24px) 70px; min-height:470px; }.text-button{border:0;background:transparent;color:var(--rust);font-weight:700}.order-actions{display:flex;align-items:center;gap:10px}.demo-button{border:1px solid var(--green);background:var(--green);color:white;padding:9px 12px;font-weight:700;border-radius:3px}
.orders-list { display:grid; gap:12px; margin-top:24px; }.order-card{display:grid;grid-template-columns:88px 1fr auto;align-items:center;gap:18px;padding:17px;background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--mustard);border-radius:4px}.order-card.completed{opacity:.58;border-left-color:var(--green)}
.order-time{font:700 25px 'Playfair Display',serif}.order-info h3{margin:0 0 5px}.order-info p{margin:0;color:var(--muted);font-size:13px}.order-info small{display:block;margin-top:5px;color:var(--rust)}
.status-button{border:1px solid var(--green);background:transparent;color:var(--green);padding:9px 12px;font-weight:700;border-radius:3px}.completed .status-button{background:var(--green);color:white}
.empty-orders span{display:grid;place-items:center;margin:auto;width:48px;height:48px;border-radius:50%;background:#d8e1d5;color:var(--green);font-size:23px}.empty-orders h3{margin:12px 0 4px}.empty-orders p{margin:0}
.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,100px); opacity:0; background:var(--green); color:white; padding:13px 20px; border-radius:3px; box-shadow:0 8px 28px #0003; transition:.25s; z-index:5; }.toast.show{transform:translate(-50%,0);opacity:1}
@media(max-width:800px){.topbar{height:68px}.brand small{display:none}.install-button{font-size:0;width:36px;height:36px;padding:0}.install-button:after{content:'↓';font-size:18px}.sync-status{font-size:0;margin-right:8px}.sync-status i{width:9px;height:9px}.hero{min-height:245px;padding-top:36px}.hero-stamp{display:none}.hero:after{right:8%}.order-layout{display:block}.cart-panel{border-left:0;border-top:1px solid var(--line)}.menu-grid{grid-template-columns:1fr}.menu-panel,.cart-panel{padding:31px 20px 45px}.simple-order-panel{min-height:auto}.section-heading,.orders-header{align-items:flex-start;flex-direction:column}.voice-box{display:block}.voice-main-button{width:100%;margin-bottom:8px}.voice-box small{display:block;text-align:center}.item-labels{grid-template-columns:1fr 78px;margin-right:34px}.custom-item{grid-template-columns:minmax(0,1fr) 78px 28px;gap:7px}.order-actions{width:100%;justify-content:space-between}.orders-shortcut{font-size:12px}.order-card{grid-template-columns:70px 1fr}.order-card .status-button{grid-column:1/-1}.form-row{grid-template-columns:1fr}.hero-copy{font-size:14px}.tabs{padding:0 8px}.tab{padding:16px 12px;font-size:12px}}
@media(min-width:1380px){.app-shell{padding:0 calc((100vw - 1380px)/2);background-color:#d9cfbd}.topbar,main{max-width:1380px;margin:auto}.app-shell>main{background:var(--cream)}}