:root {
  --bg0: #070A12;
  --bg1: #0B1020;

  --text: rgba(255, 255, 255, .92);
  --muted: rgba(255, 255, 255, .70);
  --muted2: rgba(255, 255, 255, .55);

  --shadow: 0 24px 80px rgba(0, 0, 0, .55);
  --shadow2: 0 10px 30px rgba(0, 0, 0, .4);
  --r2: 24px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background:
    radial-gradient(1100px 650px at 20% 0%, rgba(124, 77, 255, .14), transparent 58%),
    radial-gradient(900px 600px at 85% 15%, rgba(77, 255, 136, .12), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(45, 212, 255, .10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow: hidden;
  /* Prevent body scroll */
  height: 100vh;
  /* Fixed height */
}

/* ===== Background FX ===== */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

.grid {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .14;
}

.orb {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity: .28;
  mix-blend-mode: screen;
}

.o1 {
  left: -140px;
  top: -160px;
  background: radial-gradient(circle at 30% 30%, rgba(124, 77, 255, .9), transparent 55%);
}

.o2 {
  right: -180px;
  top: 40px;
  background: radial-gradient(circle at 30% 30%, rgba(77, 255, 136, .9), transparent 55%);
}

.o3 {
  left: 25%;
  bottom: -260px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 77, 216, .8), transparent 60%);
}

/* ===== STATIC LOGO watermark (no movement) ===== */
.logoFade {
  position: absolute;
  inset: 0;
  background-image: url("assets/logo.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  opacity: .10;

  transform: none !important;
  will-change: auto;

  -webkit-mask-image: radial-gradient(circle at 50% 22%,
      rgba(0, 0, 0, .95) 0%,
      rgba(0, 0, 0, .62) 36%,
      rgba(0, 0, 0, 0) 72%);
  mask-image: radial-gradient(circle at 50% 22%,
      rgba(0, 0, 0, .95) 0%,
      rgba(0, 0, 0, .62) 36%,
      rgba(0, 0, 0, 0) 72%);
}

/* ===== Sidebar Navigation ===== */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  background: rgba(11, 16, 32, 0.95);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  padding: 24px;
  z-index: 100;
  backdrop-filter: blur(14px);
  overflow-y: auto;
}

.sidebar .brand {
  margin-bottom: 30px;
  padding-left: 8px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.sidebar .logo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(77, 255, 136, .18), rgba(124, 77, 255, .18));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow2);
  font-weight: 900;
  font-size: 22px;
}

.brandText .kicker {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted2);
}

.brandText h1 {
  margin: 2px 0 0;
  font-size: 18px;
  letter-spacing: .02em;
}

.navLinks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.navLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted2);
  margin: 16px 0 8px 12px;
  font-weight: 700;
}

.navBtn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: all .2s ease;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.navBtn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transform: translateX(4px);
}

.navBtn.active {
  background: linear-gradient(90deg, rgba(124, 77, 255, 0.15), rgba(45, 212, 255, 0.1));
  color: #fff;
  border-left: 3px solid #7c4dff;
}

.navIcon,
.navBtn span {
  pointer-events: none;
}

.navIcon {
  display: grid;
  place-items: center;
}

.navIcon svg {
  width: 20px;
  height: 20px;
}

.roprofile {
  margin-top: 4px;
}

.pfp {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.sidebarFooter {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== Main Content ===== */
.main-content {
  margin-left: 260px;
  padding: 30px 40px;
  max-width: 1400px;
  height: 100vh;
  /* Full viewport height */
  overflow-y: auto;
  /* Scroll internally */
}

.tabpane {
  display: none;
  padding: 12px 6px 6px;
}

.tabpane.active {
  display: block !important;
  animation: paneIn .3s ease-out;
}

@keyframes paneIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== Buttons & Cards ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: rgba(255, 255, 255, .92);
  background: linear-gradient(135deg, rgba(124, 77, 255, .24), rgba(45, 212, 255, .16));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow2);
  transition: transform .15s cubic-bezier(0.4, 0, 0.2, 1), filter .15s ease, background .15s ease;
  cursor: pointer;
}

.btn:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.15);
  background: linear-gradient(135deg, rgba(124, 77, 255, .35), rgba(45, 212, 255, .25));
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn.ghost {
  background: rgba(255, 255, 255, .06);
}

.btn.tiny {
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 13px;
}

