/* === Button loading state === */
.btn-spinner{display:none;align-items:center;justify-content:center;gap:4px;height:14px}
.btn.loading .btn-label{display:none}
.btn.loading .btn-spinner{display:inline-flex}
.btn-spinner i{
  width:6px;height:6px;border-radius:50%;background:currentColor;display:block;
  animation:pulse 1s cubic-bezier(0.22,1,0.36,1) infinite;
}
.btn-spinner i:nth-child(2){animation-delay:.15s}
.btn-spinner i:nth-child(3){animation-delay:.3s}
@keyframes pulse{
  0%,100%{opacity:.35;transform:scale(.8)}
  50%{opacity:1;transform:scale(1)}
}

/* === Results layout === */
.results{
  max-width:1100px;margin:0 auto;
  padding:0 max(24px,env(safe-area-inset-right)) 64px max(24px,env(safe-area-inset-left));
  display:grid;gap:24px;
}
@media (max-width:600px){
  .results{padding:0 16px 48px;gap:16px}
}

/* === Card === */
.card{
  background:#111317;border:1px solid #1F2025;border-radius:16px;padding:24px;
  transition:transform 220ms cubic-bezier(0.22,1,0.36,1),border-color 220ms cubic-bezier(0.22,1,0.36,1);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-2px);border-color:#2A2C32}
}
@media (max-width:600px){.card{padding:18px;border-radius:14px}}

/* Reveal entrance for results cards */
.reveal{opacity:0;transform:translateY(16px);animation:reveal 700ms cubic-bezier(0.16,1,0.3,1) forwards}
@keyframes reveal{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;animation:none}
}

