:root { color-scheme: light; --ink:#28211c; --muted:#786d64; --line:#e5dcd2; --paper:#fffdfa; --orange:#df5828; --orange-dark:#a93b18; --orange-soft:#fff0e7; --green:#1f8a5c; --green-soft:#e8f7ef; --blue:#287ba4; --blue-soft:#e9f4fa; --red:#be3f3f; --red-soft:#faeaea; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { min-height:100%; margin:0; background:#f5eee6; color:var(--ink); }
body { overscroll-behavior-y:none; }
button, input, textarea { font:inherit; }
button { cursor:pointer; }
.boot { min-height:100vh; display:grid; place-items:center; align-content:center; gap:14px; color:var(--muted); font-size:14px; }
.boot img { width:82px; height:82px; border-radius:24px; box-shadow:0 20px 45px #64321b28; }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 20% 0,#fff8ed 0,transparent 36%),linear-gradient(155deg,#2e2722 0 38%,#f4ebe1 38%); }
.login-card { width:min(430px,100%); padding:31px 25px 25px; border:1px solid #ffffffaa; border-radius:28px; background:#fffdfaf4; box-shadow:0 30px 90px #21150f44; backdrop-filter:blur(18px); }
.brand-mark img { width:74px; height:74px; border-radius:22px; box-shadow:0 13px 28px #88411f30; }
.eyebrow { display:block; margin-top:19px; color:var(--orange); font-size:11px; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.login-card h1 { margin:6px 0 6px; font-size:31px; letter-spacing:-.04em; }
.login-card h1 em { color:var(--orange); font-style:normal; }
.login-card > p { margin:0 0 22px; color:var(--muted); font-size:14px; line-height:1.55; }
label { display:flex; flex-direction:column; gap:7px; margin:14px 0; color:#655b53; font-size:12px; font-weight:750; }
input, textarea { width:100%; border:1px solid var(--line); border-radius:13px; padding:13px 14px; outline:0; color:var(--ink); background:white; font-size:16px; }
input:focus, textarea:focus { border-color:#df8c67; box-shadow:0 0 0 4px #e25d2930; }
.login-card input { min-height:54px; font-size:19px; letter-spacing:.14em; }
.login-card small { display:block; margin-top:17px; color:#887d74; font-size:11px; line-height:1.45; text-align:center; }
.primary { border:0; border-radius:13px; padding:13px 17px; color:white; background:linear-gradient(135deg,#ed6733,#d6481c); box-shadow:0 9px 20px #d84c2035; font-weight:850; }
.primary:disabled { opacity:.5; box-shadow:none; }
.large { min-height:54px; font-size:15px; }
.full { width:100%; }
.notice { margin:13px 0; border-radius:13px; padding:12px 14px; color:#614b3e; background:#f7efe8; font-size:13px; line-height:1.4; }
.notice.error, .toast.error { color:#873939; background:var(--red-soft); }
.notice.warning { color:#7b5224; background:#fff1d9; }
.mobile-shell { min-height:100vh; padding-bottom:80px; }
.app-header { position:sticky; z-index:30; top:0; display:flex; align-items:center; justify-content:space-between; min-height:69px; padding:8px 14px; border-bottom:1px solid #e1d7cecc; background:#fffdf9eF; box-shadow:0 5px 22px #5c46370c; backdrop-filter:blur(15px); }
.logo-button { display:flex; align-items:center; gap:9px; border:0; padding:0; color:inherit; background:transparent; text-align:left; }
.logo-button img { width:43px; height:43px; border-radius:13px; }
.logo-button b,.logo-button small { display:block; }
.logo-button b { font-size:14px; }.logo-button small { margin-top:2px; color:var(--muted); font-size:10px; }
.app-header > div { display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.online,.offline { display:flex; align-items:center; gap:5px; color:var(--green); font-size:9px; font-weight:800; text-transform:uppercase; }.offline { color:var(--red); }.online i,.offline i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.user-pill { border:0; padding:0; color:#766b62; background:transparent; font-size:10px; font-weight:750; }
.content { width:min(820px,100%); margin:auto; padding:21px 14px 30px; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:5px 3px 17px; }
.hero .eyebrow { margin:0; }.hero h1 { margin:5px 0 4px; font-size:27px; letter-spacing:-.04em; }.hero p { margin:0; color:var(--muted); font-size:12px; }
.round-add { display:grid; place-items:center; width:47px; height:47px; flex:0 0 auto; border:0; border-radius:16px; color:white; background:var(--orange); box-shadow:0 9px 22px #d950253a; font-size:28px; }
.legend { display:flex; align-items:center; gap:13px; margin:4px 1px 13px; color:var(--muted); font-size:10px; }.legend span { display:flex; align-items:center; gap:5px; }.legend i { width:9px;height:9px;border-radius:50%; }.legend .free{background:#d2c8bf}.legend .occupied{background:var(--orange)}.legend .ready{background:var(--green)}
.tables-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.table-card { position:relative; display:flex; min-height:142px; flex-direction:column; align-items:flex-start; overflow:hidden; border:1px solid var(--line); border-radius:19px; padding:14px; color:inherit; background:var(--paper); box-shadow:0 8px 25px #4327190b; text-align:left; }
.table-card::after { position:absolute; right:-20px; bottom:-30px; width:82px; height:82px; border-radius:50%; content:""; background:#efe8e0; }
.table-card > span { color:var(--muted); font-size:10px; font-weight:750; text-transform:uppercase; }.table-card > strong { margin-top:2px; font-size:32px; line-height:1; }.table-card > small { margin-top:8px; color:var(--muted); font-size:10px; }.table-card > b { margin-top:auto; font-size:12px; }.table-card > em { position:absolute; top:14px; right:12px; border-radius:999px; padding:5px 7px; color:var(--orange-dark); background:var(--orange-soft); font-size:9px; font-style:normal; font-weight:850; }.table-card.occupied { border-color:#edc5b4; background:linear-gradient(145deg,#fffaf6,#fff3ec); }.table-card.occupied::after { background:#ffd9c8; }.table-card.ready { border-color:#b6ddc9; background:linear-gradient(145deg,#f8fffb,#e9f8f0); }.table-card.ready::after { background:#bfe9d2; }.table-card.ready > em { color:#176c48; background:#d9f3e5; }
.back { border:0; margin:0 0 16px; padding:5px 0; color:var(--orange-dark); background:transparent; font-size:12px; font-weight:800; }
.table-heading { display:flex; align-items:center; gap:15px; margin-bottom:17px; }.table-heading > div:first-child { display:grid; place-items:center; width:70px;height:70px;flex:0 0 auto;border-radius:21px;color:white;background:linear-gradient(145deg,#37302a,#221d19);box-shadow:0 12px 28px #2117122f}.table-heading > div:first-child span { font-size:9px;text-transform:uppercase}.table-heading > div:first-child strong { font-size:29px;line-height:1}.table-heading h1 { margin:0;font-size:23px}.table-heading p { margin:4px 0 0;color:var(--muted);font-size:12px}
.order-list,.history-list { display:flex; flex-direction:column; gap:10px; margin-top:17px; }
.order-card { border:1px solid var(--line); border-radius:18px; padding:15px; background:var(--paper); box-shadow:0 8px 24px #38241a0b; }.order-card header,.order-card footer,.order-meta { display:flex; align-items:center; justify-content:space-between; gap:9px; }.order-card header div span,.order-card header div strong { display:block; }.order-card header div span { color:var(--muted);font-size:9px}.order-card header div strong { font-size:19px}.status { display:inline-flex; border-radius:999px; padding:5px 8px; color:#7b532e; background:#fff0da; font-size:9px;font-style:normal;font-weight:850}.status.preparing{color:#276681;background:var(--blue-soft)}.status.ready{color:#176c48;background:var(--green-soft)}.status.delivered{color:#61584f;background:#eee9e4}.order-meta { margin:14px 0 10px;padding:10px 0;border-block:1px solid #eee7df;color:var(--muted);font-size:11px}.order-meta b{color:var(--ink);font-size:15px}.order-card p{margin:8px 0;padding:9px;border-radius:10px;color:#774a37;background:var(--orange-soft);font-size:11px}.order-card footer{align-items:flex-end}.order-card footer span{color:var(--muted);font-size:9px}.order-card footer button{border:0;padding:7px 0;color:var(--orange-dark);background:transparent;font-size:10px;font-weight:850}.order-card footer .deliver{border-radius:9px;padding:8px 10px;color:white;background:var(--green)}
.history-row { display:grid; grid-template-columns:47px minmax(0,1fr) auto; align-items:center; gap:10px; width:100%; border:1px solid var(--line); border-radius:16px; padding:11px; color:inherit; background:var(--paper); text-align:left; }.table-bubble{display:grid;place-items:center;width:45px;height:45px;border-radius:14px;color:white;background:#332b26;font-size:18px;font-weight:900}.history-row div strong,.history-row div small,.history-row > span:last-child b { display:block; }.history-row div strong{font-size:12px}.history-row div small{margin-top:4px;color:var(--muted);font-size:9px}.history-row > span:last-child{text-align:right}.history-row > span:last-child b{margin-top:5px;font-size:11px}
.empty { grid-column:1/-1; display:flex; min-height:140px; flex-direction:column; align-items:center; justify-content:center; border:1px dashed #d8cdc2; border-radius:18px; color:var(--muted); text-align:center; }.empty strong{color:var(--ink)}.empty span{margin-top:5px;font-size:11px}
.composer { padding-bottom:30px; }.composer-title { display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:14px}.composer-title span{color:var(--orange);font-size:10px;font-weight:850;text-transform:uppercase}.composer-title h1{margin:3px 0 0;font-size:26px}.composer-title > strong{color:var(--muted);font-size:11px}.product-search { display:flex;flex-direction:row;align-items:center;gap:7px;margin:0 0 10px;border:1px solid var(--line);border-radius:13px;padding:0 12px;background:white;font-size:20px}.product-search input{border:0;padding-left:0;box-shadow:none;font-size:14px}.category-strip { display:flex;gap:7px;overflow:auto;margin:0 -14px 13px;padding:0 14px 4px;scrollbar-width:none}.category-strip button{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:8px 12px;color:#756960;background:white;font-size:10px;font-weight:800}.category-strip button.active{border-color:var(--orange);color:white;background:var(--orange)}
.products-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px }.product-card{display:flex;min-height:143px;flex-direction:column;align-items:flex-start;border:1px solid var(--line);border-radius:16px;padding:12px;color:inherit;background:var(--paper);text-align:left}.product-card.selected{border-color:#e69672;box-shadow:inset 0 0 0 1px #e69672;background:#fff9f5}.product-card:disabled{opacity:.5}.product-card>span{color:var(--orange);font-size:8px;font-weight:850;text-transform:uppercase}.product-card>strong{margin-top:5px;font-size:13px}.product-card>small{display:-webkit-box;overflow:hidden;margin-top:4px;color:var(--muted);font-size:9px;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2}.product-card footer{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;padding-top:10px}.product-card footer b{font-size:13px}.product-card footer i{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;color:white;background:var(--orange);font-size:18px;font-style:normal}.product-card footer em{color:var(--orange-dark);font-size:8px;font-style:normal;font-weight:850}
.cart-sheet { margin:18px -14px -30px;padding:17px 14px calc(96px + env(safe-area-inset-bottom));border-top:1px solid #dfd4ca;background:#fffdfa;box-shadow:0 -12px 36px #3a211415}.cart-sheet>header{display:flex;align-items:center;justify-content:space-between}.cart-sheet>header span,.cart-sheet>header strong{display:block}.cart-sheet>header span{color:var(--muted);font-size:10px}.cart-sheet>header strong{margin-top:2px;font-size:23px}.cart-sheet>header button{border:0;color:var(--red);background:transparent;font-size:10px;font-weight:850}.cart-list{display:flex;flex-direction:column;gap:8px;margin:14px 0}.cart-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:9px;border:1px solid var(--line);border-radius:14px;padding:10px;background:white}.cart-row>div:first-child strong,.cart-row>div:first-child span{display:block}.cart-row>div:first-child strong{font-size:11px}.cart-row>div:first-child span{margin-top:3px;color:var(--muted);font-size:8px}.cart-row>b{font-size:11px}.cart-row>input{grid-column:1/-1;min-height:36px;border:0;border-top:1px solid #eee7df;border-radius:0;padding:8px 0 0;box-shadow:none;font-size:10px}.qty{display:flex;align-items:center;gap:7px}.qty button{display:grid;place-items:center;width:27px;height:27px;border:0;border-radius:8px;color:var(--orange-dark);background:var(--orange-soft);font-weight:900}.qty b{font-size:11px}.cart-sheet label{font-size:10px}.cart-sheet input,.cart-sheet textarea{font-size:13px}.cart-hint{margin:18px 0;border:1px dashed #d3c5b8;border-radius:14px;padding:16px;color:var(--muted);font-size:11px;text-align:center}
.bottom-nav { position:fixed; z-index:40; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(3,1fr); min-height:66px; padding-bottom:env(safe-area-inset-bottom); border-top:1px solid #e0d5ca; background:#fffdf9f5; box-shadow:0 -9px 30px #3d2a1b15; backdrop-filter:blur(14px); }.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;color:#897d73;background:transparent;font-size:9px;font-weight:750}.bottom-nav button span{font-size:21px;line-height:1}.bottom-nav button.active{color:var(--orange)}
.toast { position:fixed; z-index:90; top:78px; right:14px; left:14px; border-radius:13px; padding:12px 14px; color:#236946; background:#e1f4e9; box-shadow:0 12px 35px #34201625; font-size:12px;font-weight:750;animation:slide .2s ease }.spinner{display:inline-block;width:14px;height:14px;vertical-align:-2px;border:2px solid #ffffff66;border-top-color:white;border-radius:50%;animation:spin .8s linear infinite}.turn{display:inline-block;animation:spin 1s linear infinite}
.dialog-backdrop{position:fixed;z-index:100;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-top:20px;background:#21191499;backdrop-filter:blur(5px)}.dialog{position:relative;width:min(520px,100%);max-height:89vh;overflow:auto;border-radius:24px 24px 0 0;padding:24px 17px calc(24px + env(safe-area-inset-bottom));background:var(--paper);box-shadow:0 -25px 70px #1e130d44}.dialog-close{position:absolute;top:15px;right:15px;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:11px;color:#75695f;background:#eee8e1;font-size:22px}.dialog .eyebrow{margin:0}.dialog h2{margin:4px 0 14px;font-size:24px}.dialog-status{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.dialog-status>strong{font-size:18px}.dialog ul{margin:0 0 15px;padding:0;list-style:none}.dialog li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:7px;padding:11px 0;border-bottom:1px solid #eee6df;font-size:11px}.dialog li span strong,.dialog li span small{display:block}.dialog li span small{margin-top:3px;color:var(--orange-dark);font-size:8px}.dialog li em{font-style:normal;font-weight:800}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes slide{from{opacity:0;transform:translateY(-8px)}}
@media(min-width:560px){.tables-grid{grid-template-columns:repeat(3,1fr)}.products-grid{grid-template-columns:repeat(3,1fr)}.dialog{margin-bottom:20px;border-radius:24px}.bottom-nav{right:50%;left:50%;width:min(520px,100%);transform:translateX(-50%);border:1px solid #e0d5ca;border-bottom:0;border-radius:20px 20px 0 0}}