/* ui.css (UI components ONLY: buttons, badges, modal, inputs) */
html.noScroll, html.noScroll body{overflow:hidden}

/* Badges */
.badge{
  font-size:11px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background: rgba(0,0,0,.18);
  color: rgba(233,231,242,.82);
  letter-spacing:.02em;
}
.badge--hot{
  border-color: rgba(255,42,42,.55);
  background: rgba(255,42,42,.12);
  color:#ffd0d0;
}

/* Buttons (nav / CTAs only) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background: rgba(255,255,255,.05);
  color:#e9e7f2;
  cursor:pointer;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 12px 30px rgba(0,0,0,.22);
  text-decoration:none;
  user-select:none;
  transition: transform .08s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, filter .14s ease;
}
.btn:hover{
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.07);
  box-shadow:
    0 1px 0 rgba(255,255,255,.08) inset,
    0 18px 44px rgba(0,0,0,.30);
  filter: brightness(1.02);
}
.btn:active{transform: translateY(1px) scale(.99)}
.btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(255,42,42,.18), 0 18px 44px rgba(0,0,0,.30)
}

.btn--primary{
  border-color: rgba(255,42,42,.60);
  background: rgba(255,42,42,.14);
}
.btn--primary:hover{
  border-color: rgba(255,42,42,.85);
  background: rgba(255,42,42,.18);
}
.btn--ghost{
  background: rgba(0,0,0,.18);
  border-color: rgba(255,255,255,.14);
}
.btn--ghost:hover{
  background: rgba(0,0,0,.24);
  border-color: rgba(255,255,255,.22);
}
.btn--xl{padding:12px 14px; border-radius:16px; font-weight:900}

/* Inputs */
.input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color:#e9e7f2;
  outline:none;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.input:focus{
  border-color: rgba(255,42,42,.46);
  box-shadow: 0 0 0 3px rgba(255,42,42,.12);
  background: rgba(0,0,0,.22);
}
.form{display:flex; flex-direction:column; gap:12px}
.field span{display:block; margin-bottom:6px; color:#b8b3c9; font-size:12px}
.formRow{display:flex; gap:10px; flex-wrap:wrap}

/* Hint Pills */
.hintPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,42,42,.44);
  background: rgba(255,42,42,.10);
  color: rgba(255,215,215,.95);
  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform: uppercase;
}
.hintPill--mini{
  padding:5px 9px;
  font-size:10px;
}

/* Modal base */
.modal{position:fixed; inset:0; display:none; z-index:1000}
.modal.isOpen{display:block}

.modal__backdrop{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 50% 0%, rgba(255,42,42,.12), transparent 55%),
    rgba(0,0,0,.72);
  backdrop-filter: blur(12px);
  animation: fadeIn .16s ease both;
}

.modal__panel{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -50%) scale(.98);
  width:min(520px, calc(100% - 28px));
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(20,18,27,.90), rgba(10,9,14,.84));
  box-shadow: 0 30px 120px rgba(0,0,0,.70);
  padding:16px;
  animation: popIn .18s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{
  from{opacity:0; transform: translate(-50%,-50%) scale(.96)}
  to{opacity:1; transform: translate(-50%,-50%) scale(1)}
}

.modal__x{
  position:absolute; top:10px; right:12px;
  width:38px; height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color:#fff;
  cursor:pointer;
  font-size:20px;
}
.modal__x:hover{border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06)}

.modal__header{display:flex; gap:12px; align-items:center; padding:4px 4px 12px}

.modal__sigil{
  width:56px;
  height:56px;
  border-radius:16px;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 0 0 2px rgba(255,42,42,.08),
    0 14px 38px rgba(0,0,0,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.modal__title{font-weight:950}
.modal__sub{font-size:12px; color:#b8b3c9}

/* Tabs */
.tabs{display:flex; gap:8px; padding:0 4px 12px}
.tab{
  flex:1;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color:#e9e7f2;
  cursor:pointer;
  font-weight:900;
}
.tab.isActive{border-color: rgba(255,42,42,.55); background: rgba(255,42,42,.10)}

.tabPanel{display:none; padding:4px}
.tabPanel.isActive{display:block}

/* Toast */
.modal__toast{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  color:#b8b3c9;
  font-size:12px;
  opacity:0;
  transform: translateY(6px);
  transition: .16s ease;
}
.modal__toast.isOn{opacity:1; transform: translateY(0)}

/* Info modal */
.modal__panel--info{ width:min(620px, calc(100% - 28px)); }

.infoHead{
  padding: 4px 4px 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.infoHead__tag{
  display:inline-flex;
  align-self:flex-start;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,42,42,.35);
  background: rgba(255,42,42,.10);
  color: rgba(255,215,215,.92);
  font-weight: 950;
  letter-spacing:.08em;
  text-transform: uppercase;
}
.infoHead__title{
  font-weight: 1000;
  letter-spacing:.02em;
  font-size: 18px;
  color: rgba(240,238,255,.95);
  text-shadow: 0 0 22px rgba(255,42,42,.10);
}
.infoBody{
  padding: 6px 4px 10px;
  color: rgba(233,231,242,.84);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-line;
}
.infoActions{
  padding: 10px 4px 2px;
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* Safety: logo sizing (images only) */
.logo--brand{ width:42px; height:42px; }
.logo--modal{ width:48px; height:48px; }