:root{
  --bg:#E7E2D8;
  --surface:#F6F3EC;
  --surface-2:#EFEAE0;
  --ink:#241F1A;
  --ink-soft:#6B6255;
  --ink-faint:#9B917F;
  --accent:#7A3B1E;
  --accent-2:#C0793D;
  --good:#4F6144;
  --good-bg:#E4E9DC;
  --warn:#A9772B;
  --warn-bg:#F1E5C8;
  --bad:#9C3B32;
  --bad-bg:#F2DAD5;
  --line:#D8D1C1;
  --radius:2px;
  --serif:'Noto Serif TC', serif;
  --sans:'Noto Sans TC', sans-serif;
  --mono:'Space Mono', monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.app{max-width:1180px;margin:0 auto;padding:0 20px 80px;}

/* ---------- Header ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 0 16px;border-bottom:1px solid var(--line);
  margin-bottom:22px;flex-wrap:wrap;gap:14px;
}
.brand{display:flex;align-items:baseline;gap:10px;}
.brand-mark{
  font-family:var(--serif);font-weight:900;font-size:26px;letter-spacing:2px;color:var(--ink);
}
.brand-sub{font-size:12px;color:var(--ink-soft);letter-spacing:3px;text-transform:uppercase;}
.mode-switch{
  display:inline-flex;border:1px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--surface);
}
.mode-switch button{
  font-family:var(--sans);font-weight:700;font-size:13px;padding:9px 18px;border:none;background:transparent;
  color:var(--ink);cursor:pointer;letter-spacing:1px;transition:.15s;
}
.mode-switch button.active{background:var(--ink);color:var(--surface);}

/* ---------- Status banner ---------- */
.banner{
  padding:12px 16px;border-radius:var(--radius);font-size:13.5px;font-weight:500;margin-bottom:20px;
  display:flex;align-items:center;gap:10px;border:1px solid transparent;
}
.banner.warn{background:var(--bad-bg);color:var(--bad);border-color:#e1beb6;}
.banner.ok{background:var(--good-bg);color:var(--good);border-color:#cdd8c2;}
.banner .dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;}

/* ================= CUSTOMER VIEW ================= */
.section-title{
  font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:1px;color:var(--ink);
  margin:28px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line);
}
.cat-tabs{display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.cat-tabs button{
  font-family:var(--sans);font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;
}
.cat-tabs button.active{background:var(--accent);border-color:var(--accent);color:#fff;}

.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.item-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
  display:flex;flex-direction:column;gap:10px;position:relative;
}
.item-card.soldout{opacity:.5;}
.item-name{font-family:var(--serif);font-weight:700;font-size:16px;}
.item-price{font-family:var(--mono);font-size:13px;color:var(--accent);}
.soldout-tag{
  position:absolute;top:12px;right:12px;font-size:11px;font-weight:700;color:var(--bad);
  background:var(--bad-bg);padding:2px 8px;border-radius:999px;
}
.opt-row{display:flex;flex-direction:column;gap:4px;}
.opt-row label{font-size:11px;color:var(--ink-faint);letter-spacing:.5px;text-transform:uppercase;}
.opt-row select{
  font-family:var(--sans);font-size:13px;padding:7px 8px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);color:var(--ink);
}
.add-btn{
  margin-top:4px;font-family:var(--sans);font-weight:700;font-size:13px;padding:9px;border:1px solid var(--ink);
  background:transparent;color:var(--ink);border-radius:var(--radius);cursor:pointer;transition:.12s;
}
.add-btn:hover{background:var(--ink);color:var(--surface);}
.add-btn:disabled{opacity:.4;cursor:not-allowed;}

/* Cart */
.cart-panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-top:26px;
}
.cart-empty{color:var(--ink-faint);font-size:13px;text-align:center;padding:24px 0;}
.cart-line{
  display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line);
  font-size:13.5px;
}
.cart-line:last-of-type{border-bottom:none;}
.cart-line-main{font-weight:700;}
.cart-line-opts{color:var(--ink-soft);font-size:12px;margin-top:2px;}
.cart-line-remove{background:none;border:none;color:var(--bad);cursor:pointer;font-size:12px;text-decoration:underline;}
.cart-total{
  display:flex;justify-content:space-between;font-family:var(--serif);font-weight:700;font-size:17px;
  padding-top:12px;margin-top:6px;
}

.field-block{margin-top:18px;}
.field-block > label{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:8px;}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;}
.pill-row button{
  font-family:var(--sans);font-size:13px;font-weight:600;padding:8px 14px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);border-radius:999px;cursor:pointer;
}
.pill-row button.active{background:var(--ink);border-color:var(--ink);color:var(--surface);}
.time-input{
  font-family:var(--mono);font-size:14px;padding:9px 10px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);color:var(--ink);
}
.estimate-note{font-size:12.5px;color:var(--ink-soft);margin-top:6px;}

