/* Photographic cafe: translucent surfaces over a locally stored interior photo. */
:root, html .customer-body {
  --ink: #263127;
  --muted: #52604e;
  --green: #375d33;
  --dark: #233322;
  --soft: #e5eddd;
  --paper: #fafbf2;
  --line: #ffffff91;
  --glass: linear-gradient(135deg, #fffffff0, #f4f6e8ce);
  --glass-shadow: inset 0 1px 0 #ffffffed, 0 12px 35px #1120101c;
}
body, html .customer-body { background: #303d29; isolation: isolate; }
body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  background: linear-gradient(120deg, #18211420, #10210d33), url('assets/cafe-interior.webp') center / cover no-repeat;
  pointer-events: none;
}
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, #17221530); }
h1, h2, h3, .customer-order-intro h1, .customer-section-heading h2,
.customer-settings .card h2, .card-header h2, .settings-section h2,
.section-toolbar h2, .modal-header h2, .customer-tab-payment h2, .money-position h2 { font-family: "DM Sans", system-ui, sans-serif; font-weight: 600; letter-spacing: -.65px; }
.customer-brand strong, .brand strong, .auth-brand strong { font-family: "DM Sans", system-ui, sans-serif; font-weight: 650; letter-spacing: -.7px; }
.customer-header {
  width: min(1056px, calc(100% - 64px)); margin-top: 22px; top: 14px; height: 76px; padding: 15px 22px;
  border: 1px solid #ffffff63; border-radius: 22px; background: linear-gradient(125deg, #ffffffca, #f7faeb9e);
  -webkit-backdrop-filter: blur(24px) saturate(130%); backdrop-filter: blur(24px) saturate(130%);
  box-shadow: var(--glass-shadow);
}
.customer-brand .brand-mark, .brand-mark { background: linear-gradient(135deg, #eff9dcd9, #b9d594ad); color: #304a2a; border: 1px solid #ffffffa6; box-shadow: inset 0 1px 0 #fff9, 0 4px 12px #13231015; }
.customer-avatar { background: linear-gradient(135deg, #ffffffc9, #e6eed58f); border: 1px solid #ffffffe0; box-shadow: inset 0 1px 0 #fff, 0 4px 12px #20341015; }
.customer-view { padding-top: 26px; }
.customer-hero {
  min-height: 300px; padding: 38px; border: 1px solid #ffffff70; border-radius: 26px;
  background: linear-gradient(105deg, #172618af, #2b37224d 70%, #ffffff10);
  box-shadow: inset 0 1px 0 #ffffff45, 0 18px 48px #101a1330;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.customer-hero::before, .customer-hero::after { display: none; }
.customer-hero > div { max-width: 70%; }
.customer-hero h1 { font-family: "DM Sans", system-ui, sans-serif; font-size: clamp(36px, 4vw, 50px); font-weight: 500; letter-spacing: -1.7px; text-shadow: 0 2px 16px #0004; }
.customer-hero .cafe-eyebrow { color: #eff6df; letter-spacing: 2.2px; font-weight: 600; }
.customer-hero p { color: #fffef4; font-size: 15px; }
.customer-balance-card, .customer-status-card, .customer-history-row, .customer-tab-row,
.customer-menu-item, .customer-settings .card, .customer-checkout-items, .customer-reorder,
.card, .table-card, .metric, .person-card, .item-card, .event-panel, .customer-empty,
.customer-favorite-banner {
  background: var(--glass); border: 1px solid #ffffffe0; box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(115%); backdrop-filter: blur(22px) saturate(115%);
}
.customer-balance-card { background: linear-gradient(120deg, #ffffffe8, #e8efdbd6); }
.balance-state { background: #dae9cacc; border: 1px solid #faffefa6; }
.customer-section-heading { color: #fffef4; text-shadow: 0 2px 10px #132210, 0 0 24px #132210; }
.customer-section-heading p { color: #fffef4; font-size: 13px; }
.customer-order-intro { margin-top: 0; padding: 24px; border-radius: 22px; border: 1px solid #ffffffb3; background: var(--glass); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.customer-order-intro h1 { font-size: 32px; }
.customer-order-intro > p { color: #52604e; }
.button, .button.secondary, .customer-menu-filters button, .theme-option, .search {
  background: linear-gradient(150deg, #ffffffde, #e9eed1a6); border: 1px solid #ffffffd9;
  color: #293c27; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #41562c13, 0 4px 12px #17281313;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.button.primary, .customer-menu-filters button[aria-pressed="true"] {
  color: #fff; border: 1px solid #d0edb68a; background: linear-gradient(150deg, #5d814ff2, #294b2bdd);
  background: linear-gradient(150deg, color-mix(in srgb, var(--green), #b5c998 25%), color-mix(in srgb, var(--green) 90%, transparent));
  box-shadow: inset 0 1px 0 #f2ffdb6b, inset 0 -1px 0 #1d321b55, 0 6px 18px #12211029;
}
.button.primary:hover { background: linear-gradient(150deg, color-mix(in srgb, var(--green), #b5c998 35%), var(--green)); }
.button.danger { background: #fff0edee; border-color: #e4a8a4; color: #a33832; }
.button.ghost { background: #ffffffc7; color: #375d33; }
.customer-hero .button, .customer-checkout .button[type="submit"], #proceed-to-order {
  background: linear-gradient(145deg, #f3fce3ed, #c4d7a4c9); color: #243b23; border: 1px solid #ffffffe6;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #4b652524, 0 7px 22px #111e1740;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.customer-menu-filters button { color: #2e422a; }
.customer-menu-item { border-radius: 24px; }
.customer-menu-item.selected { background: linear-gradient(135deg, #f2fbe6f2, #dceacddc); border-color: #c6e5a6; box-shadow: inset 0 0 0 1px #6c8957, var(--glass-shadow); }
.customer-drink-icon, .customer-menu-item:nth-child(3n + 2) .customer-drink-icon { background: radial-gradient(ellipse at 25% 15%, #fffef8ed, #e1e9d77a); border: 1px solid #fff; color: #426039; box-shadow: inset 0 2px 3px #fff, inset 0 -8px 15px #516c271a, 0 7px 15px #2b3e1615; }
.quantity-control { gap: 4px; grid-template-columns: 44px 34px 44px; }
.quantity-control button, .quantity-control button:first-child, .quantity-control button:last-child, .quantity-control output { border-radius: 12px; border: 1px solid #ffffffdc; background: linear-gradient(145deg, #ffffffd9, #e2eacf91); color: #34502d; box-shadow: inset 0 1px 0 #fff, 0 3px 7px #13290d0f; }
.quantity-control button:last-child { background: linear-gradient(145deg, #6d8b59, #375834); color: #fff; border-color: #c5d6ae; box-shadow: inset 0 1px 0 #f7ffe17a, 0 3px 8px #17321126; }
.quantity-control output { background: #ffffffe0; box-shadow: none; }
.customer-checkout { background: linear-gradient(125deg, #263622ef, #2f3328d4); border: 1px solid #ffffff8a; box-shadow: inset 0 1px 0 #ffffff59, 0 12px 32px #11201240; -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); }
.field input, .field select, .field textarea, #tab-funding-amount, .event-shell input, .event-shell select, .event-shell textarea { background: linear-gradient(145deg, #ffffffed, #f8faefc9); border: 1px solid #a5b298; box-shadow: inset 0 2px 5px #354c1920, 0 1px 0 #fff; color: #263127; }
.customer-nav { background: linear-gradient(145deg, #3b5035c9, #162a1cc4); border: 1px solid #ffffff9c; box-shadow: inset 0 1px 0 #ffffffb0, inset 0 -1px 0 #ffffff26, 0 14px 38px #0c1f1754; -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); }
.customer-nav button { color: #fffef2; text-shadow: 0 1px 3px #13200dbf; }
.customer-nav button.active { color: #fff; }
.customer-nav::before { background: linear-gradient(140deg, #ffffff38, #ffffff15); box-shadow: inset 0 1px 0 #ffffff9c, inset 0 0 0 1px #ffffff38, 0 3px 9px #1420121a; }
.customer-nav .customer-order-button, .customer-nav.order-highlight .customer-order-button { background: linear-gradient(140deg, #f5ffe6, #bcd69f); color: #2e4b27; border-color: #e0ecd3; box-shadow: inset 0 2px 0 #fff, 0 4px 18px #15241145; }
.customer-nav .customer-order-button span, .customer-nav .customer-order-button.active span { color: #fff; }
.customer-notification-switch { background: linear-gradient(140deg, #c9d0c0, #798571); box-shadow: inset 0 2px 4px #18281145, 0 1px 0 #fff; }
.customer-notification-switch[aria-checked="true"] { background: linear-gradient(140deg, #91af6e, #3e6636); }
.customer-notification-switch::after { background: linear-gradient(135deg, #fff, #e5edda); box-shadow: inset 0 1px 1px #fff, 0 2px 4px #182b1559; }
.theme-option { border-color: #bac5a7; }
.theme-preview { border: 1px solid #ffffffa3; }
.theme-option[aria-pressed="true"] { border-color: #5a7846; background: #f8ffefd9; }
.customer-history-group > h2 { color: #fff; text-shadow: 0 2px 6px #142210; }
.customer-history-swipe { background: transparent; }
.customer-history-swipe:not(.swiped) .history-swipe-delete { visibility: hidden; }
.customer-tab-payment { padding: 22px; border-radius: 20px; background: var(--glass); border: 1px solid #ffffffd4; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.site-footer, .customer-body > .site-footer { background: #f7faedf0; border-top: 1px solid #ffffffb3; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); color: #4d5d44; }
.sidebar { background: linear-gradient(150deg, #24331ee6, #252c21cc); border-right: 1px solid #ffffff52; box-shadow: inset -1px 0 0 #ffffff1c; -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); }
.sidebar .nav-item.active { background: linear-gradient(140deg, #f2faddb5, #ccdfa881); color: #152b14; border: 1px solid #ffffffb5; box-shadow: inset 0 1px 0 #fff9; }
.sidebar .nav-item { color: #f0f1df; }
.topbar { background: #f7faeae0; border-bottom: 1px solid #ffffffc2; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.welcome { background: linear-gradient(105deg, #172718df, #29362260); border: 1px solid #ffffff8c; box-shadow: inset 0 1px 0 #ffffff63, 0 12px 30px #0e1b1729; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.welcome h2 { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; }
.welcome .button { background: linear-gradient(140deg, #fbffe9f0, #cedfadc9); color: #263e25; }
.money-position { background: linear-gradient(120deg, #f5fbeeea, #e4efd7de); border-color: #ffffffd4; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.section-toolbar, .event-header { padding: 20px; border-radius: 20px; background: var(--glass); border: 1px solid #ffffffc7; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.empty { background: #f5f9e9ed; border-radius: 20px; }
.card .empty, .table-card .empty { background: transparent; }
.event-content > section:not(.event-panel) { padding: 24px; background: var(--glass); border: 1px solid #ffffffd6; border-radius: 20px; -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.auth-screen { background: transparent; }
.auth-panel { background: linear-gradient(135deg, #ffffffed, #f1f5e5d9); border: 1px solid #ffffffed; box-shadow: inset 0 1px 0 #fff, 0 25px 70px #111e1745; -webkit-backdrop-filter: blur(28px) saturate(120%); backdrop-filter: blur(28px) saturate(120%); }
.modal, .customer-prompt { background: #f9fbeff5; border: 1px solid #fff; box-shadow: inset 0 1px 0 #fff, 0 20px 65px #15231340; -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); }
.modal-backdrop { background: #101d165c; }
@media (max-width: 800px) {
  .mobile-nav { background: linear-gradient(140deg, #e7f1cf70, #20311ed4); border-top: 1px solid #ffffff91; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); }
  .mobile-nav .nav-item { color: #fffef5; text-shadow: 0 1px 4px #0b1d09; }
  .mobile-nav .nav-item.active { color: #e3ffc3; background: #ffffff23; }
}
@media (max-width: 560px) {
  body::before { background-position: 64% center; }
  .customer-header { width: calc(100% - 28px); margin-top: 14px; top: 10px; height: 68px; padding: 12px 14px; border-radius: 20px; }
  .customer-brand strong { font-size: 20px; }
  .customer-view { padding-top: 18px; }
  .customer-hero { min-height: 300px; padding: 26px; background: linear-gradient(100deg, #172618b8, #25341f6b); }
  .customer-hero > div { max-width: 100%; }
  .customer-hero h1 { font-size: 40px; }
  .customer-order-intro { padding: 22px 20px; }
  .customer-order-intro h1 { font-size: 28px; }
  .quantity-control { grid-template-columns: 38px 26px 38px; gap: 3px; }
  .customer-nav { border-radius: 20px 20px 0 0; border-top: 1px solid #ffffffd6; }
  .section-toolbar { padding: 16px; }
}
/* Keep readable surfaces where the browser cannot blur the backdrop. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .customer-header, .card, .table-card, .metric, .customer-menu-item, .customer-status-card, .customer-order-intro, .auth-panel { background: #f5f8ec; }
  .customer-nav, .mobile-nav, .sidebar { background: #2b3e29; }
}