/* ============================================================
   BUSINESS.CSS — 业务卡片、升级、经理、研究、任务、成就
   ============================================================ */

/* ===== 业务卡片 ===== */
.businesses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.bcard { background: linear-gradient(135deg, #2a1c65, #36267a); border: 1px solid rgba(124,58,237,.28); border-radius: 14px; padding: 12px; transition: transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.bcard::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(124,58,237,.04), transparent); pointer-events: none; }
.bcard:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,.22); }
.bcard.speed-boost { border-color: rgba(251,191,36,.5); }
.bcard.locked { opacity: .55; }
/* ② 整框可点击时的视觉反馈 */
.bcard.clickable-bcard { cursor: pointer; }
.bcard.clickable-bcard:hover { box-shadow: 0 0 0 2px rgba(34,197,94,.4), 0 6px 20px rgba(124,58,237,.22); }
.bcard-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
.bcard-icon { width: 60px; height: 60px; min-width: 60px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; border: 1px solid rgba(255,255,255,.1); position: relative; }
.bcard-count-badge { position: absolute; bottom: -4px; right: -4px; background: #10b981; color: white; font-size: .6rem; font-weight: 700; padding: 1px 4px; border-radius: 7px; min-width: 20px; text-align: center; }
.bcard-info { flex: 1; min-width: 0; }
.bcard-name { font-weight: 700; font-size: .95rem; margin-bottom: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcard-sub { color: var(--text-gray); font-size: .72rem; margin-bottom: 4px; }
.bcard-income-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.income-tag { background: linear-gradient(to right, #22c55e, #16a34a); color: white; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 16px; white-space: nowrap; }
.speed-tag { background: linear-gradient(to right, #f59e0b, #d97706); color: white; font-size: .7rem; font-weight: 700; padding: 2px 7px; border-radius: 14px; white-space: nowrap; }
.time-tag { color: var(--text-gray); font-size: .72rem; }
.bcard-right { text-align: right; flex-shrink: 0; }
.bcard-per-sec { color: #86efac; font-size: .75rem; font-weight: 700; }
.bcard-manager-tag { font-size: .7rem; color: #c084fc; margin-top: 3px; }
/* ② 点击运营提示 */
.bcard-click-hint { font-size: .65rem; color: rgba(134,239,172,.7); margin-top: 3px; }
.progress-wrap { margin: 7px 0; }
.progress-bg { height: 11px; background: rgba(0,0,0,.35); border-radius: 6px; overflow: hidden; position: relative; }
.progress-fill { height: 100%; border-radius: 6px; background: linear-gradient(to right, #22c55e, #86efac); transition: width .08s linear; position: relative; overflow: hidden; }
.progress-fill::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); animation: shimmer 1.8s infinite; }
@keyframes shimmer { to { left: 100%; } }
.progress-fill.idle { background: linear-gradient(to right, #475569, #64748b); }
/* 超速模式（<100ms）：全绿固定宽度 + 加速带流光，不再高频跳动 */
.progress-fill.turbo { width: 100% !important; transition: none; background: linear-gradient(to right, #16a34a, #22c55e, #4ade80); }
.progress-fill.turbo::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.45) 40%, rgba(255,255,255,.7) 50%, rgba(255,255,255,.45) 60%, transparent); animation: turbo-streak 0.7s linear infinite; }
@keyframes turbo-streak { 0% { left: -100%; } 100% { left: 100%; } }
.milestone-row { display: flex; gap: 4px; flex-wrap: wrap; margin: 5px 0; }
.ms-badge { background: rgba(255,215,0,.1); border: 1px solid rgba(255,215,0,.25); border-radius: 5px; padding: 1px 6px; font-size: .65rem; color: var(--gold); }
.ms-badge.done { background: rgba(255,215,0,.28); border-color: rgba(255,215,0,.6); }
.ms-badge.done::after { content: ' ⚡'; }
/* ② 新的底部按钮区域 */
.bcard-bottom-btns { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.buy-btn { flex: 1; padding: 7px 10px; background: linear-gradient(135deg, #f59e0b, #d97706); border: none; border-radius: 8px; color: white; font-size: .8rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; transition: all .2s; overflow: hidden; white-space: nowrap; }
.buy-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(245,158,11,.4); }
.buy-btn:disabled { background: rgba(80,80,80,.4); cursor: not-allowed; box-shadow: none; transform: none; }

/* ===== 升级网格 ===== */
.upgrades-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.upg-card { background: rgba(124,58,237,.1); border: 1px solid rgba(124,58,237,.22); border-radius: 11px; padding: 12px; cursor: pointer; transition: all .2s; }
.upg-card:hover:not(.bought) { background: rgba(124,58,237,.25); }
.upg-card.bought { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.08); cursor: default; }
.upg-card.cant-afford { opacity: .7; }
.upg-icon { font-size: 1.8rem; margin-bottom: 6px; }
.upg-name { font-weight: 700; font-size: .85rem; margin-bottom: 2px; }
.upg-desc { color: var(--text-gray); font-size: .72rem; margin-bottom: 6px; }
.upg-cost { color: var(--gold); font-size: .8rem; font-weight: 700; }
.upg-section-title { grid-column: 1 / -1; font-size: .9rem; font-weight: 700; color: #c084fc; padding: 8px 4px 2px; border-bottom: 1px solid rgba(124,58,237,.25); margin-top: 6px; }

/* ===== ④ 经理页面（含金币不足状态）===== */
.mgr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mgr-card { background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(29,78,216,.12)); border: 1px solid rgba(59,130,246,.3); border-radius: 13px; padding: 14px; transition: all .2s; }
.mgr-card.hired { border-color: rgba(124,58,237,.5); background: linear-gradient(135deg, rgba(124,58,237,.15), rgba(91,33,182,.12)); }
.mgr-card.cant-afford { opacity: .7; border-color: rgba(148,163,184,.2); }
.mgr-card:hover:not(.hired) { background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(29,78,216,.18)); }
.mgr-avatar { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 2rem; background: rgba(0,0,0,.25); }
.mgr-name { font-weight: 700; font-size: .9rem; text-align: center; margin-bottom: 3px; }
.mgr-biz { color: var(--text-gray); font-size: .75rem; text-align: center; margin-bottom: 10px; }
.mgr-effect { color: #93c5fd; font-size: .75rem; margin-bottom: 10px; text-align: center; line-height: 1.5; }
.mgr-price { color: var(--gold); font-size: .9rem; font-weight: 700; text-align: center; margin-bottom: 10px; }
.mgr-price.cant-afford-text { color: #f87171; }
.mgr-locked-hint { display: block; font-size: .68rem; color: #f87171; margin-top: 2px; }
.mgr-hire-btn { width: 100%; padding: 8px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); border: none; border-radius: 9px; color: white; font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s; }
.mgr-hire-btn.owned { background: linear-gradient(135deg, #7c3aed, #5b21b6); }
.mgr-hire-btn.cant-afford-btn { background: rgba(80,80,80,.4); cursor: not-allowed; }
.mgr-hire-btn:hover:not(.owned):not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(59,130,246,.4); }

/* ===== 研究页面 ===== */
.research-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.res-card { background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.25); border-radius: 11px; padding: 13px; transition: all .2s; }
.res-card:hover:not(.res-done) { background: rgba(59,130,246,.2); }
.res-card.res-done { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.08); }
.res-card.res-locked { opacity: .5; cursor: not-allowed; }
.res-title { font-weight: 700; font-size: .88rem; margin-bottom: 3px; }
.res-desc { color: var(--text-gray); font-size: .72rem; margin-bottom: 7px; }
.res-cost { color: #93c5fd; font-size: .78rem; font-weight: 700; margin-bottom: 5px; }
.res-prereq { color: #f87171; font-size: .7rem; }
.res-btn { width: 100%; padding: 7px; background: linear-gradient(135deg, #3b82f6, #1d4ed8); border: none; border-radius: 8px; color: white; font-size: .8rem; font-weight: 700; cursor: pointer; transition: all .2s; }
.res-btn:disabled { background: rgba(80,80,80,.4); cursor: not-allowed; }
.res-btn:hover:not(:disabled) { transform: translateY(-1px); }

/* ===== 任务 ===== */
.quest-list { display: flex; flex-direction: column; gap: 10px; }
.quest-card { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); border-radius: 11px; padding: 13px; display: flex; align-items: center; gap: 12px; }
.quest-card.done { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.08); }
.quest-icon { font-size: 2rem; flex-shrink: 0; }
.quest-info { flex: 1; min-width: 0; }
.quest-name { font-weight: 700; font-size: .88rem; margin-bottom: 2px; }
.quest-desc { color: var(--text-gray); font-size: .73rem; margin-bottom: 5px; }
.quest-progress-bar { height: 8px; background: rgba(0,0,0,.3); border-radius: 4px; overflow: hidden; }
.quest-fill { height: 100%; background: linear-gradient(to right, #f59e0b, #d97706); border-radius: 4px; transition: width .4s; }
.quest-reward { color: var(--gold); font-size: .75rem; font-weight: 700; flex-shrink: 0; text-align: right; min-width: 70px; }
.claim-btn { padding: 5px 11px; background: linear-gradient(135deg, #10b981, #059669); border: none; border-radius: 7px; color: white; font-size: .78rem; font-weight: 700; cursor: pointer; white-space: nowrap; display: block; margin-top: 4px; }
.claim-btn:disabled { background: rgba(80,80,80,.4); cursor: not-allowed; }
.quest-bonus-bar { background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.25); border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.quest-bonus-text { color: #c084fc; font-size: .82rem; }
.quest-bonus-progress { color: var(--text-gray); font-size: .78rem; }

/* ===== ⑧ 成就：多级别（青铜/白银/黄金）===== */
.ach-group-title { font-size: .9rem; font-weight: 700; color: #c084fc; padding: 10px 4px 4px; border-bottom: 1px solid rgba(124,58,237,.25); margin-bottom: 8px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ach-card { position: relative; background: rgba(124,58,237,.08); border: 1px solid rgba(124,58,237,.2); border-radius: 11px; padding: 13px; text-align: center; transition: all .2s; overflow: hidden; }
.ach-card.unlocked { box-shadow: 0 2px 12px rgba(251,191,36,.15); }
.ach-tier-badge { display: inline-block; font-size: .6rem; font-weight: 800; padding: 1px 8px; border-radius: 10px; margin-bottom: 6px; letter-spacing: .5px; }
.ach-icon { font-size: 2.2rem; margin-bottom: 6px; }
.ach-name { font-weight: 700; font-size: .82rem; margin-bottom: 3px; }
.ach-desc { color: var(--text-gray); font-size: .7rem; margin-bottom: 4px; }
.ach-reward-tag { font-size: .7rem; color: #fbbf24; margin-bottom: 2px; }
.ach-reward { color: var(--gold); font-size: .7rem; margin-top: 4px; font-weight: 600; }

/* ===== ① 排行榜四榜标签 ===== */
.lb-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.lb-tab { padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); color: var(--text-gray); font-size: .8rem; cursor: pointer; transition: all .2s; font-weight: 600; }
.lb-tab.active { background: rgba(124,58,237,.3); border-color: rgba(124,58,237,.6); color: white; }
.lb-tab:hover:not(.active) { background: rgba(255,255,255,.1); }
.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-item { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.04); border-radius: 10px; padding: 10px 14px; }
.lb-rank { width: 30px; font-size: 1.2rem; font-weight: 800; text-align: center; flex-shrink: 0; }
.lb-rank.r1 { color: #fbbf24; }
.lb-rank.r2 { color: #c0c0c0; }
.lb-rank.r3 { color: #cd7f32; }
.lb-info { flex: 1; }
.lb-name { font-weight: 700; font-size: .88rem; }
.lb-sub { font-size: .7rem; color: var(--text-gray); }
.lb-val { font-size: .85rem; font-weight: 700; color: var(--gold); text-align: right; flex-shrink: 0; }

/* ===== 通用 info-chip ===== */
.info-chip { background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.25); border-radius: 10px; padding: 9px 14px; font-size: .82rem; color: #ddd; }

/* ===== 响应式 ===== */
@media (max-width: 640px) {
  .businesses-grid { grid-template-columns: 1fr; }
  .upgrades-grid { grid-template-columns: repeat(2, 1fr); }
  .ach-grid { grid-template-columns: repeat(2, 1fr); }
  .research-grid { grid-template-columns: 1fr; }
  .mgr-grid { grid-template-columns: 1fr; }
  .lb-tabs { gap: 4px; }
  .lb-tab { padding: 5px 10px; font-size: .72rem; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .businesses-grid { grid-template-columns: 1fr; }
  .upgrades-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1400px) {
  .businesses-grid { grid-template-columns: repeat(3, 1fr); }
}