/* ===== NG Gift Loot v2 — mobile-first ===== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:'Segoe UI',-apple-system,Arial,sans-serif; background:#f5f7fa; color:#222; }
.wrap { max-width:1100px; margin:0 auto; padding:0 12px; }
a { text-decoration:none; color:#1a73e8; }
img { max-width:100%; }

/* ---------- 顶部 ---------- */
.topbar { background:#fff; box-shadow:0 1px 6px rgba(0,0,0,.08); position:sticky; top:0; z-index:90; }
.topbar-in { display:flex; align-items:center; gap:12px; height:52px; }
.logo { font-weight:800; font-size:18px; color:#222; background:linear-gradient(135deg,#1a73e8,#e8a020); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nav { display:flex; gap:12px; flex:1; }
.nav a { color:#444; font-size:14px; font-weight:500; }
.nav a:hover { color:#1a73e8; }
.userbox { display:flex; gap:6px; align-items:center; }
.btn { display:inline-block; padding:8px 14px; border-radius:8px; font-size:14px; background:#f0f2f5; color:#333; border:none; cursor:pointer; font-weight:600; }
.btn:hover { background:#e4e7eb; }
.btn-primary { background:linear-gradient(135deg,#1a73e8,#0d5bbd); color:#fff; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-gold { background:linear-gradient(135deg,#f5b732,#e8a020); color:#fff; }
.btn-gold:hover { filter:brightness(1.05); }
.btn-outline { background:#fff; border:1px solid #d0d5dd; }
.btn-points { background:#fff8e1; color:#b8860b; border:1px solid #f0e0a8; }
.btn-sm { padding:5px 10px; font-size:13px; border-radius:6px; }
.btn-danger-sm { background:#dc3545; color:#fff; padding:4px 9px; border-radius:6px; font-size:12px; }

.flash { max-width:1100px; margin:10px auto 0; padding:10px 14px; border-radius:8px; font-size:14px; }
.flash-success { background:#d4edda; color:#155724; border:1px solid #c3e6cb; }
.flash-error { background:#f8d7da; color:#721c24; border:1px solid #f5c6cb; }

/* ---------- 获奖者滚动条（跑马灯） ---------- */
.win-ticker { background:linear-gradient(90deg,#1a73e8,#6f42c1); color:#fff; border-radius:10px; overflow:hidden; margin:10px 0 0; padding:8px 0; white-space:nowrap; }
.win-ticker-track { display:inline-block; animation:win-scroll 30s linear infinite; }
.win-ticker:hover .win-ticker-track { animation-play-state:paused; }
.win-ticker-item { font-size:13px; margin-right:36px; }
.win-ticker-item b { color:#ffd700; }
@keyframes win-scroll { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

/* ---------- 轮播 ---------- */
.hero { margin:12px 0; border-radius:14px; overflow:hidden; background:linear-gradient(135deg,#1a73e8,#6f42c1); color:#fff; padding:24px 20px; position:relative; }
.hero h1 { font-size:24px; margin-bottom:6px; font-weight:800; }
.hero p { opacity:.92; font-size:14px; }

/* ---------- 分类导航 ---------- */
.catnav { display:flex; gap:8px; overflow-x:auto; padding:12px 2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.catnav::-webkit-scrollbar { display:none; }
.catnav a { flex-shrink:0; padding:8px 16px; border-radius:20px; background:#fff; color:#555; font-size:13px; font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.catnav a.active, .catnav a:hover { background:linear-gradient(135deg,#1a73e8,#0d5bbd); color:#fff; }

/* ---------- 商品网格（手机 2 列） ---------- */
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:10px 0 70px; }
.gcard { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.07); display:flex; flex-direction:column; transition:transform .15s; }
.gcard:active { transform:scale(.97); }
.gcard-img { height:110px; display:flex; align-items:center; justify-content:center; font-size:44px; background:linear-gradient(135deg,#eef4ff,#fff); overflow:hidden; }
.gcard-body { padding:10px 12px 12px; flex:1; display:flex; flex-direction:column; gap:6px; }
.gcard-body h3 { font-size:14px; font-weight:700; line-height:1.35; }
.gcard .progress { background:#e9ecef; height:7px; border-radius:4px; overflow:hidden; }
.gcard .progress i { display:block; height:100%; background:linear-gradient(90deg,#28a745,#8bc34a); border-radius:4px; }
.gcard .meta { font-size:11.5px; color:#777; display:flex; justify-content:space-between; }
.gcard .act { display:flex; justify-content:space-between; align-items:center; margin-top:2px; }
.gcard .price { color:#e8a020; font-weight:800; font-size:15px; }
.gcard .btn { padding:7px 14px; font-size:13px; }

/* ---------- 揭晓区 ---------- */
.win-strip { display:flex; gap:8px; overflow-x:auto; padding:4px 0 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.win-strip::-webkit-scrollbar { display:none; }
.win-chip { flex-shrink:0; background:#fff; border-radius:10px; padding:8px 12px; box-shadow:0 1px 4px rgba(0,0,0,.06); font-size:12px; min-width:130px; }
.win-chip b { color:#e8a020; }

/* ---------- 底部导航 ---------- */
.bottomnav { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid #eee; display:flex; z-index:100; padding-bottom:env(safe-area-inset-bottom); }
.bottomnav a { flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 0 6px; font-size:11px; color:#888; font-weight:600; }
.bottomnav a.active { color:#1a73e8; }
.bottomnav a i { font-size:20px; font-style:normal; }

/* ---------- 商品详情 ---------- */
.gdetail { margin:12px 0 70px; }
.gdetail-img { background:#fff; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:100px; height:280px; box-shadow:0 2px 8px rgba(0,0,0,.07); overflow:hidden; }
.gdetail-info { background:#fff; border-radius:14px; padding:16px; box-shadow:0 2px 8px rgba(0,0,0,.07); margin-top:12px; }
.gdetail-info h1 { font-size:18px; margin-bottom:8px; font-weight:800; }
.gdetail .bar { background:#e9ecef; height:14px; border-radius:7px; overflow:hidden; margin:12px 0; }
.gdetail .bar i { display:block; height:100%; background:linear-gradient(90deg,#28a745,#8bc34a); }
.gdetail .nums { display:grid; grid-template-columns:1fr 1fr; gap:8px; font-size:13px; color:#555; margin-bottom:14px; }
.gdetail .nums span { background:#f8f9fa; padding:8px 10px; border-radius:8px; }
.buybox { display:flex; gap:8px; align-items:center; margin-top:8px; }
.buybox input { width:80px; padding:11px; border:1px solid #d0d5dd; border-radius:10px; font-size:16px; text-align:center; }
.buybox .btn { flex:1; padding:12px; font-size:15px; border-radius:10px; }
.quick { margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; }
.quick button { padding:7px 14px; border-radius:8px; border:1px solid #d0d5dd; background:#fff; cursor:pointer; font-size:13px; font-weight:600; }

/* ---------- 面板/表格 ---------- */
.panel { background:#fff; border-radius:14px; padding:14px 16px; box-shadow:0 2px 8px rgba(0,0,0,.06); margin:12px 0; }
.panel h2 { font-size:16px; margin-bottom:10px; font-weight:800; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { padding:9px 8px; text-align:left; border-bottom:1px solid #f0f0f0; }
th { color:#888; font-weight:600; background:#fafbfc; font-size:12px; }
.tag { display:inline-block; padding:3px 8px; border-radius:6px; font-size:11.5px; font-weight:600; }
.tag-green { background:#d4edda; color:#155724; }
.tag-yellow { background:#fff3cd; color:#856404; }
.tag-red { background:#f8d7da; color:#721c24; }
.tag-blue { background:#d1ecf1; color:#0c5460; }
.tag-gray { background:#e9ecef; color:#495057; }

/* ---------- 表单 ---------- */
.formbox { max-width:420px; margin:30px auto; background:#fff; padding:26px 22px; border-radius:14px; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.formbox h1 { font-size:20px; margin-bottom:16px; font-weight:800; }
.formbox label { display:block; font-size:14px; color:#555; margin:10px 0 4px; }
.formbox input[type=email], .formbox input[type=password], .formbox input[type=text], .formbox input[type=number], .formbox select, .formbox textarea {
  width:100%; padding:12px; border:1px solid #d0d5dd; border-radius:10px; font-size:15px; }
.formbox .btn { width:100%; margin-top:16px; font-size:15px; padding:13px; border-radius:10px; }
.hint { font-size:13px; color:#777; margin-top:10px; text-align:center; }

/* ---------- 杂项 ---------- */
.footer { text-align:center; color:#999; font-size:12px; padding:24px 0 80px; }
.empty { text-align:center; color:#999; padding:26px 0; }
.code-box { background:#f8f9fa; border:1px dashed #ccc; padding:10px; border-radius:8px; font-family:monospace; font-size:14px; word-break:break-all; }
.mt10 { margin-top:10px; }
.two-col { display:grid; grid-template-columns:1fr; gap:12px; }
.avatar-sm { width:26px; height:26px; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; background:#e8e8e8; font-size:14px; vertical-align:middle; }
.avatar-sm img { width:100%; height:100%; object-fit:cover; }

/* ---------- 手机默认隐藏桌面导航 ---------- */
.nav { display:none; }
.userbox .btn { padding:6px 10px; font-size:13px; }
.userbox .btn-outline { display:none; }

/* ---------- PC 增强 ---------- */
@media (min-width:721px) {
  .nav { display:flex; }
  .userbox .btn { padding:8px 14px; font-size:14px; }
  .userbox .btn-outline { display:inline-block; }
  .grid { grid-template-columns:repeat(3,1fr); gap:16px; margin:18px 0 60px; }
  .gcard-img { height:150px; }
  .gcard-body h3 { font-size:15px; }
  .gdetail { display:grid; grid-template-columns:340px 1fr; gap:16px; }
  .gdetail-img { height:340px; }
  .gdetail .nums { grid-template-columns:repeat(4,1fr); }
  .two-col { grid-template-columns:1fr 1fr; }
  .bottomnav { display:none; }
  .footer { padding-bottom:30px; }
  .hero h1 { font-size:30px; }
}