.btnIcon svg {
  width: 18px;
  height: 18px;
}

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  margin-bottom: 24px;
}

/* ===== Hero ===== */
.hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  margin-bottom: 14px;
}

.hero h2 {
  margin: 8px 0 8px;
  font-size: 20px;
}

.hero p {
  margin: 0;
  line-height: 1.5;
}

.heroRight {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stat {
  min-width: 160px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .12);
}

.statLabel {
  font-size: 12px;
  color: var(--muted2);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.statValue {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 18px;
}

/* ===== Responsive Mobile ===== */
@media (max-width: 1000px) {
  .sidebar {
    width: 80px;
    padding: 16px 8px;
    overflow-x: hidden;
  }

  .sidebar .brandText,
  .navLabel,
  .navBtn span:last-child {
    display: none;
  }

  .navBtn {
    justify-content: center;
    padding: 14px;
  }

  .sidebarFooter {
    grid-template-columns: 1fr;
  }

  .sidebarFooter span:last-child {
    display: none;
  }

  .main-content {
    margin-left: 80px;
    padding: 20px;
  }
}

@media (max-width: 650px) {
  .sidebar {
    position: fixed;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
    flex-direction: row;
    overflow-y: hidden;
    overflow-x: auto;
    z-index: 900;
    padding: 8px;
    justify-content: space-evenly;
    border-right: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(11, 16, 32, 0.98);
  }

  .sidebar .logo,
  .sidebar .brand,
  .sidebarFooter,
  .navLabel {
    display: none;
  }

  .navLinks {
    flex-direction: row;
    width: 100%;
    justify-content: space-evenly;
  }

  .navBtn {
    padding: 10px;
    flex-direction: column;
    gap: 4px;
    border-radius: 8px;
  }

  .navBtn svg {
    width: 24px;
    height: 24px;
  }

  .navBtn.active {
    border-left: none;
    border-bottom: 3px solid #7c4dff;
    background: linear-gradient(0deg, rgba(124, 77, 255, 0.1), transparent);
  }

  /* Improved Touch Targets */
  .navBtn {
    min-width: 60px;
    padding: 12px 8px;
  }

  /* Safe Area for modern mobiles */
  .sidebar {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    height: calc(70px + env(safe-area-inset-bottom));
  }

  /* Hide Roblox users on tiny navbar */
  .roprofile {
    display: none;
  }

  .main-content {
    margin-left: 0;
    padding: 16px 16px 100px;
    /* offset for bottom nav */
  }

  .hero {
    flex-direction: column;
    gap: 20px;
    padding: 24px 16px;
    text-align: center;
  }

  .heroLeft h2 {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .heroRight {
    justify-content: center;
    width: 100%;
  }

  .stat {
    flex: 1;
    min-width: 140px;
  }
}


.h3 {
  margin: 8px 6px 6px;
  font-size: 16px;
}

.muted {
  color: var(--muted);
}

.footer {
  margin-top: 16px;
  text-align: center;
}

.hint {
  padding: 10px 6px 4px;
  font-size: 13px;
  color: var(--muted);
}

.mono {
  font-family: var(--mono);
}

/* ===== Controls ===== */
.controls {
  display: grid;
  gap: 12px;
  padding: 12px 6px;
  align-items: end;
  /* Prevent items sticking out */
}

/* 4-item grid (Runes tab) */
.controls-4 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto;
}

/* 5-item grid (Drop Calc tab) */
.controls-5 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr) auto;
}

.controls .btn {
  margin-bottom: 2px;
  white-space: nowrap;
  /* Prevent button text wrap */
  flex-shrink: 0;
}

.controlsSmall {
  grid-template-columns: 1.4fr 1.4fr auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fieldLabel {
  font-size: 12px;
  color: var(--muted2);
  letter-spacing: .08em;
  text-transform: uppercase;
}

input[type="search"],
select {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .22);
  color: rgba(255, 255, 255, .92);
  outline: none;
}

input[type="search"]::placeholder {
  color: rgba(255, 255, 255, .35);
}

select {
  cursor: pointer;
}

.inputIcon {
  position: relative;
}

.inputIcon .ii {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, .55);
  pointer-events: none;
}

.inputIcon .ii svg {
  width: 16px;
  height: 16px;
}

