:root { --bg: #f8fafc; --bg-card: #ffffff; --ink: #172033; --ink-secondary: #172554; --ink-muted: #64748b; --ink-light: #94a3b8; --primary: #f97316; --primary-dark: #ea580c; --primary-light: #fb923c; --primary-glow: rgba(249,115,22,.16); --accent: #f97316; --accent-dark: #ea580c; --warn: #d97706; --warn-bg: #fffbeb; --bad: #dc2626; --bad-bg: #fef2f2; --ok: #16a34a; --ok-bg: #f0fdf4; }
.topbar { display: flex; align-items: center; justify-content: space-between; background: var(--bg); color: var(--ink); padding: 12px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0px; z-index: 100; backdrop-filter: blur(8px); }
.topbar-brand { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--ink); text-decoration: none; }
.topbar-brand img { width: 42px; height: 42px; border-radius: 10px; background: var(--primary); display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.topbar-brand span { font-size: 20px; letter-spacing: -0.3px; color: var(--primary); }
.topbar-nav { display: flex; gap: 6px; align-items: center; }
.topbar-nav a { padding: 8px 14px; border-radius: var(--radius-md); color: var(--ink-secondary); font-size: 13px; font-weight: 600; transition: var(--transition); position: relative; }
.app-layout { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.main-content { padding: 24px 28px 48px; max-width: 100%; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-header h1 { font-size: 28px; margin: 0px; }
.page-header .description { font-size: 14px; color: var(--ink-muted); margin-top: 4px; }
.page-header-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-md); border: 1px solid transparent; font-size: 14px; font-weight: 700; cursor: pointer; text-align: center; transition: var(--transition); white-space: nowrap; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: rgb(255, 255, 255); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-dark); color: rgb(255, 255, 255); border-color: var(--primary-dark); box-shadow: var(--shadow-md); }
.btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { background: var(--border-light); border-color: var(--border); }
.btn-accent { background: var(--accent); color: rgb(255, 255, 255); border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-ok { background: var(--ok); color: rgb(255, 255, 255); border-color: var(--ok); }
.btn-ok:hover { background: rgb(21, 128, 61); border-color: var(--ok); }
.btn-danger { background: var(--bad); color: rgb(255, 255, 255); border-color: var(--bad); }
.btn-danger:hover { background: rgb(185, 28, 28); border-color: var(--bad); }
.btn-outline { background: transparent; border-color: var(--border); color: var(--ink); }
.btn-outline:hover { background: var(--border-light); border-color: var(--border); }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-lg { padding: 14px 24px; font-size: 16px; border-radius: var(--radius-md); }
.btn-block { display: block; width: 100%; justify-content: center; }
.card { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 20px; transition: var(--transition); }
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-header h2 { font-size: 18px; margin: 0px; color: var(--ink); }
.card-header .subtitle { font-size: 13px; color: var(--ink-muted); font-weight: 500; }
.card-body { padding: 0px; }
.card-footer { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-top: 1px solid var(--border); background: rgb(250, 250, 250); }
.table-container { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-sm); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); }
th { background: var(--bg-sidebar); color: var(--ink-secondary); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
tbody tr:hover { background: rgb(250, 250, 250); }
tbody tr:last-child td { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
td .cell-actions { display: flex; gap: 6px; justify-content: flex-start; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full); font-size: 12px; font-weight: 800; white-space: nowrap; }
.status-badge.pending { background: var(--warn-bg); color: var(--warn); border: 1px solid rgb(254, 215, 170); }
.status-badge.processing { background: rgb(239, 246, 255); color: var(--info); border: 1px solid rgb(191, 219, 254); }
.status-badge.completed { background: var(--ok-bg); color: var(--ok); border: 1px solid rgb(187, 247, 208); }
.status-badge.outstanding { background: var(--bad-bg); color: var(--bad); border: 1px solid rgb(254, 202, 202); }
.status-badge.cancelled { background: rgb(243, 244, 246); color: var(--ink-muted); border: 1px solid var(--border); }
.status-badge.admin { background: rgb(240, 244, 255); color: var(--primary); border: 1px solid rgb(191, 219, 254); }
.status-badge.customer { background: rgb(240, 253, 244); color: var(--ok); border: 1px solid rgb(187, 247, 208); }
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 400px; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: 0.3s ease 0s 1 normal none running slideIn; font-size: 14px; line-height: 1.5; }
.toast.success { background: var(--ok-bg); color: rgb(22, 101, 52); border: 1px solid rgb(187, 247, 208); }
.toast.error { background: var(--bad-bg); color: rgb(127, 29, 29); border: 1px solid rgb(254, 202, 202); }
.toast.info { background: var(--info-bg); color: rgb(30, 64, 175); border: 1px solid rgb(191, 219, 254); }
.toast.warning { background: var(--warn-bg); color: rgb(146, 64, 14); border: 1px solid rgb(254, 215, 170); }
.toast .icon { width: 20px; height: 20px; flex-shrink: 0; }
@keyframes slideIn { 
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0px); opacity: 1; }
}
.toast.hide { animation: 0.25s ease 0s 1 normal none running slideOut; }
@keyframes slideOut { 
  100% { transform: translateX(100%); opacity: 0; }
}
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; background: var(--bg-card); border: 2px dashed var(--border); border-radius: var(--radius-lg); gap: 12px; }
.auth-page { min-height: 100vh; display: flex; background: rgb(255, 255, 255); }
.auth-left { flex: 1.2 1 0%; display: flex; flex-direction: column; justify-content: center; padding: 48px 64px; color: var(--ink-secondary); position: relative; overflow: hidden; }
.auth-left::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(1200px 500px at 20% 10%, rgb(240, 253, 244) 0%, rgb(236, 253, 245) 40%, rgb(209, 250, 229) 70%, rgb(167, 243, 208) 100%); opacity: 0.5; pointer-events: none; }
.auth-left::after { content: ""; position: absolute; bottom: 30px; right: 20px; width: 200px; height: 200px; background: radial-gradient(200px 200px at 100% 100%, rgb(240, 253, 244) 0%, rgb(236, 253, 245) 60%, transparent 100%); border-radius: 50%; pointer-events: none; }
.auth-logo { display: flex; align-items: center; gap: 14px; font-size: 32px; font-weight: 900; color: var(--primary); text-decoration: none; }
.auth-logo img { width: 64px; height: 64px; border-radius: 16px; background: rgb(255, 255, 255); box-shadow: var(--shadow-md); display: grid; place-items: center; }
.auth-left h1 { font-size: 56px; line-height: 1.05; margin: 20px 0px 12px; letter-spacing: -1px; color: var(--ink); }
.auth-left h1 em { color: var(--primary); font-style: normal; }
.auth-left p.sub { font-size: 18px; color: rgb(75, 85, 99); max-width: 520px; margin: 0px 0px 24px; }
.auth-features { display: flex; gap: 10px; flex-wrap: wrap; margin: 0px; padding: 0px; list-style: none; }
.auth-features li { background: rgb(255, 255, 255); border: 1px solid rgb(209, 250, 229); color: var(--primary); padding: 10px 16px; border-radius: var(--radius-full); font-size: 14px; font-weight: 700; }
.dashboard-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-bottom: 24px; }
.dashboard-top .card { padding: 20px; }
.dashboard-top .card h3 { font-size: 14px; color: var(--ink-muted); margin: 0px 0px 8px; }
.dashboard-top .card .big { font-size: 36px; }
.chart-container { height: 300px; position: relative; }
.chart-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.chart-card h3 { font-size: 16px; margin: 0px 0px 12px; color: var(--ink); }
.chart-card .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.chart-card .chart-header .period-btn { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 6px 12px; font-size: 12px; font-weight: 700; color: var(--ink-secondary); }
.chart-card .chart-header .period-btn.active { background: var(--primary); color: rgb(255, 255, 255); border-color: var(--primary); }
.dashboard-page { max-width: 1200px; margin: 12px auto 44px; }
.dashboard-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding: 28px 30px; border: 1px solid rgb(205, 233, 216); border-radius: var(--radius-xl); background: radial-gradient(620px 240px at 100% 0%, rgba(255, 255, 255, 0.95), transparent 72%), linear-gradient(115deg, rgb(240, 253, 244), rgb(220, 252, 231) 62%, rgb(187, 247, 208)); }
.dashboard-heading h1 { margin: 0px; color: rgb(24, 59, 45); font-size: clamp(25px, 3vw, 34px); letter-spacing: -0.6px; }
.dashboard-heading > div > p:last-child { margin: 7px 0px 0px; color: rgb(73, 100, 86); font-size: 14px; }
.dashboard-eyebrow { margin: 0px 0px 7px; color: rgb(40, 114, 78); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.dashboard-date { flex: 0 0 auto; padding: 9px 12px; border: 1px solid rgb(205, 233, 216); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.75); color: rgb(49, 89, 67); font-size: 12px; font-weight: 700; }
.dashboard-metrics { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 14px; margin-bottom: 16px; }
.dashboard-metric { position: relative; min-width: 0px; overflow: hidden; padding: 18px 20px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgb(255, 255, 255); box-shadow: rgba(26, 66, 46, 0.055) 0px 4px 16px; }
.dashboard-metric::before { position: absolute; top: 0px; left: 0px; width: 4px; height: 100%; background: rgb(183, 223, 197); content: ""; }
.dashboard-metric-primary { border-color: rgb(183, 223, 197); background: linear-gradient(135deg, rgb(255, 255, 255), rgb(240, 253, 244)); }
.dashboard-metric-primary::before { background: var(--primary); }
.dashboard-metric p { margin: 0px 0px 10px; color: var(--ink-muted); font-size: 12px; font-weight: 700; }
.dashboard-metric strong { display: block; overflow: hidden; color: rgb(24, 59, 45); font-size: clamp(23px, 2.5vw, 30px); line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dashboard-metric span { display: block; margin-top: 8px; color: rgb(120, 135, 125); font-size: 11px; }
.dashboard-panel { min-width: 0px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgb(255, 255, 255); box-shadow: rgba(26, 66, 46, 0.055) 0px 4px 16px; }
.dashboard-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.dashboard-panel-heading h2 { margin: 0px; color: rgb(24, 59, 45); font-size: 17px; }
.dashboard-panel-heading .dashboard-eyebrow { margin-bottom: 5px; }
.dashboard-review-link { display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid rgb(205, 233, 216); border-radius: var(--radius-sm); background: rgb(240, 253, 244); color: rgb(36, 96, 68); text-decoration: none; font-size: 11px; font-weight: 700; }
.dashboard-review-link:hover { background: rgb(220, 252, 231); color: rgb(25, 76, 52); }
.dashboard-review-link strong { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: var(--radius-full); background: var(--primary); color: rgb(255, 255, 255); font-size: 11px; }
.dashboard-payment-options { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; }
.dashboard-payment-options > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 1px solid rgb(237, 241, 237); border-radius: var(--radius-sm); background: rgb(252, 253, 252); }
.dashboard-payment-options > div > span { color: rgb(70, 87, 76); font-size: 12px; }
.dashboard-status { flex: 0 0 auto; padding: 5px 8px; border-radius: var(--radius-full); font-size: 10px; }
.dashboard-status.is-available { background: rgb(236, 253, 243); color: rgb(24, 115, 68); }
.dashboard-status.is-unavailable { background: rgb(255, 241, 237); color: rgb(181, 71, 36); }
.dashboard-note { margin: 12px 0px 0px; color: rgb(120, 135, 125); font-size: 11px; }
.dashboard-charts { display: grid; grid-template-columns: minmax(0px, 1.45fr) minmax(0px, 1fr); gap: 14px; margin-top: 16px; }
.dashboard-chart { position: relative; height: 260px; }
.dashboard-chart-doughnut { height: 260px; }
.dashboard-period { color: rgb(120, 135, 125); font-size: 11px; }
@media (max-width: 760px) {
  .dashboard-page { margin-top: 8px; }
  .dashboard-heading { align-items: flex-start; padding: 23px 20px; }
  .dashboard-date { font-size: 10px; }
  .dashboard-metrics { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .dashboard-payment-options { grid-template-columns: 1fr; }
  .dashboard-charts { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .dashboard-heading { display: block; padding: 21px 17px; }
  .dashboard-date { display: inline-block; margin-top: 15px; }
  .dashboard-metrics { gap: 9px; }
  .dashboard-metric { padding: 15px 13px 13px; }
  .dashboard-metric p { min-height: 29px; font-size: 11px; }
  .dashboard-metric strong { font-size: 22px; }
  .dashboard-panel { padding: 16px 13px; }
  .dashboard-panel-heading { align-items: flex-start; flex-wrap: wrap; }
  .dashboard-review-link { font-size: 10px; }
  .dashboard-chart, .dashboard-chart-doughnut { height: 230px; }
}
.menu-hero { background: linear-gradient(135deg, rgb(45, 106, 79) 0%, rgb(82, 183, 136) 60%, rgb(167, 243, 208) 100%); border-radius: var(--radius-xl); color: rgb(255, 255, 255); padding: 40px; margin-bottom: 24px; position: relative; overflow: hidden; }
.menu-hero::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg, rgba(45, 106, 79, 0.2) 0%, rgba(82, 183, 136, 0.1) 100%); }
.menu-hero h1 { color: rgb(255, 255, 255); position: relative; z-index: 1; font-size: clamp(28px, 4vw, 42px); letter-spacing: -1px; }
.menu-hero .description { color: rgba(255, 255, 255, 0.9); position: relative; z-index: 1; margin-top: 10px; max-width: 600px; }
.menu-hero .badge { position: relative; z-index: 1; display: inline-block; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.4); padding: 6px 14px; border-radius: var(--radius-full); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.menu-tools { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; position: relative; z-index: 1; }
.category-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0px; position: relative; z-index: 1; }
.category-tab { padding: 10px 18px; border-radius: var(--radius-full); background: rgb(255, 255, 255); color: var(--ink-secondary); font-size: 13px; font-weight: 700; border: 2px solid var(--border); transition: var(--transition); white-space: nowrap; }
.category-tab:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }
.category-tab.active { background: var(--primary); border-color: var(--primary); color: rgb(255, 255, 255); }
.food-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.food-card { background: rgb(255, 255, 255); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); }
.food-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--primary-light); }
.food-image { position: relative; aspect-ratio: 1.6 / 1; overflow: hidden; background: linear-gradient(135deg, rgb(254, 249, 195), rgb(254, 240, 138)); cursor: pointer; }
.food-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.food-card:hover .food-image img { transform: scale(1.05); }
.food-image .badge { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, 0.92); color: var(--ink-muted); font-size: 10px; font-weight: 800; padding: 4px 10px; border-radius: var(--radius-full); }
.order-summary { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-sm); margin-top: 24px; }
.order-summary h3 { font-size: 18px; margin: 0px 0px 16px; color: var(--ink); }
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0px; border-bottom: 1px solid var(--border); }
.summary-row:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.summary-row .label { font-size: 14px; color: var(--ink-muted); font-weight: 600; }
.summary-row .value { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.summary-row.total { background: rgb(250, 250, 250); border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.payment-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.payment-option { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-align: center; transition: var(--transition); cursor: pointer; }
.payment-option:hover { border-color: var(--primary); box-shadow: var(--shadow-md); }
.payment-option input { display: none; }
.payment-option .logo { width: 56px; height: 56px; border-radius: var(--radius-md); background: rgb(243, 244, 246); display: grid; place-items: center; margin: 0px auto 10px; }
.payment-option .logo svg { width: 32px; height: 32px; }
.payment-option .label { font-size: 13px; color: var(--ink-secondary); font-weight: 700; margin-top: 8px; }
.payment-option .desc { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.payment-option.selected { border-color: var(--primary); box-shadow: var(--primary-glow); }
.payment-option.selected .label { color: var(--primary); }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 20px; }
.profile-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-sm); }
.profile-card .label { font-size: 12px; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.profile-card .value { font-size: 15px; font-weight: 700; color: var(--ink); word-break: break-word; }
.admin-table-wrapper { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.admin-table th { background: var(--bg-sidebar); color: var(--ink-secondary); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.admin-table tbody tr:hover { background: rgb(250, 250, 250); }
.admin-table .name { font-weight: 700; color: var(--ink); }
.admin-table .email { color: var(--ink-muted); font-size: 13px; }
.admin-table .role { font-size: 12px; padding: 4px 10px; border-radius: var(--radius-full); font-weight: 700; }
.admin-table .role.admin { background: rgb(240, 244, 255); color: var(--primary); }
.admin-table .role.user { background: rgb(254, 243, 199); color: rgb(146, 64, 14); }
.admin-table .role.customer { background: rgb(209, 250, 229); color: rgb(6, 95, 70); }
.admin-table .status-badge { padding: 6px 12px; font-size: 12px; }
@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .topbar-nav { display: none; }
  .topbar.nav-open .topbar-nav { display: flex; }
  .topbar.nav-open .menu-toggle .hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .topbar.nav-open .menu-toggle .hamburger span:nth-child(2) { opacity: 0; }
  .topbar.nav-open .menu-toggle .hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .main-content { padding: 20px 24px 48px; }
  .menu-hero { padding: 30px; }
}
@media (max-width: 600px) {
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .topbar { padding: 10px 14px; }
  .topbar-brand span { font-size: 16px; }
  .topbar-btn { padding: 6px 10px; font-size: 12px; }
  .card { padding: 16px; }
  .auth-card { padding: 24px; }
  .auth-left { padding: 32px 24px; }
  .menu-hero { padding: 24px; }
  .food-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
.pagination { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.pagination .info { font-size: 13px; color: var(--ink-muted); }
.pagination .page-btn { padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: rgb(255, 255, 255); color: var(--ink-secondary); font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--transition); }
.pagination .page-btn:hover { border-color: var(--primary); color: var(--primary); }
.pagination .page-btn.active { background: var(--primary); border-color: var(--primary); color: rgb(255, 255, 255); }
.pagination .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.text-primary { color: var(--primary); }
.text-muted { color: var(--ink-muted); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }
.mt-0 { margin-top: 0px; }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mb-0 { margin-bottom: 0px; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.cursor-pointer { cursor: pointer; }
.no-select { user-select: none; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.font-bold { font-weight: 800; }
.font-semibold { font-weight: 700; }
.font-medium { font-weight: 600; }
.hidden { display: none; }
.fade-in { animation: 0.3s ease 0s 1 normal none running fadeIn; }
@keyframes fadeIn { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: none; }
}
.dark-background { background: rgb(31, 41, 55); color: rgb(249, 250, 251); }
.dark-background h1, h2, h3, h4 { color: rgb(249, 250, 251); }
.dark-background .card { background: rgb(55, 65, 81); border-color: rgb(75, 85, 99); }
.dark-background .topbar { background: rgb(17, 24, 39); border-color: rgb(55, 65, 81); }
.dark-background .topbar a { color: rgb(249, 250, 251); }
.dark-background .topbar a:hover { color: var(--primary-light); }
.dark-background .form-group input, .dark-background .form-group select, .dark-background .form-group textarea { background: rgb(55, 65, 81); border-color: rgb(75, 85, 99); color: rgb(249, 250, 251); }
.dark-background .form-group input:focus, .dark-background .form-group select:focus, .dark-background .form-group textarea:focus { border-color: var(--primary); box-shadow: rgba(45, 106, 79, 0.2) 0px 0px 0px 3px; }
.dark-background .flash { background: rgb(220, 38, 38); color: rgb(255, 255, 255); border-color: rgb(185, 28, 28); }
.dark-background .flash-success { background: rgb(22, 163, 74); color: rgb(255, 255, 255); border-color: rgb(21, 128, 61); }
.dark-background .flash-warning { background: rgb(217, 119, 6); color: rgb(255, 255, 255); border-color: rgb(180, 83, 9); }
.dark-background .flash-info { background: rgb(37, 99, 235); color: rgb(255, 255, 255); border-color: rgb(29, 78, 216); }
.food-card .food-info { padding: 16px; }
.food-card .food-category { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; font-weight: 800; margin: 0px 0px 6px; }
.food-card .food-info h3 { font-size: 17px; margin: 0px 0px 6px; color: var(--ink); }
.food-card .food-description { font-size: 13px; color: var(--ink-muted); line-height: 1.5; margin: 0px 0px 12px; min-height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.food-buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.food-buy .current-qty { font-size: 13px; color: var(--ink-muted); font-weight: 600; }
.qty-controls { display: flex; align-items: center; gap: 8px; }
.qty-btn { width: 30px; height: 30px; border-radius: var(--radius-full); border: 1px solid var(--border); background: rgb(255, 255, 255); color: var(--ink); font-size: 16px; font-weight: 800; cursor: pointer; transition: var(--transition); }
.qty-btn:hover { border-color: var(--primary); color: var(--primary); }
.qty-val { font-size: 15px; font-weight: 800; color: var(--ink); min-width: 24px; text-align: center; }
.add-to-cart { padding: 10px 16px; border-radius: var(--radius-md); font-size: 14px; font-weight: 800; background: linear-gradient(135deg,var(--primary),var(--primary-light)); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; cursor: pointer; transition: var(--transition); flex: 1 1 0%; }
.add-to-cart:hover { filter: brightness(1.1); box-shadow: var(--shadow-md); }
.add-to-cart:disabled { background: rgb(209, 213, 219); cursor: not-allowed; }
.cart-count-badge { position: absolute; bottom: 10px; right: 10px; background: var(--accent); color: rgb(255, 255, 255); font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: var(--radius-full); min-width: 24px; text-align: center; }
.chart-card .chart-header .period-btn:hover { border-color: var(--primary); }
.chart-canvas { width: 100%; height: 100%; min-height: 220px; }
.auth-right { width: 100%; max-width: 460px; margin: 48px auto; }
.auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: 32px; }
.auth-card h2 { font-size: 26px; margin: 0px 0px 6px; color: var(--ink); }
.auth-card .kicker { font-size: 12px; font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; margin: 0px 0px 8px; }
.auth-card .description { font-size: 14px; color: var(--ink-muted); margin-bottom: 20px; }
.auth-demo-accounts { display: grid; gap: 10px; margin: 18px 0; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); color: var(--ink); font-size: 12px; }
.auth-demo-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.auth-demo-heading strong { color: var(--primary); font-size: 14px; }
.auth-demo-heading span,.auth-demo-footnote { color: var(--ink-muted); font-size: 10px; }
.auth-demo-account { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.auth-demo-account h3 { margin: 0; color: var(--ink); font-size: 12px; }
.auth-demo-credential { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 6px; min-width: 0; }
.auth-demo-credential span { color: var(--ink-muted); font-weight: 700; }
.auth-demo-credential code { min-width: 0; overflow-wrap: anywhere; color: var(--ink); font-family: inherit; font-weight: 700; }
.auth-demo-credential button,.auth-demo-autofill { min-height: 28px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--primary-dark); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.auth-demo-autofill { justify-self: start; }
.auth-demo-notice { margin: 0; color: var(--warn); line-height: 1.5; }
.auth-demo-footnote,.auth-demo-copy-status { margin: 0; line-height: 1.5; }
.auth-demo-copy-status { min-height: 14px; color: var(--primary-dark); }
.auth-switch { text-align: center; color: var(--ink-muted); font-size: 14px; margin: 20px 0px 0px; }
.auth-switch a { color: var(--primary); font-weight: 700; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-notice { background: var(--ok-bg); border: 1px solid rgb(187, 247, 208); color: rgb(22, 101, 52); padding: 12px 16px; border-radius: var(--radius-md); font-size: 13px; margin-bottom: 16px; }
.otp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 16px 0px; }
.otp-grid input { height: 58px; text-align: center; font-size: 22px; font-weight: 700; border: 2px solid var(--border); border-radius: var(--radius-md); transition: var(--transition); font-family: inherit; }
.otp-grid input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.otp-grid input.correct { background: var(--ok-bg); border-color: var(--ok); }
.otp-grid input.wrong { background: var(--bad-bg); border-color: var(--bad); }
@media (max-width: 520px) {
  .otp-grid { gap: 8px; }
  .otp-grid input { height: 50px; font-size: 18px; }
  .auth-demo-accounts { padding: 11px; }
  .auth-demo-heading { align-items: flex-start; flex-direction: column; }
  .auth-demo-credential { grid-template-columns: 54px minmax(0,1fr) auto; gap: 4px; }
}
.foot { text-align: center; color: var(--ink-muted); font-size: 13px; padding: 24px; background: var(--bg); border-top: 1px solid var(--border); }
.foot a { color: var(--primary); font-weight: 700; }
.loading-overlay { position: fixed; inset: 0px; background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; z-index: 9998; }
.loading-spinner { width: 48px; height: 48px; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--primary); border-radius: 50%; animation: 1s linear 0s infinite normal none running spin; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.empty-state .emoji { font-size: 48px; opacity: 0.6; }
.empty-state h3 { font-size: 20px; margin: 0px 0px 6px; color: var(--ink); }
.empty-state p { font-size: 14px; color: var(--ink-muted); max-width: 400px; margin: 0px; }
.empty-state .btn { margin-top: 12px; }
.loading-overlay { position: fixed; inset: 0px; background: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; z-index: 9998; }
.loading-spinner { width: 48px; height: 48px; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--primary); border-radius: 50%; animation: 1s linear 0s infinite normal none running spin; }
@keyframes spin { 
  100% { transform: rotate(360deg); }
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 18px 20px; box-shadow: var(--shadow-sm); }
.stat-card .label { font-size: 12px; color: var(--ink-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card .value { font-size: 28px; font-weight: 800; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-card .change { color: var(--ok); font-size: 13px; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.stat-card .change.bad { color: var(--bad); }
.stat-card.primary { border-color: var(--primary-light); }
.stat-card.primary .value { color: var(--primary); }
.stat-card.primary .label { color: var(--primary-dark); }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-secondary); margin-bottom: 6px; }
.form-group label .required { color: var(--bad); margin-left: 2px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 11px 14px; border: 2px solid var(--border); border-radius: var(--radius-md); font-family: inherit; font-size: 14px; background: rgb(255, 255, 255); color: var(--ink); transition: var(--transition); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow); }
.form-group textarea { min-height: 100px; resize: vertical; }
.form-group .help-text { font-size: 12px; color: var(--ink-muted); margin-top: 6px; }
.form-group .error { display: flex; align-items: center; gap: 6px; color: var(--bad); font-size: 13px; margin-top: 6px; }
.switch-group { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.switch-group label { font-size: 14px; font-weight: 600; color: var(--ink-secondary); }
.switch { position: relative; width: 48px; height: 26px; flex-shrink: 0; }
.switch input { display: none; }
.switch .slider { position: absolute; inset: 0px; background: var(--border); border-radius: var(--radius-full); transition: var(--transition); cursor: pointer; border: 2px solid var(--border); }
.switch .slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: rgb(255, 255, 255); border-radius: var(--radius-full); box-shadow: var(--shadow-sm); transition: var(--transition); }
.switch input:checked + .slider { background: var(--primary); border-color: var(--primary); }
.switch input:checked + .slider::before { transform: translateX(22px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-nav a:hover { background: var(--primary-glow); color: var(--primary); }
.topbar-nav a.active { background: var(--primary); color: rgb(255, 255, 255); }
.topbar-nav a.active::after { content: ""; position: absolute; bottom: -4px; left: 10px; right: 10px; height: 2px; background: var(--primary-light); }
.topbar-actions { display: flex; gap: 8px; align-items: center; }
.topbar-btn { padding: 8px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--bg); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 8px; }
.topbar-btn:hover { border-color: var(--primary); color: var(--primary); background: rgb(255, 255, 255); }
.topbar-btn.primary { background: var(--primary); border-color: var(--primary); color: rgb(255, 255, 255); }
.topbar-btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.topbar-btn.danger { background: var(--bad); border-color: var(--bad); color: rgb(255, 255, 255); }
.topbar-btn.danger:hover { background: var(--bad); }
.topbar-btn.outline { border-color: var(--primary); color: var(--primary); }
.topbar-btn.outline:hover { background: var(--primary); color: rgb(255, 255, 255); border-color: var(--primary); }
:root { --info: #172554; --info-bg: #eff6ff; --border: #cbd5e1; --border-light: #e2e8f0; --bg-sidebar: #eff6ff; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 999px; --font: 'Segoe UI', system-ui, -apple-system, sans-serif; --transition: .25s cubic-bezier(.4,0,.2,1); --sidebar-width: 240px; --shadow-sm: 0 2px 8px rgba(23,37,84,.06); --shadow-md: 0 8px 20px rgba(23,37,84,.1); --shadow-lg: 0 16px 36px rgba(23,37,84,.14); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0px; font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; }
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.2; margin: 0px 0px 8px; }
h1 { font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.5px; }
h2 { font-size: clamp(20px, 2.5vw, 28px); margin: 0px 0px 12px; }
h3 { font-size: 18px; }
h4 { font-size: 15px; }
p { margin: 0px 0px 12px; }
.wrap { max-width: 1200px; margin: 0px auto; padding: 0px 20px; }
.topbar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.topbar-brand img { object-fit: contain; border-radius: 10px; }
.topbar-nav a { text-decoration: none; }
.topbar .who { color: var(--ink-muted); font-size: 12px; font-weight: 600; }
.menu-toggle { display: none; }
.menu-toggle .hamburger { display: grid; gap: 4px; }
.menu-toggle .hamburger span { display: block; width: 18px; height: 2px; background: currentcolor; transition: var(--transition); }
.menu-heading { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; margin: 14px 0px 18px; padding: 28px 32px; border: 1px solid rgb(205, 233, 216); border-radius: var(--radius-xl); background: radial-gradient(500px 200px at 100% 0%, rgba(255, 255, 255, 0.95), transparent 70%), linear-gradient(110deg, rgb(240, 253, 244), rgb(220, 252, 231) 62%, rgb(187, 247, 208)); }
.menu-heading > div:first-child { position: relative; z-index: 1; }
.menu-heading .eyebrow, .menu-kicker { margin: 0px 0px 7px; color: rgb(40, 114, 78); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; }
.menu-heading h1 { margin: 0px; color: rgb(24, 59, 45); font-size: clamp(27px, 4vw, 40px); letter-spacing: -0.8px; }
.menu-heading > div > p:last-child { margin: 8px 0px 0px; color: rgb(73, 100, 86); font-size: 14px; }
.menu-mark { display: grid; width: 72px; height: 72px; flex: 0 0 72px; place-items: center; border: 1px solid rgba(45, 106, 79, 0.12); border-radius: 22px; background: rgba(255, 255, 255, 0.64); color: var(--accent); font-size: 39px; transform: rotate(8deg); }
.ordering-layout { display: grid; grid-template-columns: minmax(0px, 1fr) 355px; align-items: start; gap: 18px; margin: 0px 0px 32px; }
.menu-panel { min-width: 0px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgb(255, 255, 255); box-shadow: var(--shadow-sm); }
.menu-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.menu-toolbar h2 { margin: 0px; color: rgb(24, 59, 45); font-size: 22px; }
.menu-result-count { margin: 4px 0px 0px; color: var(--ink-muted); font-size: 12px; }
.menu-search { display: flex; align-items: center; gap: 8px; width: min(100%, 260px); padding: 0px 12px; border: 1px solid var(--border); border-radius: var(--radius-full); background: rgb(249, 251, 249); color: rgb(120, 135, 125); }
.menu-search:focus-within { border-color: var(--primary-light); box-shadow: 0 0 0 3px var(--primary-glow); }
.menu-search > span { font-size: 20px; line-height: 1; }
.menu-search input { width: 100%; min-width: 0px; margin: 0px; padding: 10px 0px; border: 0px; outline: 0px; background: transparent; color: var(--ink); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; }
.category-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0px 16px; scrollbar-width: thin; }
.category-tab { padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-full); background: rgb(255, 255, 255); color: rgb(82, 99, 88); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: var(--transition); }
.category-tab:hover { border-color: var(--primary-light); color: var(--primary); }
.category-tab.active { border-color: var(--primary); background: var(--primary); color: rgb(255, 255, 255); }
.food-grid { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 14px; }
.food-card { border-color: rgb(237, 241, 237); border-radius: 14px; box-shadow: rgba(27, 73, 59, 0.055) 0px 3px 12px; }
.food-card:hover { transform: translateY(-3px); border-color: rgb(183, 223, 197); box-shadow: var(--shadow-md); }
.food-card[hidden] { display: none !important; }
.food-image { aspect-ratio: 1.52 / 1; background: linear-gradient(135deg, rgb(230, 243, 233), rgb(251, 232, 215)); }
.food-image img { object-fit: cover; }
.food-image > span { display: grid; width: 100%; height: 100%; place-items: center; font-size: 56px; }
.food-image small { position: absolute; top: 10px; left: 10px; padding: 5px 8px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.92); color: rgb(40, 114, 78); font-size: 9px; font-weight: 800; letter-spacing: 0.5px; }
.food-card .food-info { padding: 14px; }
.food-card .food-category { color: rgb(40, 114, 78); font-size: 10px; letter-spacing: 0.8px; }
.food-card .food-info h3 { font-size: 16px; }
.food-card .food-description { min-height: 36px; font-size: 12px; }
.food-buy { padding-top: 11px; }
.food-buy > strong { color: rgb(24, 59, 45); font-size: 17px; font-variant-numeric: tabular-nums; }
.add-item { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0px; border-radius: var(--radius-full); background: var(--primary); color: rgb(255, 255, 255); font-size: 12px; font-weight: 800; cursor: pointer; transition: var(--transition); }
.add-item span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.2); font-size: 15px; }
.add-item:hover { background: var(--primary-dark); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.menu-no-results, .empty-menu { margin: 12px 0px; padding: 24px; border: 1px dashed var(--border); border-radius: var(--radius-md); color: var(--ink-muted); text-align: center; font-size: 13px; }
.checkout-panel { position: sticky; top: 16px; display: grid; gap: 12px; min-width: 0px; }
.basket-section, .buyer-section, .payment-section { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgb(255, 255, 255); box-shadow: var(--shadow-sm); }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.panel-title h2 { margin: 0px; color: rgb(24, 59, 45); font-size: 16px; }
.item-count, .step-number { color: var(--ink-muted); font-size: 11px; font-weight: 700; }
.cart-empty, .fee-note { color: var(--ink-muted); font-size: 12px; }
.order-total { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0px; border-top: 1px solid var(--border-light); color: var(--ink-secondary); font-size: 12px; }
.order-total strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.grand-total { font-size: 14px; font-weight: 800; }
.fee-note { margin: 4px 0px 0px; }
.buyer-section label, .payment-section label { display: block; margin: 0px 0px 10px; color: rgb(70, 87, 76); font-size: 11px; font-weight: 700; }
.buyer-section input, .buyer-section select, .buyer-section textarea, .payment-section input, .payment-section select, .payment-section textarea { width: 100%; margin: 5px 0px 0px; padding: 10px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgb(255, 255, 255); color: var(--ink); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; }
.buyer-section .grid2 { gap: 8px; }
.payment-choice { border-radius: var(--radius-sm); }
@media (max-width: 900px) {
  .ordering-layout { grid-template-columns: minmax(0px, 1fr) 320px; }
  .menu-panel { padding: 17px; }
  .food-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .topbar-nav { display: none; }
  .topbar.nav-open .topbar-nav { display: flex; flex-basis: 100%; flex-wrap: wrap; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 700px) {
  .ordering-layout { grid-template-columns: 1fr; }
  .checkout-panel { position: static; grid-template-columns: 1fr 1fr; }
  .checkout-panel .payment-section { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .wrap { padding: 0px 12px; }
  .menu-heading { margin: 10px 0px 13px; padding: 21px 18px; }
  .menu-mark { width: 52px; height: 52px; flex-basis: 52px; border-radius: 16px; font-size: 29px; }
  .menu-heading > div > p:last-child { font-size: 12px; }
  .menu-toolbar { align-items: stretch; flex-direction: column; }
  .menu-search { width: 100%; }
  .menu-panel { padding: 14px 11px; }
  .food-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 9px; }
  .food-card .food-info { padding: 10px; }
  .food-card .food-info h3 { font-size: 14px; }
  .food-card .food-description { font-size: 11px; }
  .food-buy { align-items: flex-start; flex-direction: column; }
  .add-item { width: 100%; justify-content: center; }
  .checkout-panel { grid-template-columns: 1fr; }
  .checkout-panel .payment-section { grid-column: auto; }
}
.dashboard-heading { align-items: center; }
.dashboard-heading-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.dashboard-action-link { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--primary); border-radius: var(--radius-sm); background: var(--primary); color: rgb(255, 255, 255); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.dashboard-action-link:hover { background: var(--primary-dark); color: rgb(255, 255, 255); }
.dashboard-action-secondary { border-color: rgb(205, 233, 216); background: rgba(255, 255, 255, 0.7); color: rgb(49, 89, 67); }
.dashboard-action-secondary:hover { background: rgb(255, 255, 255); color: var(--primary-dark); }
.dashboard-date { margin-left: 4px; }
.dashboard-workspace { display: grid; grid-template-columns: minmax(0px, 1.7fr) minmax(260px, 0.8fr); gap: 14px; margin-top: 16px; }
.dashboard-orders-panel, .dashboard-products-panel { min-width: 0px; }
.dashboard-text-link { color: var(--primary); font-size: 11px; font-weight: 800; white-space: nowrap; }
.dashboard-orders-scroll { overflow-x: auto; }
.dashboard-orders-table { width: 100%; min-width: 580px; border-collapse: collapse; }
.dashboard-orders-table th, .dashboard-orders-table td { padding: 11px 10px; border-bottom: 1px solid rgb(237, 241, 237); text-align: left; font-size: 11px; }
.dashboard-orders-table th { background: rgb(246, 249, 246); color: rgb(117, 130, 120); font-size: 9px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; }
.dashboard-orders-table tbody tr:last-child td { border-bottom: 0px; }
.dashboard-orders-table td:first-child small { display: block; margin-top: 2px; color: rgb(138, 150, 141); font-size: 9px; }
.dashboard-order-code { color: rgb(40, 86, 64); font-weight: 800; }
.dashboard-order-total { color: rgb(34, 63, 48); font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dashboard-order-status { display: inline-block; padding: 4px 7px; border-radius: var(--radius-full); font-size: 9px; font-weight: 800; white-space: nowrap; }
.dashboard-order-status.status-pending, .dashboard-order-status.status-preparing { background: rgb(255, 246, 230); color: rgb(165, 99, 16); }
.dashboard-order-status.status-ready, .dashboard-order-status.status-out_for_delivery { background: rgb(238, 245, 255); color: rgb(49, 92, 160); }
.dashboard-order-status.status-completed { background: rgb(234, 247, 238); color: rgb(36, 113, 70); }
.dashboard-order-status.status-cancelled { background: rgb(241, 243, 241); color: rgb(105, 117, 108); }
.dashboard-empty { margin: 0px; padding: 22px 8px; color: var(--ink-muted); font-size: 12px; text-align: center; }
.dashboard-product-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: rgb(237, 248, 240); color: var(--primary); font-size: 18px; }
.dashboard-products-intro { margin: 0px 0px 18px; color: var(--ink-muted); font-size: 12px; line-height: 1.6; }
.dashboard-product-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 16px; }
.dashboard-product-counts > div { padding: 13px; border: 1px solid rgb(237, 241, 237); border-radius: var(--radius-sm); background: rgb(249, 251, 249); }
.dashboard-product-counts strong { display: block; color: rgb(24, 59, 45); font-size: 23px; line-height: 1.15; }
.dashboard-product-counts span { display: block; margin-top: 5px; color: rgb(120, 135, 125); font-size: 10px; }
.dashboard-manage-button { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px; border-radius: var(--radius-sm); background: var(--primary); color: rgb(255, 255, 255); font-size: 11px; font-weight: 800; text-decoration: none; }
.dashboard-manage-button:hover { background: var(--primary-dark); color: rgb(255, 255, 255); }
@media (max-width: 900px) {
  .dashboard-heading-actions { max-width: 320px; }
  .dashboard-date { width: 100%; text-align: center; }
  .dashboard-workspace { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .dashboard-heading { display: block; }
  .dashboard-heading-actions { justify-content: flex-start; max-width: none; margin-top: 14px; }
  .dashboard-date { width: auto; margin: 0px; padding: 8px 10px; }
  .dashboard-action-link { padding: 8px 10px; font-size: 10px; }
  .dashboard-workspace { gap: 10px; }
  .dashboard-orders-table { min-width: 530px; }
}
.auth-page{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);align-items:center;
  gap:clamp(24px,5vw,72px);min-height:100vh;padding:clamp(18px,4vw,56px);
  background:linear-gradient(135deg,#fffaf3,#fff2e3 58%,#ffead7);
}
.auth-left{
  min-height:min(760px,calc(100vh - 48px));justify-content:center;padding:clamp(28px,5vw,72px);
  border:1px solid #f3ddc5;border-radius:26px;
  background:radial-gradient(ellipse at 8% 5%,rgba(255,187,102,.32),transparent 38%),radial-gradient(ellipse at 100% 100%,rgba(249,115,22,.23),transparent 42%),linear-gradient(145deg,#fff8ed,#fff 68%);
  box-shadow:0 16px 48px rgba(103,61,23,.08);
}
.auth-left::before{
  inset:auto -60px -150px auto;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.9),rgba(255,237,213,.2) 65%,transparent 70%);
  opacity:1;
}
.auth-left::after{
  content:"🍔";bottom:18px;right:5%;width:auto;height:auto;border-radius:0;
  background:none;color:rgba(234,88,12,.11);font-size:clamp(150px,23vw,290px);
  line-height:1;pointer-events:none;transform:rotate(-12deg);
}
.auth-logo,.auth-left h1,.auth-left p.sub,.auth-features{position:relative;z-index:1}
.auth-logo{gap:12px;color:#26352c;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.7px}
.auth-logo img{flex:0 0 auto;width:64px;height:64px;object-fit:contain;border:1px solid rgba(255,255,255,.85);border-radius:16px}
.auth-left h1{max-width:650px;margin:clamp(38px,7vh,74px) 0 14px;color:#202a24;font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-1.8px}
.auth-left h1 em{color:#f97316}
.auth-left p.sub{max-width:470px;margin:0 0 24px;color:#68766d;font-size:15px;line-height:1.7}
.auth-features{gap:9px}
.auth-features li{padding:9px 13px;border-color:#f4dfcb;border-radius:var(--radius-full);background:rgba(255,255,255,.85);color:#6a513f;font-size:11px;box-shadow:0 3px 12px rgba(103,61,23,.045)}
.auth-right{width:100%;max-width:490px;margin:0 auto;padding:0}
.auth-card{
  display:block;width:100%;padding:clamp(24px,3vw,38px);border:1px solid #f0e5da;
  border-radius:20px;background:#fff;box-shadow:0 20px 55px rgba(74,49,28,.12);
}
.auth-card h2{color:#202a24}
.auth-card .kicker{margin-bottom:5px;color:#202a24;font-size:25px;font-weight:800;letter-spacing:-.5px;text-transform:none}
.auth-card .description{margin:0 0 21px;color:#758078;font-size:13px;line-height:1.55}
.auth-card .form-group{margin-bottom:14px}
.auth-card .form-group label{margin-bottom:6px;color:#425149;font-size:11px}
.auth-card .form-group input,.auth-card .form-group select,.auth-card .form-group textarea{
  min-height:44px;padding:10px 12px;border:1px solid #dce5dd;border-radius:8px;
  background:#fff;color:#26352c;font-size:12px;
}
.auth-card .form-group input::placeholder{color:#a1aaa3}
.auth-card .form-group input:focus,.auth-card .form-group select:focus,.auth-card .form-group textarea:focus{
  border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.13);
}
.auth-card .password-input{display:flex;align-items:stretch;gap:7px}
.auth-card .password-input input{min-width:0}
.auth-card .password-toggle{align-self:stretch;margin:5px 0 0;padding:0 10px;border-radius:7px;background:#fff4e8;color:#a84b0d;font-size:11px}
.auth-card .terms-check{display:flex;align-items:flex-start;gap:8px;color:#68766d;font-size:11px;font-weight:500}
.auth-card .terms-check input{width:15px;min-height:15px;height:15px;flex:0 0 15px;margin:1px 0 0;accent-color:#f97316}
.auth-card .btn-primary{width:100%;min-height:46px;margin-top:4px;border:0;border-radius:8px;background:linear-gradient(100deg,#f97316,#fb8500);color:#fff;font-size:13px;box-shadow:0 7px 16px rgba(249,115,22,.2)}
.auth-card .btn-primary:hover{background:linear-gradient(100deg,#ea580c,#f97316);box-shadow:0 9px 20px rgba(249,115,22,.25)}
.auth-card .auth-switch{margin:14px 0 0;color:#7a857d;font-size:11px}
.auth-card .auth-switch a{color:#e85d04;font-weight:800}
.auth-card .auth-notice,.auth-card .error{margin:0 0 14px;padding:10px 12px;border-radius:8px;font-size:12px;line-height:1.5}
.auth-card .error{border:1px solid #f2c9bd;background:#fff3ef;color:#a43f2c}
.auth-card .auth-notice{border-color:#d0e8d5;background:#f1faf2;color:#286440}
.auth-card .password-hint,.auth-card .password-strength{color:#8a958d;font-size:10px}
.auth-card .otp-grid{margin:16px 0}
.auth-card .otp-grid input{min-height:58px;border:1px solid #dce5dd;border-radius:9px}
.auth-card .verify-submit-form .btn-primary{margin-top:0}
.auth-card .resend-button{background:transparent;color:#e85d04}
@media(max-width:820px){
  .auth-page{grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);gap:22px;padding:20px}
  .auth-left{min-height:calc(100vh - 40px);padding:28px}
  .auth-left h1{font-size:clamp(35px,6vw,48px)}
  .auth-features{display:grid;justify-items:start}
}
@media(max-width:640px){
  .auth-page{grid-template-columns:1fr;align-items:start;gap:16px;padding:12px}
  .auth-left{min-height:auto;padding:22px 20px;border-radius:18px}
  .auth-left::after{right:0;bottom:-15px;font-size:120px}
  .auth-logo{font-size:21px}
  .auth-logo img{width:48px;height:48px;border-radius:12px}
  .auth-left h1{margin:25px 0 8px;font-size:34px;letter-spacing:-.8px}
  .auth-left p.sub{max-width:390px;margin-bottom:13px;font-size:12px}
  .auth-features{display:flex;gap:6px}
  .auth-features li{padding:7px 9px;font-size:9px}
  .auth-right{max-width:520px}
  .auth-card{padding:22px 18px}
  .auth-card .kicker{font-size:22px}
}
.auth-body{min-height:100vh;background:radial-gradient(ellipse at 10% 0%,#fff 0%,transparent 35%),linear-gradient(135deg,#fff8ef,#fff0df)}
.auth-page{
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
  width:min(1120px,calc(100% - 48px));min-height:620px;margin:24px auto;padding:0;gap:0;
  overflow:hidden;border:1px solid #f1dfcd;border-radius:16px;background:#fffaf4;
  box-shadow:0 20px 60px rgba(105,66,31,.14);
}
.auth-left{
  min-height:620px;justify-content:flex-start;padding:122px 42px 245px;
  border:0;border-radius:0;box-shadow:none;
  background:radial-gradient(ellipse at 0% 0%,rgba(255,193,116,.42),transparent 33%),linear-gradient(145deg,#fff8ed,#fffdf9 75%);
}
.auth-left::before{
  inset:auto auto -88px -78px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,#ffad52 0%,#ff8a16 65%,#ff7900 66%,transparent 67%);
  opacity:.95;
}
.auth-left::after{
  content:"";right:auto;bottom:0;left:0;width:100%;height:44%;border-radius:0;
  background:linear-gradient(0deg,rgba(255,119,0,.18),transparent 75%);
}
.auth-food-image{
  position:absolute;z-index:1;bottom:-5px;left:0;width:min(76%,410px);height:45%;
  object-fit:cover;object-position:center 57%;border-radius:0 18px 0 0;
  mix-blend-mode:multiply;mask-image:linear-gradient(180deg,transparent 0%,#000 20%);
}
.auth-logo{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  gap:8px;max-width:calc(100% - 36px);font-size:20px;white-space:nowrap;
}
.auth-logo img{width:48px;height:48px;border-radius:12px}
.auth-left h1{
  position:relative;z-index:2;max-width:320px;margin:0 0 10px;
  color:#17252d;font-size:clamp(30px,3vw,39px);line-height:1.12;letter-spacing:-1px;
}
.auth-left h1 em{color:#f97316}
.auth-left p.sub{position:relative;z-index:2;max-width:305px;margin:0 0 18px;color:#52616b;font-size:12px;line-height:1.65}
.auth-features{position:relative;z-index:2;display:grid;gap:9px;justify-items:start}
.auth-features li{
  padding:7px 10px;border:1px solid rgba(255,255,255,.9);border-radius:7px;
  background:rgba(255,255,255,.8);color:#43554d;font-size:10px;
}
.auth-right{
  display:flex;align-items:center;justify-content:center;max-width:none;margin:0;padding:34px;
  background:linear-gradient(145deg,#fffaf4,#fff);
}
.auth-card{
  width:100%;max-width:360px;padding:26px 24px;border:1px solid #f0e6dc;
  border-radius:11px;box-shadow:0 10px 30px rgba(57,43,31,.09);
}
.auth-card .kicker{font-size:21px}
.auth-card .description{font-size:11px;margin-bottom:17px}
.auth-card .form-group{margin-bottom:11px}
.auth-card .form-group label{font-size:10px}
.auth-card .form-group input,.auth-card .form-group select,.auth-card .form-group textarea{
  min-height:39px;padding:8px 10px;border-radius:7px;font-size:11px;
}
.auth-card .btn-primary{min-height:40px;margin-top:2px;font-size:11px}
.auth-card .auth-switch{margin-top:12px;font-size:10px}
.auth-login-page .auth-left{padding-top:112px}
.auth-login-page .auth-left h1{max-width:300px}
.auth-login-page .auth-right{align-items:flex-start;padding-top:24px;padding-bottom:24px}
.auth-login-page .auth-card{max-width:390px;padding:24px}
.auth-login-page .auth-card .form-group{margin-bottom:9px}
.auth-login-page .auth-card .form-group input{min-height:36px}
.auth-register-page .auth-left{padding-top:112px}
.auth-register-page .auth-left h1{max-width:300px}
.auth-register-page .auth-food-image{width:78%;height:38%;object-position:center 55%}
.auth-register-page .auth-right{align-items:flex-start;padding-top:24px;padding-bottom:24px}
.auth-register-page .auth-card{max-width:390px;padding:24px 24px}
.auth-register-page .auth-card .form-group{margin-bottom:9px}
.auth-register-page .auth-card .form-group input{min-height:36px}
@media(max-width:820px){
  .auth-page{grid-template-columns:minmax(0,1fr) minmax(340px,.95fr);width:calc(100% - 28px);margin:14px auto;min-height:590px}
  .auth-left{min-height:590px;padding:112px 25px 225px}
  .auth-right{padding:24px}
  .auth-logo{font-size:17px}
}
@media(max-width:640px){
  .auth-page{grid-template-columns:1fr;grid-template-rows:auto auto;width:calc(100% - 20px);height:auto;min-height:0;margin:10px auto;border-radius:13px;overflow:visible}
  .auth-left{min-height:340px;padding:102px 22px 150px}
  .auth-left::before{width:260px;height:260px;bottom:-75px;left:-65px}
  .auth-left::after{height:35%}
  .auth-food-image{width:56%;height:39%;max-height:145px;left:auto;right:0;object-position:center 55%}
  .auth-logo{top:17px;font-size:17px}
  .auth-logo img{width:42px;height:42px}
  .auth-left h1{max-width:270px;font-size:30px}
  .auth-left p.sub{max-width:280px;font-size:11px}
  .auth-features{max-width:65%;gap:5px}
  .auth-features li{padding:6px 8px;font-size:9px}
  .auth-right{padding:14px;background:#fffaf4}
  .auth-card,.auth-register-page .auth-card{max-width:440px;padding:22px 18px}
  .auth-register-page .auth-left{min-height:320px;padding-bottom:125px}
  .auth-register-page .auth-food-image{height:32%;max-height:125px}
}

.ordering-layout .checkout-panel .basket-section,
.ordering-layout .checkout-panel .buyer-section,
.ordering-layout .checkout-panel .payment-section{border-color:#f3e5da;background:#fff}
.checkout-panel .panel-title h2{color:#3e3028}
.payment-choice{display:flex;align-items:center;gap:10px;margin:0 0 9px;padding:12px;border:1px solid #f0e2d7;border-radius:10px;background:#fff;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s}
.payment-choice:last-child{margin-bottom:0}
.payment-choice input[type=radio]{width:17px;height:17px;flex:0 0 auto;margin:0;accent-color:#f97316}
.payment-choice span{color:#392f29;font-size:12px;font-weight:800}
.payment-choice span small{display:block;margin-top:4px;color:#85776f;font-size:10px;font-weight:500;line-height:1.45}
.payment-choice .payment-logo{width:38px;height:32px;flex:0 0 38px;object-fit:contain}
.payment-choice.selected{border-color:#fb923c;background:#fff8f2;box-shadow:0 0 0 2px rgba(249,115,22,.1)}
.payment-section .payment-details{margin-top:12px}
.payment-section .payment-amount,.payment-checkout-summary dd,.payment-order-total strong{color:#e85d04;font-weight:800;font-variant-numeric:tabular-nums}
.gcash-qr-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;padding:14px;border:1px solid #fed7aa;border-radius:12px;background:#fff7ed;color:#61412e;font-size:12px;line-height:1.5}
.gcash-qr-panel p{margin:6px 0 0}
.gcash-qr-panel .gcash-merchant-name{font-weight:800}
.gcash-qr-panel .gcash-qr-total strong{color:#e85d04;font-size:16px;font-variant-numeric:tabular-nums}
.gcash-checkout-qr{display:block;width:min(190px,40vw);height:auto;flex:0 0 auto;border:1px solid #f0e2d7;border-radius:8px;background:#fff}
.payment-provider-note{margin:10px 0;padding:13px;border:1px solid #fed7aa;border-radius:10px;background:#fff7ed;color:#61412e;font-size:12px;line-height:1.55}
.payment-provider-note p{margin:6px 0 0}
.payment-provider-note label{margin-top:10px!important}
.receipt-ocr-preview{margin:10px 0;padding:10px 12px;border:1px solid #d6d3d1;border-radius:8px;background:#fff;color:#51443b;font-size:11px}
.receipt-ocr-preview p{margin:4px 0}
.checkout-receipt-image-preview{margin:10px 0}
.checkout-receipt-preview{display:inline-block;max-width:100%;color:#9a3412;font-size:12px;font-weight:700}
.checkout-receipt-preview img{display:block;width:min(260px,100%);max-height:300px;object-fit:contain;border:1px solid #fed7aa;border-radius:10px;background:#fff}
.receipt-payment.payment-tab{display:grid;gap:14px}
.payment-tab-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;color:#51443b;font-size:12px}
.payment-tab-summary strong{color:#31231b}
.payment-tab-label{margin:0 0 7px;color:#5b463a;font-size:12px;font-weight:800}
.payment-receipt-preview>a{display:inline-flex;max-width:100%;padding:6px;border:1px solid #fed7aa;border-radius:12px;background:#fff7ed}
.payment-receipt-preview img{display:block;width:min(360px,100%);max-height:480px;object-fit:contain;border-radius:8px}
.payment-receipt-preview small{display:block;margin-top:6px;color:#78675c;font-size:11px}
.payment-tab-ocr{display:grid;gap:5px;color:#5b463a;font-size:12px}
.payment-tab-reference{padding:12px;border:1px solid #fed7aa;border-radius:10px;background:#fffaf5;color:#5b463a;font-size:12px}
.payment-tab-reference>p{margin:4px 0 10px}
.save-payment-reference{display:grid;gap:8px;margin-top:9px}
.save-payment-reference>label{font-weight:750}
.payment-reference-controls{display:flex;gap:7px}
.payment-reference-controls input{flex:1;min-width:0;min-height:42px;padding:10px;border:1px solid #d6c4b5;border-radius:8px;font:inherit;font-size:14px}
.payment-tab-status{padding:12px;border:1px solid #fed7aa;border-radius:10px;background:#fff7ed;color:#61412e}
.payment-tab-status strong{color:#9a3412}
.payment-tab-status p{margin:5px 0 0;font-size:12px;line-height:1.5}
.payment-tab-warning{padding:10px;border:1px solid #fecaca;border-radius:8px;background:#fef2f2;color:#b42318;font-size:12px}
.payment-tab-warning[hidden]{display:none}
.payment-ocr-status{margin:8px 0;padding:10px 11px;border:1px solid #fed7aa;border-radius:8px;background:#fff7ed;color:#7c2d12;font-size:12px;line-height:1.5}
.payment-ocr-status.success{border-color:#bbf7d0;background:#f0fdf4;color:#166534}
.payment-ocr-status.error,.payment-ocr-status.warning{border-color:#fecaca;background:#fef2f2;color:#b42318}
.payment-ocr-status.loading::before{display:inline-block;width:13px;height:13px;margin-right:8px;border:2px solid #fed7aa;border-top-color:#ea580c;border-radius:50%;content:"";animation:checkout-spin .7s linear infinite;vertical-align:-2px}
.payment-ocr-status.loading{border-color:#fed7aa;background:#fff7ed;color:#9a3412}
.orders-receipt-preview{display:block;max-width:100%;margin:8px 0;color:var(--primary);font-size:10px;font-weight:750}
.orders-receipt-preview img{display:block;width:min(220px,100%);max-height:280px;object-fit:contain;border:1px solid #fed7aa;border-radius:8px;background:#fff}
.payment-error{margin:10px 0;padding:11px 13px;border:1px solid #fecaca;border-radius:9px;background:#fef2f2;color:#b42318;font-size:12px;line-height:1.5}
.place-order{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;padding:12px 16px;border:0;border-radius:10px;background:linear-gradient(100deg,#f97316,#fb8500);color:#fff;font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 6px 16px rgba(249,115,22,.19);transition:filter .18s,box-shadow .18s}
.place-order:hover:not(:disabled){filter:brightness(.96);box-shadow:0 8px 20px rgba(249,115,22,.26)}
.place-order:disabled{background:#d6d3d1;color:#fff;box-shadow:none;cursor:not-allowed}
.place-order[aria-busy=true]{cursor:wait}
.checkout-spinner{display:inline-block;width:16px;height:16px;flex:0 0 16px;border:2px solid rgba(249,115,22,.25);border-top-color:#f97316;border-radius:50%;animation:checkout-spin .7s linear infinite;vertical-align:middle}
.place-order .checkout-spinner{border-color:rgba(255,255,255,.45);border-top-color:#fff}
.checkout-spinner[hidden],.checkout-loading[hidden]{display:none}
@media(max-width:520px){.gcash-qr-panel{align-items:flex-start;flex-direction:column}.gcash-checkout-qr{width:min(220px,100%);align-self:center}}
@media(max-width:520px){.payment-tab-summary{grid-template-columns:1fr}.payment-reference-controls{align-items:stretch}.payment-reference-controls .btn{padding:8px 10px}.payment-receipt-preview img{max-height:360px}}
.checkout-loading{margin:8px 0;color:#a64b0b;font-size:12px;text-align:center}
@keyframes checkout-spin{to{transform:rotate(360deg)}}
.payment-checkout-page{max-width:760px;margin:30px auto;padding:0 16px 36px}
.payment-checkout-card{padding:clamp(20px,4vw,34px);border:1px solid #f3e5da;border-radius:18px;background:#fff;box-shadow:0 10px 35px rgba(92,55,29,.08)}
.payment-checkout-card .eyebrow{color:#e85d04;font-size:11px;font-weight:800;letter-spacing:1px}
.payment-checkout-card h1{color:#3e3028}
.payment-status-spinner{margin:0 8px 0 0}
.payment-checkout-summary{display:grid;grid-template-columns:minmax(110px,1fr) 2fr;gap:9px 14px;padding:16px;border-radius:12px;background:#fff8f2;font-size:13px}
.payment-checkout-summary dt{color:#74665d}
.payment-checkout-summary dd{margin:0;overflow-wrap:anywhere}
.payment-order-items{margin-top:20px}
.payment-order-items h2{margin:0 0 10px;color:#3e3028;font-size:16px}
.payment-order-item,.payment-order-total{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid #f1e8e1;font-size:13px}
.payment-order-item>span{display:grid;gap:4px}
.payment-order-item small{color:#85776f;font-size:11px}
.payment-order-item>strong{white-space:nowrap}
.payment-order-total{border:0;font-size:15px;font-weight:800}
.payment-provider-link,.payment-app-link,.payment-place-order,.payment-back-link{margin-top:14px}
.payment-provider-link,.payment-app-link,.payment-place-order{background:#f97316;color:#fff;border-color:#f97316}
.payment-provider-link:hover,.payment-app-link:hover,.payment-place-order:hover:not(:disabled){background:#ea580c;color:#fff;border-color:#ea580c}
.payment-provider-link[hidden],.payment-app-link[hidden]{display:none}
.payment-place-order:disabled{background:#d6d3d1;border-color:#d6d3d1;cursor:not-allowed}
.payment-checkout-help{color:#75665d;font-size:12px;line-height:1.55}
@media(min-width:761px){.payment-app-link{display:none}}
@media(max-width:520px){
  .payment-checkout-page{margin:16px auto;padding:0 10px 24px}
  .payment-checkout-summary{grid-template-columns:1fr;gap:5px}
  .payment-checkout-summary dd{margin-bottom:6px}
}

.auth-login-page .auth-card{
  max-width:410px;
  padding:clamp(24px,3vw,34px);
  border-radius:14px;
}
.auth-login-page .auth-card .kicker{
  margin-bottom:8px;
  color:#e85d04;
  font-size:11px;
  letter-spacing:1.2px;
  text-transform:uppercase;
}
.auth-login-page .auth-card .description{
  margin-bottom:24px;
  font-size:13px;
}
.auth-login-page .auth-card .form-group{margin-bottom:16px}
.auth-login-page .auth-card .form-group label{
  margin-bottom:7px;
  color:#55483e;
  font-size:12px;
  font-weight:600;
}
.auth-login-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.auth-login-label-row a{color:#a84b0d;font-size:11px;font-weight:600;text-decoration:none}
.auth-login-label-row a:hover{text-decoration:underline}
.auth-login-input{position:relative;display:flex;align-items:center}
.auth-login-input>svg{
  position:absolute;left:13px;z-index:1;width:17px;height:17px;
  fill:none;stroke:#9b806b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;
  pointer-events:none;
}
.auth-login-page .auth-card .auth-login-input input{
  width:100%;min-width:0;min-height:46px;padding:10px 12px 10px 40px;
  border:1px solid #e8dfd6;border-radius:9px;background:#fff;color:#3e3028;font-size:12px;
}
.auth-login-page .auth-card .auth-login-input input::placeholder{color:#a99b8f}
.auth-login-page .auth-card .auth-login-input input:focus{
  border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.12);outline:none;
}
.auth-login-page .auth-card .auth-login-password input{padding-right:65px}
.auth-login-page .auth-card .auth-login-password .password-toggle{
  position:absolute;right:9px;top:50%;min-height:32px;margin:0;padding:0 8px;
  transform:translateY(-50%);border:0;background:transparent;color:#9a6a43;font-size:11px;
}
.auth-login-captcha{
  display:grid;grid-template-columns:20px minmax(0,1fr) 82px;align-items:center;gap:10px;
  padding:11px 12px;border:1px solid #f0e5d8;border-radius:10px;background:#fff8f1;
}
.auth-login-page .auth-card .auth-login-captcha label{display:grid;gap:3px;margin:0;color:#75665d;font-size:10px;font-weight:500}
.auth-login-page .auth-card .auth-login-captcha label strong{color:#65452e;font-size:12px;font-weight:700}
.auth-login-captcha>svg{width:19px;height:19px;fill:none;stroke:#ba6b2b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}
.auth-login-page .auth-card .auth-login-captcha input{
  width:100%;min-width:0;min-height:40px;padding:7px;border:1px solid #eadfd3;
  border-radius:8px;background:#fff;text-align:center;font-size:12px;
}
.auth-login-page .auth-card .auth-login-submit{
  display:flex;align-items:center;justify-content:center;gap:12px;min-height:46px;
  margin-top:4px;border-radius:9px;font-size:13px;
}
.auth-login-submit svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.auth-login-divider{display:flex;align-items:center;gap:11px;margin:20px 0 15px;color:#85776f;font-size:11px;text-align:center}
.auth-login-divider::before,.auth-login-divider::after{content:"";height:1px;flex:1;background:#eee3d8}
.auth-login-register{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:43px;
  border:1px solid #e4d5c6;border-radius:9px;background:#fff;color:#8f4819;
  font-size:12px;font-weight:700;text-decoration:none;transition:background .18s,border-color .18s;
}
.auth-login-register:hover{border-color:#f4b77c;background:#fff8f1}
.auth-login-register>span{font-size:17px;line-height:1}
.auth-login-page .auth-demo-accounts{
  display:block;margin:10px 0 0;padding:0;border:0;background:transparent;
}
.auth-login-page .auth-demo-toggle{
  display:flex;align-items:center;gap:9px;min-height:43px;padding:10px 13px;
  border:1px solid #e8dfd6;border-radius:9px;background:#fff;color:#55483e;
  font-size:12px;transition:background .18s,border-color .18s;
}
.auth-login-page .auth-demo-toggle::-webkit-details-marker{display:none}
.auth-login-page .auth-demo-toggle::marker{content:""}
.auth-login-page .auth-demo-toggle:hover,.auth-login-page .auth-demo-disclosure[open] .auth-demo-toggle{
  border-color:#edc8a7;background:#fff8f1;
}
.auth-login-page .auth-demo-toggle>svg{
  width:16px;height:16px;fill:none;stroke:#a45a22;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6;
}
.auth-login-page .auth-demo-toggle strong{color:#68472f;font-size:12px}
.auth-demo-toggle-label{margin-left:auto;color:#8b796a;font-size:10px;font-weight:500}
.auth-login-page .auth-demo-content{
  display:grid;gap:10px;margin-top:8px;padding:12px;
  border:1px solid #f0e5d8;border-radius:10px;background:#fffaf4;
}
.auth-login-page .auth-demo-content .auth-demo-heading{flex-wrap:wrap}
.auth-login-page .auth-demo-content .auth-demo-heading strong{font-size:12px}
.auth-login-page .auth-demo-content .auth-demo-notice{margin:0;color:#8b4b26;font-size:11px;line-height:1.5}
.auth-login-page .auth-demo-content .auth-demo-footnote{margin:0;line-height:1.5}
.auth-login-page .auth-demo-content .auth-demo-copy-status{margin:0;color:#286440;font-size:11px}
@media(max-width:640px){
  .auth-login-page .auth-card{padding:22px 18px}
  .auth-login-page .auth-card .description{margin-bottom:20px}
  .auth-login-page .auth-card .form-group{margin-bottom:14px}
}