/* ═══════════════════════════════════════════════════════════════
   gifts.css – Quà Tặng · Đấu Giá Mù · Xổ Số
   Professional card redesign + full-page create forms
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────────── */
:root {
  --gift-green:    #22c55e;
  --auction-gold:  #f59e0b;
  --lottery-purple:#8b5cf6;
  --bg-dark:       #0d0d0d;
  --bg-card:       #181818;
  --bg-card2:      #1e1e1e;
  --border-subtle: rgba(255,255,255,0.07);
  --text-primary:  #f4f4f5;
  --text-muted:    #71717a;
  --radius-card:   18px;
  --radius-sm:     10px;
  --shadow-card:   0 4px 24px rgba(0,0,0,0.4);
  --transition:    all 0.22s cubic-bezier(.4,0,.2,1);
}

/* ══════════════════════════════════════════════════════════════════
   PAGE LAYOUT
══════════════════════════════════════════════════════════════════ */
.gifts-page { min-height: 100vh; background: var(--bg-dark); padding-bottom: 80px; }

/* ── Tab bar ───────────────────────────────────────────────────── */
.gifts-tabs-wrap {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13,13,13,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 16px;
}
.gifts-tabs {
  display: flex; gap: 4px;
  max-width: 600px; margin: 0 auto;
  overflow-x: auto; scrollbar-width: none;
}
.gifts-tabs::-webkit-scrollbar { display: none; }
.gtab {
  display: flex; align-items: center; gap: 7px;
  padding: 14px 18px;
  border: none; background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em; white-space: nowrap;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  transition: var(--transition);
  text-transform: uppercase;
}
.gtab i { font-size: 0.9em; }
.gtab.active { color: var(--text-primary); border-bottom-color: currentColor; }
.gtab[data-tab="gifts"].active   { color: var(--gift-green); }
.gtab[data-tab="auction"].active { color: var(--auction-gold); }
.gtab[data-tab="lottery"].active { color: var(--lottery-purple); }

/* ── Panels ────────────────────────────────────────────────────── */
.gifts-panel { display: none; padding: 20px 16px 0; max-width: 700px; margin: 0 auto; }
.gifts-panel.active { display: block; }

/* ── Panel header ──────────────────────────────────────────────── */
.gifts-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  margin-bottom: 22px; padding-top: 4px;
}
.panel-title {
  font-size: 1.25rem; font-weight: 800; color: var(--text-primary);
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
}
.panel-sub { font-size: 0.8rem; color: var(--text-muted); }