/* === Tier hero card === */
.tier-card{
  display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;
  position:relative;overflow:hidden;
}
@media (max-width:600px){
  .tier-card{grid-template-columns:1fr;gap:18px;text-align:center}
}
.tier-badge{
  position:relative;width:140px;height:140px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;flex-shrink:0;
}
.tier-badge .hex{
  position:relative;width:110px;height:125px;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.5));
}
.tier-badge .shimmer{
  position:absolute;inset:-6px;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0%, var(--tier-color,#165DFC) 25%, transparent 55%);
  filter:blur(20px);opacity:.5;
  animation:spin 8s linear infinite;
  pointer-events:none;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.tier-badge .shimmer{animation:none;opacity:.3}}
.tier-info{min-width:0}
.tier-info .label{
  font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#9CA3AF;margin:0 0 6px;font-weight:500;
}

/* Top trader badges */
.top-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
@media (max-width:600px){.top-badges{justify-content:center}}
.top-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;
  font-size:12px;font-weight:500;letter-spacing:.02em;
  color:#FFD700;
  background:linear-gradient(135deg,rgba(255,215,0,.16),rgba(255,165,0,.06));
  border:1px solid rgba(255,215,0,.35);
  white-space:nowrap;
}
.top-badge b{color:#FFE680;font-weight:700;margin:0 2px}
.top-badge.profit{
  color:#10B981;
  background:linear-gradient(135deg,rgba(16,185,129,.16),rgba(5,150,105,.06));
  border-color:rgba(16,185,129,.35);
}
.top-badge.profit b{color:#6EE7B7}
.top-badge-icon{display:inline-flex;width:13px;height:13px}
.top-badge-icon svg{width:100%;height:100%;display:block}
.tier-info h2{margin:0 0 4px;font-size:clamp(28px,4.5vw,36px);letter-spacing:-.02em;line-height:1.1}
.tier-info .wv{color:#9CA3AF;font-size:14px;margin:0 0 18px}
.tier-info .wv strong{color:#F5F5F7;font-weight:600}
.progress{height:8px;background:#1F2025;border-radius:999px;overflow:hidden}
.progress > i{
  display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#165DFC,var(--tier-color,#165DFC));
  transition:width 1200ms cubic-bezier(0.16,1,0.3,1);
}
.progress-meta{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:8px;font-size:12px;color:#9CA3AF;
}

/* === Stat grid (auto-fit so 3 or 5 cards both work) === */
.stat-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
@media (max-width:380px){.stat-grid{grid-template-columns:1fr}}
.stat .k{
  color:#9CA3AF;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 10px;font-weight:500;
}
.stat .v{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0;line-height:1.15;word-break:break-word}
.stat .v small{font-size:13px;color:#9CA3AF;font-weight:400;margin-left:4px;letter-spacing:.02em}
.stat .vs{color:#6B7280;font-size:11px;margin:6px 0 0;letter-spacing:.04em}

/* === Action bar (unit toggle + share) === */
.action-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.action-bar .seg{margin:0}
.share-btn{
  background:#15171B;color:#F5F5F7;border:1px solid #1F2025;
}
.share-btn:hover{background:#1A1C20;border-color:#2A2C32;transform:translateY(-1px)}
.share-btn svg{width:14px;height:14px}

/* === Rebate estimator === */
.rebate{display:grid;gap:18px;grid-template-columns:1fr 1fr}
@media (max-width:600px){.rebate{grid-template-columns:1fr}}
.rebate h3{
  margin:0 0 12px;font-size:11px;color:#9CA3AF;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;
}
.rebate .num{font-size:32px;font-weight:600;letter-spacing:-.01em;margin:0;line-height:1.1}
.rebate .num small{font-size:13px;color:#9CA3AF;font-weight:400;margin-left:6px;letter-spacing:.02em}

/* === Category breakdown === */
.cats{content-visibility:auto;contain-intrinsic-size:1px 480px}
.cats h3{
  margin:0 0 16px;font-size:11px;color:#9CA3AF;letter-spacing:.12em;
  text-transform:uppercase;font-weight:500;
}
.bars{display:flex;flex-direction:column;gap:14px}
.bar-row{
  display:grid;grid-template-columns:140px 1fr 140px;gap:14px;align-items:center;font-size:14px;
}
@media (max-width:600px){
  .bar-row{grid-template-columns:1fr;gap:6px}
  .bar-row .amount{text-align:left}
}
.bar-row .name{color:#F5F5F7;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-row .amount{color:#9CA3AF;font-size:13px;text-align:right}
.bar-row .amount span{color:#6B7280;margin-left:4px}
.bar{position:relative;height:8px;background:#1F2025;border-radius:999px;overflow:hidden}
.bar > i{
  position:absolute;left:0;top:0;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,#165DFC,#7DA3FF);
  transition:width 700ms cubic-bezier(0.16,1,0.3,1);
}

/* === Skeletons === */
.skel{
  background:#111317;border:1px solid #1F2025;border-radius:16px;padding:24px;
  position:relative;overflow:hidden;height:160px;
}
.skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.04) 50%,transparent 100%);
  background-size:200% 100%;
  animation:shimmer 1.5s linear infinite;
}
@keyframes shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.skel-grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
.skel-grid .skel{height:96px}
@media (max-width:900px){.skel-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:380px){.skel-grid{grid-template-columns:1fr}}
.skel-progress{
  color:#9CA3AF;font-size:13px;text-align:center;margin:4px 0 0;min-height:18px;
}

/* === Notes === */
.note{color:#9CA3AF;font-size:13px;margin:0;padding:14px 16px;border-radius:12px;background:#15171B;border:1px solid #1F2025}
.note.warn{color:#F5C97C;border-color:#3a2f15}

/* === Footer === */
.footer{
  max-width:1100px;margin:24px auto 0;
  padding:40px max(24px,env(safe-area-inset-right)) 48px max(24px,env(safe-area-inset-left));
  color:#9CA3AF;font-size:13px;border-top:1px solid #1F2025;
}
@media (max-width:600px){.footer{padding:32px 16px 40px}}
.footer p{margin:0 0 10px;max-width:760px;line-height:1.55}
.footer a{color:#165DFC}
.footer a:hover{text-decoration:underline}
.footer .dim{color:#6B7280}

/* === Toast === */
.toast{
  position:fixed;top:max(16px,env(safe-area-inset-top));left:50%;
  background:#1A1B1F;border:1px solid #2A2C32;color:#F5F5F7;
  padding:12px 16px;border-radius:12px;font-size:14px;z-index:300;
  transform:translate(-50%,-140%);opacity:0;
  transition:transform 420ms cubic-bezier(0.16,1,0.3,1),opacity 220ms cubic-bezier(0.22,1,0.36,1);
  max-width:calc(100vw - 32px);text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.toast.show{transform:translate(-50%,0);opacity:1}
.toast.error{border-color:#EF4444}
.toast.success{border-color:#10B981}

/* Retry / error block */
.err-card h3{margin:0 0 8px;font-size:16px}

/* === Modal === */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}
.modal[hidden]{display:none}
.modal-back{
  position:absolute;inset:0;background:rgba(0,0,0,.68);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;animation:fadeIn 220ms cubic-bezier(0.22,1,0.36,1) forwards;
}
.modal-card{
  position:relative;z-index:1;background:#111317;border:1px solid #1F2025;
  border-radius:18px;padding:28px;max-width:760px;width:100%;
  max-height:calc(100vh - 32px);overflow:auto;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px) scale(.98);
  animation:modalIn 380ms cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes fadeIn{to{opacity:1}}
@keyframes modalIn{to{opacity:1;transform:translateY(0) scale(1)}}
.modal-close{
  position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:10px;
  font-size:24px;line-height:1;color:#9CA3AF;
  transition:color 200ms cubic-bezier(0.22,1,0.36,1),background 200ms;
}
.modal-close:hover{color:#F5F5F7;background:#15171B}
.modal-card h3{margin:0 0 16px;font-size:18px;letter-spacing:-.01em}
.modal-img-wrap{
  background:#0A0B0D;border:1px solid #1F2025;border-radius:12px;overflow:hidden;
  margin-bottom:14px;
}
.modal-img-wrap img{display:block;width:100%;height:auto}
.modal-hint{color:#9CA3AF;font-size:13px;margin:0 0 18px;line-height:1.55}
.modal-hint strong{color:#F5F5F7;font-weight:600}
.modal-actions{display:flex;gap:10px;flex-wrap:wrap}
.modal-actions .btn{flex:1;min-width:120px}
@media (prefers-reduced-motion: reduce){
  .modal-back,.modal-card{animation:none;opacity:1;transform:none}
}
@media (max-width:600px){
  .modal-card{padding:20px;border-radius:14px}
}