/* Arch frame: the signature shape, taken from the logo */
.arch {
  position: relative; overflow: hidden;
  border-radius: var(--arch);
  background: var(--c-velvet-2);
}
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch--outlined { outline: 1px solid rgba(201,168,107,.45); outline-offset: 8px; }

.panel {
  background: var(--c-velvet);
  border: 1px solid var(--c-velvet-line);
  border-radius: var(--r-md);
  padding: var(--s-5);
}

.badge {
  display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-3);
  border-radius: var(--arch-full); font-size: var(--t-xs);
  background: rgba(255,255,255,.07); color: var(--c-mist);
}
.badge--gold { background: rgba(201,168,107,.16); color: var(--c-champagne-2); }
.badge--off { background: rgba(217,105,90,.14); color: var(--c-danger); }
.badge--on { background: rgba(111,181,154,.14); color: var(--c-success); }

.toast-stack { position: fixed; z-index: 100; left: 50%; bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: var(--s-2); }
.toast {
  padding: var(--s-3) var(--s-5); border-radius: var(--arch-full);
  background: var(--c-linen); color: var(--c-night); font-size: var(--t-sm);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  animation: toast-in .25s var(--ease);
}
.toast--error { background: var(--c-danger); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }