* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin: 0; min-height: 100vh; color: #2b2118; background: linear-gradient(180deg,#fff8f0 0%, #fff1e0 60%, #ffe9d0 100%); background-attachment: fixed; background-repeat: no-repeat; }
body:before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' fill-opacity='0.08' stroke='%236b4226' stroke-width='2'%3E%3Cpath d='M30 20c8 0 14 6 14 14s-6 14-14 14S16 42 16 34 22 20 30 20z'/%3E%3Cpath d='M90 70c8 0 14 6 14 14s-6 14-14 14-14-6-14-14 6-14 14-14z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 220px; z-index: 0; }
body.modal-open { overflow: hidden; }
.card { position: relative; z-index: 1; max-width: 1200px; margin: 1.2rem auto; background: #fff; border-radius: 14px; padding: 1.2rem 1.4rem; border: 1px solid #efe0cf; box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.center { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1rem; }
.forms { display:flex; flex-direction:column; gap:1rem; width:100%; max-width:420px; }
.tabs { display:flex; gap:.5rem; }
.tab { flex:1; background:#f3e3cf; color:#6b4226; border:1px solid #e2c7a5; padding:.6rem; border-radius:10px; cursor:pointer; }
.tab.active { background:#6b4226; color:#fff; }
.tab-panels { background:#fff; border:1px solid #f0e0cd; padding:1rem; border-radius:10px; }
.panel { display:none; flex-direction:column; gap:.6rem; }
.panel.active { display:flex; }
form { display:flex; flex-direction:column; gap:.5rem; min-width:220px; }
input, select, button { padding:.6rem .9rem; border-radius:999px; border:1px solid #e2c7a5; }
button { background:#6b4226; color:#fff; cursor:pointer; transition: transform .05s ease, box-shadow .2s, background-color .2s; }
button:hover { box-shadow: 0 4px 10px rgba(107,66,38,.35); }
button:active { transform: translateY(1px); }
table { width:100%; border-collapse:separate; border-spacing:0; margin-top:.8rem; table-layout:fixed; }
th, td { padding:.7rem .6rem; border-bottom:1px solid #f0e0cd; text-align:center; }
td:nth-child(6), td:nth-child(7) { text-align:right; padding-right: .9rem; }
thead th { position: sticky; top: 72px; background:#fff; z-index: 2; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:1rem; z-index:1000; }
.modal-content { background:#fff; border-radius:12px; width:100%; max-width:560px; border:1px solid #efe0cf; box-shadow:0 10px 30px rgba(0,0,0,.2); }
.modal-header { display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:1px solid #f0e0cd; }
.modal-body { display:flex; flex-direction:column; gap:.8rem; padding:1rem; }
.stack { display:flex; flex-direction:column; gap:.8rem; }
.modal-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.5rem; }
.icon { background:#f6e8d8; color:#6b4226; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:.8rem; }
.http { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding:.6rem; border:1px dashed #e6caa6; background:#fff8ef; margin-top:.6rem; white-space:pre-wrap; border-radius:8px; max-height:220px; overflow:auto; }
/* Toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; display:flex; flex-direction:column; gap:.5rem; z-index: 1100; }
.toast { padding:.6rem .9rem; border-radius:12px; color:#2b2118; background:#ffffff; border:1px solid #efe0cf; box-shadow:0 8px 20px rgba(0,0,0,.12); min-width: 220px; }
.toast.ok { border-left:5px solid #7ecb7e; }
.toast.warn { border-left:5px solid #ffcc66; }
.toast.err { border-left:5px solid #ff8a8a; }
header { display:flex; justify-content:space-between; align-items:center; padding:1rem; border-bottom:1px solid #efe0cf; position:sticky; top:0; background:#fff8f0; z-index:10; }
.chip { display:inline-flex; align-items:center; max-width:420px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:.35rem .7rem; border-radius:999px; background:#f6e8d8; border:1px solid #ead4bd; color:#6b4226; font-size:.95rem; box-shadow:inset 0 -2px 0 rgba(0,0,0,.03); }
tbody tr:nth-child(odd) { background:#fffdf8; }
tbody tr:hover { background:#fff6ea; }
.badge { display:inline-block; padding:.25rem .5rem; border-radius:999px; font-size:.85rem; border:1px solid transparent; }
.badge.pending { background:#fff3cd; border-color:#ffe08a; color:#8a6a1a; }
.badge.preparing { background:#dff3fe; border-color:#9fdaff; color:#0b537a; }
.badge.ready { background:#e6f6d5; border-color:#b8e58a; color:#3a6b22; }
.badge.served { background:#e7e0ff; border-color:#c7b7ff; color:#432f9e; }
.badge.cancelled { background:#ffe1e1; border-color:#ffb3b3; color:#7d2222; }
.row { display:flex; gap:.5rem; align-items:center; }
.space { justify-content:space-between; }