/* ════════════════════════════════════════════════════════════
   GachaUniverse PRO — Frontend CSS  v2.0
   Dark fantasy / Genshin Impact aesthetic
   ════════════════════════════════════════════════════════════ */
:root {
  --g-gold:   #f0c040;
  --g-gold2:  #ffd700;
  --g-gg:     rgba(240,192,64,.55);
  --g-pu:     #7c3aed;
  --g-pu2:    #a855f7;
  --g-pug:    rgba(168,85,247,.38);
  --g-bl:     #1e40af;
  --g-bl2:    #3b82f6;
  --g-bg:     #07050f;
  --g-card:   rgba(255,255,255,.04);
  --g-bdr:    rgba(255,255,255,.1);
  --g-txt:    #e8e0f0;
  --g-dim:    rgba(232,224,240,.5);
  --r5: linear-gradient(135deg,#f0c040,#ffd700,#ff8c00,#f0c040);
  --r4: linear-gradient(135deg,#7c3aed,#a855f7,#c084fc,#7c3aed);
  --r3: linear-gradient(135deg,#1e40af,#3b82f6,#60a5fa,#1e40af);
  --rc: linear-gradient(135deg,#374151,#6b7280,#9ca3af,#374151);
}

/* ── Reset / base ─────────────────────────────────────────── */
.gup-portal * { box-sizing: border-box; }
.gup-portal, .gup-portal * { font-family: 'Rajdhani', -apple-system, sans-serif; }

.gup-portal {
  color: var(--g-txt);
  background: var(--g-bg);
  border-radius: 18px;
  overflow: hidden;
  min-height: 540px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,.65);
}
.gup-portal::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(124,58,237,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(30,64,175,.14) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(240,192,64,.04) 0%, transparent 70%);
}

.gup-login-notice {
  padding: 1.5rem 2rem; background: var(--g-card);
  border: 1px solid var(--g-bdr); border-radius: 12px;
  color: var(--g-dim); font-size: .95rem;
}
.gup-login-notice a { color: var(--g-gold); font-weight: 700; }

/* ── Nav ──────────────────────────────────────────────────── */
.gup-nav {
  display: flex; gap: .35rem; padding: .85rem 1rem .7rem;
  border-bottom: 1px solid var(--g-bdr);
  background: rgba(7,5,15,.88);
  backdrop-filter: blur(12px);
  position: relative; z-index: 20;
  flex-wrap: wrap;
}
.gup-tab-btn {
  padding: .4rem 1rem;
  border: 1px solid var(--g-bdr);
  background: var(--g-card);
  color: var(--g-dim);
  border-radius: 5px; cursor: pointer;
  font-size: .84rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  transition: all .18s;
}
.gup-tab-btn:hover, .gup-tab-btn.active {
  border-color: var(--g-gold);
  color: var(--g-gold);
  background: rgba(240,192,64,.08);
  box-shadow: 0 0 14px var(--g-gg);
}

/* ── Wallet bar ───────────────────────────────────────────── */
.gup-wallet-bar {
  display: flex; gap: .55rem; justify-content: flex-end;
  padding: .5rem 1rem;
  background: rgba(7,5,15,.6);
  flex-wrap: wrap;
  position: relative; z-index: 10;
}
.gup-chip {
  display: flex; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--g-bdr);
  border-radius: 20px; padding: .22rem .7rem;
  font-size: .84rem;
}
.gup-chip strong { color: var(--g-gold); font-weight: 700; }

/* ── Tabs ─────────────────────────────────────────────────── */
.gup-tab { display: none; padding: 1.4rem; position: relative; z-index: 1; }
.gup-tab.active { display: block; }

.gup-sec-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: .95rem; color: var(--g-gold);
  margin: 0 0 1rem; letter-spacing: .1em;
  filter: drop-shadow(0 0 10px var(--g-gg));
}
.gup-sub { color: var(--g-dim); font-size: .82rem; margin: -.5rem 0 1rem; }

