.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  background: var(--soil);
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 30;
}
.tabbar button {
  flex: 1; background: transparent; border: 0; color: #e3dacc;
  font-size: 12px; min-height: 48px;
}
.tabbar button.on { color: #fff8e7; box-shadow: inset 0 -3px 0 var(--red); }
body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
#root { padding: 16px; max-width: 560px; margin: 0 auto; }
input, textarea, select {
  width: 100%; padding: 12px; margin: 6px 0 12px;
  border: 1px solid var(--dust); background: #fff; color: var(--soil);
}
.err { color: var(--red); }
.codebox { font-size: 22px; letter-spacing: 3px; text-align: center; }
.about-photo { width: 100%; max-height: 240px; object-fit: cover; margin: 8px 0; display: block; background: var(--dust); }
.hours { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hours button { border: 1px solid var(--dust); background: var(--milk); min-height: 48px; font-size: 12px; }
.hours button .ht { color: var(--red); font-weight: 600; display: block; }
.hours button.sel { background: var(--red); color: var(--milk); }
.hours button.sel .ht { color: var(--milk); }
.hours button:disabled { background: var(--dust); color: var(--stone); }
.days { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0; }
.days button { border: 0; background: transparent; color: var(--stone); padding: 8px; white-space: nowrap; }
.days button.on { color: var(--red); border-bottom: 2px solid var(--red); }

.btn.block, #root .btn { width: 100%; }
#root .btn.ghost { margin-top: 8px; }

#root .btn { width: 100%; }
#root .btn.ghost {
  margin-top: 8px;
  color: #433b32 !important;
  background: transparent !important;
  border: 1px solid #433b32 !important;
}

.ag-stack img { width:100%; height:200px; object-fit:cover; display:block; margin:0 0 8px; }
.ag-two { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 0; }
.ag-two img { width:100%; height:140px; object-fit:cover; }
.ag-three { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px; margin:8px 0; }
.ag-three img { width:100%; height:110px; object-fit:cover; }
.ag-mosaic { display:grid; grid-template-columns:1.4fr 1fr; grid-auto-rows:90px; gap:4px; margin:8px 0; }
.ag-mosaic img { width:100%; height:100%; object-fit:cover; }
.ag-mosaic img:first-child { grid-row: span 2; height:184px; }