:root{
  --bg1:#0b1220; --bg2:#0d1b2a; --card:#0f172acc; --border:#22314e;
  --text:#eaf2ff; --muted:#9bb0d1; --primary:#3b82f6; --success:#22c55e;
  --danger:#ef4444; --glow: 0 10px 30px rgba(59,130,246,.35);
}
body.gift-skin{
  min-height:100vh; color:var(--text);
  background:
    radial-gradient(1200px 800px at 80% -10%, #1d2b4a55 0%, #0b1220 60%),
    linear-gradient(140deg, var(--bg1), var(--bg2));
  background-attachment:fixed;
}
body.gift-skin:before{
  content:""; position:fixed; inset:0; z-index:-1;
  background:url("../images/gift_bg.jpg") center/cover no-repeat;
  opacity:.20;
}
.container-narrow{ max-width:900px; margin:40px auto; padding:0 16px; }
.gift-wrap{ background:linear-gradient(180deg,#ffffff10,#00000012); border:1px solid var(--border);
  border-radius:18px; padding:26px; box-shadow:0 20px 40px rgba(0,0,0,.35); }
.gift-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;
  border-bottom:1px solid var(--border); padding-bottom:12px; }
.badge-online{ background:#14b8a6; color:#03201a; font-weight:700; padding:3px 10px; border-radius:999px; }
.ip-pill{ background:#0b1325; color:#93c5fd; border:1px solid #1e2a46; padding:6px 10px; border-radius:999px; }
.btn-gift{ border:none; border-radius:14px; padding:12px 18px; font-weight:700; color:white; }
.btn-primary-gift{ background:linear-gradient(180deg,#60a5fa,#3b82f6); box-shadow:var(--glow); }
.btn-success-gift{ background:linear-gradient(180deg,#34d399,#22c55e); }
.btn-danger-gift{ background:linear-gradient(180deg,#fb7185,#ef4444); }
.btn-ghost{ background:#ffffff10; border:1px solid #ffffff22; color:#cfe1ff; }
.input-gift{ width:100%; background:#0b1220; color:var(--text); border:2px solid #1e2a46; border-radius:14px; padding:14px 16px; }
.input-gift:focus{ border-color:#3b82f6; box-shadow:0 0 0 3px #3b82f633; outline:none; }
.toast-gift{ border-radius:14px; border:1px solid #ffffff22; padding:14px 16px; font-weight:700; }
.toast-success{ background:#16a34a22; border-color:#16a34a55; color:#86efac; }
.toast-error{ background:#ef444422; border-color:#ef444466; color:#fecaca; }
.table-gift{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.table-gift thead th{ background:#0b1325; color:#bfd6ff; border-bottom:1px solid var(--border); padding:10px 12px; }
.table-gift tbody td{ padding:10px 12px; border-bottom:1px solid #1b2744; }
.table-gift tbody tr:hover{ background:#0e1832; }
.code-chip{ display:inline-block; font-family:ui-monospace,Consolas,Menlo,monospace;
  background:#172554; color:#a5b4fc; border:1px solid #334155; border-radius:10px; padding:4px 8px; font-weight:800; letter-spacing:.3px; }
.item-thumb{ position:relative; cursor:pointer; }
.item-thumb:hover:after{
  content: attr(data-title);
  position:absolute; left:0; bottom:120%;
  background:#0b1220; border:1px solid #24324f; color:#eaf2ff;
  padding:6px 8px; border-radius:8px; font-size:.85rem; white-space:nowrap;
}
.item-thumb:hover:before{
  content:""; position:absolute; left:8px; bottom:110%;
  width:34px; height:34px; border-radius:6px; border:1px solid #24324f;
  background-size:cover; background-position:center;
  background-image: var(--thumb-url, none);
}