/* ── Create buttons ────────────────────────────────────────────── */
.btn-create-fp {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px; border: none; border-radius: var(--radius-sm);
  font-size: 0.78rem; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: var(--transition);
  background: var(--gift-green); color: #000; flex-shrink: 0;
}
.btn-create-fp.auction-btn { background: var(--auction-gold); }
.btn-create-fp.lottery-btn { background: var(--lottery-purple); color: #fff; }
.btn-create-fp:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* ── Section divider ───────────────────────────────────────────── */
.section-divider {
  display: flex; align-items: center; gap: 12px; margin: 24px 0 14px;
}
.section-divider::before,.section-divider::after {
  content:''; flex:1; height:1px; background:var(--border-subtle);
}
.section-divider span {
  font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   GIFT CARDS
══════════════════════════════════════════════════════════════════ */
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 14px; }

.gift-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); overflow: hidden;
  transition: var(--transition); display: flex; flex-direction: column;
}
.gift-card:hover {
  border-color: rgba(34,197,94,0.3); transform: translateY(-3px); box-shadow: var(--shadow-card);
}
.gift-card-img {
  width: 100%; aspect-ratio: 16/9; overflow: hidden;
  background: linear-gradient(135deg,#1a2a1a 0%,#0d1f0d 100%);
}
.gift-card-img img { width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease; }
.gift-card:hover .gift-card-img img { transform: scale(1.05); }
.card-img-placeholder {
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.1);font-size:2.5rem;
}
.gift-card-body { padding: 14px 16px 10px; flex: 1; }
.gift-card-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(34,197,94,0.12); color: var(--gift-green);
  border: 1px solid rgba(34,197,94,0.25); border-radius: 20px;
  padding: 2px 10px; font-size: 0.72rem; font-weight: 700; margin-bottom: 8px;
}
.gift-card-name { font-size: 0.98rem; font-weight: 700; color: var(--text-primary); margin-bottom: 5px; line-height: 1.4; }
.gift-card-desc {
  font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.gift-card-cost { display: flex; align-items: baseline; gap: 5px; margin-bottom: 6px; }
.xu-num   { font-size: 1.3rem; font-weight: 900; color: var(--gift-green); }
.xu-label { font-size: 0.8rem; font-weight: 700; color: var(--gift-green); }
.xu-fee   { font-size: 0.72rem; color: var(--text-muted); }
.gift-redeemed-badge {
  display:inline-flex;align-items:center;gap:5px;
  color:var(--gift-green);font-size:0.75rem;font-weight:600;
}
.gift-card-footer {
  padding: 10px 16px 14px; display:flex; align-items:center; gap:8px;
  border-top: 1px solid var(--border-subtle);
}
.btn-redeem {
  flex:1;padding:9px 14px;border:none;border-radius:var(--radius-sm);
  background:var(--gift-green);color:#000;font-size:0.8rem;font-weight:700;
  cursor:pointer;transition:var(--transition);
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.btn-redeem:hover:not(.disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.btn-redeem.disabled { background:rgba(255,255,255,0.08);color:var(--text-muted);cursor:not-allowed; }

/* ══════════════════════════════════════════════════════════════════
   AUCTION CARDS – Pro redesign
══════════════════════════════════════════════════════════════════ */
.auction-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.auction-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); overflow: hidden;
  transition: var(--transition); position: relative;
}
.auction-card:hover:not(.auction-done) {
  border-color: rgba(245,158,11,0.35);
  box-shadow: 0 8px 32px rgba(245,158,11,0.12); transform: translateY(-2px);
}
.auction-card.auction-done { opacity: 0.72; filter: saturate(0.7); }

.auction-card-media {
  position:relative; width:100%; aspect-ratio:21/9; overflow:hidden;
  background: linear-gradient(135deg,#1a1500 0%,#0d0a00 100%);
}
.auction-card-media img {
  width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;
}
.auction-card:hover:not(.auction-done) .auction-card-media img { transform: scale(1.04); }

.auc-img-placeholder {
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  background: linear-gradient(135deg,rgba(245,158,11,0.08) 0%,rgba(0,0,0,0) 100%);
}
.auc-img-placeholder i    { font-size:2.8rem;color:rgba(245,158,11,0.3); }
.auc-img-placeholder span { font-size:0.75rem;font-weight:700;color:rgba(245,158,11,0.4);letter-spacing:0.1em;text-transform:uppercase; }

.auc-badge {
  position:absolute;top:12px;left:12px;
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;
  font-size:0.72rem;font-weight:700;backdrop-filter:blur(8px);
}
.auc-badge.live  { background:rgba(245,158,11,0.9);color:#000; }
.auc-badge.live i{ font-size:0.5em;animation:blink 1.2s step-end infinite; }
.auc-badge.won   { background:rgba(34,197,94,0.9);color:#000; }
.auc-badge.ended { background:rgba(100,100,100,0.8);color:#fff; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }

.auction-card-body { padding: 16px; }
.auc-meta { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.auc-players { font-size:0.75rem;color:var(--text-muted);display:flex;align-items:center;gap:5px; }
.auc-timer {
  font-size:0.78rem;font-weight:700;color:var(--auction-gold);
  display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;
}
.auc-timer.urgent { color:#ef4444;animation:pulse-text 1s ease-in-out infinite; }
.auc-ended-label  { font-size:0.75rem;color:var(--text-muted); }
@keyframes pulse-text { 0%,100%{opacity:1}50%{opacity:0.6} }

.auc-title { font-size:1.1rem;font-weight:800;color:var(--text-primary);margin-bottom:6px;line-height:1.35; }
.auc-desc {
  font-size:0.8rem;color:var(--text-muted);line-height:1.5;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.auc-prize-box {
  background:linear-gradient(135deg,rgba(245,158,11,0.1) 0%,rgba(245,158,11,0.04) 100%);
  border:1px solid rgba(245,158,11,0.2);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:10px;
}
.auc-prize-label { font-size:0.7rem;font-weight:700;color:rgba(245,158,11,0.7);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:3px; }
.auc-prize-value { font-size:1.05rem;font-weight:800;color:var(--auction-gold); }
.auc-my-bid {
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(245,158,11,0.1);color:var(--auction-gold);
  border:1px solid rgba(245,158,11,0.2);border-radius:20px;
  padding:3px 10px;font-size:0.75rem;font-weight:700;margin-top:4px;
}
.auc-actions {
  padding:12px 16px 14px;display:flex;align-items:center;gap:8px;
  border-top:1px solid var(--border-subtle);
}
.btn-bid {
  flex:1;padding:10px 16px;border:none;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--auction-gold) 0%,#d97706 100%);
  color:#000;font-size:0.82rem;font-weight:800;cursor:pointer;
  transition:var(--transition);
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.btn-bid:hover { filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 16px rgba(245,158,11,0.35); }

/* ══════════════════════════════════════════════════════════════════
   LOTTERY CARDS – Pro redesign
══════════════════════════════════════════════════════════════════ */
.lottery-grid { display:grid;grid-template-columns:1fr;gap:16px; }

.lottery-card {
  background:var(--bg-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);overflow:hidden;
  transition:var(--transition);position:relative;
}
.lottery-card:hover:not(.lottery-done) {
  border-color:rgba(139,92,246,0.35);
  box-shadow:0 8px 32px rgba(139,92,246,0.12);transform:translateY(-2px);
}
.lottery-card.lottery-done { opacity:0.72;filter:saturate(0.7); }

.lottery-card-media {
  position:relative;width:100%;aspect-ratio:21/9;overflow:hidden;
  background:linear-gradient(135deg,#0d0014 0%,#080010 100%);
}
.lottery-card-media img { width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease; }
.lottery-card:hover:not(.lottery-done) .lottery-card-media img { transform:scale(1.04); }

.lot-img-placeholder {
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,rgba(139,92,246,0.08) 0%,rgba(0,0,0,0) 100%);
}
.lot-img-placeholder i    { font-size:2.8rem;color:rgba(139,92,246,0.3); }
.lot-img-placeholder span { font-size:0.75rem;font-weight:700;color:rgba(139,92,246,0.4);letter-spacing:0.1em;text-transform:uppercase; }

.lot-badge {
  position:absolute;top:12px;left:12px;
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;
  font-size:0.72rem;font-weight:700;backdrop-filter:blur(8px);
}
.lot-badge.live  { background:rgba(139,92,246,0.9);color:#fff; }
.lot-badge.live i{ font-size:0.5em;animation:blink 1.2s step-end infinite; }
.lot-badge.won   { background:rgba(34,197,94,0.9);color:#000; }
.lot-badge.ended { background:rgba(100,100,100,0.8);color:#fff; }

.lottery-card-body { padding:16px; }
.lot-meta { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px; }
.lot-players { font-size:0.75rem;color:var(--text-muted);display:flex;align-items:center;gap:5px; }
.lot-timer {
  font-size:0.78rem;font-weight:700;color:var(--lottery-purple);
  display:flex;align-items:center;gap:5px;font-variant-numeric:tabular-nums;
}
.lot-timer.urgent { color:#ef4444;animation:pulse-text 1s ease-in-out infinite; }
.lot-ended-label  { font-size:0.75rem;color:var(--text-muted); }

.lot-title { font-size:1.1rem;font-weight:800;color:var(--text-primary);margin-bottom:6px;line-height:1.35; }
.lot-desc {
  font-size:0.8rem;color:var(--text-muted);line-height:1.5;margin-bottom:12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.lot-prize-box {
  background:linear-gradient(135deg,rgba(139,92,246,0.1) 0%,rgba(139,92,246,0.04) 100%);
  border:1px solid rgba(139,92,246,0.2);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:12px;
}
.lot-prize-label { font-size:0.7rem;font-weight:700;color:rgba(139,92,246,0.7);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:3px; }
.lot-prize-value { font-size:1.05rem;font-weight:800;color:var(--lottery-purple); }

.lot-pool-bar-wrap { height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden;margin-bottom:6px; }
.lot-pool-bar {
  height:100%;width:var(--pct,0%);
  background:linear-gradient(90deg,var(--lottery-purple) 0%,#a78bfa 100%);
  border-radius:3px;transition:width 0.6s ease;
}
.lot-pool-labels { display:flex;justify-content:space-between;font-size:0.72rem;color:var(--text-muted);margin-bottom:4px; }
.lot-pool-labels strong { color:var(--lottery-purple); }

.lot-actions {
  padding:12px 16px 14px;display:flex;align-items:center;gap:8px;
  border-top:1px solid var(--border-subtle);
}
.btn-enter-lottery {
  flex:1;padding:10px 16px;border:none;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,var(--lottery-purple) 0%,#7c3aed 100%);
  color:#fff;font-size:0.82rem;font-weight:800;cursor:pointer;
  transition:var(--transition);
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.btn-enter-lottery:hover { filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 4px 16px rgba(139,92,246,0.35); }

/* ── Shared icon buttons ─────────────────────────────────────────── */
.btn-icon-sm {
  width:34px;height:34px;border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);background:rgba(255,255,255,0.04);
  color:var(--text-muted);font-size:0.8rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition);flex-shrink:0;
}
.btn-icon-sm:hover         { background:rgba(255,255,255,0.1);color:var(--text-primary); }
.btn-icon-sm.danger:hover  { background:rgba(239,68,68,0.15);color:#ef4444;border-color:rgba(239,68,68,0.3); }
.btn-icon-sm.warning:hover { background:rgba(245,158,11,0.15);color:var(--auction-gold);border-color:rgba(245,158,11,0.3); }

/* ══════════════════════════════════════════════════════════════════
   MODALS
══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed;inset:0;background:rgba(0,0,0,0.75);
  backdrop-filter:blur(6px);z-index:200;
  display:flex;align-items:flex-end;justify-content:center;
  animation:fade-in 0.2s ease;
}
@keyframes fade-in { from{opacity:0}to{opacity:1} }
.modal-box {
  width:100%;max-width:480px;background:#1a1a1a;
  border:1px solid rgba(255,255,255,0.1);border-radius:24px 24px 0 0;
  padding:28px 24px 32px;position:relative;
  animation:slide-up 0.28s cubic-bezier(.32,1.12,.4,.98);
}
@keyframes slide-up { from{transform:translateY(100%)}to{transform:translateY(0)} }
.modal-close {
  position:absolute;top:14px;right:14px;width:32px;height:32px;
  border-radius:50%;border:none;background:rgba(255,255,255,0.08);
  color:var(--text-muted);font-size:0.85rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--transition);
}
.modal-close:hover { background:rgba(255,255,255,0.15);color:var(--text-primary); }
.bid-modal-icon,.lot-modal-icon {
  width:52px;height:52px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;margin-bottom:14px;
}
.bid-modal-icon { background:rgba(245,158,11,0.15);color:var(--auction-gold); }
.lot-modal-icon { background:rgba(139,92,246,0.15);color:var(--lottery-purple); }
.modal-box h3 { font-size:1.05rem;font-weight:800;color:var(--text-primary);margin-bottom:6px; }
.bid-current,.lot-current { font-size:0.82rem;color:var(--text-muted);margin-bottom:4px; }
.bid-current strong { color:var(--auction-gold); }
.lot-current strong { color:var(--lottery-purple); }
.bid-hint,.lot-hint { font-size:0.8rem;color:var(--text-muted);margin-bottom:14px; }
.bid-hint strong { color:var(--text-primary); }
.lot-hint strong  { color:var(--lottery-purple); }

.bid-input-wrap,.lot-input-wrap {
  display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,0.05);border:1.5px solid rgba(255,255,255,0.1);
  border-radius:var(--radius-sm);padding:4px 14px;margin-bottom:10px;transition:var(--transition);
}
.bid-input-wrap:focus-within { border-color:rgba(245,158,11,0.4); }
.lot-input-wrap:focus-within  { border-color:rgba(139,92,246,0.4); }
.bid-input,.lot-input {
  flex:1;background:transparent;border:none;outline:none;
  color:var(--text-primary);font-size:1.1rem;font-weight:700;padding:10px 0;
}
.bid-unit,.lot-unit { font-size:0.8rem;font-weight:700;color:var(--text-muted); }
.bid-fee-preview,.lot-fee-preview { font-size:0.78rem;color:var(--text-muted);margin-bottom:16px;min-height:18px; }
.bid-fee-preview strong,.lot-fee-preview strong { color:var(--text-primary); }

.lot-quick-btns { display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap; }
.btn-quick-xu {
  padding:6px 14px;border:1px solid rgba(139,92,246,0.3);border-radius:20px;
  background:rgba(139,92,246,0.08);color:var(--lottery-purple);
  font-size:0.78rem;font-weight:700;cursor:pointer;transition:var(--transition);
}
.btn-quick-xu:hover { background:rgba(139,92,246,0.2); }

.bid-modal-btns,.lot-modal-btns { display:flex;gap:10px;margin-top:6px; }
.btn-secondary {
  flex:1;padding:11px;border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-sm);
  background:transparent;color:var(--text-muted);font-size:0.85rem;font-weight:700;cursor:pointer;transition:var(--transition);
}
.btn-secondary:hover { background:rgba(255,255,255,0.06); }
.btn-bid-confirm,.btn-enter-confirm {
  flex:2;padding:11px;border:none;border-radius:var(--radius-sm);
  font-size:0.85rem;font-weight:800;cursor:pointer;transition:var(--transition);
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.btn-bid-confirm   { background:linear-gradient(135deg,var(--auction-gold) 0%,#d97706 100%);color:#000; }
.btn-enter-confirm { background:linear-gradient(135deg,var(--lottery-purple) 0%,#7c3aed 100%);color:#fff; }
.btn-bid-confirm:hover,.btn-enter-confirm:hover { filter:brightness(1.1);transform:translateY(-1px); }

/* ══════════════════════════════════════════════════════════════════
   FULL-PAGE FORM OVERLAY
══════════════════════════════════════════════════════════════════ */
.fp-overlay {
  position:fixed;inset:0;z-index:500;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
}
.fp-page {
  position:fixed;inset:0;background:var(--bg-dark);
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform 0.32s cubic-bezier(.32,1.12,.4,.98);
  overflow:hidden;
}
.fp-page.open { transform:translateY(0); }

.fp-header {
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;border-bottom:1px solid var(--border-subtle);
  background:rgba(255,255,255,0.02);flex-shrink:0;
}
.fp-back {
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--border-subtle);background:transparent;
  color:var(--text-muted);font-size:0.9rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:var(--transition);flex-shrink:0;
}
.fp-back:hover { background:rgba(255,255,255,0.08);color:var(--text-primary); }
.fp-header-icon {
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;flex-shrink:0;
}
.fp-title {
  font-size:1.05rem;font-weight:800;color:var(--text-primary);
  flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.fp-body {
  flex:1;overflow-y:auto;padding:20px 20px 0;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.1) transparent;
}
.fp-section { margin-bottom:28px; }
.fp-section-label {
  display:flex;align-items:center;gap:8px;
  font-size:0.72rem;font-weight:800;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:0.1em;margin-bottom:12px;
}

.fp-current-img {
  display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,0.04);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);padding:10px 14px;margin-bottom:10px;
}
.fp-current-img img { width:52px;height:52px;object-fit:cover;border-radius:8px; }
.fp-current-img span { font-size:0.78rem;color:var(--text-muted); }

.fp-img-upload-area {
  width:100%;aspect-ratio:16/9;
  border:2px dashed rgba(255,255,255,0.12);border-radius:var(--radius-card);
  cursor:pointer;overflow:hidden;transition:var(--transition);
  background:rgba(255,255,255,0.02);
}
.fp-img-upload-area:hover { border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.04); }
.fp-img-preview-wrap {
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;
}
.fp-img-upload-icon {
  display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text-muted);
}
.fp-img-upload-icon i    { font-size:2.2rem;opacity:0.5; }
.fp-img-upload-icon span { font-size:0.85rem;font-weight:600; }
.fp-img-upload-icon small{ font-size:0.72rem;opacity:0.6; }
.fp-img-preview { width:100%;height:100%;object-fit:cover; }
.fp-img-remove {
  position:absolute;top:8px;right:8px;width:28px;height:28px;
  border-radius:50%;border:none;background:rgba(0,0,0,0.7);color:#fff;
  font-size:0.75rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:var(--transition);z-index:10;
}
.fp-img-remove:hover { background:rgba(239,68,68,0.8); }

.fp-fields { display:grid;gap:14px; }
.fp-field  { display:flex;flex-direction:column;gap:6px; }
.fp-label  { font-size:0.78rem;font-weight:700;color:var(--text-muted); }
.fp-input {
  width:100%;padding:12px 14px;
  background:rgba(255,255,255,0.04);
  border:1.5px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-sm);color:var(--text-primary);
  font-size:0.92rem;font-family:inherit;transition:var(--transition);outline:none;
}
.fp-input:focus   { border-color:rgba(255,255,255,0.2);background:rgba(255,255,255,0.06); }
.fp-input.invalid { border-color:rgba(239,68,68,0.5);background:rgba(239,68,68,0.05); }
.fp-textarea      { resize:vertical;min-height:80px; }
input[type="datetime-local"].fp-input::-webkit-calendar-picker-indicator {
  filter:invert(1) opacity(0.4);cursor:pointer;
}

.fp-footer {
  padding:14px 20px;
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  border-top:1px solid var(--border-subtle);
  background:rgba(255,255,255,0.02);
  display:flex;gap:12px;flex-shrink:0;
}
.fp-cancel-btn {
  flex:1;padding:13px;border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius-sm);
  background:transparent;color:var(--text-muted);font-size:0.88rem;font-weight:700;
  cursor:pointer;transition:var(--transition);
}
.fp-cancel-btn:hover { background:rgba(255,255,255,0.06); }
.fp-submit-btn {
  flex:2;padding:13px;border:none;border-radius:var(--radius-sm);
  background:var(--fp-color,#22c55e);color:#fff;
  font-size:0.9rem;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:var(--transition);
}
.fp-submit-btn[style*="22c55e"] { color:#000; }
.fp-submit-btn:hover:not(:disabled) { filter:brightness(1.1);transform:translateY(-1px); }
.fp-submit-btn:disabled { opacity:0.6;cursor:not-allowed;transform:none; }

/* ══════════════════════════════════════════════════════════════════
   SKELETON / EMPTY / ERROR
══════════════════════════════════════════════════════════════════ */
.skeleton-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;padding:4px 0; }
.skeleton-card { background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);overflow:hidden;padding:0 0 16px; }
.sk-img {
  width:100%;aspect-ratio:16/9;
  background:linear-gradient(90deg,#1a1a1a 25%,#222 50%,#1a1a1a 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;margin-bottom:14px;
}
.sk-line {
  height:12px;border-radius:6px;margin:8px 16px;
  background:linear-gradient(90deg,#1a1a1a 25%,#222 50%,#1a1a1a 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;
}
.sk-line.w80{width:80%}.sk-line.w60{width:60%}.sk-line.w40{width:40%}
@keyframes shimmer { 0%{background-position:200% 0}100%{background-position:-200% 0} }

.empty-state {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 20px;color:var(--text-muted);gap:10px;
}
.empty-state i  { font-size:3rem;opacity:0.25; }
.empty-state h4 { font-size:0.95rem;font-weight:700;color:rgba(255,255,255,0.4); }
.empty-state p  { font-size:0.8rem; }

.err-box {
  display:flex;align-items:center;gap:10px;
  background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);
  border-radius:var(--radius-sm);padding:14px 16px;
  color:#ef4444;font-size:0.85rem;font-weight:600;margin-top:12px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (min-width:600px) {
  .auction-grid,.lottery-grid { grid-template-columns:repeat(2,1fr); }
  .modal-overlay { align-items:center; }
  .modal-box     { border-radius:20px; }
  .fp-body,.fp-footer { max-width:640px;margin:0 auto; }
}