.submit-btn{
  width:100%;margin-top:20px;font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:1px;
  padding:14px;border:none;border-radius:var(--radius);background:var(--accent);color:#fff;cursor:pointer;
}
.submit-btn:disabled{background:var(--ink-faint);cursor:not-allowed;}

/* Confirmation */
.confirm-box{
  background:var(--surface);border:1px solid var(--ink);border-radius:var(--radius);padding:32px;text-align:center;margin-top:22px;
}
.confirm-num{font-family:var(--mono);font-size:44px;font-weight:700;letter-spacing:4px;color:var(--accent);margin:10px 0;}
.confirm-sub{font-size:13px;color:var(--ink-soft);}
.confirm-new{
  margin-top:20px;background:none;border:1px solid var(--ink);padding:9px 18px;border-radius:999px;cursor:pointer;
  font-weight:700;font-size:13px;
}

/* ================= STAFF VIEW ================= */
.staff-controls{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.staff-count{font-family:var(--mono);font-size:13px;color:var(--ink-soft);}
.pause-toggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;cursor:pointer;user-select:none;}
.pause-toggle input{width:16px;height:16px;}

.queue-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;}
.ticket{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:0;overflow:hidden;position:relative;
}
.ticket.new-flash{animation:flash 1.4s ease-out 2;}
@keyframes flash{0%{box-shadow:0 0 0 3px var(--accent-2);}100%{box-shadow:0 0 0 0px transparent;}}
.ticket-perf{
  height:8px;
  background-image:radial-gradient(circle,var(--bg) 3px,transparent 3.2px);
  background-size:14px 14px;background-position:0 -4px;background-color:var(--surface);
}
.ticket-head{
  display:flex;justify-content:space-between;align-items:center;padding:12px 16px 8px;border-bottom:1px dashed var(--line);
}
.ticket-id{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:1px;}
.ticket-time{font-family:var(--mono);font-size:12px;color:var(--ink-soft);text-align:right;}
.ticket-body{padding:12px 16px;}
.ticket-item{font-size:13.5px;margin-bottom:8px;}
.ticket-item-name{font-weight:700;}
.ticket-item-opts{color:var(--ink-soft);font-size:12px;}
.ticket-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;}
.badge{font-size:11px;font-weight:700;padding:3px 8px;border-radius:999px;}
.badge.paid{background:var(--good-bg);color:var(--good);}
.badge.unpaid{background:var(--warn-bg);color:var(--warn);}
.badge.asap{background:var(--surface-2);color:var(--ink-soft);border:1px solid var(--line);}
.ticket-foot{padding:12px 16px 16px;}
.status-btn{
  width:100%;font-family:var(--sans);font-weight:700;font-size:13px;padding:10px;border:none;border-radius:var(--radius);
  cursor:pointer;
}
.status-btn.new{background:var(--ink);color:var(--surface);}
.status-btn.making{background:var(--warn);color:#fff;}
.status-btn.done{background:var(--good-bg);color:var(--good);cursor:default;}
.empty-queue{color:var(--ink-faint);text-align:center;padding:60px 0;font-size:14px;}

/* ================= MENU MANAGEMENT (staff) ================= */
.menu-admin-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);}
.menu-admin-table th{
  text-align:left;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-faint);
  padding:10px 12px;border-bottom:1px solid var(--line);font-weight:700;
}
.menu-admin-table td{padding:8px 12px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle;}
.menu-admin-table tr:last-child td{border-bottom:none;}
.menu-admin-table input[type="text"], .menu-admin-table input[type="number"], .menu-admin-table select{
  font-family:var(--sans);font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface-2);color:var(--ink);width:100%;
}
.menu-admin-table input[type="number"]{width:80px;}
.row-actions{display:flex;gap:6px;white-space:nowrap;}
.row-actions button{
  font-family:var(--sans);font-size:12px;font-weight:700;padding:6px 10px;border-radius:var(--radius);cursor:pointer;border:none;
}
.btn-save{background:var(--good-bg);color:var(--good);}
.btn-delete{background:var(--bad-bg);color:var(--bad);}
.soldout-check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-soft);}
.new-item-form{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
}
.new-item-form label{font-size:11px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:4px;}
.new-item-form .full-row{grid-column:1/-1;}
.add-item-btn{
  font-family:var(--sans);font-weight:700;font-size:13px;padding:10px 16px;border:none;border-radius:var(--radius);
  background:var(--accent);color:#fff;cursor:pointer;
}
.staff-tabs{display:flex;gap:8px;margin-bottom:20px;}
.staff-tabs button{
  font-family:var(--sans);font-size:13px;font-weight:700;padding:8px 16px;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);cursor:pointer;
}
.staff-tabs button.active{background:var(--ink);border-color:var(--ink);color:var(--surface);}

@media (max-width:640px){
  .app{padding:0 14px 60px;}
  .confirm-num{font-size:34px;}
  .menu-admin-table{display:block;overflow-x:auto;}
}