:root{
  --bg:#f7f7f8;--card:#fff;--text:#17181c;--muted:#6b7280;--line:#e5e7eb;
  --brand:#ef5b2a;--brand-dark:#d94c1f;--danger:#b42318;--shadow:0 8px 24px rgba(0,0,0,.07)
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}
.page{width:min(1180px,calc(100% - 32px));margin:32px auto}
.narrow{width:min(520px,calc(100% - 32px));margin:64px auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.center{text-align:center}
.muted{color:var(--muted)}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:800;color:var(--brand)}
h1,h2,h3,p{margin-top:0}
.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;background:var(--brand);color:#fff;font-weight:800;padding:12px 18px;text-decoration:none;cursor:pointer}
.button:hover{background:var(--brand-dark)}
.full{width:100%}
.danger-button{border:0;border-radius:12px;background:#fee4e2;color:var(--danger);font-weight:800;padding:11px 16px;cursor:pointer}
.danger-link,.link-button{background:none;border:0;color:var(--danger);font-weight:700;cursor:pointer;padding:8px}
.link-button{color:#fff}
label{display:grid;gap:7px;font-weight:700;font-size:14px}
input,textarea,select{width:100%;border:1px solid #d0d5dd;border-radius:10px;padding:11px 12px;background:#fff;font:inherit}
textarea{min-height:90px;resize:vertical}
.stack{display:grid;gap:14px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.two-col.compact{gap:12px}
.checkbox{display:flex;align-items:center;gap:8px;padding-top:26px}
.checkbox input{width:auto}
.alert{background:#fff2f0;border:1px solid #ffccc7;color:#a61d24;padding:12px;border-radius:10px;margin-bottom:16px}
.customer-header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px max(16px,calc((100vw - 1180px)/2));background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.customer-header h1{margin:3px 0}
.customer-header p{margin:0;color:var(--muted)}
.menu-section{margin-bottom:34px}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.food-card{overflow:hidden;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.food-card img,.admin-item-preview img{width:100%;height:210px;object-fit:cover;display:block}
.food-body{padding:16px}
.food-top{display:flex;justify-content:space-between;gap:14px}
.food-body p{color:var(--muted);min-height:44px}
.image-placeholder{height:210px;display:grid;place-items:center;font-size:64px;background:#f1f3f5}
.sold-out{opacity:.55}
.pill{display:inline-block;border-radius:999px;padding:6px 10px;background:#f2f4f7;font-size:12px;font-weight:800;text-transform:capitalize}
.drawer{position:fixed;inset:0;background:rgba(0,0,0,.38);z-index:30;display:flex;justify-content:flex-end}
.drawer.hidden{display:none}
.drawer-panel{width:min(440px,100%);height:100%;background:#fff;padding:22px;overflow:auto}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
.icon-btn{border:0;background:#f2f4f7;border-radius:50%;width:38px;height:38px;cursor:pointer}
.cart-row{display:flex;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.qty{display:flex;gap:8px;align-items:center}
.qty button{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:#fff}
.cart-total{display:flex;justify-content:space-between;font-size:20px;padding:18px 0}
.success-icon{width:72px;height:72px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;background:#dcfae6;color:#067647;font-size:36px;font-weight:900}
.admin-nav{display:flex;gap:8px;align-items:center;padding:14px max(16px,calc((100vw - 1180px)/2));background:#111827;color:#fff;position:sticky;top:0;z-index:20}
.admin-nav a{padding:9px 12px;text-decoration:none;font-weight:700}
.admin-nav form{margin-left:auto}
.admin-title{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;text-decoration:none;box-shadow:var(--shadow)}
.stat-card span{color:var(--muted)}
.stat-card strong{display:block;font-size:38px;margin-top:8px}
.list{margin-top:16px;border-top:1px solid var(--line)}
.list-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.upload-box{padding:14px;border:1px dashed #c8ccd4;border-radius:12px;display:grid;gap:10px}
.menu-admin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:24px}
.admin-item-preview{border-radius:14px;overflow:hidden}
.inline-form{display:flex;gap:10px;align-items:end}
.qr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.qr-card img{width:min(260px,100%)}
.break-all{word-break:break-all}
.small{font-size:12px;color:var(--muted)}
.orders-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.order-card{border-top:5px solid #98a2b3}
.status-new{border-top-color:#f79009}.status-preparing{border-top-color:#2e90fa}.status-ready{border-top-color:#12b76a}.status-cancelled{opacity:.6}
.order-head,.order-line,.order-total{display:flex;justify-content:space-between;gap:12px}
.order-lines{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:12px 0}
.order-line{padding:5px 0}
.order-total{font-size:18px;margin-bottom:14px}

@media(max-width:800px){
  .menu-grid,.stats,.qr-grid,.orders-grid,.menu-admin-grid,.two-col{grid-template-columns:1fr}
  .customer-header{position:static}
  .admin-nav{overflow:auto}
  .inline-form{flex-direction:column;align-items:stretch}
  .checkbox{padding-top:0}
}