.inputIcon input {
  padding-left: 38px;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.inputIcon input:focus {
  border-color: rgba(124, 77, 255, 0.5);
  background: rgba(124, 77, 255, 0.05);
  box-shadow: 0 0 20px rgba(124, 77, 255, 0.15);
}

/* Specialized Calculator Input */
.calcInput {
  border-radius: 999px !important;
  height: 50px;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding-left: 44px !important;
  font-size: 16px !important;
  font-weight: 600;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.calcInput:focus {
  background: rgba(124, 77, 255, 0.08) !important;
  border-color: rgba(124, 77, 255, 0.6) !important;
  box-shadow:
    0 0 20px rgba(124, 77, 255, 0.2),
    inset 0 0 10px rgba(124, 77, 255, 0.1) !important;
  transform: translateY(-1px);
}

/* ===== LIST (Grid Rows) - fixes alignment ===== */
.listWrap {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .20);
}

.rowHeader {
  display: grid;
  grid-template-columns: 140px 280px 1fr;
  text-align: center;
  padding: 12px 14px;
  background: rgba(0, 0, 0, .55);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  gap: 16px;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  position: sticky;
  top: 0;
  z-index: 3;
  backdrop-filter: blur(10px);
}

.rowHeaderEvents {
  grid-template-columns: 260px 280px 1fr;
}

.rows {
  display: block;
  min-height: 400px;
  transition: opacity .3s ease;
}

.row {
  display: grid;
  grid-template-columns: 140px 280px 1fr;
  align-items: center;
  text-align: center;
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  gap: 16px;
  transition: all .45s cubic-bezier(0.4, 0, 0.2, 1);
  animation: rowIn .5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  will-change: transform, opacity;
}

/* ===== Mobile Responsiveness ===== */
@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }

  .navActions {
    justify-content: center;
  }

  .controls-4,
  .controls-5 {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  @media (max-width: 500px) {

    .controls-4,
    .controls-5 {
      grid-template-columns: 1fr;
    }

    .controls>*:last-child,
    .controls-4>*:last-child,
    .controls-5>*:last-child {
      grid-column: span 1;
    }

    .fieldLabel {
      font-size: 11px;
    }
  }

  .controls>*:last-child,
  .controls-4>*:last-child,
  .controls-5>*:last-child {
    grid-column: span 2;
  }

  .rowHeader,
  .row {
    grid-template-columns: 80px 180px 1fr;
    font-size: 13px;
    gap: 8px;
    padding: 10px 4px;
  }

  .worldNote {
    font-size: 10px;
  }
}

@media (max-width: 650px) {
  .rowHeader {
    display: none;
  }

  .row {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 10px;
    padding: 20px 15px;
    border-radius: 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
  }

  .row:hover {
    transform: translateY(-2px);
  }

  .rname {
    font-size: 18px;
    font-weight: 700;
  }

  .stats {
    justify-content: flex-start;
  }

  .worldNote {
    display: inline-block;
    margin-left: 10px;
  }
}

@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.rowEvents {
  grid-template-columns: 260px 280px 1fr;
}

.row:hover {
  background: rgba(255, 255, 255, .08);
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .4);
  border-color: rgba(255, 255, 255, .2);
  z-index: 5;
  position: relative;
  border-radius: 12px;
}

.rname {
  font-weight: 900;
  letter-spacing: .01em;
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, .1);
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .88);
  font-size: 12px;
  white-space: nowrap;
}

.chip.small {
  padding: 6px 8px;
  min-width: 36px;
  justify-content: center;
}

.pillStat {
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(135deg, rgba(45, 212, 255, .12), rgba(255, 77, 216, .10));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  transition: all .2s ease;
  cursor: default;
}

.pillStat:hover {
  border-color: rgba(255, 255, 255, .3);
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.emptyBox {
  padding: 18px;
  color: rgba(255, 255, 255, .65);
  text-align: center;
}

/* ===== Grind ===== */
.grindWrap {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .20);
}

.grindNote {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.grindTable {
  padding: 10px;
}

.ggrid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(180px, 1fr));
  gap: 8px;
}

.gth {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .35);
}

.gtd {
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .86);
  overflow-wrap: anywhere;
}

/* ===== Data pane ===== */
.sourceBox {
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .22);
}

.note {
  margin-top: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
}

.worldNote {
  font-size: 11px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 4px;
}

/* ===== Filter Chips ===== */
.chipGroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}

