:root{font-family:"Segoe UI",system-ui,sans-serif;color:#152e29;background:#ccdfd2;color-scheme:light}
*{box-sizing:border-box}body{margin:0}main{height:100dvh;min-height:320px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 45% 37%,#f0f2da,#bdcebf)}
canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}
header,aside,nav,footer{position:absolute;background:#fcfaf0;border:1px solid #d9dfcb;box-shadow:0 7px 24px #213b3220}
header{top:18px;left:20px;border-radius:14px;padding:10px 15px;display:flex;align-items:center;gap:10px}
.logo{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#ffcf82;background:#254d3e}header strong{display:block}header small{color:#516860}
aside{right:20px;top:18px;width:255px;border-radius:15px;overflow:hidden}.section{padding:15px 16px}.section+.section{border-top:1px solid #e0e5d8}
p,h1,h2{margin:0}h1{font-size:23px;letter-spacing:-.6px}h2{font-size:18px;margin-bottom:5px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.15em;color:#486952;margin-bottom:4px}.muted{color:#516860;font-size:13px;line-height:1.45}
label{font-weight:650;font-size:13px;display:block;margin-bottom:6px}select{width:100%;padding:8px;border:1px solid #ccd7c9;border-radius:7px;color:inherit;background:white;font:inherit;font-size:13px}
dl{margin:12px 0 0;font-size:13px;display:grid;grid-template-columns:1fr auto;gap:5px}dd{margin:0;font-weight:700}
nav{left:20px;bottom:20px;border-radius:11px;display:flex;padding:4px;gap:4px}button{border:0;color:#213d33;background:#ebefe3;border-radius:7px;width:40px;height:40px;font:700 20px system-ui;cursor:pointer}button:hover{background:#dbe9d9}
footer{left:50%;bottom:20px;transform:translateX(-50%);border-radius:20px;padding:8px 14px;white-space:nowrap;font-size:12px;color:#516860}footer span{padding:0 4px}
@media(max-width:700px){header{top:9px;left:9px;padding:6px 10px}.logo{width:30px;height:30px}aside{top:auto;left:9px;right:9px;bottom:9px;width:auto}.section{padding:8px 12px}aside>.section:first-child,footer{display:none}aside>.section:nth-child(2){display:flex;align-items:center;gap:8px}label{margin:0}nav{left:auto;right:9px;top:9px;bottom:auto;flex-direction:column}button{width:36px;height:36px}#detail dl{margin-top:5px}}

#order{margin-top:14px;padding-top:11px;border-top:1px solid #e0e5d8}
#order h3{margin:0;font-size:14px}#order label{margin:9px 0 5px}
.order-row{display:flex;align-items:stretch;gap:7px}
#quantity{width:64px;min-width:0;padding:6px;border:1px solid #ccd7c9;border-radius:7px;font:inherit;color:inherit;background:white}
.order-button{width:auto;height:auto;min-height:36px;flex:1;padding:6px 8px;background:#254d3e;color:#fff;font:600 13px system-ui}
.order-button:hover{background:#30604d}
#order-total,.order-status{margin-top:5px}.order-status{font-size:13px;color:#234e3e}.order-status:empty{display:none}
@media(max-width:700px){aside{max-height:51dvh;overflow:auto}#order{margin-top:7px;padding-top:7px}}

[hidden]{display:none!important}
#edit-toggle,#editor button{width:auto;height:auto;padding:8px 10px;font:650 12px system-ui}
#edit-toggle[aria-pressed=true],#editor button[type=submit]{background:#254d3e;color:#fff}
#editor{position:absolute;top:18px;right:20px;width:255px;max-height:calc(100% - 40px);overflow:auto;padding:14px;background:#fcfaf0;border:1px solid #d9dfcb;border-radius:15px;box-shadow:0 7px 24px #213b3220}
main:has(#editor:not([hidden])) aside{display:none}
#edit-message{font-size:13px;color:#426155;min-height:1em;margin-bottom:8px}
#editor form>label{margin-top:8px}
#editor input:not([type=checkbox]){width:100%;padding:6px;border:1px solid #ccd7c9;border-radius:6px;font:13px system-ui}
#editor input[type=file]{background:white}
.clear-image{display:flex;align-items:center;gap:6px}
.edit-actions{display:flex;flex-wrap:wrap;gap:6px}
.edit-backup{margin-top:12px;padding-top:10px;border-top:1px solid #d9dfcb;align-items:center}
.edit-backup label{margin:0}
@media(max-width:700px){header{max-width:calc(100% - 55px);flex-wrap:wrap;gap:4px 7px}#edit-toggle{padding:5px 7px}#editor{top:auto;bottom:9px;left:9px;right:9px;width:auto;max-height:45dvh}#editor form>label{margin-top:5px}}

aside{max-height:calc(100dvh - 36px);overflow:auto}
#sales{margin-top:13px;padding-top:10px;border-top:1px solid #e0e5d8}
#sales h3{margin:0 0 8px;font-size:14px}
#bread-price{width:72px;min-width:0;padding:6px;border:1px solid #ccd7c9;border-radius:7px;color:inherit;font:inherit}
#demand,#sales-notice{margin-top:6px}
#day-toggle{margin-top:9px;width:100%}
@media(max-width:700px){aside{max-height:51dvh}}