:root {
  --mocbt-primary: #0B6E99;
  --mocbt-secondary: #0A2540;
  --mocbt-bg: #f3f7fb;
  --mocbt-surface: #ffffff;
  --mocbt-text: #102a43;
  --mocbt-muted: #627d98;
  --mocbt-border: #d9e2ec;
  --mocbt-danger: #c81e1e;
  --mocbt-warn: #b44d12;
  --mocbt-ok: #0f7b4a;
  --mocbt-shadow: 0 12px 40px rgba(10, 37, 64, 0.08);
  --mocbt-radius: 18px;
  --mocbt-font: "Manrope", sans-serif;
  --mocbt-display: "Sora", sans-serif;
}

* { box-sizing: border-box; }
body.mocbt-body, body.mocbt-auth-body, body.mocbt-pos-body {
  margin: 0;
  font-family: var(--mocbt-font);
  color: var(--mocbt-text);
  background:
    radial-gradient(circle at top left, rgba(11,110,153,.12), transparent 35%),
    linear-gradient(180deg, #e8f3f9 0%, var(--mocbt-bg) 40%, #eef4f8 100%);
  min-height: 100vh;
}

h1,h2,h3 { font-family: var(--mocbt-display); letter-spacing: -0.02em; }

.mocbt-shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.mocbt-sidebar {
  background: linear-gradient(180deg, var(--mocbt-secondary), #123556);
  color: #fff; padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem;
}
.mocbt-brand-mark { font-family: var(--mocbt-display); font-size: 1.5rem; font-weight: 800; display:block; }
.mocbt-brand-sub { opacity: .75; font-size: .85rem; }
.mocbt-nav { display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.mocbt-nav a {
  color: rgba(255,255,255,.88); text-decoration: none; padding: .7rem .85rem; border-radius: 12px;
}
.mocbt-nav a.is-active, .mocbt-nav a:hover { background: rgba(255,255,255,.12); }
.mocbt-sidebar-foot { border-top: 1px solid rgba(255,255,255,.15); padding-top: .8rem; font-size: .9rem; }
.mocbt-sidebar-foot a { color: #9ed7ef; }
.mocbt-main { padding: 1.25rem 1.5rem 2rem; }
.mocbt-topbar h1 { margin: 0 0 1rem; font-size: 1.6rem; }
.mocbt-content { display: grid; gap: 1rem; }

.mocbt-panel, .mocbt-auth-card, .mocbt-stat {
  background: var(--mocbt-surface); border: 1px solid var(--mocbt-border);
  border-radius: var(--mocbt-radius); box-shadow: var(--mocbt-shadow);
}
.mocbt-panel { padding: 1.1rem 1.2rem; }
.mocbt-panel-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.8rem; }
.mocbt-stats { display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: .9rem; }
.mocbt-stat { padding: 1rem 1.1rem; }
.mocbt-stat span { display:block; color: var(--mocbt-muted); font-size:.85rem; }
.mocbt-stat strong { font-size: 1.5rem; font-family: var(--mocbt-display); }
.mocbt-grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mocbt-muted { color: var(--mocbt-muted); }
.mocbt-list { list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.mocbt-list li { display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--mocbt-border); }
.mocbt-badge { display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:999px; font-size:.75rem; background:#e6f2f8; color: var(--mocbt-primary); }
.mocbt-badge.is-danger { background:#fde8e8; color: var(--mocbt-danger); }
.mocbt-badge.is-warn { background:#fff1e6; color: var(--mocbt-warn); }
.mocbt-badge.is-ok { background:#e3f8ef; color: var(--mocbt-ok); }
.mocbt-badge.is-muted { background:#eef2f6; color: var(--mocbt-muted); }

.mocbt-table { width:100%; border-collapse: collapse; }
.mocbt-table th, .mocbt-table td { text-align:left; padding:.7rem .4rem; border-bottom:1px solid var(--mocbt-border); vertical-align: top; }
.mocbt-table th { color: var(--mocbt-muted); font-size:.8rem; text-transform: uppercase; letter-spacing:.04em; }

.mocbt-btn, button.mocbt-btn {
  border: 0; border-radius: 12px; padding: .7rem 1rem; font-weight: 700; cursor: pointer;
  background: #e7eef5; color: var(--mocbt-secondary); font-family: inherit;
}
.mocbt-btn-primary { background: var(--mocbt-primary); color: #fff; }
.mocbt-btn-ghost { background: transparent; border: 1px solid var(--mocbt-border); }
.mocbt-btn-send {
  width: 100%; background: linear-gradient(135deg, var(--mocbt-primary), var(--mocbt-primary-sky, var(--mocbt-primary))); color:#fff;
  font-size: 1.05rem; padding: 1rem; margin-top: .6rem;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.mocbt-btn-send:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(11,110,153,.25); }
.mocbt-btn-send.is-loading { opacity: .7; pointer-events: none; }
.mocbt-btn:disabled { opacity: .6; cursor: not-allowed; }

.mocbt-form, .mocbt-inline-form { display:grid; gap: .75rem; margin-bottom: 1rem; }
.mocbt-form-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: .75rem; }
.mocbt-form label, .mocbt-inline-form label { display:grid; gap: .35rem; font-size: .9rem; }
.mocbt-form input, .mocbt-form select, .mocbt-inline-form input, .mocbt-inline-form select,
.mocbt-pos input, .mocbt-auth-card input {
  width: 100%; border: 1px solid var(--mocbt-border); border-radius: 12px; padding: .7rem .8rem; font: inherit;
  background: #fff;
}
.mocbt-check { display:flex !important; align-items:center; gap:.5rem; }
.mocbt-inline-form { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); align-items: end; }
.mocbt-msg { margin-top: .75rem; padding: .75rem; border-radius: 12px; background: #e8f3f9; }
.mocbt-thumb { max-height: 48px; display:block; margin-bottom:.35rem; }

.mocbt-auth-body { display:grid; place-items:center; padding: 1.5rem; }
.mocbt-auth-wrap { width: min(520px, 100%); }
.mocbt-auth-card { padding: 1.5rem; }
.mocbt-auth-brand {
  font-family: var(--mocbt-display); font-weight: 800; color: var(--mocbt-primary);
  letter-spacing: .08em; margin-bottom: .4rem;
}
.mocbt-tabs { display:flex; gap:.4rem; margin: 1rem 0; }
.mocbt-tabs button {
  flex:1; border:1px solid var(--mocbt-border); background:#fff; border-radius:999px; padding:.65rem; cursor:pointer;
}
.mocbt-tabs button.is-active { background: var(--mocbt-primary); color:#fff; border-color: transparent; }

.mocbt-pos-header {
  display:flex; justify-content:space-between; align-items:center; padding: .9rem 1rem;
  background: var(--mocbt-secondary); color:#fff;
}
.mocbt-pos-brand { font-family: var(--mocbt-display); margin-right: .75rem; }
.mocbt-pos-links a { color:#9ed7ef; margin-left: .8rem; text-decoration:none; }
.mocbt-pos-layout { display:grid; grid-template-columns: 1.7fr .9fr; min-height: calc(100vh - 58px); }
.mocbt-pos-menu { padding: 1rem; }
.mocbt-pos-filters { display:grid; gap: .75rem; margin-bottom: 1rem; }
.mocbt-cat-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.mocbt-cat-chips button {
  border:1px solid var(--mocbt-border); background:#fff; border-radius:999px; padding:.45rem .8rem; cursor:pointer;
}
.mocbt-cat-chips button.is-active { background: var(--mocbt-primary); color:#fff; border-color:transparent; }
.mocbt-menu-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .8rem;
}
.mocbt-menu-card {
  background:#fff; border:1px solid var(--mocbt-border); border-radius: 16px; padding: .75rem;
  display:grid; gap:.45rem; box-shadow: var(--mocbt-shadow);
}
.mocbt-menu-card-img {
  height: 90px; border-radius: 12px; background:
    linear-gradient(135deg, rgba(11,110,153,.2), rgba(10,37,64,.15));
  background-size: cover; background-position: center;
}
.mocbt-menu-card h3 { margin:0; font-size:1rem; }
.mocbt-menu-card-meta { display:flex; justify-content:space-between; gap:.5rem; color:var(--mocbt-muted); font-size:.85rem; }
.mocbt-pos-cart {
  border-left:1px solid var(--mocbt-border); background: rgba(255,255,255,.85); padding: 1rem;
  position: sticky; top:0; height: calc(100vh - 58px); overflow:auto;
}
.mocbt-cart-lines { display:grid; gap:.55rem; margin: .8rem 0; }
.mocbt-cart-line {
  display:grid; grid-template-columns: 1fr auto; gap:.35rem; padding:.65rem; border:1px solid var(--mocbt-border); border-radius:12px; background:#fff;
}
.mocbt-qty { display:flex; gap:.35rem; align-items:center; }
.mocbt-qty button { width:32px; height:32px; border-radius:8px; border:1px solid var(--mocbt-border); background:#fff; cursor:pointer; }
.mocbt-cart-total { display:flex; justify-content:space-between; font-size:1.15rem; font-family: var(--mocbt-display); }

.mocbt-kitchen-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: .9rem; }
.mocbt-order-card {
  border:1px solid var(--mocbt-border); border-radius:16px; padding: .9rem; background:#fff; display:grid; gap:.5rem;
}
.mocbt-order-card header { display:flex; justify-content:space-between; gap:.5rem; }
.mocbt-kitchen-actions { display:flex; flex-wrap:wrap; gap:.35rem; }

.mocbt-pair-box {
  background: #e8f3f9; border-radius: 16px; padding: 1rem; margin-bottom: 1rem; text-align:center;
}
.mocbt-pair-box strong { font-size: 2rem; letter-spacing: .2em; font-family: var(--mocbt-display); display:block; margin:.4rem 0; }

.mocbt-track-status {
  font-family: var(--mocbt-display); font-size: 1.4rem; color: var(--mocbt-primary); margin: .8rem 0;
}
.mocbt-track-countdown { font-size: 2.4rem; font-family: var(--mocbt-display); font-weight: 800; }
.mocbt-timeline { list-style:none; padding:0; display:grid; gap:.45rem; }
.mocbt-timeline li { padding:.55rem .7rem; border-radius:10px; background:#eef2f6; }
.mocbt-timeline li.is-done { background:#e3f8ef; }
.mocbt-timeline li.is-current { background:#dff1fa; font-weight:700; }

.mocbt-modal-backdrop {
  position:fixed; inset:0; background: rgba(10,37,64,.45); display:grid; place-items:center; z-index:50;
}
.mocbt-modal {
  background:#fff; border-radius:18px; padding:1.2rem; width:min(420px,92vw); box-shadow: var(--mocbt-shadow);
}
.mocbt-modal-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:1rem; }

@media (max-width: 960px) {
  .mocbt-shell { grid-template-columns: 1fr; }
  .mocbt-sidebar { position: sticky; top:0; z-index:10; }
  .mocbt-nav { display:flex; flex-direction:row; overflow:auto; }
  .mocbt-pos-layout { grid-template-columns: 1fr; }
  .mocbt-pos-cart { position: relative; height: auto; border-left:0; border-top:1px solid var(--mocbt-border); }
  .mocbt-grid-2 { grid-template-columns: 1fr; }
}

/* === MOCBT upgrade: payment, theme, motion === */
:root {
  --mocbt-primary-sky: #38BDF8;
  --mocbt-primary-dark: #0B6E99;
  --mocbt-accent: #38BDF8;
  --mocbt-dark: #0A2540;
  --mocbt-background: var(--mocbt-bg);
  --mocbt-success: var(--mocbt-ok);
  --mocbt-warning: var(--mocbt-warn);
}

body.mocbt-body, body.mocbt-auth-body, body.mocbt-pos-body {
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--mocbt-primary) 18%, transparent), transparent 35%),
    linear-gradient(180deg, color-mix(in srgb, var(--mocbt-primary) 8%, #fff) 0%, var(--mocbt-bg) 42%, #eef4f8 100%);
}

.mocbt-sidebar { background: linear-gradient(180deg, var(--mocbt-dark, var(--mocbt-secondary)), var(--mocbt-secondary)); }
.mocbt-btn-primary { background: var(--mocbt-primary); }
.mocbt-btn { transition: transform .12s ease, background .15s ease, box-shadow .15s ease; }
.mocbt-btn:hover { transform: translateY(-1px); }
.mocbt-btn:active { transform: translateY(0) scale(.98); }
.mocbt-btn.is-loading { opacity: .65; pointer-events: none; }

.mocbt-pay-block { margin: .35rem 0 .75rem; }
.mocbt-pay-label { font-weight: 700; margin-bottom: .45rem; font-size: .92rem; }
.mocbt-required { color: var(--mocbt-danger); }
.mocbt-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.mocbt-pay-option {
  border: 1.5px solid var(--mocbt-border); background: var(--mocbt-surface); border-radius: 14px;
  padding: .85rem .6rem; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
}
.mocbt-pay-option:hover { border-color: var(--mocbt-primary); transform: translateY(-1px); }
.mocbt-pay-option.is-selected {
  border-color: var(--mocbt-primary); background: color-mix(in srgb, var(--mocbt-primary) 12%, #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mocbt-primary) 18%, transparent);
  color: var(--mocbt-primary-dark, var(--mocbt-primary));
}

.mocbt-menu-card { transition: transform .15s ease, box-shadow .15s ease; }
.mocbt-menu-card:hover { transform: translateY(-2px); }
.mocbt-menu-card.mocbt-tap { transform: scale(.97); }

.mocbt-anim-in { animation: mocbtIn .22s ease; }
.mocbt-anim-out { animation: mocbtOut .16s ease forwards; }
.mocbt-page-enter { animation: mocbtIn .28s ease; }
.mocbt-pulse { animation: mocbtPulseSoft .28s ease; }
@keyframes mocbtIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mocbtOut { to { opacity: 0; transform: translateY(6px); } }
@keyframes mocbtPulseSoft { from { transform: scale(1.04); } to { transform: none; } }

.mocbt-settings-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.mocbt-settings-tabs button {
  border: 1px solid var(--mocbt-border); background: var(--mocbt-surface); border-radius: 999px;
  padding: .55rem 1rem; cursor: pointer; font-weight: 700; font-family: inherit;
}
.mocbt-settings-tabs button.is-active { background: var(--mocbt-primary); color: #fff; border-color: transparent; }

.mocbt-theme-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; }
.mocbt-theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.mocbt-color-row { display: grid; grid-template-columns: 52px 1fr; gap: .45rem; align-items: center; }
.mocbt-color-row input[type=color] { width: 52px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; }

.mocbt-theme-preview {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--mocbt-border);
  background: var(--mocbt-bg, #f3f7fb); color: var(--mocbt-text, #102a43);
  position: sticky; top: 1rem;
}
.mocbt-preview-nav {
  background: var(--mocbt-secondary, #0f172a); color: #fff; padding: .85rem 1rem; font-weight: 800;
  font-family: var(--mocbt-display);
}
.mocbt-preview-card { margin: 1rem; background: var(--mocbt-surface, #fff); border-radius: 14px; padding: 1rem; border: 1px solid var(--mocbt-border, #d9e2ec); }
.mocbt-preview-muted { color: var(--mocbt-muted, #627d98); font-size: .9rem; }
.mocbt-preview-input {
  width: 100%; border: 1px solid var(--mocbt-border, #d9e2ec); border-radius: 10px; padding: .55rem .7rem; margin: .5rem 0;
}
.mocbt-preview-actions { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; }
.mocbt-preview-btn {
  border: 0; border-radius: 10px; padding: .55rem .9rem; background: var(--mocbt-primary, #0b6e99); color: #fff; font-weight: 700;
}
.mocbt-preview-badge {
  background: color-mix(in srgb, var(--mocbt-success, #0f7b4a) 18%, #fff); color: var(--mocbt-success, #0f7b4a);
  border-radius: 999px; padding: .2rem .55rem; font-size: .75rem; font-weight: 700;
}
.mocbt-preview-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.mocbt-preview-table th, .mocbt-preview-table td { border-bottom: 1px solid var(--mocbt-border, #d9e2ec); padding: .4rem 0; text-align: left; }

.mocbt-status-badge { transition: background .2s ease, color .2s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 960px) {
  .mocbt-theme-layout { grid-template-columns: 1fr; }
  .mocbt-theme-preview { position: relative; top: 0; }
}