/* Global UI polish */
:root{
  --card-bg:#121216;
  --card-br:#24242a;
  --card-tx:#e7e7ea;
  --muted:#9b9ba3;
  --accent:#7c5cff;
  --accent-2:#13d0b4;
  --danger:#ff5c7c;
}
.card{ background:var(--card-bg); border:1px solid var(--card-br); border-radius:1rem; padding:1rem; box-shadow:0 6px 20px rgba(0,0,0,0.25); }
.card h2, .card h3{ margin:0 0 .5rem 0; color:var(--card-tx); }
.grid{ display:grid; gap:0.75rem; }
.grid.two{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.three{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.btn{ padding:.65rem .9rem; border-radius:.75rem; border:1px solid var(--card-br); background:#1a1a20; color:#fff; cursor:pointer; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn.primary{ background:var(--accent); border-color:transparent; }
.btn.ghost{ background:transparent; }
.input{ background:#1a1a20; border:1px solid var(--card-br); color:#fff; padding:.65rem .75rem; border-radius:.75rem; }
.badge{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; font-size:.8rem; border-radius:.5rem; background:#1b1b22; border:1px solid #2b2b33; color:#d8d8dd; }

/* Skeletons */
.skeleton{ position:relative; overflow:hidden; background:#1a1a1f; border-radius:.5rem; }
.skeleton::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,0),rgba(255,255,255,.06),rgba(255,255,255,0)); transform:translateX(-100%); animation:sheen 1.1s infinite; }
@keyframes sheen{ to{ transform:translateX(100%);} }

/* Side drawer for gifts */
.drawer{ position:fixed; top:0; right:-420px; width:360px; max-width:90vw; height:100%; background:#0b0b0f; border-left:1px solid #24242a; box-shadow:-10px 0 30px rgba(0,0,0,.4); transition:right .3s ease; z-index:9999; display:flex; flex-direction:column; }
.drawer.open{ right:0; }
.drawer-header{ padding:1rem; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #24242a; }
.drawer-body{ padding:1rem; overflow:auto; }
.drawer-footer{ padding:1rem; border-top:1px solid #24242a; display:flex; gap:.5rem; align-items:center; }
.gift-card{ background:#131319; border:1px solid #26262e; border-radius:.9rem; padding:.65rem; cursor:pointer; transition:transform .1s ease, border-color .2s ease; display:flex; gap:.6rem; align-items:center; }
.gift-card:hover{ transform:translateY(-2px); border-color:var(--accent); }
.gift-card img{ width:42px; height:42px; object-fit:contain; }
.gift-card .meta{ display:flex; flex-direction:column; }
.gift-card .name{ font-weight:600; }
.gift-card .value{ font-size:.85rem; color:var(--muted); }

/* Toasts */
.toast-wrap{ position:fixed; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:.5rem; z-index:10000; }
.toast{ background:#111117; color:#e8e8ec; border:1px solid #24242a; padding:.65rem .85rem; border-radius:.7rem; }

/* Overlay effects */
.overlay-item{ position:absolute; left:50%; transform:translateX(-50%); color:#fff; font-weight:700; text-shadow:0 2px 8px rgba(0,0,0,.8); animation:floatUp 3s ease forwards; pointer-events:none;}
@keyframes floatUp{ 0%{ opacity:0; transform:translate(-50%,10px) scale(.96);} 10%{opacity:1;} 80%{opacity:1;} 100%{opacity:0; transform:translate(-50%,-120px) scale(1.05);} }
.sparkle{ animation: sparkle 1s ease-in-out infinite; }
@keyframes sparkle{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(255,255,255,0.6)); } 50%{ filter:drop-shadow(0 0 10px rgba(255,255,255,1)); } }

/* Top badge */
.top-badge{ position:absolute; top:.5rem; right:.5rem; background:rgba(0,0,0,.45); padding:.35rem .55rem; border-radius:.6rem; border:1px solid rgba(255,255,255,.2); font-size:.9rem; color:#fff; }

/* Quick tip buttons */
.quick-tips{ display:flex; gap:.5rem; flex-wrap:wrap; }
.quick-tips .btn{ background:#16161c; }

/* Responsive */
@media (max-width:600px){
  .grid.three{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Phase 4: minimal modal helpers */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:9999}
.modal{background:#0b0b10;border:1px solid #24242a;border-radius:1rem;padding:1rem;max-width:360px;width:92%}