.multiChip {
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.multiChip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.multiChip.active {
  background: linear-gradient(135deg, #7c4dff, #448aff);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  box-shadow: 0 4px 15px rgba(124, 77, 255, 0.3);
}

.multiChip[data-val="__all"].active,
.multiChip[data-val="__all"]:hover {
  background: linear-gradient(135deg, #448aff, #4ecfff) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(68, 138, 255, 0.4) !important;
}

/* ===== Tutorial ===== */
.tutWrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 10px 4px;
}

.tutSection {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 20px;
}

.tutSection h3 {
  margin-top: 0;
  color: #fff;
}

.tutSection p {
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.tutImg {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tutImg img {
  width: 100%;
  display: block;
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .btn {
    width: 100%;
  }

  .hero {
    flex-direction: column;
  }

  .heroRight {
    justify-content: flex-start;
  }

  .controls,
  .controlsSmall {
    grid-template-columns: 1fr;
  }

  .rowHeader,
  .row {
    grid-template-columns: 140px 52px 1fr;
  }

  .rowHeader div:nth-child(4),
  .row div:nth-child(4) {
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  .rowHeaderEvents,
  .rowEvents {
    grid-template-columns: 180px 1fr;
  }

  .rowHeaderEvents div:nth-child(3),
  .rowEvents div:nth-child(3) {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
}

/* ===== Custom Dropdown Revamp ===== */
.customDropdown {
  position: relative;
  width: 100%;
}

.dropInputWrap {
  position: relative;
  width: 100%;
}

.dropInputWrap .ii {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted2);
  pointer-events: none;
  z-index: 2;
}

.dropInputWrap .ii svg {
  width: 18px;
  height: 18px;
}

.dropList {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 300px;
  overflow-y: auto;
  background: rgba(11, 16, 32, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8);
  z-index: 9999;
  padding: 8px;
  display: none;
  animation: paneIn 0.2s ease-out;
}

.dropList.active {
  display: block;
}

.dropItem {
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--muted);
}

.dropItem:hover,
.dropItem.highlight {
  background: rgba(124, 77, 255, 0.15);
  color: #fff;
}

.dropItem .itemChance {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.5;
}

/* Custom Scrollbar for DropList */
.dropList::-webkit-scrollbar {
  width: 6px;
}

.dropList::-webkit-scrollbar-track {
  background: transparent;
}

.dropList::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.dropList::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

.rune-grad {
  font-weight: 800;
}

/* Slime World */
.rune-clear {
  color: #4dd0e1;
}

.rune-cloud {
  color: #e0e0e0;
}

.rune-butter {
  color: #ffd54f;
}

.rune-crunchy {
  color: #8bc34a;
}

.rune-icee {
  color: #b39ddb;
}

.rune-jelly-cube {
  color: #ffab91;
}

.rune-glossy {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(0deg, #ff1cff, #fa9aff, #ff1cff);
  background-size: auto 150%;
  animation: shineVertical 3s linear infinite;
}

.rune-prismatic {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ff15ff, #28fff4);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-genesis {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #7c09ff, #00c3ff);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.multiChip[data-val="Slime"].active,
.multiChip[data-val="Slime"]:hover {
  background: linear-gradient(90deg, #66ff00, #00ff15, #66ff00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(0, 255, 21, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 255, 21, 0.2) !important;
}

/* Fire World */
.rune-ember {
  color: #ff9800;
}

.rune-smoke {
  color: #9e9e9e;
}

.rune-flame {
  color: #ffd54f;
}

.rune-charcoal {
  color: #757575;
}

.rune-inferno {
  color: #ff6e40;
}

.rune-lava-core {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ffd900f3, #f6ff7e, #ffd900f3);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-phoenix {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ff0ccaf3, #ffd000f3);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-hades {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #530000f3, #940000f3, #530000f3);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-hellstorm-core {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ff7300f3, #fffb00f3);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-fire {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #fffb00, #ffae00);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.multiChip[data-val="Fire"].active,
.multiChip[data-val="Fire"]:hover {
  background: linear-gradient(90deg, #fffb00, #ffae00) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(255, 174, 0, 0.4) !important;
  box-shadow: 0 4px 15px rgba(255, 174, 0, 0.2) !important;
}

/* Water World */
.rune-coral {
  color: #f06292;
}

.rune-mist {
  color: #e0e0e0;
}

.rune-stream {
  color: #0078bd;
}

.rune-tide {
  color: #006b9c;
}

.rune-tsunami {
  color: #00bcd4;
}

.rune-abyss {
  color: #0e002e;
}

.rune-leviathan {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ff00ea, #ff00bf, #ff00ea);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-poseidon {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #00fff2, #fbff00, #ffee00);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-water {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #00f7ff, #78fbff, #00f7ff);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.multiChip[data-val="Water"].active,
.multiChip[data-val="Water"]:hover {
  background: linear-gradient(90deg, #00f7ff, #78fbff, #00f7ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(0, 247, 255, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 247, 255, 0.2) !important;
}

/* Plasma World */
.rune-spark {
  color: #f291ff;
}

.rune-ionized {
  color: #d40000;
}

.rune-voltage {
  color: #4dd0e1;
}

.rune-charged {
  color: #33ff00;
}

.rune-supernova {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #e5ff00, #ff00c8, #e5ff00);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-nebula {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #38005e, #8700a8, #c300ff);
  background-size: auto 150%;
  animation: shineVertical 3s linear infinite;
}

.rune-quasar {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(0deg, #ea00ff, #fffb00);
  background-size: auto 150%;
  animation: shineVertical 3s linear infinite;
}

.rune-celestial {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(0deg, #38005e, #8700a8, #c300ff);
  background-size: auto 150%;
  animation: shineVertical 3s linear infinite;
}

.rune-plasma {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #b700ff, #cc00ff, #b700ff);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.multiChip[data-val="Plasma"].active,
.multiChip[data-val="Plasma"]:hover {
  background: linear-gradient(90deg, #b700ff, #cc00ff, #b700ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(183, 0, 255, 0.4) !important;
  box-shadow: 0 4px 15px rgba(183, 0, 255, 0.2) !important;
}

/* Snow World */
.rune-glacial {
  color: #e1f5fe;
}

.rune-powder {
  color: #ffffff;
}

.rune-rime {
  color: #b3e5fc;
}

.rune-sleet {
  color: #81d4fa;
}

.rune-permafrost {
  color: #4fc3f7;
}

.rune-blizzardcore {
  color: #29b6f6;
}

.rune-aurora-borealis {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #e100ff, #80d0ff);
  background-size: 200% auto;
  animation: shine 4s linear infinite;
}

.rune-polar-vortex {
  color: #8cd7ff;
}

.rune-absolute-zero {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #f5a6ff, #98bcff);
  background-size: 200% auto;
  animation: shine 4s linear infinite;
  text-shadow: 0 0 15px rgba(160, 232, 255, 0.8);
}

.rune-snow {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #bfe0ff, #a8d5ff, #bfe0ff);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.multiChip[data-val="Snow"].active,
.multiChip[data-val="Snow"]:hover {
  background: linear-gradient(90deg, #bfe0ff, #a8d5ff, #bfe0ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(191, 224, 255, 0.4) !important;
  box-shadow: 0 4px 15px rgba(191, 224, 255, 0.2) !important;
}

/* Frost World */
.rune-frostbite {
  color: #b3e5fc;
}

.rune-icicle {
  color: #45c4ff;
}

.rune-frozen {
  color: #afe6ff;
}

.rune-cryogenic {
  color: #ff8aef;
}

.rune-subzero {
  color: #b3ff00;
}

.rune-frostcore {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #4662ad, #522180, #4662ad);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-crystalline {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #2243a0, #a200ff, #ee9bff);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-deep-freeze {
  color: #00d9ff;
}

.rune-eternal-ice {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ff00ea, #b8b8b8, #3d7bff);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-frost {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #57d8ff, #c9e5ff);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.multiChip[data-val="Frost"].active,
.multiChip[data-val="Frost"]:hover {
  background: linear-gradient(90deg, #57d8ff, #c9e5ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(87, 216, 255, 0.4) !important;
  box-shadow: 0 4px 15px rgba(87, 216, 255, 0.2) !important;
}

/* Snowflakes World */
.rune-needle {
  color: #9adfff;
}

.rune-column {
  color: #5eccff;
}

.rune-plate {
  color: #81d4fa;
}

.rune-stellar {
  color: #dc6bff;
}

.rune-sectored {
  color: #84d8ff;
}

.rune-fernlike {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #adedfd, #56befa);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-radiating {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #adedfd, #df56fa);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-capped {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #adedfd, #56faec);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-crystal {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #fdffa1, #fcff55);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.rune-cosmic-ice {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #9645ff, #150031);
  background-size: 200% auto;
  animation: shine 5s linear infinite;
}

.rune-snowflake {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #57d8ff, #c9e5ff, #57d8ff);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.multiChip[data-val="Snowflakes"].active,
.multiChip[data-val="Snowflakes"]:hover {
  background: linear-gradient(90deg, #57d8ff, #c9e5ff, #57d8ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(87, 216, 255, 0.4) !important;
  box-shadow: 0 4px 15px rgba(87, 216, 255, 0.2) !important;
}

/* Stardust World */
.rune-stardust-core {
  color: #d6d6d6;
}

.rune-stardust-shard {
  color: #5fbdfc;
}

.rune-stardust-relic {
  color: #2bdfff;
}

.rune-stardust-fragment {
  color: #4b0088;
}

.rune-stardust-sigil {
  color: #cf00be;
}

.rune-stardust-ember {
  color: #f951ff;
}

.rune-stardust-nexus {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #1d006b, #bfeaf1);
  background-size: 200% auto;
  animation: shine 5s linear infinite;
}

.rune-stardust-essence {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #bcffff, #00d6cb);
  background-size: 200% auto;
  animation: shine 5s linear infinite;
}

.rune-stardust-remnant {
  color: #c23fff;
}

.rune-stardust {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #fff09d, #ffee8a);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.multiChip[data-val="Stardust"].active,
.multiChip[data-val="Stardust"]:hover {
  background: linear-gradient(90deg, #fff09d, #ffee8a) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(255, 240, 157, 0.4) !important;
  box-shadow: 0 4px 15px rgba(255, 240, 157, 0.2) !important;
}

/* Comets World */
.rune-cosmic-frost {
  color: #b3f6ff;
}

.rune-stellar-ice {
  color: #b384c5;
}

.rune-orbital-debris {
  color: #8f6a9e;
}

.rune-drift-fragment {
  color: #734399;
}

.rune-velocity-mark {
  color: #a055cc;
}

.rune-atmospheric-burn {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #f4c6ff, #e167ff);
  background-size: 200% auto;
  animation: shine 5s linear infinite;
}

.rune-impact-horizon {
  color: #f4c7ff;
}

.rune-extinction-core {
  color: #d6b3ff;
}

.rune-astral-flux {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ce63ff, #eabbff);
  background-size: 300% auto;
  animation: shine 6s linear infinite;
}

.rune-comets {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ca45ff, #33f1ff);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.multiChip[data-val="Comets"].active,
.multiChip[data-val="Comets"]:hover {
  background: linear-gradient(90deg, #ca45ff, #33f1ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(202, 69, 255, 0.4) !important;
  box-shadow: 0 4px 15px rgba(202, 69, 255, 0.2) !important;
}

/* Meteors World */
.rune-iron-fragment {
  color: #f8c0ff;
}

.rune-molten-stone {
  color: #acacac;
}

.rune-crater-dust {
  color: #f4c9ff;
}

.rune-scorched-trail {
  color: #ff00c8;
}

.rune-blazing-core {
  color: #27f8ff;
}

.rune-fireball-spark {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ffae00, #ff3c00);
  background-size: 300% auto;
  animation: shine 6s linear infinite;
}

.rune-shockwave-echo {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ff9abc, #762dff);
  background-size: 300% auto;
  animation: shine 6s linear infinite;
}

.rune-cataclysm-shard {
  color: #53c0ff;
}

.rune-cosmic-ember {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #8c00ff, #3700ff);
  background-size: 200% auto;
  animation: shine 4s linear infinite;
}

.rune-meteors {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #78e4ff, #33beff);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

.multiChip[data-val="Meteors"].active,
.multiChip[data-val="Meteors"]:hover {
  background: linear-gradient(90deg, #78e4ff, #33beff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(120, 228, 255, 0.4) !important;
  box-shadow: 0 4px 15px rgba(120, 228, 255, 0.2) !important;
}

/* Event Runes */
.rune-1m-noob {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ff8eec, #ffe397);
  background-size: 200% auto;
  animation: shine 4s linear infinite;
}

.rune-1m-rookie {
  color: #41d3ff;
}

.rune-1m-skilled {
  color: #42a5f5;
}

.rune-1m-expert {
  color: #47a5bc;
}

.rune-1m-master {
  color: #ffa2e3;
}

.rune-1m-elite {
  color: #36f4eb;
}

.rune-1m-mythic {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #fffb00, #ffbb00);
  background-size: 200% auto;
  animation: shine 4s linear infinite;
}

.rune-1m-god {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #fff4b3, #ffc43b);
  background-size: 200% auto;
  animation: shine 3s linear infinite;
}

.rune-1m-absolute {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ffdd00, #4ecfff, #00ff88, #448aff);
  background-size: 300% auto;
  animation: shine 5s linear infinite;
}

.rune-1m {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #ff39d4, #ff0d92);
  background-size: 150% auto;
  animation: shine 3s linear infinite;
}

/* ===== Category Gradients ===== */

.multiChip[data-val="Spawn"].active,
.multiChip[data-val="Spawn"]:hover {
  background: linear-gradient(90deg, #009e00, #89f0fd) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(0, 158, 0, 0.4) !important;
  box-shadow: 0 4px 15px rgba(0, 158, 0, 0.2) !important;
}

.multiChip[data-val="Snow"].active,
.multiChip[data-val="Snow"]:hover {
  background: linear-gradient(90deg, #bfe0ff, #a8d5ff, #bfe0ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(191, 224, 255, 0.4) !important;
  box-shadow: 0 4px 15px rgba(191, 224, 255, 0.2) !important;
}

.multiChip[data-val="Galactic"].active,
.multiChip[data-val="Galactic"]:hover {
  background: linear-gradient(90deg, #690dfc, #110dff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-size: 150% auto;
  animation: shine 3s linear infinite;
  border-color: rgba(105, 13, 252, 0.4) !important;
  box-shadow: 0 4px 15px rgba(105, 13, 252, 0.2) !important;
}

/* ===== Rune Gradients ===== */
@keyframes shine {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes shineVertical {
  0% {
    background-position: 50% 0%;
  }

  50% {
    background-position: 50% 100%;
  }

  100% {
    background-position: 50% 0%;
  }
}

/* ===== Changelog ===== */
.changelogItem {
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
  /* Removed animation to prevent flicker with tab transition */
}

.versionTag {
  display: inline-block;
  background: rgba(124, 77, 255, 0.2);
  border: 1px solid rgba(124, 77, 255, 0.3);
  color: #b388ff;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: var(--mono);
}

.chDate {
  font-size: 13px;
  color: var(--muted);
  margin-left: 10px;
}

.chList {
  margin: 10px 0 0 20px;
  padding: 0;
  color: rgba(255, 255, 255, .85);
  line-height: 1.6;
}

.chList li {
  margin-bottom: 6px;
}

/* ===== Feedback ===== */
.feedbackList {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fbItem {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 14px;
  /* Removed animation to prevent flicker with tab transition */
}

.fbHeader {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--muted2);
}

.fbText {
  color: rgba(255, 255, 255, .9);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ===== Toggle ===== */
.toggleWrap {
  display: flex;
  background: rgba(0, 0, 0, .4);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}

.toggleBtn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .5);
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s ease;
  font-weight: 600;
  font-family: var(--sans);
}

.toggleBtn.active {
  background: rgba(124, 77, 255, 0.3);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.toggleBtn:hover:not(.active) {
  color: rgba(255, 255, 255, .8);
}

/* ===== Tutorial Hub & Bars ===== */
.tut-hub {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.tut-bar {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 16px 24px;
  gap: 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.tut-bar:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateX(6px);
  border-color: rgba(124, 77, 255, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.tut-name {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}

.tut-purpose {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.tut-author {
  text-align: right;
  font-size: 12px;
  color: var(--muted2);
}

.tut-author strong {
  color: #7c4dff;
  font-weight: 700;
}

.tut-content {
  display: none;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: none;
  border-radius: 0 0 16px 16px;
  padding: 24px;
  margin-top: -8px;
  animation: paneIn 0.4s ease-out;
}

.tut-bar.active {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-color: rgba(124, 77, 255, 0.6);
  background: rgba(124, 77, 255, 0.05);
}

.tut-bar.active+.tut-content {
  display: block;
}

/* ===== Feedback Enhancements ===== */
.file-upload-wrap {
  margin-top: 10px;
  position: relative;
}

.file-label {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  padding: 12px 20px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: var(--muted);
}

.file-label:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #7c4dff;
  color: #fff;
}

#fileInput {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

@media (max-width: 800px) {
  .tut-bar {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 20px;
  }

  .tut-author {
    text-align: left;
    margin-top: 4px;
  }
}