.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  position:sticky;
  top:0px;
  z-index:35;
  margin:16px 0 20px;
  padding:10px 14px;
  border:1px solid var(--line);
  background:rgba(10, 13, 22, 0.94);
  backdrop-filter:blur(20px) saturate(1.3);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.tab{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:#b4bede;
  border-radius:var(--radius-sm);
  padding:10px 15px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:12px;
  transition:all .14s ease;
  clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
}
.tab .tabIcon{
  font-size:13.5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}
.tab:hover{
  border-color:var(--line-strong);
  background:rgba(255,255,255,.07);
  color:#ffffff;
  transform:translateY(-1px);
}
.tab.active{
  background:#f1f4ff;
  color:#070a14;
  border-color:#ffffff;
  box-shadow:0 2px 14px rgba(255,255,255,.2);
}
.tab .tabIcon i{font-size:1.05rem; line-height:1}
.pane{display:none; animation:fadeIn .18s ease}
.pane.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.upgrade{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));
  padding:15px;
  display:flex; flex-direction:column; gap:10px; min-height:164px;
  transition:border-color .15s, background .15s;
}
.upgrade:hover{border-color:#333b5e}
.upgrade.maxed{border-color:rgba(168,255,106,.38); background:linear-gradient(180deg, rgba(168,255,106,.062), rgba(255,255,255,.018))}
.uhead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.uname{font-weight:900;letter-spacing:.03em;text-transform:uppercase}
.udesc{color:var(--muted);font-size:13.5px;min-height:34px}
.meta{display:flex;gap:7px;flex-wrap:wrap}
.tag{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:4px 9px;
  background:rgba(255,255,255,.035);
  font-size:12px; color:#d8deff;
}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.sectionTitle{display:flex;align-items:end;justify-content:space-between;gap:12px;margin:24px 0 12px;flex-wrap:wrap}
.sectionTitle h2{margin:0;font-size:17px;letter-spacing:.09em;text-transform:uppercase}
.small{font-size:12.5px;color:var(--muted)}
.notice{border:1px solid var(--line);background:rgba(255,255,255,.032);border-radius:var(--radius-md);padding:12px 14px;color:#cbd2f2}
.console{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background:#070914;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:12px;
  min-height:260px; max-height:410px; overflow:auto;
  font-size:12.5px;
}
.log{padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.07);color:#d1d7f3}
.log b{color:white}
.milestone{border:1px solid var(--line);background:rgba(255,255,255,.028);border-radius:var(--radius-md);padding:12px}
.milestone.done{border-color:rgba(255,120,120,.45); background:rgba(255,84,84,.062)}
.hardMilestone{position:relative;overflow:hidden;border-radius:var(--radius-lg);padding:15px;background:linear-gradient(180deg, rgba(255,84,84,.055), rgba(255,255,255,.018));border:1px solid rgba(255,84,84,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.hardMilestone:before{content:"";position:absolute;inset:0;background:radial-gradient(240px 90px at 12% 0%, rgba(255,84,84,.16), transparent 55%);pointer-events:none}
.hardMilestone.done{border-color:rgba(255,84,84,.72);background:linear-gradient(180deg, rgba(255,84,84,.14), rgba(255,84,84,.035));box-shadow:0 0 22px rgba(255,84,84,.10), inset 0 1px 0 rgba(255,255,255,.06)}
.hardMilestone .uhead,.hardMilestone .small,.hardMilestone .meta{position:relative;z-index:1}
.milestoneIcon{display:inline-flex;align-items:center;justify-content:center;width:5px;height:5px;margin-right:10px}
.milestoneBar{height:8px;border-radius:999px;background:rgba(255,255,255,.065);overflow:hidden;margin-top:12px;position:relative;z-index:1}
.milestoneBar>span{display:block;height:100%;background:linear-gradient(90deg,#ff5454,#3b0000);border-radius:999px}
.foldBtn{padding:8px 12px;font-size:12px}
.foldBtn:hover{transform:none;filter:none;box-shadow:none}
.foldBtn:active{transform:none}
#levelShopBody.grid{grid-template-columns:1fr}
#levelShopBody .card{width:100%}
.fold-body.folded{display:none !important}
.hard-active .hero .card:first-child{
  border-color:rgba(255,84,84,.7);
  background:linear-gradient(180deg, rgba(30,10,10,.95), rgba(60,20,20,.85));
  box-shadow:0 22px 70px rgba(255,40,40,.22);
}
.hard-active .hero .card:first-child .title,
.hard-active .hero .card:first-child .sub {
  color: #ff9999;
}
.hard-active .hero .card:first-child .big {
  text-shadow: 0 0 20px rgba(255,0,0,0.4);
}
.hard-active .hero .card:first-child:after {
  content: "HARDMODE ACTIVE";
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 9px;
  font-weight: 900;
  color: rgba(255,84,84,0.6);
  letter-spacing: 0.2em;
}
.challenge-active .hero .card:first-child{
  border-color:rgba(183,28,28,.65);
  background:linear-gradient(180deg, rgba(40,8,8,.95), rgba(80,15,15,.85));
  box-shadow:0 22px 70px rgba(220,20,20,.22)
}
.challenge-active .hero .card:first-child:after{
  content:"★ CHALLENGE ACTIVE";
  position:absolute;
  top:10px;
  right:15px;
  font-size:9px;
  font-weight:900;
  color:rgba(255,120,120,.72);
  letter-spacing:.2em
}
#challengeList{grid-auto-rows:1fr}
#challengeList .upgrade{height:100%;min-height:260px;border-color:rgba(183,28,28,.25);background:linear-gradient(180deg, rgba(183,28,28,.05), rgba(255,255,255,.015));position:relative;overflow:visible;cursor:pointer;pointer-events:auto;transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
#challengeList .upgrade:hover{border-color:rgba(183,28,28,.55);box-shadow:0 0 0 1px rgba(183,28,28,.18), inset 0 1px 0 rgba(255,255,255,.04)}
#challengeList .upgrade .udesc,#challengeList .upgrade .small{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#challengeList .upgrade .meta{margin-top:auto}
#challengeList .upgrade .btn,#challengeList .upgrade button{margin-top:auto;position:relative;z-index:2;pointer-events:auto}
#challengeStatus{border-color:rgba(183,28,28,.35);background:rgba(183,28,28,.06);color:#ffd0d0}
#challengeStatus b.challenge{color:#ff8a8a}