/* RVTik Gift Library */
.gifts-page .rvtik-hero {
  padding-bottom: clamp(42px, 6vw, 72px);
}

.gifts-page .gift-hero-visual {
  min-height: 320px;
}

.gift-live-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}

.gift-live-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--rvtik-line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px rgba(255,255,255,.04);
}

.gift-live-card:nth-child(2) { margin-left: clamp(12px, 4vw, 44px); }
.gift-live-card:nth-child(3) { margin-right: clamp(12px, 4vw, 44px); }

.gift-live-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255,140,66,.18), rgba(129,87,246,.18));
  color: #fff;
  font-size: 1.2rem;
  font-weight: 900;
}

.gift-live-card small {
  display: block;
  margin-bottom: 3px;
  color: var(--rvtik-subtle);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.gift-live-card strong {
  display: block;
  font-size: clamp(1rem, 2vw, 1.22rem);
  line-height: 1.3;
}

.gift-library-panel {
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid var(--rvtik-line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% 0%, rgba(129,87,246,.10), transparent 28%),
    rgba(13, 8, 23, .72);
  box-shadow: var(--rvtik-shadow);
}

.gift-library-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) minmax(150px, .7fr) minmax(170px, .8fr) auto;
  gap: 12px;
  align-items: end;
}

.gift-field {
  display: grid;
  gap: 7px;
}

.gift-field label {
  color: var(--rvtik-subtle);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.gift-input,
.gift-select {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  outline: none;
  background: rgba(255,255,255,.055);
  color: #fff;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.gift-input::placeholder { color: rgba(255,255,255,.36); }
.gift-input:focus,
.gift-select:focus {
  border-color: rgba(157,123,255,.58);
  background: rgba(255,255,255,.075);
  box-shadow: 0 0 0 4px rgba(129,87,246,.10);
}

.gift-select option {
  background: #171027;
  color: #fff;
}

.gift-refresh {
  min-height: 48px;
  padding: 0 17px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 14px;
  background: rgba(255,255,255,.065);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.gift-refresh:hover {
  transform: translateY(-1px);
  border-color: rgba(157,123,255,.48);
  background: rgba(129,87,246,.13);
}

.gift-refresh:disabled { opacity: .55; cursor: wait; transform: none; }

.gift-library-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 18px 2px 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--rvtik-subtle);
  font-size: .86rem;
}

.gift-library-meta strong { color: #fff; }

.gift-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.gift-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.035));
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.gift-card:hover {
  transform: translateY(-3px);
  border-color: rgba(157,123,255,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.045));
}

.gift-image-wrap {
  position: relative;
  display: grid;
  aspect-ratio: 1 / 1;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background:
    radial-gradient(circle at 50% 44%, rgba(129,87,246,.16), transparent 42%),
    rgba(8,5,14,.46);
}

.gift-image-wrap::after {
  content: "";
  position: absolute;
  inset: auto 12% 0;
  height: 18%;
  border-radius: 50%;
  background: rgba(0,0,0,.30);
  filter: blur(12px);
  pointer-events: none;
}

.gift-image {
  position: relative;
  z-index: 1;
  width: 74%;
  height: 74%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.30));
  transition: transform .2s ease;
}

.gift-card:hover .gift-image { transform: scale(1.035); }

.gift-image.is-fallback {
  width: 54%;
  height: 54%;
  opacity: .45;
  filter: none;
}

.gift-card-body {
  display: grid;
  gap: 10px;
  padding: 15px;
}

.gift-card-top {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.gift-name {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.28;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.gift-coin {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  align-items: center;
  min-height: 23px;
  max-width: 100%;
  padding: 3px 6px;
  border: 1px solid rgba(255,216,77,.18);
  border-radius: 999px;
  background: rgba(255,216,77,.09);
  color: #ffe688;
  font-size: .57rem;
  line-height: 1;
  font-weight: 900;
  white-space: nowrap;
}

.gift-coin::before {
  content: "◆";
  font-size: .52rem;
}

.gift-id-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.gift-id {
  min-width: 0;
  overflow: hidden;
  color: rgba(255,255,255,.47);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gift-copy {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  background: rgba(255,255,255,.045);
  color: rgba(255,255,255,.68);
  cursor: pointer;
  font-size: .68rem;
  font-weight: 800;
}

.gift-copy:hover { color:#fff; border-color:rgba(157,123,255,.35); }
.gift-copy.is-copied { color:#bfffe2; border-color:rgba(109,255,177,.30); background:rgba(109,255,177,.08); }

.gift-empty,
.gift-error,
.gift-loading {
  grid-column: 1 / -1;
  padding: clamp(40px, 7vw, 72px) 20px;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 22px;
  color: var(--rvtik-muted);
  text-align: center;
}

.gift-loading-dots::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: giftDots 1.2s steps(4,end) infinite;
}

@keyframes giftDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75%, 100% { content: "..."; }
}

.gift-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.gift-load-more {
  min-width: 190px;
}

.gift-library-note {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 14px;
  align-items: start;
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  color: var(--rvtik-muted);
  font-size: .88rem;
  line-height: 1.65;
}

.gift-library-note-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: rgba(97,231,255,.09);
  color: var(--rvtik-cyan);
  font-weight: 900;
}

@media (max-width: 1120px) {
  .gift-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gift-library-toolbar { grid-template-columns: minmax(220px,1.4fr) repeat(2,minmax(150px,.8fr)); }
  .gift-refresh { grid-column: 1 / -1; width: fit-content; }
}

@media (max-width: 860px) {
  .gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gift-library-toolbar { grid-template-columns: 1fr 1fr; }
  .gift-field:first-child { grid-column: 1 / -1; }
  .gift-refresh { grid-column: auto; width: 100%; }
}

@media (max-width: 640px) {
  .gift-library-panel { padding: 16px; border-radius: 24px; }
  .gift-library-toolbar { grid-template-columns: 1fr; }
  .gift-field:first-child, .gift-refresh { grid-column: auto; }
  .gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gift-card-body { padding: 11px; gap: 8px; }
  .gift-card-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .gift-name {
    width: 100%;
    font-size: .70rem;
    line-height: 1.25;
    -webkit-line-clamp: 2;
  }
  .gift-coin {
    justify-self: start;
    min-height: 21px;
    padding: 3px 6px;
    font-size: .54rem;
  }
  .gift-live-card:nth-child(2), .gift-live-card:nth-child(3) { margin: 0; }
}

@media (max-width: 390px) {
  .gift-grid { grid-template-columns: 1fr; }
  .gift-image-wrap { aspect-ratio: 1.25 / 1; }
  .gift-image { width: 62%; height: 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .gift-card, .gift-image, .gift-refresh { transition: none; }
  .gift-loading-dots::after { animation: none; content: "..."; }
}