.ui-toast{
  position:fixed;
  left:50%;
  bottom:84px;
  transform:translateX(-50%) translateY(10px);
  opacity:0;
  z-index:9999;
  transition: opacity .18s ease, transform .18s ease;
}
.ui-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.ui-toast__inner{
  max-width:78vw;
  background:rgba(0,0,0,0.78);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  line-height:1.3;
  box-shadow:0 10px 20px rgba(0,0,0,0.2);
}

.ui-modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9998;
  opacity:0;
  transition: opacity .22s ease;
}
.ui-modal.is-open{ display:flex; }
.ui-modal.show{ opacity:1; }

.ui-modal__mask{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.55);
}

.ui-modal__panel{
  position:relative;
  width:min(92vw, 420px);
  max-height:80vh;
  overflow:hidden;
  background:rgba(255,255,255,0.96);
  border-radius:18px;
  box-shadow:0 18px 48px rgba(0,0,0,0.35);
  transform: translateY(14px) scale(0.98);
  transition: transform .22s ease;
  border:1px solid rgba(246,211,123,0.35);
}
.ui-modal.show .ui-modal__panel{
  transform: translateY(0) scale(1);
}

.ui-modal__hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px 10px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.ui-modal__title{
  font-weight:900;
  color:#7a1400;
}
.ui-modal__close{
  border:0;
  background:transparent;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  color:#7a1400;
  padding:4px 8px;
}

.ui-modal__bd{
  padding:12px;
  overflow:auto;
  max-height:62vh;
}

.ui-modal__ft{
  padding:12px;
  border-top:1px solid rgba(0,0,0,0.06);
  display:flex;
  gap:10px;
  justify-content:flex-end;
}

.ui-btn{
  border:0;
  border-radius:12px;
  padding:10px 14px;
  font-weight:900;
  cursor:pointer;
}
.ui-btn--primary{
  background:linear-gradient(180deg, var(--brand), var(--brand2));
  color:#fff;
}
.ui-btn--ghost{
  background:rgba(184,22,22,0.06);
  border:1px solid rgba(184,22,22,0.14);
  color:#7a1400;
}

.result{
  text-align:center;
  padding:6px 4px 2px;
}
.result__img{
  width:110px; height:110px;
  margin:6px auto 10px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(246,211,123,0.7);
  background:#fff;
}
.result__name{
  font-weight:900;
  color:#7a1400;
  font-size:16px;
  margin-bottom:6px;
}
.result__desc{
  color:#5a3434;
  font-size:13px;
}

.records__loading,
.records__empty{
  padding:18px 0;
  text-align:center;
  color:#6a4a4a;
  font-weight:800;
}
.records__list{
  display:block;
}
.records__head, .records__row{
  display:grid;
  grid-template-columns: 110px 1fr 90px;
  gap:8px;
  align-items:center;
}
.records__head{
  font-weight:900;
  color:#7a1400;
  padding:6px 0 10px;
  border-bottom:1px dashed rgba(184,22,22,0.22);
  margin-bottom:6px;
}
.records__row{
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,0.05);
  color:#4a2a2a;
}
.records__col--date{ font-weight:800; color:#5a3434; }
.records__col--prize{ font-weight:900; }
.tag{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  text-align:center;
  border:1px solid rgba(0,0,0,0.06);
}
.tag--ok{
  background:rgba(46, 204, 113, 0.12);
  color:#1f7a43;
  border-color:rgba(46, 204, 113, 0.18);
}
.tag--wait{
  background:rgba(241, 196, 15, 0.14);
  color:#7a5a00;
  border-color:rgba(241, 196, 15, 0.18);
}