:root { --theme: #667eea; --theme2: #764ba2; --floating-nav-bottom: 12px; --floating-nav-height: 72px; --floating-nav-clearance: 104px; --viewport-bottom-extension: env(safe-area-inset-bottom, 0px); --safe-area-bg: #f5f5f7; --login-bg: linear-gradient(160deg,#eef2ff 0%,#e8ecff 50%,#f3f0ff 100%); --bottom-cover-height: 36px; }
@supports (height: max(36px, env(safe-area-inset-bottom, 0px))) {
  :root { --bottom-cover-height: max(36px, env(safe-area-inset-bottom, 0px)); }
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { height: 100%; width: 100%; overflow: hidden; touch-action: manipulation; background: var(--safe-area-bg); overscroll-behavior: none; }
body { font-family: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--safe-area-bg); color: #1c1c1e; overflow: hidden; overscroll-behavior: none; height: 100%; height: calc(100dvh + var(--viewport-bottom-extension)); width: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: calc(0px - var(--viewport-bottom-extension)); -webkit-overflow-scrolling: touch; }
body::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: var(--bottom-cover-height); background: var(--safe-area-bg); pointer-events: none; z-index: 0; }
.app { display: flex; flex-direction: column; height: 100%; height: calc(100dvh + var(--viewport-bottom-extension)); width: 100%; max-width: 520px; margin: 0 auto; background: #f5f5f7; position: relative; z-index: 2; }

/* Header */
.header { background: linear-gradient(135deg, var(--theme,#667eea) 0%, var(--theme2,#764ba2) 100%); color: #fff; padding: 20px 20px 32px; padding-top: max(20px, env(safe-area-inset-top)); position: relative; overflow: hidden; border-radius: 0 0 28px 28px; box-shadow: 0 8px 32px rgba(102,126,234,0.3); }
.header::before { content: ''; position: absolute; top: -40%; right: -15%; width: 260px; height: 260px; background: rgba(255,255,255,0.1); border-radius: 50%; }
.header::after { content: ''; position: absolute; bottom: -35%; left: -10%; width: 200px; height: 200px; background: rgba(255,255,255,0.07); border-radius: 50%; }
.header h1 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; position: relative; z-index: 1; text-align: center; }
.header p { font-size: 13px; opacity: 0.8; margin-top: 6px; font-weight: 400; position: relative; z-index: 1; text-align: center; }

/* Content */
.content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: var(--floating-nav-clearance); scroll-behavior: auto; min-height: 0; overscroll-behavior: none; }

/* Tab Bar */
.tab-bar { display: flex; gap: 4px; background: rgba(248,250,252,0.96); border: 1px solid rgba(203,213,225,0.82); border-radius: 26px; padding: 6px; position: fixed; bottom: var(--floating-nav-bottom); left: 12px; right: 12px; z-index: 100; min-height: var(--floating-nav-height); box-shadow: 0 14px 34px rgba(15,23,42,0.12); transform: translateZ(0); contain: layout paint; }
.tab-item { flex: 1; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 4px; cursor: pointer; border: none; border-radius: 20px; background: transparent; color: #64748b; font-size: 10px; line-height: 1.15; font-weight: 800; transition: background-color 0.12s ease, color 0.12s ease, transform 0.08s ease; position: relative; touch-action: manipulation; overflow: hidden; transform: translateZ(0); }
.tab-item.active { background: #ffffff; color: #111827; box-shadow: 0 8px 18px rgba(15,23,42,0.10); }
.tab-item:active { transform: scale(0.97); }
.tab-item.active svg { transform: scale(1.08); }
.tab-item.active::after { display: none; }
.tab-item svg { width: 21px; height: 21px; transition: transform 0.12s ease; }
.tab-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; }

/* Stat Grid */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; margin-top: -12px; position: relative; z-index: 2; }
.stat-card { background: #ffffff; border-radius: 22px; padding: 20px 14px; text-align: center; box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); position: relative; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 130px; }
.stat-card:nth-child(2) { animation-delay: 1s; }
.stat-card:nth-child(3) { animation-delay: 2s; }
.stat-card:nth-child(4) { animation-delay: 3s; }
.stat-card.clickable { cursor: pointer; touch-action: manipulation; }
.stat-card.clickable:focus-visible { outline: 3px solid rgba(255,152,0,0.35); outline-offset: 3px; }
@media (hover:hover) { .stat-card.clickable:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,0.10); } }
.stat-card:active { transform: scale(0.96); box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.stat-card .icon { font-size: 28px; margin-bottom: 8px; display: block; position: relative; z-index: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12)); }
.stat-card .value { font-size: 26px; font-weight: 800; color: #1c1c1e; letter-spacing: -0.5px; position: relative; z-index: 1; }
.stat-card .label { font-size: 11px; color: #9ca3af; margin-top: 5px; font-weight: 500; position: relative; z-index: 1; }
@keyframes statPulse { 0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04); } 50% { box-shadow: 0 6px 28px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.06); } }
.skel{background:linear-gradient(90deg,#ebebf0 25%,#e0e0e8 50%,#ebebf0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px;}

/* Section Title */
.section-title { font-size: 17px; font-weight: 700; color: #1c1c1e; padding: 20px 16px 10px; letter-spacing: -0.2px; }

/* Cards */
.card { background: #ffffff; border-radius: 18px; margin: 0 16px 12px; padding: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.03); cursor: pointer; transition: transform 0.25s, box-shadow 0.25s; border: 1px solid rgba(0,0,0,0.06); }
.owner-menu-category, .product-owner-card { content-visibility: auto; contain-intrinsic-size: 220px; }
.card:active { transform: scale(0.98); box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.card-row { display: flex; justify-content: space-between; align-items: center; }
.card-title { font-size: 15px; font-weight: 600; color: #1c1c1e; }
.card-sub { font-size: 12px; color: #9ca3af; margin-top: 3px; font-weight: 400; }
.card-price { font-size: 18px; font-weight: 700; color: #667eea; }

/* Badge */
.badge { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; margin-top: 8px; letter-spacing: 0.2px; }
.badge-new { background: rgba(220,38,38,0.1); color: #dc2626; }
.badge-paid { background: rgba(22,163,74,0.1); color: #16a34a; }
.badge-pending { background: rgba(217,119,6,0.1); color: #d97706; }
.badge-preparing { background: rgba(37,99,235,0.1); color: #2563eb; }

/* Search */
.search-bar { margin: 16px; padding: 14px 18px; background: #ffffff; border-radius: 14px; border: 1.5px solid rgba(0,0,0,0.08); font-size: 14px; width: calc(100% - 32px); transition: border-color 0.3s, box-shadow 0.3s; font-family: inherit; color: #1c1c1e; }
.search-bar:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.15); outline: none; }

/* Staff management */
.staff-add-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 76px; gap: 8px; align-items: center; }
.staff-add-input,
.staff-add-select { min-width: 0; width: 100%; padding: 11px 12px; border: 1.5px solid #e9ecef; border-radius: 10px; font-size: 14px; font-family: inherit; background: #fff; color: #1c1c1e; height: 44px; }
.staff-add-select { font-size: 13px; }
.staff-add-btn { margin: 0; padding: 0 16px; min-width: 76px; height: 44px; font-size: 13px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; border-radius: 22px; }
@media (max-width: 430px) {
  .staff-add-form { grid-template-columns: 1fr 1fr; }
  .staff-add-btn { grid-column: 1 / -1; width: 100%; border-radius: 12px; }
}

/* Chips */
.chips { display: flex; gap: 8px; padding: 0 16px 12px; flex-wrap: wrap; }
.chip { padding: 7px 16px; border-radius: 24px; font-size: 13px; cursor: pointer; border: 1.5px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.04); color: #6b7280; font-weight: 500; transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s; font-family: inherit; }
.chip.active { background: linear-gradient(135deg, var(--theme,#667eea), var(--theme2,#764ba2)); color: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(102,126,234,0.3); }

/* Avatar */
.avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex-shrink: 0; font-size: 18px; box-shadow: 0 2px 8px rgba(102,126,234,0.3); }

/* FAB */
.fab { position: fixed; bottom: 95px; right: 20px; background: linear-gradient(135deg, var(--theme,#667eea), var(--theme2,#764ba2)); color: #fff; border: none; border-radius: 28px; padding: 14px 22px; font-size: 14px; font-weight: 600; box-shadow: 0 6px 24px rgba(102,126,234,0.45); cursor: pointer; z-index: 50; display: flex; align-items: center; gap: 8px; font-family: inherit; transition: transform 0.25s, box-shadow 0.25s; }
.fab:active { transform: scale(0.95); box-shadow: 0 3px 12px rgba(102,126,234,0.3); }

/* Product Grid */
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px; }
.product-card { background: #ffffff; border-radius: 16px; padding: 20px 14px; text-align: center; cursor: pointer; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s; }
.product-card:active { transform: scale(0.96); }
.product-card .emoji { font-size: 40px; margin-bottom: 8px; display: block; }
.product-card .name { font-size: 14px; font-weight: 600; }

/* Detail page */
.detail-header { background: linear-gradient(135deg, var(--theme,#667eea), var(--theme2,#764ba2)); color: #fff; padding: 24px 20px; padding-top: max(24px, env(safe-area-inset-top)); border-radius: 0 0 28px 28px; position: relative; overflow: hidden; }
.detail-header h1 { text-align: center; }
.detail-header::before { content: ''; position: absolute; top: -30%; right: -20%; width: 180px; height: 180px; background: rgba(255,255,255,0.06); border-radius: 50%; pointer-events: none; }
.back-btn { background: rgba(255,255,255,0.72); border: none; color: #1f2937; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 24px; font-family: inherit; font-weight: 700; transition: all 0.2s; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.back-btn:hover { background: rgba(255,255,255,0.86); color: #111827; }
.back-btn:active { background: rgba(255,255,255,0.95); }
.back-to-menu-btn { display: block; width: 100%; padding: 11px; border: none; border-radius: 12px; background: transparent; color: #9ca3af; font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit; margin-top: 12px; transition: all 0.2s; }
.back-to-menu-btn:hover { color: var(--theme,#667eea); background: rgba(102,126,234,0.07); }
.product-square { background: #ffffff; border-radius: 16px; padding: 14px 10px 16px; text-align: center; cursor: pointer; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; border: 2px solid rgba(0,0,0,0.08); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: hidden; min-width: 0; width: 100%; box-sizing: border-box; }
.product-square:hover { border-color: #11998e; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(17,153,142,0.15); }
.product-square:active { transform: scale(0.96); }
.product-square.sold-out { opacity: 0.6; background: #f5f5f7; }
@media (max-width: 400px) { .product-square { padding: 10px 8px 12px; } }
.detail-info { background: #ffffff; margin: 16px; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
.detail-row { display: flex; align-items: center; padding: 16px; border-bottom: 1px solid rgba(0,0,0,0.06); gap: 12px; }
.detail-row .icon { font-size: 20px; }
.detail-row .text { font-size: 14px; color: #1c1c1e; font-weight: 500; }

.btn { display: block; width: calc(100% - 32px); margin: 10px 16px; padding: 16px; border: none; border-radius: 14px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; transition: transform 0.2s, opacity 0.2s; }
.btn:active { transform: scale(0.98); }
.btn-green { background: linear-gradient(135deg, #43a047, #2e7d32); color: #fff; box-shadow: 0 4px 15px rgba(67,160,71,0.3); }
.btn-outline { background: transparent; color: var(--theme,#667eea); border: 2px solid var(--theme,#667eea); }

/* Items table - mobile responsive */
.items-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0; }
.items-table { width: 100%; border-collapse: collapse; min-width: 320px; }
.items-table th { text-align: left; font-size: 11px; color: #9ca3af; padding: 10px 16px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; background: #f5f5f7; white-space: nowrap; }
.items-table td { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.items-table .price { text-align: right; font-weight: 700; color: #667eea; white-space: nowrap; }

/* Toggle */
.toggle { position: relative; width: 48px; height: 28px; background: #ddd; border-radius: 14px; cursor: pointer; transition: background 0.3s; }
.toggle.on { background: linear-gradient(135deg, #43a047, #2e7d32); box-shadow: 0 2px 8px rgba(67,160,71,0.3); }
.toggle::after { content: ''; position: absolute; width: 22px; height: 22px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: all 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.toggle.on::after { left: 23px; }

/* Shop Status Card */
.shop-status-card { background: #ffffff; border-radius: 18px; margin: 12px 16px 12px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.06); transition: box-shadow 0.3s ease; }
.shop-status-card.closed { opacity: 0.82; }
.shop-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-right: 12px; background: #d1d5db; }
.shop-status-card.open .shop-status-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); animation: dotPulse 2s ease-in-out infinite; }
@keyframes dotPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.2); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0.08); } }
.shop-status-badge { font-size: 11.5px; font-weight: 600; padding: 4px 12px; border-radius: 20px; background: rgba(0,0,0,0.06); color: #9ca3af; white-space: nowrap; }
.shop-status-card.open .shop-status-badge { background: rgba(34,197,94,0.15); color: #4ade80; }
.shop-toggle { position: relative; width: 50px; height: 28px; background: #d1d5db; border-radius: 14px; cursor: pointer; transition: background 0.3s; flex-shrink: 0; }
.shop-toggle.on { background: #22c55e; }
.shop-toggle::after { content: ''; position: absolute; width: 22px; height: 22px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.shop-toggle.on::after { left: 25px; }
.shop-status-label { font-size: 14px; font-weight: 600; color: #1c1c1e; }
.shop-status-sub { font-size: 11.5px; color: #9ca3af; margin-top: 2px; }

/* Profile */
.profile-header { background: linear-gradient(135deg, var(--theme,#667eea), var(--theme2,#764ba2)); color: #fff; padding: 40px 20px 30px; text-align: center; border-radius: 0 0 28px 28px; }
.profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 32px; margin: 0 auto 12px; border: 3px solid rgba(255,255,255,0.3); }

/* Price card */
.price-card { background: #ffffff; margin: 0 16px 14px; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
.price-card-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; }
.price-card-body { padding: 0 16px 16px; }
.price-input { width: 100%; padding: 12px 14px; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 12px; font-size: 15px; font-family: inherit; transition: all 0.3s; background: #f8f8fc; color: #1c1c1e; }
.price-input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.15); outline: none; background: #ffffff; }

/* Banner */
.banner { display: flex; align-items: center; gap: 14px; margin: 16px; padding: 16px; background: rgba(59,130,246,0.1); border-radius: 16px; border: 1px solid rgba(59,130,246,0.2); }
.banner .bolt { font-size: 30px; }
.banner .title { font-size: 15px; font-weight: 600; color: #60a5fa; }
.banner .sub { font-size: 12px; color: #a1a1aa; margin-top: 2px; }

/* Total bar */
.total-bar { display: flex; justify-content: space-between; align-items: center; padding: 16px; background: rgba(0,0,0,0.03); }

/* Button row */
.btn-row { display: flex; gap: 12px; padding: 16px; padding-bottom: 40px; }
.btn-row .btn { flex: 1; margin: 0; }

/* Store history date picker */
.history-date-card {
  margin: 0 16px 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  box-shadow: 0 8px 26px rgba(15,23,42,0.08);
}
.history-date-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}
.history-date-title strong {
  color: #ea580c;
  background: #fff7ed;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  white-space: nowrap;
}
.history-date-grid {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) 112px;
  gap: 8px;
  align-items: stretch;
}
.history-quick-btn,
.history-view-btn {
  min-height: 52px;
  border: none;
  border-radius: 14px;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.history-quick-btn {
  background: #f3f4f6;
  color: #374151;
  border: 1.5px solid #e5e7eb;
}
.history-quick-btn:active,
.history-view-btn:active {
  transform: scale(0.98);
}
.history-view-btn {
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  box-shadow: 0 10px 22px rgba(34,197,94,0.22);
}
.history-date-input-wrap {
  min-height: 52px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 14px;
  background: #f9fafb;
  cursor: pointer;
}
.history-date-input-wrap span {
  color: #6b7280;
  font-size: 12px;
  font-weight: 800;
}
.history-date-input-wrap input {
  width: 150px;
  border: none;
  outline: none;
  background: transparent;
  color: #111827;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}
@media (max-width: 640px) {
  .history-date-grid {
    grid-template-columns: 1fr 1fr;
  }
  .history-date-input-wrap,
  .history-view-btn {
    grid-column: 1 / -1;
  }
  .history-date-input-wrap input {
    width: 140px;
  }
}

/* Empty State */
.empty { text-align: center; padding: 60px 24px 40px; color: #b0b0b0; }
.empty svg { margin-bottom: 16px; opacity: 0.45; }
.empty .icon { font-size: 56px; margin-bottom: 14px; display: block; filter: grayscale(0.3); }
.empty h3 { font-size: 16px; font-weight: 700; color: #374151; margin-bottom: 6px; }
.empty p { font-size: 13px; color: #6b7280; margin-bottom: 18px; line-height: 1.5; }
.empty .empty-cta { display: inline-flex; align-items: center; gap: 6px; background: var(--theme,#667eea); color: #fff; border: none; border-radius: 14px; padding: 11px 22px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; touch-action: manipulation; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-56px) scale(1.3); } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes bounceIn { 0%{transform:scale(0.8);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
@keyframes floatOrb1 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(22px,-32px)} 66%{transform:translate(-18px,22px)} }
@keyframes floatOrb2 { 0%,100%{transform:translate(0,0)} 33%{transform:translate(-28px,18px)} 66%{transform:translate(22px,-28px)} }
@keyframes logoFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes logoPulse { 0%,100%{box-shadow:0 10px 32px rgba(0,0,0,0.25),0 0 0 0 rgba(255,255,255,0.8),0 0 0 0 rgba(255,255,255,0.4)} 40%{box-shadow:0 14px 42px rgba(0,0,0,0.3),0 0 0 12px rgba(255,255,255,0.12),0 0 0 0 rgba(255,255,255,0.1)} 75%{box-shadow:0 14px 42px rgba(0,0,0,0.3),0 0 0 20px rgba(255,255,255,0.04),0 0 0 36px rgba(255,255,255,0)} }
@keyframes btnShine { 0%{transform:translateX(-250%) skewX(-20deg)} 40%,100%{transform:translateX(450%) skewX(-20deg)} }
@keyframes loginBoxIn { from{opacity:0;transform:translateY(36px) scale(0.94)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes loginSectionIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.card, .stat-card, .product-card, .price-card { animation: fadeIn 0.3s ease-out; }

/* Loading Spinner */
.spinner { width: 36px; height: 36px; border: 3px solid rgba(102,126,234,0.2); border-top-color: var(--theme,#667eea); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto; }
.spinner-sm { width: 20px; height: 20px; border-width: 2px; }

/* Skeleton Loading */
.skeleton { background: linear-gradient(90deg, #ebebf0 25%, #e0e0e8 50%, #ebebf0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
.skeleton-text { height: 14px; margin: 8px 16px; }
.skeleton-text.short { width: 40%; }
.skeleton-card { height: 80px; margin: 0 16px 12px; border-radius: 18px; }
.skeleton-stat { height: 100px; border-radius: 20px; }

/* Cart Float */
.cart-float { position: fixed; pointer-events: none; font-size: 15px; font-weight: 800; color: #11998e; z-index: 9999; animation: floatUp 0.65s ease-out forwards; white-space: nowrap; }

/* Bottom Sheet */
.bs-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9990; display: flex; align-items: flex-end; animation: fadeIn 0.2s ease; }
.bs-sheet { background: #ffffff; border-radius: 24px 24px 0 0; padding: 12px 20px 28px; width: 100%; animation: slideUp 0.3s ease; }
.bs-handle { width: 40px; height: 4px; border-radius: 4px; background: rgba(0,0,0,0.12); margin: 0 auto 18px; }
.bs-title { font-size: 18px; font-weight: 700; color: #1c1c1e; margin-bottom: 6px; }
.bs-msg { font-size: 14px; color: #6b7280; line-height: 1.6; margin-bottom: 20px; }
.bs-btn { width: 100%; padding: 15px; border: none; border-radius: 16px; font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; margin-bottom: 10px; touch-action: manipulation; }
.bs-btn-confirm { background: linear-gradient(135deg, var(--theme,#667eea), var(--theme2,#764ba2)); color: #fff; }
.bs-btn-danger { background: linear-gradient(135deg, #ff5252, #d32f2f); color: #fff; }
.bs-btn-cancel { background: rgba(0,0,0,0.06); color: #6b7280; margin-bottom: 0; }
.bs-icon-wrap { display: flex; justify-content: center; margin-bottom: 14px; }

@media (min-width: 769px) {
  #kitchen-menu-modal.bs-overlay,
  #kitchen-soldout-modal.bs-overlay {
    align-items: center;
    justify-content: center;
    padding: 28px;
  }

  #kitchen-menu-modal .bs-sheet,
  #kitchen-soldout-modal .bs-sheet {
    width: min(760px, calc(100vw - 56px));
    max-height: min(82vh, 780px);
    border-radius: 24px;
    padding: 14px 20px 20px;
    box-shadow: 0 24px 80px rgba(17,24,39,0.22);
    animation: fadeIn 0.18s ease;
  }
}

/* Loading Overlay */
.loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(4px); z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.loading-overlay .spinner { width: 44px; height: 44px; }
.loading-overlay p { font-size: 14px; color: #1c1c1e; font-weight: 500; }

/* Disabled button */
.btn:disabled, .btn.loading { opacity: 0.6; pointer-events: none; }
.btn.loading { position: relative; color: transparent !important; }
.btn.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
.btn.loading-label { opacity: 0.85; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn.loading-label::before { content: ''; width: 18px; height: 18px; flex: 0 0 18px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
.action-loading { opacity: 0.82 !important; pointer-events: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; user-select: none !important; }
.action-loading::before { content: ''; width: 17px; height: 17px; flex: 0 0 17px; border: 2px solid currentColor; border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; animation: spin 0.65s linear infinite; opacity: 0.9; }
.action-loading.btn { display: flex !important; }
.menu-slides-busy { position: absolute; inset: 0; z-index: 5; background: rgba(255,255,255,0.88); backdrop-filter: blur(3px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #1c1c1e; font-size: 13px; font-weight: 700; text-align: center; }
.menu-slides-busy .spinner { width: 34px; height: 34px; margin: 0; }
#menu-slide-upload-label.is-disabled { opacity: 0.6; pointer-events: none; }


/* Scrollbar */
.content::-webkit-scrollbar { width: 6px; }

/* ===== RESPONSIVE ===== */

/* ===== Large phone (480px+) ===== */
@media (min-width: 480px) {
  #customer-products-list { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Form */
.form-group { margin: 0 16px 16px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: #6b7280; margin-bottom: 6px; }
.form-input, .form-select { width: 100%; padding: 14px 16px; border: 1.5px solid rgba(0,0,0,0.1); border-radius: 14px; font-size: 15px; font-family: inherit; background: #ffffff; color: #1c1c1e; transition: all 0.3s; appearance: none; }
.form-input::placeholder { color: #9ca3af; }
.form-input:focus, .form-select:focus { border-color: var(--theme,#667eea); box-shadow: 0 0 0 3px rgba(102,126,234,0.12); outline: none; }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }

/* Order item row */
.order-item-row { display: flex; gap: 8px; align-items: center; margin: 0 16px 10px; animation: fadeIn 0.2s ease-out; }
.order-item-row .form-input { margin: 0; }
.order-item-row .item-qty { width: 80px; flex-shrink: 0; }
.order-item-row .item-product { flex: 1; }
.remove-item { width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(255,82,82,0.12); color: #ff5252; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.remove-item:active { background: #ffcdd2; }
.add-item-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 16px 16px; padding: 12px; border: 2px dashed rgba(0,0,0,0.15); border-radius: 14px; background: none; color: #9ca3af; font-size: 14px; font-family: inherit; cursor: pointer; transition: all 0.2s; width: calc(100% - 32px); }
.add-item-btn:active { border-color: #667eea; color: #667eea; background: rgba(102,126,234,0.05); }

/* Order summary */
.order-summary { background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; margin: 0 16px 16px; padding: 16px; }
.order-summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.order-summary-total { display: flex; justify-content: space-between; padding: 10px 0 0; border-top: 2px solid rgba(0,0,0,0.08); margin-top: 8px; font-size: 18px; font-weight: 700; }
.order-summary-total .total-amount { color: #667eea; }

/* Toast notifications */
#toast-container { position: fixed; top: max(16px, calc(env(safe-area-inset-top) + 12px)); left: 12px; right: 12px; z-index: 99998; pointer-events: none; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; background: #1c1c1e; color: #fff; padding: 12px 16px 12px 12px; border-radius: 16px; box-shadow: 0 4px 28px rgba(0,0,0,0.22), 0 1px 6px rgba(0,0,0,0.12); pointer-events: auto; animation: toastIn 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards; cursor: pointer; }
.toast.toast-exit { animation: toastOut 0.25s ease forwards; }
.toast-icon { flex-shrink: 0; display: flex; }
.toast-icon svg { width: 20px; height: 20px; display: block; }
.toast-title { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.35; }
.toast-msg { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.35; margin-top: 1px; }
@keyframes toastIn { from { transform: translateY(-16px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes toastOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.94) translateY(-6px); } }
.notification-countdown-badge { position: absolute; top: 10px; right: 12px; min-width: 38px; height: 24px; padding: 0 8px; border-radius: 999px; background: rgba(17,24,39,0.08); color: #374151; font-size: 12px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; }
.notification-countdown-bar { position: absolute; left: 14px; right: 14px; bottom: 8px; height: 4px; border-radius: 999px; background: rgba(17,24,39,0.08); overflow: hidden; pointer-events: none; }
.notification-countdown-fill { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fb923c, #f97316); transition: width 0.25s linear; }

/* Kitchen tools */
.kitchen-tools-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; width: min(560px, calc(100% - 32px)); margin: 14px auto 0; }
.kitchen-tool-card { min-height: 48px; border: 1.5px solid rgba(255,152,0,0.26); border-radius: 999px; background: rgba(255,255,255,0.94); color: #1f2937; box-shadow: 0 8px 22px rgba(0,0,0,0.08); display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 9px 14px 9px 10px; font-family: inherit; text-align: left; cursor: pointer; touch-action: manipulation; backdrop-filter: blur(8px); }
.kitchen-tool-card:active { transform: scale(0.98); }
.kitchen-tool-card-warn { border-color: rgba(239,68,68,0.22); }
.kitchen-tool-icon { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #fff7ed; color: #f97316; font-size: 15px; font-weight: 900; flex: 0 0 auto; }
.kitchen-tool-card-warn .kitchen-tool-icon { background: #fff1f2; color: #e11d48; }
.kitchen-tool-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kitchen-tool-title { font-size: 13px; font-weight: 900; line-height: 1.15; white-space: nowrap; }
.kitchen-tool-sub { font-size: 11px; color: #6b7280; line-height: 1.15; white-space: nowrap; }

/* Owner menu grouped view */
.owner-menu-category { grid-column: 1 / -1; min-width: 0; }
.owner-menu-category-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 10px; padding: 0 2px; }
.owner-menu-category-title { font-size: 17px; font-weight: 900; color: #111827; line-height: 1.2; }
.owner-menu-category-sub { font-size: 12px; color: #6b7280; font-weight: 700; margin-top: 3px; }
.owner-menu-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.product-owner-card { margin: 0 !important; padding: 12px 14px !important; }
#products-list-full.is-searching .product-owner-card { margin: 0 !important; }

/* Staff table menu grouped view */
.restaurant-menu-category { grid-column: 1 / -1; min-width: 0; margin-bottom: 10px; }
.restaurant-menu-category-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; padding: 0 2px; }
.restaurant-menu-category-title { font-size: 16px; font-weight: 900; color: #111827; line-height: 1.2; }
.restaurant-menu-category-count { flex: 0 0 auto; border-radius: 999px; background: #fff7ed; color: #f97316; padding: 5px 10px; font-size: 12px; font-weight: 900; }
.restaurant-menu-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; }

/* Price reset modal */
.price-reset-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.6); z-index: 200; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s; }
.price-reset-box { background: #ffffff; border-radius: 24px; padding: 0; max-width: 360px; width: 92%; box-shadow: 0 20px 60px rgba(0,0,0,0.18); overflow: hidden; }
.price-reset-header { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; padding: 20px; text-align: center; }
.price-reset-header h3 { font-size: 18px; }
.price-reset-header .counter { font-size: 13px; opacity: 0.8; margin-top: 4px; }
.price-reset-body { padding: 24px 20px; }
.price-reset-product { display: flex; align-items: center; gap: 12px; margin-bottom: 16px }
.price-reset-product .emoji { font-size: 36px }
.price-reset-product .name { font-size: 16px; font-weight: 600; color: #1c1c1e; }
.price-reset-product .cat { font-size: 12px; color: #9ca3af; }
.price-reset-input { width: 100%; padding: 14px 16px; border: 2px solid #e9ecef; border-radius: 14px; font-size: 20px; font-weight: 700; font-family: inherit; text-align: center; transition: all 0.3s; }
.price-reset-input:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.15); outline: none; }
.price-reset-input.disabled { background: #f0f0f5; color: #9ca3af; text-decoration: line-through; }
.price-reset-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.price-reset-actions label { font-size: 13px; color: #6b7280; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.price-reset-footer { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid rgba(0,0,0,0.07); }
.price-reset-footer .btn { flex: 1; margin: 0; padding: 14px; font-size: 14px; }
.tc-code-display { display: flex; justify-content: center; gap: 16px; margin: 20px 0 6px; }
.tc-dot { width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid #ccc; background: transparent; transition: all 0.18s; }
.tc-dot.filled { background: #667eea; border-color: #667eea; transform: scale(1.15); }
.tc-dot.error { background: #ff5252; border-color: #ff5252; animation: tcShake 0.35s ease; }
.tc-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 4px; }
.price-numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.tc-numpad-btn, .price-numpad-btn { font-weight: 700; border: 2px solid rgba(0,0,0,0.08); background: #f0f0f5; color: #1c1c1e; cursor: pointer; transition: background 0.1s, transform 0.1s; text-align: center; -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation; }
.tc-numpad-btn:active, .price-numpad-btn:active { background: #667eea; color: #fff; border-color: #667eea; transform: scale(0.93); }
.tc-numpad-btn.del, .price-numpad-btn.del { background: #fff0f0; border-color: #ffcdd2; color: #e53935; }
.tc-numpad-btn.del:active, .price-numpad-btn.del:active { background: #e53935; color: #fff; border-color: #e53935; }
.tc-numpad-btn { padding: 18px 8px; font-size: 26px; border-radius: 16px; }
.tc-numpad-btn.confirm { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; font-size: 22px; }
.tc-numpad-btn.confirm:active { opacity: 0.85; transform: scale(0.93); }
.price-numpad-btn { padding: 15px 8px; font-size: 22px; border-radius: 14px; }
@keyframes tcShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 60%{transform:translateX(6px)} }
.price-reset-input-wrap { position: relative; }
.price-progress { height: 4px; background: rgba(0,0,0,0.08); border-radius: 2px; overflow: hidden; }
.price-progress-bar { height: 100%; background: linear-gradient(90deg, #667eea, #764ba2); border-radius: 2px; transition: width 0.3s; }

/* Login page */
.on-login { --safe-area-bg: var(--login-bg, #ffffff); background: var(--login-bg, #ffffff) !important; background-size: cover !important; background-position: center !important; }
.on-login body { background: var(--login-bg, #ffffff) !important; background-size: cover !important; background-position: center !important; }
.login-page { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: calc(0px - var(--bottom-cover-height)); min-height: calc(100dvh + var(--bottom-cover-height)); background: var(--login-bg, #ffffff); background-size: cover; background-position: center; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) 20px 24px; overflow: hidden; z-index: 10; }
.login-page::before { content:''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 18%, rgba(255,255,255,0.72), transparent 30%), radial-gradient(circle at 18% 78%, rgba(51,71,255,0.12), transparent 34%), linear-gradient(135deg, rgba(255,255,255,0.28), transparent 44%); }
.login-page::after { content:''; position: fixed; left: 50%; top: 50%; width: min(420px, 86vw); height: min(420px, 86vw); transform: translate(-50%,-50%); border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(51,71,255,0.11), transparent 62%); filter: blur(8px); animation: loginAura 8s ease-in-out infinite; }

/* Orbs */
.login-orb { position: fixed; border-radius: 50%; filter: blur(42px); opacity: 0.75; pointer-events: none; z-index: 0; }
.login-orb-1 { width: 420px; height: 420px; background: rgba(102,126,234,0.10); top: -180px; right: -150px; animation: floatOrb1 9s ease-in-out infinite; }
.login-orb-2 { width: 340px; height: 340px; background: rgba(247,147,30,0.10); bottom: -120px; left: -130px; animation: floatOrb2 13s ease-in-out infinite; }
.login-orb-3 { width: 220px; height: 220px; background: rgba(17,153,142,0.08); top: 42%; right: -70px; animation: floatOrb1 17s ease-in-out infinite reverse; }
.login-orb-4 { width: 260px; height: 260px; background: rgba(255,107,53,0.08); top: 7%; left: -120px; animation: floatOrb2 11s ease-in-out infinite 2s; }
.login-orb-5 { width: 140px; height: 140px; background: rgba(15,23,42,0.06); bottom: 20%; right: -40px; animation: floatOrb2 15s ease-in-out infinite reverse 1s; }

/* HeroUI dark glass card */
.login-box { background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,255,0.92)); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border: 1px solid rgba(255,255,255,0.78); border-radius: 28px; padding: 28px 22px 24px; max-width: 360px; width: 100%; box-shadow: 0 30px 80px rgba(30,41,59,0.18), 0 12px 32px rgba(51,71,255,0.12), inset 0 1px 0 rgba(255,255,255,0.92); position: relative; z-index: 1; animation: loginBoxIn 0.65s cubic-bezier(0.34,1.4,0.64,1) both; overflow: hidden; }
.login-box::before { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, var(--theme,#667eea) 0%, #f7931e 100%); z-index: 2; opacity: 0.75; }
.login-box::after { content:''; position:absolute; inset:1px; border-radius:27px; pointer-events:none; background: linear-gradient(135deg, rgba(255,255,255,0.60), transparent 38%); opacity:0.65; z-index:0; }
#login-logo-wrap, .login-box h2, .login-box .subtitle, #shop-selection, #role-selection, #shop-login, #customer-login, #restaurant-customer-login, #admin-login, #admin-panel, #customer-selection { position: relative; z-index: 1; }
#login-logo-icon { animation: logoFloat 3.5s ease-in-out infinite, logoPulse 2.8s ease-out infinite; }
#shop-selection, #role-selection, #shop-login, #customer-login, #restaurant-customer-login, #admin-login, #admin-panel, #customer-selection { animation: loginSectionIn 0.38s cubic-bezier(0.22,1,0.36,1) both; }

/* HeroUI dark typography */
.login-box h2 { text-align: center; font-size: 26px; font-weight: 800; margin-bottom: 2px; letter-spacing: -0.5px; color: #111827; }
.login-box .subtitle { text-align: center; color: #6b7280; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }
.login-box p[style] { color: #4b5563 !important; }
.login-box .form-label { color: #4b5563; }
.login-box .form-group { margin-bottom: 14px; }

/* HeroUI-style inputs (dark) — use background-color NOT shorthand to preserve arrow */
.login-box .form-input, .login-box .form-select { background-color: #ffffff !important; border: 1.5px solid #e5e7eb !important; color: #111827 !important; border-radius: 12px !important; box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important; padding: 12px 14px !important; -webkit-appearance: none !important; appearance: none !important; }
.login-box .form-input::placeholder { color: #9ca3af; }
.login-box .form-input:focus, .login-box .form-select:focus { background-color: #ffffff !important; border-color: var(--theme,#667eea) !important; box-shadow: 0 0 0 3px rgba(102,126,234,0.16), 0 2px 8px rgba(15,23,42,0.06) !important; }
.login-box .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%234b5563' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 36px !important; }
.login-box .form-select option { background: #ffffff; color: #111827; }

/* Input icons */
.login-input-wrap { position: relative; }
.login-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: rgba(161,161,170,0.6); pointer-events: none; z-index: 1; transition: color 0.25s; }
.login-input-wrap:focus-within .login-input-icon { color: var(--theme,#667eea); }
.login-input-wrap .form-input { padding-left: 44px !important; }

/* Login button */
.login-btn { display: block; width: 100%; padding: 16px; border: none; border-radius: 14px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; background: linear-gradient(135deg, var(--theme,#667eea), var(--theme2,#764ba2)); color: #fff; box-shadow: 0 6px 24px rgba(102,126,234,0.35); margin-top: 8px; transition: transform 0.18s, box-shadow 0.18s; position: relative; overflow: hidden; }
.login-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); transform: translateX(-250%) skewX(-20deg); animation: btnShine 4.5s ease-in-out infinite 1.2s; }
.login-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(102,126,234,0.45); }
.login-btn:active { transform: scale(0.97); box-shadow: 0 3px 10px rgba(0,0,0,0.3); }
.login-error { color: #f87171; font-size: 13px; text-align: center; margin-top: 10px; display: none; }

/* Back button (dark) */
.login-box .back-to-menu-btn { color: #6b7280; border: none; background: transparent; }
.login-box .back-to-menu-btn:hover { color: #111827; background: #f3f4f6; border: none; }

/* Role buttons */
.role-btn { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 22px; border: 1px solid rgba(15,23,42,0.08); border-radius: 18px; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer; font-family: inherit; margin-bottom: 12px; box-shadow: 0 10px 24px rgba(15,23,42,0.12); transition: transform 0.18s, box-shadow 0.18s, filter 0.18s; }
.role-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,0,0,0.4); filter: brightness(1.08); }
.role-btn:active { transform: scale(0.97); box-shadow: 0 3px 10px rgba(0,0,0,0.25); }
.role-btn-icon { font-size: 30px; flex-shrink: 0; }
.role-btn-text { text-align: left; }
.role-btn-title { font-size: 16px; font-weight: 700; line-height: 1.2; }
.role-btn-sub { font-size: 12px; font-weight: 400; opacity: 0.78; margin-top: 2px; }

/* Customer select button (dark) */
.login-box .customer-select-btn { background: #ffffff; border: 1px solid #e5e7eb; color: #111827; border-radius: 12px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(15,23,42,0.04); }
.login-box .customer-select-btn:active { background: #f3f4f6; }

/* Full-screen admin */
.login-page.admin-mode { align-items: stretch; justify-content: flex-start; padding: 0; background: #f5f5f7 !important; overflow: hidden; }
.login-page.admin-mode .login-orb,
.login-page.admin-mode #login-logo-wrap,
.login-page.admin-mode .login-box > h2,
.login-page.admin-mode .login-box > .subtitle { display: none !important; }
.login-page.admin-mode .login-box { max-width: none; width: 100%; height: 100%; max-height: none; border-radius: 0; padding: max(18px, env(safe-area-inset-top)) clamp(14px, 3vw, 28px) 18px; background: #f5f5f7; border: none; box-shadow: none; overflow-y: auto; animation: none; color: #1c1c1e; }
.login-page.admin-mode .login-box::before { display: none; }
.login-page.admin-mode #admin-panel { max-width: 1180px; margin: 0 auto; color: #1c1c1e; }
.login-page.admin-mode #admin-view-home,
.login-page.admin-mode #admin-view-add,
.login-page.admin-mode #admin-view-edit { color: #1c1c1e; }
.login-page.admin-mode #admin-view-home > p,
.login-page.admin-mode #admin-view-add > p,
.login-page.admin-mode #admin-view-edit > p { color: #1c1c1e !important; font-size: 24px !important; margin: 4px 0 18px !important; }
.login-page.admin-mode .form-input,
.login-page.admin-mode .form-select { background: #fff !important; border-color: rgba(0,0,0,0.1) !important; color: #1c1c1e !important; box-shadow: none !important; }
.login-page.admin-mode .form-input::placeholder { color: #9ca3af !important; }
.login-page.admin-mode .form-label { color: #6b7280 !important; }
.login-page.admin-mode .back-to-menu-btn { color: #6b7280; border: 1px solid #e5e7eb; background: #fff; border-radius: 14px; padding: 12px 16px; }
.login-page.admin-mode .back-to-menu-btn:hover { color: #1c1c1e; background: #fff; border-color: #d1d5db; }
.login-page.admin-mode #admin-status-list > div,
.admin-shop-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px !important; }
#admin-shop-list { margin: 8px 0 18px; }
.admin-shop-card { width: 100%; min-height: 132px; padding: 16px; border: 1.5px solid #e5e7eb; border-radius: 16px; background: #fff; cursor: pointer; font-family: inherit; text-align: left; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.04); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.admin-shop-card:active { transform: scale(0.98); }
.admin-shop-card.is-selected { box-shadow: 0 10px 26px rgba(0,0,0,0.08); }
.admin-shop-card-title { color: #1c1c1e; font-size: 16px; font-weight: 900; line-height: 1.25; word-break: break-word; }
.admin-shop-card-meta { color: #6b7280; font-size: 12px; font-weight: 700; margin-top: 6px; }
.admin-shop-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.admin-shop-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 9px; background: #f3f4f6; color: #4b5563; font-size: 11px; font-weight: 800; }
#admin-shop-detail { margin-top: 8px; }
.admin-detail-empty { padding: 28px 16px; border: 1.5px dashed #d1d5db; border-radius: 18px; background: #fff; color: #6b7280; text-align: center; font-size: 14px; font-weight: 700; }
.login-page.admin-mode #admin-shop-detail-view { max-width: 760px; margin: 0 auto; }

/* Admin panel text */
.login-page:not(.admin-mode) .login-box #admin-view-home p, .login-page:not(.admin-mode) .login-box #admin-view-add p, .login-page:not(.admin-mode) .login-box #admin-view-edit p { color: #4b5563 !important; }
.login-page:not(.admin-mode) .login-box [style*="color:#333"], .login-page:not(.admin-mode) .login-box [style*="color: #333"] { color: #111827 !important; }
.login-page:not(.admin-mode) .login-box [style*="color:#888"], .login-page:not(.admin-mode) .login-box [style*="color: #888"] { color: #6b7280 !important; }
.login-page:not(.admin-mode) .login-box [style*="color:#666"], .login-page:not(.admin-mode) .login-box [style*="color: #666"] { color: #4b5563 !important; }
.login-page:not(.admin-mode) .login-box [style*="color:#aaa"], .login-page:not(.admin-mode) .login-box [style*="color: #aaa"] { color: #9ca3af !important; }

/* QR login section */
.login-box #restaurant-customer-login [style*="font-size:16px"] { color: #111827 !important; }
.login-box #restaurant-customer-login [style*="font-size:13px"] { color: #6b7280 !important; }
.login-box #restaurant-customer-login [style*="font-size:12px"] { color: #9ca3af !important; }

/* Mobile: floating card with side margins */
@media (max-width: 480px) {
  .login-page { padding: max(18px, env(safe-area-inset-top)) 16px max(28px, 6vh); align-items: center; justify-content: center; background: var(--login-bg, #ffffff); background-size: cover; background-position: center; }
  .login-box { border-radius: 26px; max-width: 100%; width: min(380px, 100%); padding: 24px 20px 24px; max-height: calc(100svh - 48px); overflow-y: auto; animation: loginBoxInMobile 0.5s cubic-bezier(0.22,1,0.36,1) both; box-shadow: 0 18px 46px rgba(15,23,42,0.13); }
  .login-box::before { border-radius: 24px; }
  #login-logo-img { width: 70px !important; height: 70px !important; border-radius: 16px !important; }
  #login-logo-icon { width: 70px !important; height: 70px !important; border-radius: 16px !important; }
  #login-logo-icon img { width: 70px !important; height: 70px !important; object-fit: cover !important; margin-top: 0 !important; mix-blend-mode: normal !important; }
  .login-orb-1 { width: 300px; height: 300px; top: -120px; right: -100px; }
  .login-orb-2 { display: none; }
  .login-orb-4 { width: 200px; height: 200px; top: 2%; left: -80px; }
}

@media (pointer: coarse), (max-width: 899px) {
  .login-page {
    position: relative;
    inset: auto;
    bottom: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: visible;
    padding-bottom: max(28px, 6vh);
  }
  .login-page:not(.admin-mode) {
    justify-content: center;
  }
  .login-page.admin-mode {
    min-height: 100svh;
    min-height: 100dvh;
    overflow: visible;
  }
}
@keyframes loginBoxInMobile { from{opacity:0;transform:translateY(60px)} to{opacity:1;transform:translateY(0)} }

/* Staff bill card */
.bill-card { background: #ffffff; border-radius: 16px; margin: 0 16px 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden; border-left: 4px solid #667eea; }
.bill-card.preparing { border-left-color: #ff9800; }
.bill-card-header { padding: 16px; display: flex; justify-content: space-between; align-items: center; }
.bill-card-body { padding: 0 16px; }
.bill-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 14px; }
.bill-card-footer { padding: 12px 16px; display: flex; gap: 8px; }

/* Logout btn */
.logout-btn { background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 12px; cursor: pointer; padding: 6px 14px; border-radius: 20px; font-family: inherit; font-weight: 500; position: absolute; right: 20px; top: max(20px, env(safe-area-inset-top)); z-index: 2; }

/* Page */
.page { display: none; }
.page.active { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; height: 100%; animation: pageFadeIn 0.08s ease-out; }
@keyframes pageFadeIn { from { opacity: 0.96; } to { opacity: 1; } }
@keyframes loginAura { 0%,100% { opacity:0.65; transform:translate(-50%,-50%) scale(0.96); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.04); } }

/* Mobile Safari works best when the page itself scrolls, like cattcat.
   Keeping an internal fixed scroll container leaves the browser bottom bar
   outside the app background and can visually squeeze search inputs. */
@media (pointer: coarse), (max-width: 899px) {
  html {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--safe-area-bg);
  }
  body {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--safe-area-bg);
  }
  body::after {
    display: none;
  }
  #main-app.app {
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: visible;
  }
  #main-app .page.active {
    flex: 0 0 auto;
    height: auto;
    min-height: 100svh;
    min-height: 100dvh;
    overflow: visible;
  }
  #main-app .content {
    flex: 0 0 auto;
    min-height: auto;
    overflow: visible;
    overscroll-behavior-y: none;
    padding-bottom: calc(var(--floating-nav-clearance) + 72px);
  }
  #main-app .search-bar,
  #table-search,
  #restaurant-menu-search,
  #rc-menu-filter,
  input[type="search"] {
    display: block;
    flex: 0 0 auto;
    min-height: 44px;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.25;
    transform: translateZ(0);
  }
  html.on-login {
    height: auto;
    min-height: calc(100svh + var(--bottom-cover-height));
    min-height: calc(100dvh + var(--bottom-cover-height));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: none;
    background: var(--login-bg, #ffffff) !important;
    background-size: cover !important;
    background-position: center !important;
  }
  html.on-login body {
    position: static;
    height: auto;
    min-height: calc(100svh + var(--bottom-cover-height));
    min-height: calc(100dvh + var(--bottom-cover-height));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: none;
    background: var(--login-bg, #ffffff) !important;
    background-size: cover !important;
    background-position: center !important;
  }
  html.on-login body::after {
    display: block;
    background: var(--login-bg, #ffffff);
    z-index: 9;
  }
  html.on-login .login-page {
    position: relative;
    inset: auto;
    height: auto;
    min-height: calc(100svh + var(--bottom-cover-height));
    min-height: calc(100dvh + var(--bottom-cover-height));
    overflow: visible;
  }
}

/* ===== Restaurant Table Grid ===== */
.table-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 12px 8px; }
.table-filter-row { display: flex; gap: 8px; overflow-x: auto; padding: 8px 16px 2px; scrollbar-width: none; }
.table-filter-row::-webkit-scrollbar { display: none; }
.table-filter-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1.5px solid #e5e7eb; border-radius: 999px; background: #fff; color: #6b7280; font-size: 12px; font-weight: 800; font-family: inherit; cursor: pointer; box-shadow: 0 1px 5px rgba(15,23,42,0.04); }
.table-filter-chip strong { min-width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; border-radius: 999px; background: #f3f4f6; color: #374151; font-size: 11px; }
.table-filter-chip.active { border-color: #fb923c; background: #fff7ed; color: #c2410c; box-shadow: 0 8px 20px rgba(251,146,60,0.14); }
.table-filter-chip.active strong { background: #ffedd5; color: #c2410c; }
.table-card { border-radius: 16px; padding: 13px 8px 11px; text-align: center; cursor: pointer; transition: transform 0.2s, box-shadow 0.15s; border: 1.5px solid transparent; position: relative; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.07); }
.table-card:active { transform: scale(0.93); }
.table-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 16px 16px 0 0; }
.table-card.empty { background: linear-gradient(160deg, #f0fdf4, #dcfce7); border-color: #bbf7d0; }
.table-card.empty::before { background: linear-gradient(90deg, #4ade80, #16a34a); }
.table-card.occupied { background: linear-gradient(160deg, #fff7ed, #ffedd5); border-color: #fed7aa; }
.table-card.occupied::before { background: linear-gradient(90deg, #fb923c, #ea580c); }
.table-card.served { background: linear-gradient(160deg, #ecfdf5, #d1fae5); border-color: #86efac; }
.table-card.served::before { background: linear-gradient(90deg, #22c55e, #16a34a); }
.table-card.waiting { background: linear-gradient(160deg, #fff1f2, #ffe4e6); border-color: #fecdd3; }
.table-card.waiting::before { background: linear-gradient(90deg, #fb7185, #e11d48); }
.table-card .t-icon { width: 28px; height: 28px; margin: 0 auto 6px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 16px; font-weight: 900; line-height: 1; }
.table-card.empty .t-icon { background: rgba(22,163,74,0.14); color: #16a34a; }
.table-card.occupied .t-icon { background: rgba(234,88,12,0.14); color: #ea580c; }
.table-card.served .t-icon { background: rgba(22,163,74,0.16); color: #15803d; }
.table-card.waiting .t-icon { background: rgba(225,29,72,0.14); color: #e11d48; }
.table-card .t-name { font-size: 12px; font-weight: 800; color: #1c1c1e; letter-spacing: -0.2px; }
.table-card .t-status { font-size: 10px; margin-top: 4px; font-weight: 800; }
.table-card.empty .t-status { color: #16a34a; }
.table-card.occupied .t-status { color: #ea580c; }
.table-card.served .t-status { color: #15803d; }
.table-card.waiting .t-status { color: #e11d48; }
.table-card .t-total { font-size: 11px; font-weight: 800; margin-top: 3px; color: #ea580c; }
.table-card.served .t-total { color: #15803d; }
.table-card.waiting .t-total { color: #e11d48; }
.table-card .t-qr { display: block; width: calc(100% - 10px); margin: 6px auto 0; padding: 4px 4px; border: none; border-radius: 8px; font-size: 10px; font-weight: 600; cursor: pointer; font-family: inherit; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.table-card.empty .t-qr { background: rgba(22,163,74,0.14); color: #15803d; }
.table-card.occupied .t-qr { background: rgba(234,88,12,0.14); color: #c2410c; }
.table-card.served .t-qr { background: rgba(22,163,74,0.14); color: #15803d; }
.table-card.waiting .t-qr { background: rgba(225,29,72,0.14); color: #be123c; }
.table-card .t-delete { position: absolute; top: 5px; right: 5px; background: rgba(255,255,255,0.92); border: none; border-radius: 50%; width: 20px; height: 20px; font-size: 9px; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.15); color: #6b7280; }
.table-card:hover .t-delete, .table-card:active .t-delete { display: flex; }
.table-card.table-card-add { background: transparent; border: 2px dashed #bbf7d0; box-shadow: none; }
.table-card.table-card-add::before { display: none; }
.table-card.table-card-add .t-icon { color: #16a34a; font-size: 22px; }
.table-card.table-card-add .t-name { color: #16a34a; font-weight: 700; }

/* Kitchen Order Card */
.kitchen-card { background: #fff; border-radius: 16px; margin: 0 16px 12px; padding: 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); border-left: 4px solid #ff9800; }
.kitchen-card.preparing { border-left-color: #667eea; }
.kitchen-card .k-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.kitchen-card .k-table { font-size: 16px; font-weight: 700; }
.kitchen-card .k-time { font-size: 12px; color: #888; }
.kitchen-card .k-item { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; border-bottom: 1px solid #f5f5f5; }
.kitchen-card .k-item:last-child { border-bottom: none; }

/* Admin shop type badge */
.type-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-left: 4px; vertical-align: middle; }
.type-badge.grocery { background: #e8f5e9; color: #2e7d32; }
.type-badge.restaurant { background: #fce4ec; color: #c62828; }

/* Restaurant header gradient */
.restaurant-header { background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%) !important; box-shadow: 0 8px 32px rgba(255,107,53,0.3) !important; padding-top: max(20px, env(safe-area-inset-top)) !important; }

/* Splash screen */
#splash-screen { position:fixed;top:0;left:0;right:0;bottom:calc(0px - var(--bottom-cover-height));min-height:calc(100dvh + var(--bottom-cover-height));background:radial-gradient(circle at 50% 22%,rgba(76,92,255,0.30),transparent 26%),radial-gradient(circle at 16% 82%,rgba(59,130,246,0.22),transparent 30%),linear-gradient(145deg,#f8fbff 0%,#edf3ff 42%,#ffffff 100%);z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity 0.45s ease;overflow:hidden;padding:max(16px,env(safe-area-inset-top)) 16px max(28px,var(--bottom-cover-height)); }
#splash-screen::before { content:'';position:absolute;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(49,64,255,0.16),rgba(49,64,255,0));top:-130px;right:-150px;pointer-events:none; }
#splash-screen::after { content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(15,23,42,0.10),rgba(15,23,42,0));bottom:-120px;left:-125px;pointer-events:none; }
.splash-card { position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:min(340px,calc(100vw - 40px));padding:30px 22px 24px;border-radius:32px;background:rgba(255,255,255,0.74);border:1px solid rgba(148,163,184,0.30);box-shadow:0 28px 80px rgba(30,41,59,0.16),0 10px 28px rgba(59,130,246,0.10);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%); }
.splash-card::before { content:'';position:absolute;inset:10px;border-radius:24px;border:1px solid rgba(255,255,255,0.72);pointer-events:none; }
.splash-logo-frame { width:172px;height:172px;border-radius:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ffffff,#eef4ff);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.92),0 18px 42px rgba(15,23,42,0.12);overflow:hidden;margin-bottom:18px; }
.splash-logo-frame img { width:172px;height:172px;object-fit:cover;display:block;filter:drop-shadow(0 10px 22px rgba(15,23,42,0.16)); }
.splash-brand { font-size:44px;line-height:1;font-weight:900;letter-spacing:0;background:linear-gradient(135deg,#07164d 0%,#0b1745 48%,#3347ff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 0 rgba(255,255,255,0.75),0 12px 28px rgba(51,71,255,0.22); }
.splash-subtitle { margin-top:9px;color:#475569;font-size:14px;font-weight:800; }
.splash-spinner { width:44px;height:44px;border-radius:50%;position:relative;animation:splashSpin 1s linear infinite;margin-top:22px; }
.splash-spinner::before,.splash-spinner::after { content:'';position:absolute;border-radius:50%; }
.splash-spinner::before { inset:0;border:2.5px solid rgba(51,71,255,0.14); }
.splash-spinner::after { inset:0;border:2.5px solid transparent;border-top-color:#3347ff;box-shadow:0 0 16px rgba(51,71,255,0.24),0 -2px 8px rgba(51,71,255,0.16); }
.splash-status { margin-top:12px;padding:7px 13px;border-radius:999px;background:rgba(239,246,255,0.92);color:#1d4ed8;border:1px solid rgba(147,197,253,0.72);font-size:12px;font-weight:900;box-shadow:0 8px 18px rgba(59,130,246,0.12); }
@keyframes splashSpin { to{transform:rotate(360deg)} }
/* Landing page */
#landing-page { position:fixed;top:0;left:0;right:0;bottom:calc(0px - var(--bottom-cover-height));min-height:calc(100dvh + var(--bottom-cover-height));z-index:99998;display:none;flex-direction:column;align-items:center;justify-content:center;background:#ffffff;transition:opacity 0.45s ease;overflow:hidden;padding:max(16px,env(safe-area-inset-top)) 16px 0; }
@keyframes landingIn { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
#landing-page .lp-inner { position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 32px;animation:landingIn 0.55s 0.05s both ease-out; }

/* iPad/tablet layout: touch screens get more columns without changing phone UI. */
@media (min-width: 700px) and (pointer: coarse) {
  #main-app.app {
    max-width: 840px;
    margin: 0 auto;
  }
  #main-app.app:has(#page-restaurant-tables.active),
  #main-app.app:has(#page-restaurant-order.active),
  #main-app.app:has(#page-restaurant-kitchen.active),
  #main-app.app:has(#page-dashboard.active),
  #main-app.app:has(#page-orders.active) {
    max-width: 100%;
  }
  #main-app .header,
  #main-app .detail-header {
    padding-left: 28px;
    padding-right: 28px;
  }
  #main-app .content {
    padding-left: 22px;
    padding-right: 22px;
  }
  #main-app.app:has(#page-orders.active) .content,
  #main-app.app:has(#page-restaurant-kitchen.active) .content {
    padding-top: 26px;
  }
  #main-app .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
  }
  #main-app .stat-card {
    min-height: 116px;
    border-radius: 18px;
    animation: none;
  }
  #main-app .section-title {
    padding-left: 0;
    padding-right: 0;
  }
  #main-app .card,
  #main-app .bill-card,
  #main-app .kitchen-card,
  #main-app .detail-info,
  #main-app .shop-status-card {
    margin-left: 0;
    margin-right: 0;
  }
  #main-app .search-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  #main-app .table-grid {
    grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
    gap: 12px;
    padding-left: 0;
    padding-right: 0;
  }
  #main-app .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #main-app.app:has(#page-restaurant-kitchen.active) #kitchen-orders-list,
  #main-app.app:has(#page-staff.active) #staff-bills-list,
  #main-app.app:has(#page-orders.active) #orders-list,
  #main-app.app:has(#page-customers.active) #customers-list,
  #main-app.app:has(#page-products.active) #products-list-full,
  #main-app.app:has(#page-staff-products.active) #staff-products-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
  }
  #main-app.app:has(#page-dashboard.active) #recent-orders,
  #main-app.app:has(#page-dashboard.active) #pending-delivery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
  }
  #main-app.app:has(#page-dashboard.active) #recent-orders > .card,
  #main-app.app:has(#page-dashboard.active) #pending-delivery > .card,
  #main-app.app:has(#page-orders.active) #orders-list > .card,
  #main-app.app:has(#page-customers.active) #customers-list > .card,
  #main-app.app:has(#page-products.active) #products-list-full > .card {
    margin: 0 !important;
  }
  #main-app.app:has(#page-orders.active) #orders-list,
  #main-app.app:has(#page-customers.active) #customers-list,
  #main-app.app:has(#page-products.active) #products-list-full,
  #main-app.app:has(#page-restaurant-kitchen.active) #kitchen-orders-list {
    min-height: calc(100vh - 390px);
    align-content: start;
  }
  #main-app.app:has(#page-orders.active) #orders-list > .empty,
  #main-app.app:has(#page-customers.active) #customers-list > .empty,
  #main-app.app:has(#page-products.active) #products-list-full > .empty,
  #main-app.app:has(#page-dashboard.active) #recent-orders > .empty,
  #main-app.app:has(#page-dashboard.active) #pending-delivery > .empty,
  #main-app.app:has(#page-restaurant-kitchen.active) #kitchen-orders-list > div[style*="text-align:center"] {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(440px, 100%);
    min-width: 0;
    margin-top: 52px;
    padding: 42px 30px !important;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,0.08);
    border-radius: 22px;
    color: #8b8f98 !important;
    box-shadow: 0 18px 45px rgba(15,23,42,0.08);
  }
  #main-app.app:has(#page-orders.active) #orders-list > .empty .icon,
  #main-app.app:has(#page-customers.active) #customers-list > .empty .icon,
  #main-app.app:has(#page-products.active) #products-list-full > .empty .icon,
  #main-app.app:has(#page-dashboard.active) #recent-orders > .empty .icon,
  #main-app.app:has(#page-dashboard.active) #pending-delivery > .empty .icon,
  #main-app.app:has(#page-restaurant-kitchen.active) #kitchen-orders-list > div[style*="text-align:center"] > div:first-child {
    font-size: 54px !important;
    margin-bottom: 14px !important;
  }
  #main-app.app:has(#page-orders.active) #orders-list > .empty,
  #main-app.app:has(#page-customers.active) #customers-list > .empty,
  #main-app.app:has(#page-products.active) #products-list-full > .empty,
  #main-app.app:has(#page-dashboard.active) #recent-orders > .empty,
  #main-app.app:has(#page-dashboard.active) #pending-delivery > .empty {
    text-align: center;
  }
  #main-app.app:has(#page-dashboard.active) #recent-orders > .empty,
  #main-app.app:has(#page-dashboard.active) #pending-delivery > .empty {
    margin-top: 8px;
  }
  #restaurant-cart-float {
    left: 50% !important;
    right: auto !important;
    width: min(520px, calc(100vw - 48px)) !important;
    transform: translateX(-50%);
  }
}

@media (min-width: 700px) and (pointer: coarse) and (orientation: portrait) {
  #main-app.app {
    max-width: 820px;
  }
  #main-app .content {
    padding-top: 18px;
  }
  #main-app.app:has(#page-orders.active) #orders-list > .empty,
  #main-app.app:has(#page-restaurant-kitchen.active) #kitchen-orders-list > div[style*="text-align:center"] {
    margin-top: 64px;
  }
  #main-app .table-grid {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }
  #main-app .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
  }
}

@media (min-width: 900px) and (pointer: coarse) and (orientation: landscape) {
  #main-app.app {
    max-width: 100%;
  }
  #main-app .header,
  #main-app .detail-header {
    padding-top: 18px;
    padding-bottom: 22px;
  }
  #main-app .content {
    padding: 18px 24px 86px;
  }
  #main-app .table-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }
  #main-app .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

@media (max-height: 520px) and (orientation: landscape) and (pointer: coarse) {
  #main-app.app {
    max-width: none;
    width: 100%;
  }
  #main-app .header,
  #main-app .detail-header {
    padding: 10px 16px 12px;
    border-radius: 0 0 16px 16px;
  }
  #main-app .header h1,
  #main-app .detail-header h1 {
    font-size: 20px;
  }
  #main-app .header p,
  #main-app .detail-header p {
    font-size: 12px;
    margin-top: 2px;
  }
  #main-app .content {
    padding: 10px 14px var(--floating-nav-clearance);
  }
  #main-app .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  #main-app .stat-card {
    min-height: 84px;
    padding: 12px 8px;
    border-radius: 14px;
    animation: none;
  }
  #main-app .stat-card .icon {
    font-size: 20px;
    margin-bottom: 4px;
  }
  #main-app .stat-card .value {
    font-size: 20px;
  }
  #main-app .section-title {
    padding: 10px 0 7px;
  }
  #main-app .search-bar {
    margin: 0 0 8px !important;
    width: 100% !important;
    padding: 10px 13px;
  }
  #main-app .table-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 8px;
    padding: 0;
  }
  #main-app .table-card {
    min-height: 92px;
    padding: 10px 6px 8px;
    border-radius: 12px;
  }
  #main-app .table-card .t-icon {
    font-size: 20px;
    margin-bottom: 2px;
  }
  #main-app .table-card .t-name {
    font-size: 11px;
  }
  #main-app .table-card .t-qr {
    margin-top: 4px;
    padding: 4px;
  }
  #main-app .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 8px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #main-app .product-card {
    min-height: 118px;
    padding: 12px 8px;
    border-radius: 12px;
  }
  #main-app .tab-bar {
    bottom: 10px;
    left: 10px;
    right: 10px;
    gap: 2px;
    min-height: 62px;
    padding: 5px;
  }
  #main-app .tab-item {
    min-height: 50px;
    padding: 5px 2px;
    border-radius: 14px;
    font-size: 9px;
  }
  #main-app .tab-item svg {
    width: 18px;
    height: 18px;
    padding: 5px;
  }
  #main-app .fab {
    bottom: 86px;
    right: 14px;
    padding: 11px 16px;
  }
  #restaurant-cart-float {
    left: auto !important;
    right: 14px !important;
    bottom: 86px !important;
    width: min(360px, calc(100vw - 28px)) !important;
  }
}

/* Desktop layout: app-like back-office shell for mouse/keyboard screens. */
@media (min-width: 900px) and (pointer: fine) {
  body { background: #f4f6f8; }
  #main-app.app {
    max-width: none;
    width: 100%;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
  }
  #main-app .page.active {
    padding-left: 224px;
    background: #f4f6f8;
  }
  #main-app .header,
  #main-app .detail-header {
    background: #ffffff !important;
    color: #111827 !important;
    border-radius: 0;
    padding: 20px 32px;
    box-shadow: inset 0 -1px 0 rgba(15,23,42,0.08);
  }
  #main-app .header::before,
  #main-app .header::after,
  #main-app .detail-header::before {
    display: none;
  }
  #main-app .header h1,
  #main-app .detail-header h1 {
    color: #111827;
    font-size: 24px;
    text-align: left;
    letter-spacing: 0;
  }
  #main-app .header p,
  #main-app .detail-header p {
    color: #6b7280;
    opacity: 1;
    text-align: left;
  }
  #main-app .content {
    padding: 22px 32px 32px;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
  }
  #main-app.app:has(#page-restaurant-tables.active) .content,
  #main-app.app:has(#page-restaurant-order.active) .content,
  #main-app.app:has(#page-restaurant-kitchen.active) .content,
  #main-app.app:has(#page-dashboard.active) .content,
  #main-app.app:has(#page-orders.active) .content {
    padding-left: 32px;
    padding-right: 32px;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  #main-app .stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    margin: 0 0 16px;
  }
  #main-app .stat-card {
    min-height: 116px;
    border-radius: 12px;
    animation: none;
  }
  #main-app .section-title {
    padding: 16px 0 10px;
  }
  #main-app .card,
  #main-app .bill-card,
  #main-app .kitchen-card,
  #main-app .detail-info,
  #main-app .shop-status-card {
    margin-left: 0;
    margin-right: 0;
    border-radius: 12px;
  }
  #main-app .search-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: none;
  }
  #main-app .table-grid {
    grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
    gap: 14px;
    padding: 0;
  }
  #main-app .table-card {
    min-height: 118px;
    padding: 16px 10px 12px;
    border-radius: 12px;
  }
  #main-app .table-card .t-icon { font-size: 28px; }
  #main-app .table-card .t-name { font-size: 14px; }
  #main-app .table-card .t-status,
  #main-app .table-card .t-qr { font-size: 11px; }
  #main-app.app:has(#page-restaurant-tables.active) .content > div:first-child {
    padding: 0 0 18px !important;
    width: min(560px, 100%);
  }
  #main-app.app:has(#page-restaurant-tables.active) #table-search {
    background: #ffffff !important;
    border-color: #dde3ea !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04) !important;
  }
  #main-app.app:has(#page-restaurant-tables.active) #restaurant-tables-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
  }
  #main-app.app:has(#page-restaurant-tables.active) #restaurant-tables-grid > .table-card {
    flex: 0 0 188px;
    max-width: 188px;
    width: 188px;
  }
  #main-app.app:has(#page-restaurant-tables.active) #restaurant-tables-grid > .table-card[style*="min-height:132px"] {
    flex-basis: 220px;
    max-width: 220px;
    width: 220px;
    min-height: 150px !important;
    padding: 22px 14px !important;
    border: 1px solid #bbf7d0;
    border-top: 4px solid #22c55e;
    background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
    box-shadow: 0 12px 26px rgba(22,163,74,0.08);
  }
  #main-app.app:has(#page-restaurant-tables.active) #restaurant-tables-grid > div[style*="grid-column:1/-1"],
  #main-app.app:has(#page-restaurant-tables.active) #restaurant-tables-grid > button[style*="grid-column:1/-1"] {
    flex: 0 0 100%;
  }
  #main-app.app:has(#page-restaurant-tables.active) #restaurant-tables-grid > .table-card[style*="min-height:132px"] .t-icon {
    font-size: 34px !important;
    margin-bottom: 8px;
  }
  #main-app.app:has(#page-restaurant-tables.active) #restaurant-tables-grid > .table-card[style*="min-height:132px"] .t-name {
    font-size: 15px !important;
  }
  #main-app.app:has(#page-restaurant-tables.active) #btn-manage-tables {
    width: auto !important;
    min-width: 180px;
    margin: 18px 0 0 !important;
    border-radius: 10px;
  }
  #main-app .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 14px;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #main-app .product-card {
    border-radius: 12px;
    min-height: 156px;
  }
  #main-app.app:has(#page-dashboard.active) #recent-orders,
  #main-app.app:has(#page-dashboard.active) #pending-delivery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
  }
  #main-app.app:has(#page-restaurant-kitchen.active) #kitchen-orders-list,
  #main-app.app:has(#page-staff.active) #staff-bills-list,
  #main-app.app:has(#page-orders.active) #orders-list,
  #main-app.app:has(#page-customers.active) #customers-list,
  #main-app.app:has(#page-products.active) #products-list-full,
  #main-app.app:has(#page-staff-products.active) #staff-products-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
  }
  #main-app.app:has(#page-dashboard.active) #recent-orders > .card,
  #main-app.app:has(#page-dashboard.active) #pending-delivery > .card,
  #main-app.app:has(#page-orders.active) #orders-list > .card,
  #main-app.app:has(#page-customers.active) #customers-list > .card,
  #main-app.app:has(#page-products.active) #products-list-full > .card {
    margin: 0 !important;
  }
  #main-app.app:has(#page-orders.active) #orders-list,
  #main-app.app:has(#page-customers.active) #customers-list,
  #main-app.app:has(#page-products.active) #products-list-full {
    min-height: calc(100vh - 260px);
    align-content: start;
  }
  #main-app.app:has(#page-orders.active) #orders-list > .empty,
  #main-app.app:has(#page-customers.active) #customers-list > .empty,
  #main-app.app:has(#page-products.active) #products-list-full > .empty,
  #main-app.app:has(#page-dashboard.active) #recent-orders > .empty,
  #main-app.app:has(#page-dashboard.active) #pending-delivery > .empty {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(440px, 100%);
    min-width: 0;
    margin-top: 96px;
    padding: 42px 32px !important;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    color: #6b7280 !important;
    text-align: center;
    box-shadow: 0 18px 45px rgba(15,23,42,0.08);
  }
  #main-app.app:has(#page-orders.active) #orders-list > .empty .icon,
  #main-app.app:has(#page-customers.active) #customers-list > .empty .icon,
  #main-app.app:has(#page-products.active) #products-list-full > .empty .icon,
  #main-app.app:has(#page-dashboard.active) #recent-orders > .empty .icon,
  #main-app.app:has(#page-dashboard.active) #pending-delivery > .empty .icon {
    font-size: 54px !important;
    margin-bottom: 14px !important;
  }
  #main-app.app:has(#page-dashboard.active) #recent-orders > .empty,
  #main-app.app:has(#page-dashboard.active) #pending-delivery > .empty {
    margin-top: 8px;
  }
  #main-app.app:has(#page-products.active) #products-list-full > div[style*="padding:8px"],
  #main-app.app:has(#page-products.active) #products-list-full > div[style*="height:24px"] {
    grid-column: 1 / -1;
  }
  #main-app.app:has(#page-restaurant-kitchen.active) #kitchen-orders-list {
    min-height: calc(100vh - 156px);
    align-content: start;
  }
  #main-app.app:has(#page-restaurant-kitchen.active) #kitchen-orders-list > div[style*="text-align:center"] {
    grid-column: 1 / -1;
    justify-self: center;
    width: min(440px, 100%);
    margin-top: 96px;
    padding: 42px 32px !important;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    color: #6b7280 !important;
    box-shadow: 0 18px 45px rgba(15,23,42,0.08);
  }
  #main-app .tab-bar {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 224px;
    transform: none;
    border: none;
    border-right: 1px solid rgba(15,23,42,0.08);
    border-radius: 0;
    padding: 76px 14px 18px;
    box-shadow: none;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    background: #ffffff;
    min-height: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #main-app .tab-bar::before {
    content: 'Orderkub';
    position: absolute;
    top: 24px;
    left: 22px;
    right: 22px;
    color: #111827;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
  }
  #main-app .tab-item {
    flex: 0 0 auto;
    min-height: 46px;
    border-radius: 10px;
    padding: 10px 12px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    border: 1px solid transparent;
    outline: none;
    box-shadow: none;
  }
  #main-app .tab-item.active {
    background: #fff7ed;
    border-color: #fed7aa;
    color: #ea580c;
  }
  #main-app .tab-item:focus { outline: none; }
  #main-app .tab-item.active::after {
    display: none;
  }
  #main-app .tab-item svg {
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    color: currentColor !important;
    box-shadow: none !important;
    flex-shrink: 0;
  }
  #main-app .fab {
    right: 32px;
    bottom: 32px;
    border-radius: 12px;
  }
  #restaurant-cart-float {
    left: auto !important;
    right: 32px !important;
    bottom: 32px !important;
    width: 420px !important;
    transform: none;
  }
  #main-app .empty {
    grid-column: 1 / -1;
    justify-self: center;
    align-self: center;
    min-width: 260px;
    margin-top: 34px;
    color: #9ca3af;
  }
  #main-app .back-btn {
    background: #f3f4f6;
    color: #4b5563;
  }
  #main-app .back-btn:hover {
    background: #e5e7eb;
    color: #111827;
  }
  #main-app .logout-btn {
    background: #f3f4f6;
    color: #4b5563;
  }
}

/* Final override: keep order/kitchen empty states centered after every responsive block. */
#main-app #orders-list.is-empty-state,
#main-app #kitchen-orders-list.is-empty-state {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 100% !important;
}
#main-app #orders-list.is-empty-state {
  min-height: clamp(360px, calc(100dvh - 430px), 780px) !important;
}
#main-app #kitchen-orders-list.is-empty-state {
  min-height: clamp(440px, calc(100dvh - 330px), 900px) !important;
}
#main-app #orders-list.is-empty-state > .empty,
#main-app #kitchen-orders-list.is-empty-state > div {
  width: min(440px, calc(100% - 32px)) !important;
  margin: 0 auto !important;
  padding: 46px 32px !important;
  text-align: center !important;
  justify-self: center !important;
  align-self: center !important;
}

@media (min-width: 1024px) and (pointer: fine) {
  #rc-menu-body,
  #staff-menu-body {
    display: block !important;
    padding: 22px 24px 108px !important;
    background: #141414;
  }

  #rc-menu-body .menu-slide-frame,
  #staff-menu-body .menu-slide-frame {
    width: min(820px, calc(100vw - 160px)) !important;
    margin: 0 auto 18px !important;
    overflow: hidden;
    border-radius: 14px !important;
    background: #050505;
    box-shadow: 0 18px 54px rgba(0,0,0,0.38);
  }

  #rc-menu-body .menu-slide-image,
  #staff-menu-body .menu-slide-image {
    width: 100% !important;
    max-height: calc(100dvh - 184px);
    object-fit: contain;
    border-radius: 14px !important;
    background: #050505;
  }

  #rc-menu-cart-footer,
  #staff-menu-cart-footer {
    left: 50% !important;
    right: auto !important;
    bottom: 18px !important;
    width: min(820px, calc(100vw - 160px)) !important;
    transform: translateX(-50%);
    padding: 12px 0 0 !important;
    background: linear-gradient(to top,#111 72%,rgba(17,17,17,0)) !important;
  }

  #rc-menu-cart-footer button,
  #staff-menu-cart-footer button {
    border-radius: 12px !important;
    min-height: 50px;
  }
}