/* ── Banners grid ─────────────────────────────────────────── */
.gup-banners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem; margin-bottom: 1.4rem;
}
.gup-banner {
  border: 1px solid var(--g-bdr); border-radius: 14px;
  overflow: hidden; cursor: pointer;
  transition: transform .2s, box-shadow .2s;
  background: var(--g-card);
}
.gup-banner:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px var(--g-pug);
}
.gup-banner-art {
  height: 135px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.gup-banner-emoji {
  font-size: 4.2rem; position: relative; z-index: 2;
  filter: drop-shadow(0 0 18px currentColor);
  animation: gupFloat 3s ease-in-out infinite;
}
@keyframes gupFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.gup-banner-badge {
  position: absolute; top: .5rem; right: .5rem;
  background: var(--g-gold); color: #07050f;
  font-size: .62rem; font-weight: 700;
  padding: .15rem .48rem; border-radius: 4px; letter-spacing: .07em;
  z-index: 3;
}
.gup-banner-info { padding: .85rem 1rem; }
.gup-banner-name { font-family: 'Cinzel Decorative', serif; font-size: .82rem; color: var(--g-gold); margin-bottom: .25rem; }
.gup-banner-desc { font-size: .78rem; color: var(--g-dim); margin-bottom: .7rem; }

/* banner backgrounds */
.gup-bg-purple .gup-banner-art { background: linear-gradient(135deg,#1a0a2e,#4a1080,#7c3aed); }
.gup-bg-gold   .gup-banner-art { background: linear-gradient(135deg,#2a1800,#8a5a00,#d4a017); }
.gup-bg-blue   .gup-banner-art { background: linear-gradient(135deg,#051028,#0a2060,#1e40af); }
.gup-bg-red    .gup-banner-art { background: linear-gradient(135deg,#1a0005,#600015,#dc2626); }
.gup-bg-teal   .gup-banner-art { background: linear-gradient(135deg,#001a18,#006054,#0d9488); }
.gup-bg-dark   .gup-banner-art { background: linear-gradient(135deg,#07050f,#1a1a2e,#2d2b55); }

/* ── Pull panel ───────────────────────────────────────────── */
.gup-pull-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media(max-width:580px){ .gup-pull-grid { grid-template-columns:1fr; } }

.gup-pity-box {
  background: rgba(255,255,255,.03); border: 1px solid var(--g-bdr);
  border-radius: 10px; padding: 1.1rem;
}
.gup-prow { display: flex; justify-content: space-between; font-size: .78rem; color: var(--g-dim); margin-bottom: .28rem; }
.gup-pbar { height: 6px; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; margin-bottom: .6rem; }
.gup-pfill  { height: 100%; border-radius: 4px; transition: width .4s; }
.gup-pfill5 { background: var(--r5); }
.gup-pfill4 { background: var(--r4); }
.gup-rates  { font-size: .72rem; color: var(--g-dim); margin: .3rem 0 0; }
.gup-pull-btns { display: flex; flex-direction: column; gap: .9rem; }

/* ── Buttons ──────────────────────────────────────────────── */
.gup-btn {
  padding: .8rem 1.5rem; border: none; border-radius: 8px;
  font-family: 'Rajdhani', sans-serif; font-size: .9rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: all .2s;
  position: relative; overflow: hidden;
}
.gup-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-100%); transition: transform .4s;
}
.gup-btn:hover::before { transform: translateX(100%); }
.gup-btn-pull1  { background: var(--r4); color: #fff; box-shadow: 0 4px 16px var(--g-pug); }
.gup-btn-pull10 { background: var(--r5); color: #07050f; box-shadow: 0 4px 18px var(--g-gg); }
.gup-btn-sec    { background: rgba(255,255,255,.07); color: var(--g-txt); border: 1px solid var(--g-bdr); }
.gup-btn-sm     { padding: .35rem .85rem; font-size: .78rem; }
.gup-btn-spin   { background: var(--r5); color: #07050f; font-size: 1rem; width: 100%; box-shadow: 0 4px 28px var(--g-gg); }
.gup-btn-select { background: var(--r4); color: #fff; }
.gup-btn:disabled { opacity: .33; cursor: not-allowed; }
.gup-btn:disabled::before { display: none; }

/* ── Roulette ─────────────────────────────────────────────── */
.gup-roulette-wrap { display: flex; gap: 2rem; flex-wrap: wrap; align-items: flex-start; justify-content: center; }

.gup-wheel-outer {
  position: relative;
  width: min(360px, 90vw); height: min(360px, 90vw);
  flex-shrink: 0;
}
.gup-wheel-outer::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(var(--g-gold), var(--g-pu2), var(--g-bl2), var(--g-gold));
  animation: gupSpinBdr 4s linear infinite; z-index: -1;
}
@keyframes gupSpinBdr { to { transform: rotate(360deg); } }

#gup-canvas {
  border-radius: 50%; width: 100%; height: 100%;
  box-shadow: 0 0 50px var(--g-pug);
}
.gup-wheel-ptr {
  position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
  font-size: 1.7rem; filter: drop-shadow(0 3px 6px rgba(0,0,0,.5)); z-index: 10;
}
.gup-wheel-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 54px; height: 54px;
  background: radial-gradient(circle, var(--g-gold2), var(--g-gold));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; box-shadow: 0 0 18px var(--g-gg);
  cursor: pointer; z-index: 10; border: 3px solid rgba(255,255,255,.28);
  transition: transform .2s;
}
.gup-wheel-center:hover { transform: translate(-50%,-50%) scale(1.1); }

.gup-spin-right { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 1rem; }

.gup-spin-result {
  background: rgba(255,255,255,.04); border: 1px solid var(--g-bdr);
  border-radius: 10px; padding: 1.1rem 1.5rem;
  text-align: center; min-height: 80px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.gup-spin-placeholder { color: var(--g-dim); margin: 0; }
.gup-sr-emoji { font-size: 2.8rem; }
.gup-sr-name  { font-family: 'Cinzel Decorative', serif; font-size: .88rem; color: var(--g-gold); margin: .25rem 0 0; }
.gup-sr-rar   { font-size: .74rem; color: var(--g-dim); }

.gup-spin-pool { display: flex; flex-wrap: wrap; gap: .35rem; }
.gup-pool-chip { padding: .22rem .6rem; border-radius: 20px; font-size: .7rem; border: 1px solid transparent; cursor: default; }
.gup-pc5 { border-color: var(--g-gold); color: var(--g-gold); background: rgba(240,192,64,.08); }
.gup-pc4 { border-color: var(--g-pu2);  color: var(--g-pu2);  background: rgba(168,85,247,.08); }
.gup-pc3 { border-color: var(--g-bl2);  color: var(--g-bl2);  background: rgba(59,130,246,.08); }
.gup-pcc { border-color: #9ca3af;        color: #9ca3af;        background: rgba(156,163,175,.08); }

/* ── Inventory / Selector ─────────────────────────────────── */
.gup-inv-filters { display: flex; gap: .4rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.gup-flt {
  padding: .3rem .8rem; border-radius: 5px;
  border: 1px solid var(--g-bdr); background: var(--g-card);
  color: var(--g-dim); cursor: pointer;
  font-family: 'Rajdhani', sans-serif; font-size: .8rem; font-weight: 700;
  transition: all .18s;
}
.gup-flt.active, .gup-flt:hover {
  border-color: var(--g-gold); color: var(--g-gold);
  background: rgba(240,192,64,.08);
}

.gup-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: .85rem;
}

.gup-inv-item {
  border: 1px solid var(--g-bdr); border-radius: 11px;
  overflow: hidden; background: var(--g-card);
  cursor: pointer; transition: transform .18s, box-shadow .18s;
  position: relative;
}
.gup-inv-item:hover { transform: translateY(-3px); box-shadow: 0 6px 22px var(--g-pug); }
.gup-inv-item.equipped { border-color: var(--g-gold); box-shadow: 0 0 16px var(--g-gg); }
.gup-inv-item:not(.has-image) .gup-inv-icon { font-size: 2.1rem; }
.gup-inv-icon {
  height: 88px;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  position: relative;
}
.gup-inv-name { font-size: .67rem; font-weight: 700; text-align: center; padding: .35rem .3rem 0; color: var(--g-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gup-inv-type { font-size: .58rem; color: var(--g-dim); text-align: center; padding: 0 .3rem .38rem; }
.gup-inv-stack { position: absolute; top: .2rem; right: .2rem; background: rgba(0,0,0,.72); border-radius: 10px; padding: .05rem .3rem; font-size: .6rem; color: var(--g-gold); }
.gup-inv-eq    { position: absolute; top: .2rem; left: .2rem; background: var(--g-gold); color: #07050f; border-radius: 3px; padding: .05rem .28rem; font-size: .56rem; font-weight: 700; }

/* Rarity backgrounds for icon area */
.gup-r5 { background: var(--r5); }
.gup-r4 { background: var(--r4); }
.gup-r3 { background: var(--r3); }
.gup-rc { background: var(--rc); }

/* ── Selector / Equipar ───────────────────────────────────── */
.gup-selector-wrap { display: flex; flex-direction: column; gap: 1rem; }

.gup-equip-preview {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  background: rgba(255,255,255,.03); border: 1px solid var(--g-bdr);
  border-radius: 12px; padding: 1.2rem;
}
.gup-equip-avatar { text-align: center; flex-shrink: 0; }
.gup-equip-avatar img { border-radius: 50%; border: 2px solid var(--g-gold); }
.gup-equip-name { font-family: 'Cinzel Decorative', serif; font-size: .82rem; color: var(--g-gold); margin: .5rem 0 .3rem; }
.gup-prev-prefixes { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-top: .3rem; }

.gup-equip-list { flex: 1; }
.gup-equip-list h4 { font-size: .8rem; color: var(--g-dim); margin: 0 0 .6rem; text-transform: uppercase; letter-spacing: .08em; }
.gup-eq-badge {
  display: inline-block; padding: .25rem .7rem; border-radius: 12px;
  font-size: .72rem; margin: .15rem; font-weight: 700;
}
.gup-equip-empty { color: var(--g-dim); font-size: .82rem; }

/* ── History ──────────────────────────────────────────────── */
.gup-history-list { display: flex; flex-direction: column; gap: .45rem; }
.gup-hi {
  display: flex; align-items: center; gap: .8rem;
  padding: .5rem .85rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--g-bdr);
  border-radius: 8px; font-size: .8rem;
}
.gup-hi-ico  { font-size: 1.3rem; flex-shrink: 0; }
.gup-hi-name { flex: 1; font-weight: 600; }
.gup-hi-rar  { font-size: .7rem; }
.gup-hi-time { color: var(--g-dim); font-size: .7rem; white-space: nowrap; }

/* ── Daily ────────────────────────────────────────────────── */
.gup-daily-box {
  max-width: 520px; margin: 0 auto; text-align: center;
  padding: 2rem 1.5rem;
  background: rgba(255,255,255,.03); border: 1px solid var(--g-bdr);
  border-radius: 14px;
}
.gup-daily-icon { font-size: 4rem; margin-bottom: 1rem; animation: gupFloat 3s ease-in-out infinite; }
.gup-daily-box h3 { font-family: 'Cinzel Decorative', serif; color: var(--g-gold); margin-bottom: .5rem; }
.gup-daily-box p  { color: var(--g-dim); margin-bottom: 1.5rem; }
.gup-rewards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: .7rem; margin-top: 1.5rem;
}
.gup-reward-card {
  background: rgba(255,255,255,.05); border: 1px solid var(--g-bdr);
  border-radius: 8px; padding: .8rem; font-size: .82rem; font-weight: 600;
}
.gup-reward-card small { display: block; color: var(--g-dim); margin-top: .3rem; font-size: .7rem; font-weight: 400; }

/* ── Result overlay ───────────────────────────────────────── */
.gup-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
}
.gup-result-box { text-align: center; max-width: 860px; width: 100%; padding: 1.5rem; }
.gup-result-title {
  font-family: 'Cinzel Decorative', serif; font-size: 1.7rem;
  background: var(--r5); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  margin-bottom: 1.4rem;
  animation: gupFD .5s ease;
}
@keyframes gupFD { from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:none} }

.gup-result-items { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem; margin-bottom: 1.4rem; }

.gup-ri {
  width: 100px;
  animation: gupPop .4s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay: var(--d, 0s);
}
@keyframes gupPop { from{opacity:0;transform:scale(.3) rotate(-10deg)} to{opacity:1;transform:scale(1)} }

.gup-ri-ico {
  width: 100px; height: 100px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; position: relative;
  background-size: cover; background-position: center;
  margin-bottom: .35rem;
}
.gup-ri-stars {
  position: absolute; bottom: .26rem; left: 0; right: 0;
  font-size: .58rem; text-align: center;
  filter: drop-shadow(0 0 4px var(--g-gold));
}
.gup-ri-name { font-size: .68rem; color: var(--g-dim); word-break: break-word; text-align: center; }

/* ── Loading ──────────────────────────────────────────────── */
.gup-loading { text-align: center; color: var(--g-dim); padding: 2rem; font-size: .9rem; }
.gup-wallet-inline { font-weight: 700; letter-spacing: .04em; }

/* ── Responsive ───────────────────────────────────────────── */
@media(max-width:500px) {
  .gup-banners-grid { grid-template-columns: 1fr; }
  .gup-roulette-wrap { flex-direction: column; align-items: center; }
  .gup-inv-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .gup-nav { gap: .25rem; }
  .gup-tab-btn { font-size: .75rem; padding: .35rem .7rem; }
}

/* ════════════════════════════════════════════════════════════════
   BANNER ITEMS PREVIEW PANEL
   ════════════════════════════════════════════════════════════════ */
.gup-banner-items-panel { padding: .4rem 0; }
.gup-bp-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.8rem; flex-wrap:wrap; gap:.5rem; }
.gup-bp-rarity-label { font-weight:700; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; margin:.9rem 0 .4rem; padding-left:2px; }
.gup-bp-row { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.5rem; }
.gup-bp-item { width:72px; text-align:center; cursor:default; }
.gup-bp-thumb { width:72px; height:72px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.8rem; margin-bottom:.3rem; background-size:cover; background-position:center; }
.gup-bp-name { font-size:.6rem; color:var(--g-txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gup-bp-type { font-size:.55rem; color:var(--g-dim); }

/* ════════════════════════════════════════════════════════════════
   MARKET
   ════════════════════════════════════════════════════════════════ */
.gup-market-layout { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media(max-width:700px){ .gup-market-layout { grid-template-columns:1fr; } }

.gup-market-sec { font-family:'Cinzel Decorative',serif; font-size:.82rem; color:var(--g-gold); margin:0 0 .8rem; }
.gup-market-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.9rem; }
.gup-market-tab-btn.active { border-color:var(--g-gold)!important; color:var(--g-gold)!important; }

/* Shop grid */
.gup-shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.8rem; }
.gup-shop-item {
    background:rgba(255,255,255,.04); border:1px solid var(--g-bdr); border-radius:10px;
    padding:.9rem; text-align:center; transition:transform .2s;
}
.gup-shop-item:hover { transform:translateY(-2px); border-color:var(--g-gold); }
.gup-si-emoji { font-size:2rem; margin-bottom:.3rem; }
.gup-si-name  { font-size:.78rem; font-weight:700; color:var(--g-txt); margin-bottom:.2rem; }
.gup-si-desc  { font-size:.65rem; color:var(--g-dim); margin-bottom:.4rem; }
.gup-si-rarity{ font-size:.68rem; margin-bottom:.3rem; }
.gup-si-price { font-size:.88rem; color:var(--g-gold); font-weight:700; margin-bottom:.5rem; }
.gup-stellar-item { border-color:rgba(240,192,64,.3); }

/* Listings */
.gup-listings-grid { display:flex; flex-direction:column; gap:.5rem; margin-bottom:.8rem; }
.gup-listing {
    display:flex; align-items:center; gap:.8rem;
    background:rgba(255,255,255,.04); border:1px solid var(--g-bdr); border-radius:8px; padding:.65rem .9rem;
    transition:border-color .2s;
}
.gup-listing:hover { border-color:var(--g-pu2); }
.gup-listing-thumb { width:44px; height:44px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; background-size:cover; }
.gup-listing-info { flex:1; min-width:0; }
.gup-listing-name   { font-size:.82rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gup-listing-rar    { font-size:.7rem; }
.gup-listing-seller { font-size:.68rem; color:var(--g-dim); }
.gup-listing-right  { text-align:right; flex-shrink:0; }
.gup-listing-price  { font-size:.88rem; color:var(--g-gold); font-weight:700; margin-bottom:.3rem; }

.gup-sell-form, .gup-send-form { display:flex; flex-direction:column; gap:.7rem; }
.gup-sell-form .gup-fg, .gup-send-form .gup-fg { display:flex; flex-direction:column; gap:4px; }
.gup-sell-form label, .gup-send-form label { font-size:.78rem; font-weight:600; color:var(--g-dim); }
.gup-sell-form input, .gup-sell-form select,
.gup-send-form input {
    background:rgba(255,255,255,.06); border:1px solid var(--g-bdr); border-radius:6px;
    padding:8px 10px; color:var(--g-txt); font-size:.88rem;
}
.gup-sell-form input:focus, .gup-send-form input:focus { border-color:var(--g-gold); outline:none; }
.gup-form-msg-inline { font-size:.78rem; margin-top:.3rem; }
.gup-my-listing {
    display:flex; align-items:center; gap:.7rem; justify-content:space-between;
    padding:.45rem .8rem; background:rgba(255,255,255,.04); border:1px solid var(--g-bdr); border-radius:6px; margin-top:.4rem; font-size:.82rem;
}

/* ════════════════════════════════════════════════════════════════
   EVENTS
   ════════════════════════════════════════════════════════════════ */
.gup-events-wrap { display:flex; flex-direction:column; gap:1.1rem; }
.gup-event-card {
    border-radius:14px; padding:1.2rem 1.4rem;
    border:1px solid rgba(255,255,255,.15);
    color:#fff; position:relative; overflow:hidden;
    transition:transform .2s;
}
.gup-event-card:hover { transform:translateY(-2px); }
.gup-event-head { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.gup-event-emoji { font-size:2.4rem; flex-shrink:0; }
.gup-event-name { font-family:'Cinzel Decorative',serif; font-size:.88rem; color:var(--g-gold); margin-bottom:.25rem; }
.gup-event-desc { font-size:.8rem; opacity:.82; }
.gup-event-timer { margin-left:auto; flex-shrink:0; background:rgba(0,0,0,.3); border-radius:6px; padding:.2rem .7rem; font-size:.76rem; white-space:nowrap; }
.gup-event-rewards { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.9rem; }
.gup-ev-rew { background:rgba(255,255,255,.12); border-radius:8px; padding:.3rem .8rem; font-size:.82rem; }
.gup-event-result { margin-top:.8rem; background:rgba(0,0,0,.35); border-radius:8px; padding:.6rem 1rem; font-size:.85rem; font-weight:600; }
.gup-empty-events { text-align:center; padding:3rem 1rem; color:var(--g-dim); }
.gup-event-roulette-wrap { display:flex; flex-direction:column; align-items:center; gap:.8rem; }
.gup-event-canvas { border-radius:50%; box-shadow:0 0 30px var(--g-pug); }