html, body.od-body { max-width: none !important; width: 100% !important; min-height: 100%; margin: 0; }
.od-body { background: #f4f0ff; color: #1a1228; font-family: "Noto Sans TC", "PingFang HK", "Microsoft JhengHei", sans-serif; }
html[data-theme="dark"] .od-body { background: #0f0a1a; color: #f4f0ff; }
.od-top { position: sticky; top: 0; z-index: 8; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: #5B21B6; color: #fff; }
.od-top b { font-family: Outfit, "Noto Sans TC", sans-serif; font-size: 18px; }
.od-top small { display: block; opacity: .85; font-weight: 400; font-size: 12px; }
.od-tabs { display: flex; gap: 8px; padding: 10px 16px 0; }
.od-tabs b { flex: 1; text-align: center; padding: 10px 8px; border-radius: 14px; background: #fff; cursor: pointer; }
html[data-theme="dark"] .od-tabs b { background: #2a2040; }
.od-tabs b.on { background: #2563EB; color: #fff; }
.od-cats { display: flex; gap: 8px; padding: 10px 16px 0; overflow-x: auto; }
.od-cats b { flex: 0 0 auto; padding: 8px 14px; border-radius: 16px; background: #fff; cursor: pointer; }
html[data-theme="dark"] .od-cats b { background: #2a2040; }
.od-cats b.on { background: #5B21B6; color: #fff; }
.od-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px 16px 140px; }
.od-dish { border: 0; border-radius: 16px; padding: 14px 12px; text-align: left; background: #fff; color: inherit; }
html[data-theme="dark"] .od-dish { background: #1c142c; }
.od-dish small { display: block; margin-top: 6px; color: #2563EB; font-family: Outfit, sans-serif; }
.od-dish.set small { color: #15803d; }
.od-cart { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; box-shadow: 0 -8px 24px rgba(91,33,182,.15); padding: 12px 16px 20px; }
html[data-theme="dark"] .od-cart { background: #1c142c; }
.od-cart .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.od-cart button.btn { margin-top: 8px; }
.line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #eee; gap: 8px; }
html[data-theme="dark"] .line { border-color: #3b2a5c; }
.line button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f3e8ff; color: #5B21B6; }
.howto { margin: 10px 16px 0; padding: 10px 12px; border-radius: 12px; background: #fff; color: #4c1d95; font-size: 13px; line-height: 1.45; }
html[data-theme="dark"] .howto { background: #2a2040; color: #e9d5ff; }
.flav { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.flav b { border: 1px solid #7c3aed; border-radius: 14px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.flav b.on { background: #7c3aed; color: #fff; }
.od-mask { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; z-index: 40; }
.od-dlg { background: #fff; color: #111; width: 100%; border-radius: 20px 20px 0 0; padding: 20px 16px 28px; }
html[data-theme="dark"] .od-dlg { background: #1c142c; color: #f4f0ff; }
.od-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
#toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 100px; background: rgba(0,0,0,.8); color: #fff; padding: 10px 16px; border-radius: 20px; z-index: 60; display: none; }
.field { margin: 10px 0; }
.field input { width: 100%; border: 1px solid #ddd; border-radius: 10px; padding: 10px; }
html[data-theme="dark"] .field input { background: #2a2040; border-color: #3b2a5c; color: #fff; }
.badge { display: inline-block; background: #f59e0b; color: #111; border-radius: 8px; padding: 1px 6px; font-size: 11px; }
@media (min-width: 720px) {
  .od-grid { grid-template-columns: repeat(3, 1fr); max-width: 860px; margin: 0 auto; }
  .od-top, .od-tabs, .od-cats, .howto { max-width: 860px; margin-left: auto; margin-right: auto; }
  .od-cart { left: 50%; right: auto; width: min(860px, 100%); max-width: 860px; margin: 0; transform: translateX(-50%); }
}