:root {
  --page: #f7f8f4;
  --navbar: #f7f8f4;
  --tabbar: #f7f8f4;
  --sheet: #fbfcf8;
  --brand: #1147d9;
  --accent: #f15b3d;
  --mint: #9adbb9;
  --ink: #101820;
  --muted: #626a72;
  --line: #cfd4d0;
  --soft: #e7edfc;
  --touchbar: #101820;
}

body {
  background: #dce4e7;
  color: var(--ink);
}

.theme-custom .phone {
  border-radius: 30px;
  background: var(--page);
}

.theme-custom .system-chrome {
  border-bottom: 2px solid var(--ink);
}

.theme-custom .miniapp-navbar h1,
.custom-display {
  font-family: "Arial Narrow", "Roboto Condensed", "PingFang SC", sans-serif;
  font-weight: 850;
}

.custom-kicker {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.custom-card {
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  box-shadow: 5px 5px 0 var(--ink);
}

.day-ticket {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
  background: var(--brand);
  color: #fff;
}

.day-ticket .ticket-code {
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-weight: 800;
  letter-spacing: 0;
}

.custom-primary {
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--accent);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 850;
}

.custom-secondary {
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.custom-chip {
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: transparent;
}

.custom-chip[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}

.custom-product-image {
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #fff;
  object-fit: cover;
}

.custom-number {
  font-family: "Arial Narrow", "Roboto Condensed", sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 900;
}

.custom-rule {
  height: 2px;
  border: 0;
  background: var(--ink);
}

.theme-custom .tabbar {
  border-top: 2px solid var(--ink);
}

.theme-custom .tabbar button[aria-current="page"] {
  background: var(--brand);
  color: #fff;
}

.theme-custom .sheet {
  border-top: 2px solid var(--ink);
}

.theme-custom .sheet-handle {
  background: var(--ink);
}

.custom-reveal {
  animation: reveal-in 420ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes reveal-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 500px) {
  .theme-custom .phone { border-radius: 0; }
}