/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 搴曢儴鏍?鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */
.bottom-bar {
  position:fixed; bottom:clamp(16px,3vh,32px); left:50%;
  transform:translateX(-50%);
  display:flex; gap:clamp(24px,8vw,80px);
  align-items:flex-start; z-index:55;
}
.bar-btn { display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; border:none; background:none; padding:0; }
.bar-btn-circle {
  width:clamp(44px,9vw,58px); height:clamp(44px,9vw,58px);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:clamp(1.2rem,3vw,1.7rem); transition:all 0.3s; position:relative;
}
.bar-btn-text {
  font-size:clamp(0.7rem,2vw,0.85rem); color:var(--text-secondary);
  font-weight:bold; white-space:nowrap; text-shadow:0 2px 8px rgba(0,0,0,0.8);
}
.btn-settings .bar-btn-circle {
  background:linear-gradient(135deg,var(--gold),#ffaa00); border:3px solid #fff;
  box-shadow:var(--shadow-gold), inset 0 -2px 6px rgba(0,0,0,0.15);
  animation:btnPulse 2.5s ease-in-out infinite;
}
@keyframes btnPulse {
  0%,100%{box-shadow:0 0 16px rgba(255,215,0,0.4);transform:scale(1)}
  50%{box-shadow:0 0 30px rgba(255,215,0,0.8);transform:scale(1.05)}
}
.btn-settings:hover .bar-btn-circle { transform:scale(1.1) rotate(25deg); box-shadow:0 0 36px rgba(255,215,0,0.9); }
.btn-settings.active .bar-btn-circle { animation:none; transform:scale(1); box-shadow:0 0 24px rgba(255,215,0,0.6); }
.btn-history .bar-btn-circle { background:linear-gradient(135deg,#3a3a6a,#4a4a8a); border:3px solid rgba(255,215,0,0.6); box-shadow:0 0 12px rgba(0,0,0,0.3); }
.btn-history:hover .bar-btn-circle { border-color:var(--gold); box-shadow:0 0 20px rgba(255,215,0,0.4); transform:scale(1.1); }
.count-badge {
  position:absolute; top:-6px; right:-6px;
  width:20px; height:20px; background:var(--danger);
  border-radius:50%; font-size:0.65rem;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg-dark); font-weight:bold;
}

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 璁剧疆闈㈡澘 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */
.settings-panel {
  position:fixed; top:0; right:0;
  width:min(480px,92vw); height:100vh; height:100dvh;
  background:linear-gradient(180deg,var(--bg-panel),#16163a);
  border-left:2px solid rgba(255,215,0,0.2);
  transform:translateX(100%); transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);
  z-index:100; overflow-y:auto; box-shadow:-10px 0 40px rgba(0,0,0,0.5);
}
.settings-panel.open { transform:translateX(0); }
.settings-tabs {
  display:flex; border-bottom:1px solid rgba(255,255,255,0.1);
  position:sticky; top:0; z-index:10;
  background:linear-gradient(180deg,var(--bg-panel),#1e1e3eee);
}
.tab-btn { flex:1; padding:14px; border:none; background:transparent; color:rgba(255,255,255,0.5); font-size:0.9rem; cursor:pointer; transition:all 0.2s; position:relative; }
.tab-btn.active { color:var(--gold); }
.tab-btn.active::after { content:''; position:absolute; bottom:0; left:20%; right:20%; height:3px; background:linear-gradient(90deg,var(--gold),var(--gold-dark)); border-radius:3px; }
.tab-btn:hover { color:rgba(255,255,255,0.8); }
.settings-close {
  position:absolute; top:8px; right:12px; width:32px; height:32px;
  border-radius:50%; background:rgba(255,255,255,0.08); border:none;
  color:#fff; font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; z-index:11;
}
.settings-close:hover { background:rgba(255,100,100,0.3); }
.settings-body { padding:14px; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 浜у搧鍒楄〃 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */
.products-list { max-height:45vh; overflow-y:auto; padding-right:3px; }
.products-list::-webkit-scrollbar { width:4px; }
.product-item {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:rgba(78,205,196,0.06); border-radius:10px;
  margin-bottom:6px; border:1px solid transparent; transition:all 0.2s;
}
.product-item:hover { background:rgba(78,205,196,0.1); border-color:rgba(78,205,196,0.2); }
.product-emoji { width:28px; height:28px; border-radius:6px; background:rgba(78,205,196,0.15); display:flex; align-items:center; justify-content:center; font-size:0.9rem; flex-shrink:0; }
.product-name { flex:1; font-size:0.88rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-used-tag { font-size:0.65rem; padding:2px 6px; border-radius:4px; background:rgba(255,215,0,0.15); color:rgba(255,215,0,0.7); white-space:nowrap; }

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 鍒嗙被鍖哄煙 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */
.category-zones { display:flex; flex-direction:column; gap:10px; max-height:55vh; overflow-y:auto; padding-right:3px; }
.category-zones::-webkit-scrollbar { width:4px; }
.category-zones::-webkit-scrollbar-thumb { background:rgba(255,215,0,0.2); border-radius:2px; }
.category-zone { border-radius:12px; border:2px dashed rgba(255,255,255,0.12); background:rgba(255,255,255,0.02); transition:all 0.2s; }
.category-zone.drag-over { border-color:var(--gold); background:rgba(255,215,0,0.08); }
.category-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,0.06); }
.category-title { font-size:0.85rem; font-weight:bold; display:flex; align-items:center; gap:6px; }
.category-title .cat-icon { width:20px; height:20px; border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:bold; }
.category-header .cat-weight { font-size:0.7rem; color:var(--text-muted); }
.category-header .cat-count { font-size:0.7rem; color:rgba(255,215,0,0.6); background:rgba(255,215,0,0.1); padding:2px 8px; border-radius:10px; }
.category-items { min-height:36px; padding:6px; display:flex; flex-wrap:wrap; gap:6px; }
.category-items .product-tag {
  display:flex; align-items:center; gap:4px; padding:5px 8px;
  background:rgba(255,255,255,0.05); border-radius:6px;
  cursor:grab; font-size:0.78rem; transition:all 0.15s;
  border:1px solid transparent; user-select:none;
}
.category-items .product-tag:active { cursor:grabbing; }
.category-items .product-tag:hover { background:rgba(255,255,255,0.1); border-color:rgba(255,215,0,0.2); }
.category-items .product-tag .tag-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100px; }
.category-items .product-tag .tag-used { font-size:0.6rem; color:rgba(255,215,0,0.5); }
.category-items .product-tag .tag-del {
  width:16px; height:16px; border-radius:4px;
  background:rgba(255,68,68,0.15); color:var(--danger-light);
  border:none; cursor:pointer; font-size:0.6rem;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s; flex-shrink:0;
}
.category-items .product-tag .tag-del:hover { background:rgba(255,68,68,0.4); }
.category-empty { width:100%; text-align:center; padding:12px; font-size:0.72rem; color:rgba(255,255,255,0.25); }

/* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 娣诲姞鍖哄煙 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */
.add-category-zone { display:flex; gap:6px; padding:10px 12px; border-radius:12px; border:2px dashed rgba(255,215,0,0.2); background:rgba(255,215,0,0.03); margin-top:8px; }
.add-category-zone select { flex:1; min-width:0; padding:8px; border:1px solid rgba(255,255,255,0.15); border-radius:6px; background:rgba(255,255,255,0.08); color:#fff; font-size:0.82rem; }
.add-category-zone select option { background:var(--bg-panel); color:#fff; }
.add-category-zone input { flex:1.5; min-width:0; padding:8px; border:1px solid rgba(255,255,255,0.15); border-radius:6px; background:rgba(255,255,255,0.08); color:#fff; font-size:0.82rem; }
.add-category-zone input::placeholder { color:rgba(255,255,255,0.35); }
.btn-add-with-cat { padding:8px 12px; border:none; border-radius:6px; background:linear-gradient(135deg,var(--success),#44a08d); color:#fff; font-size:0.78rem; font-weight:bold; cursor:pointer; white-space:nowrap; }

/* 奖品价格标签 */
.product-tag .tag-price{font-size:0.62rem;color:var(--gold);background:rgba(255,215,0,0.12);border-radius:8px;padding:1px 5px;margin-left:4px;flex:none;}
.product-tag{display:flex;align-items:center;gap:3px;}


/* 挑选面板 减号按钮 */
.pick-minus{display:inline-block;width:14px;height:14px;line-height:12px;text-align:center;border-radius:3px;background:rgba(255,68,68,0.25);color:var(--danger-light);font-size:0.72rem;cursor:pointer;margin-left:2px;user-select:none;}
.pick-minus:hover{background:rgba(255,68,68,0.45);}