:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #27201d; background: #fff8ed; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at top, #ffe5bc, #fff8ed 40rem); }
button, input { font: inherit; }
button { border: 0; border-radius: 12px; cursor: pointer; color: white; background: #9d3327; font-weight: 700; min-height: 44px; padding: .7rem 1rem; }
button:active { transform: scale(.98); }
.shell { width: min(100%, 960px); min-height: 100svh; margin: auto; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.card { background: rgba(255,255,255,.88); border: 1px solid #efdbc2; border-radius: 24px; box-shadow: 0 16px 40px rgba(92,44,24,.1); }
.login-card { width: min(100%, 400px); margin: 8vh auto 0; padding: 2rem; text-align: center; }
.brand-icon { width: 88px; height: 88px; object-fit: contain; background: #9d3327; border-radius: 18px; padding: 10px; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: .2rem; font-size: clamp(1.6rem, 6vw, 2.2rem); } h2 { font-size: 1.15rem; margin-bottom: 0; }
.login-card > p { color: #6c5a52; }
form { display: grid; gap: 1rem; margin: 1.5rem 0; text-align: left; }
label { display: grid; gap: .4rem; font-weight: 600; }
input { min-height: 46px; border: 1px solid #cdb8a8; border-radius: 10px; background: white; padding: .65rem .75rem; }
input:focus { outline: 3px solid #f5bd73; border-color: #9d3327; }
.message { min-height: 1.2em; color: #9d3327; font-weight: 600; } .fine-print { font-size: .82rem; line-height: 1.4; }
.app-header, .order-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0 1rem; }
.eyebrow { display: block; color: #9d3327; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.header-actions { display: flex; gap: .5rem; } .secondary { color: #633028; background: #f5dfc6; }
.sections { display: grid; gap: 1.5rem; } .section h2 { margin-bottom: .7rem; }
.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: .7rem; }
.table-card { min-height: 100px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; background: #3c8560; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.table-card.open { background: #b64735; }.table-name { font-size: 1.1rem; }.table-state { font-size: .76rem; font-weight: 600; opacity: .9; }
.order-sheet { position: fixed; inset: 0; z-index: 2; overflow: auto; background: #fff8ed; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.order-sheet > * { max-width: 960px; margin-left: auto; margin-right: auto; }.icon-button { width: 44px; padding: 0; font-size: 2rem; line-height: 1; background: #f5dfc6; color: #633028; }
.order-items { display: grid; gap: .5rem; margin-bottom: 1.5rem; }.order-empty { color: #6c5a52; }.order-item { display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid #ead8c3; }.order-item small { color: #6c5a52; }
.quantity { display: flex; align-items: center; gap: .4rem; grid-row: span 2; }.quantity button { width: 34px; min-height: 34px; padding: 0; border-radius: 9px; }.quantity span { width: 1.3rem; text-align: center; font-weight: 700; }
.catalog-header { display: flex; align-items: center; gap: 1rem; justify-content: space-between; border-top: 2px solid #e6cdaa; padding-top: 1rem; }.catalog-header input { width: min(52vw, 300px); }.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin-top: 1rem; }.product { color: #42251f; text-align: left; background: white; border: 1px solid #ecd4b7; box-shadow: 0 2px 5px rgba(85,50,30,.06); }.product small { display: block; color: #876f63; font-weight: 600; margin-top: .25rem; }
@media (min-width: 640px) { .order-sheet { padding: 2rem; } }