:root {
  --bg: #08090f;
  --panel: #151724cc;
  --panel-2: #181a24;
  --stroke: #ffffff14;
  --text: #f5f7ff;
  --muted: #9ca5c5;
  --accent: #9a4dff;
  --accent-2: #6a43ff;
  --danger: #c84759;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Manrope", "Segoe UI", sans-serif; color: var(--text); background: var(--bg); }
a { color: #c6b7ff; }

.toast-stack {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: grid;
  gap: .45rem;
  pointer-events: none;
}

.toast {
  border-radius: 999px;
  border: 1px solid #ffffff30;
  background: linear-gradient(140deg, #181f34f0, #11192df0);
  color: #f3f6ff;
  padding: .55rem .95rem;
  font-weight: 700;
  font-size: .9rem;
  box-shadow: 0 14px 35px #0008;
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  animation: toast-in .16s ease forwards;
}

.toast.hide {
  animation: toast-out .18s ease forwards;
}

.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 10% 5%, #9a4dff2b, transparent 35%),
    radial-gradient(circle at 85% 90%, #4f8cff21, transparent 42%),
    linear-gradient(165deg, #07080e, #0c0d14 58%, #0a0b11);
}

.auth-card {
  width: min(500px, 96vw);
  border-radius: 22px;
  background: #10121acc;
  border: 1px solid var(--stroke);
  backdrop-filter: blur(8px);
  padding: 1.4rem;
  box-shadow: 0 20px 60px #0009;
}

.stack { display: grid; gap: .8rem; }
label { display: grid; gap: .35rem; color: #d8def7; font-weight: 600; }
input, textarea, select, button {
  width: 100%;
  border-radius: 12px;
  border: 1px solid #ffffff24;
  background: #0e1018;
  color: var(--text);
  padding: .72rem .82rem;
}
button {
  border: 0;
  cursor: pointer;
  font-weight: 700;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
}

.muted { color: var(--muted); }
.error { color: #ff8f9d; font-weight: 700; }

.panel-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 14%, #b975ff33, transparent 30%),
    radial-gradient(circle at 92% 84%, #5d76ff2a, transparent 32%),
    linear-gradient(140deg, #05060b, #080a12 46%, #06070d);
}

.panel-shell { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--stroke);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: linear-gradient(180deg, #090a10f2, #07080df2);
  z-index: 40;
}
.brand { font-size: 1.9rem; font-weight: 900; letter-spacing: .01em; }
.brand-logo {
  display: block;
  width: 100%;
  max-width: 220px;
  height: auto;
  filter: drop-shadow(0 4px 16px #7d3dff55);
}
.side-nav { display: grid; gap: .52rem; }
.side-nav a {
  text-decoration: none;
  color: #d8dcf6;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: .76rem .86rem;
  background: #12131a;
  display: flex;
  align-items: center;
  gap: .62rem;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.side-nav a:hover {
  transform: translateY(-1px);
  border-color: #a97bff6c;
  background: linear-gradient(135deg, #191c2a, #121624);
  box-shadow: 0 10px 24px #0000004f;
}
.side-nav a.active {
  background: linear-gradient(100deg, #2f173f, #1e2044);
  border-color: #b088ff4f;
  box-shadow: inset 0 1px 0 #ffffff22, 0 0 0 1px #ffffff12;
}

.side-nav a::before {
  width: 18px;
  text-align: center;
  font-size: 1rem;
  opacity: .96;
}

.side-nav a[href*="tab=customize"]::before { content: "✎"; }
.side-nav a[href*="tab=links"]::before { content: "🔗"; }
.side-nav a[href*="tab=premium"]::before { content: "◈"; }
.side-nav a[href="/admin"]::before { content: "🛡"; }

.side-nav a[href*="tab=customize"],
.side-nav a[href*="tab=links"],
.side-nav a[href*="tab=premium"],
.side-nav a[href="/admin"] {
  font-size: 1.02rem;
}

.account-group {
  border: 1px solid #ffffff1e;
  border-radius: 14px;
  background: #12131a;
  overflow: hidden;
}

.account-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: .72rem .8rem;
  color: #d8dcf6;
  font-weight: 800;
  letter-spacing: .01em;
}

.account-toggle.active {
  background: linear-gradient(100deg, #2f173f, #1e2044);
}

.account-toggle > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: .58rem;
}

.account-toggle > span:first-child::before {
  content: "⚙";
  width: 18px;
  text-align: center;
  font-size: 1rem;
}

.account-caret {
  font-size: 0;
  width: 16px;
  display: inline-grid;
  place-items: center;
  transition: transform .18s ease;
}

.account-caret::before {
  content: "▾";
  font-size: .82rem;
  color: #dfe5ff;
}

.account-group.open .account-caret {
  transform: rotate(180deg);
}

.account-subnav {
  display: grid;
  gap: .1rem;
  padding: .38rem .5rem .5rem;
}

.account-subnav[hidden] {
  display: none !important;
}

.account-subnav .sub-item {
  border: 0;
  background: transparent;
  color: #9fa6c8;
  border-radius: 9px;
  padding: .36rem .44rem .36rem 2rem;
  font-size: .98rem;
}

.account-subnav .sub-item:hover {
  background: #1a1f2e;
  color: #e8ecff;
}
.sidebar-actions { margin-top: auto; display: grid; gap: .7rem; }
.share-profile-btn {
  border-radius: 999px;
  border: 1px solid #b56cff78;
  background: linear-gradient(140deg, #3a184d, #4a1f60);
  color: #f3e6ff;
  font-weight: 700;
  padding: .75rem .9rem;
}

.user-chip-wrap {
  position: relative;
}

.user-chip {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: .6rem;
  border-radius: 999px;
  border: 1px solid #ffffff1f;
  background: #0f1119;
  padding: .45rem .55rem;
}

.user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, #5a6178, #33384a 60%, #262b39);
  border: 1px solid #ffffff24;
}

.user-meta strong {
  display: block;
  font-size: .97rem;
  line-height: 1.05;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-meta span {
  display: block;
  color: #9fa8cc;
  font-size: .84rem;
}

.user-menu-dots {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #ffffff1d;
  background: #161a24;
  color: #d7def8;
  font-size: .95rem;
  letter-spacing: 1px;
  padding: 0;
}

.quick-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  width: 240px;
  border-radius: 14px;
  border: 1px solid #ffffff24;
  background: linear-gradient(165deg, #141722f6, #0f131df6);
  box-shadow: 0 18px 44px #000b;
  padding: .75rem;
  display: grid;
  gap: .5rem;
  z-index: 70;
}

.quick-menu[hidden] {
  display: none !important;
}

.quick-menu h4 {
  margin: 0;
  font-size: 1.3rem;
}

.quick-menu .muted {
  margin: 0 0 .1rem;
  font-size: .9rem;
}

.quick-menu a,
.quick-menu .menu-share-btn {
  width: 100%;
  text-decoration: none;
  border: 1px solid #ffffff20;
  border-radius: 11px;
  background: #181d2a;
  color: #e9efff;
  padding: .55rem .65rem;
  text-align: left;
  font-weight: 700;
}

.quick-menu form {
  margin: 0;
}

.quick-menu .btn-danger.small {
  width: 100%;
  border-radius: 11px;
  padding: .55rem .65rem;
}

.share-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: clamp(1rem, 8vh, 5rem) 1rem 1rem;
  overflow: auto;
}

.share-modal-backdrop {
  position: absolute;
  inset: 0;
  background: #04060bcc;
  backdrop-filter: blur(2px);
}

.share-modal {
  position: relative;
  width: min(560px, calc(100vw - 2rem));
  margin: 0 auto;
  border-radius: 16px;
  border: 1px solid #ffffff1f;
  background: linear-gradient(165deg, #12151ef7, #0d1017f7);
  box-shadow: 0 24px 64px #000c;
  padding: 1rem;
  display: grid;
  gap: .7rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
}

.share-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.share-modal-head h3 {
  margin: 0;
  font-size: 1.55rem;
}

.share-card {
  border: 1px solid #ffffff1e;
  border-radius: 14px;
  background: #11141c;
  padding: .75rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}

.share-card.action {
  width: 100%;
  text-align: left;
  color: #edf1ff;
}

.share-qr {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  border: 1px solid #ffffff28;
  background: #fff;
}

.share-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #ffffff22;
  background: #1a1e29;
  display: inline-grid;
  place-items: center;
  margin-right: .6rem;
}

.share-link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  border: 1px solid #ffffff1d;
  border-radius: 14px;
  background: #11141c;
  padding: .6rem .72rem;
  flex-wrap: wrap;
}

.share-link-text {
  color: #c7d0ee;
  font-family: "JetBrains Mono", monospace;
  font-size: .9rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.share-modal-wrap[hidden] {
  display: none !important;
}

.btn-secondary, .btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid #ffffff24;
  padding: .7rem .8rem;
  font-weight: 700;
}
.btn-secondary { background: #181a26; color: #eef1ff; }
.btn-danger { background: #35131b; color: #ffdce0; border-color: #ff75854a; }
.btn-secondary.small, .btn-danger.small { padding: .45rem .6rem; }

.panel-main { padding: 1.2rem; display: grid; gap: 1rem; align-content: start; }
.card-grid { display: grid; gap: 1rem; }
.card-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card {
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: inset 0 1px 0 #ffffff12, 0 15px 40px #0008;
}

.premium-layout {
  display: grid;
  grid-template-columns: 360px;
  gap: 1rem;
}

.premium-card {
  border-radius: 20px;
  border: 1px solid #c289ff59;
  background:
    radial-gradient(circle at 88% 12%, #ffffff17, transparent 35%),
    radial-gradient(circle at 16% 100%, #8b2fff26, transparent 40%),
    linear-gradient(162deg, #2c1a41, #21142f 44%, #14101d);
  padding: 1.05rem 1rem 1.2rem;
  box-shadow: 0 24px 60px #0009, inset 0 1px 0 #ffffff1c;
}

.premium-tag {
  margin: 0 0 .45rem;
  color: #f0ddff;
  font-weight: 700;
  font-size: .98rem;
}

.premium-card h2 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.premium-price {
  margin: .65rem 0 .3rem;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.05;
}

.premium-price .old {
  text-decoration: line-through;
  opacity: .68;
  font-size: 1.25rem;
  margin-right: .3rem;
}

.premium-price small {
  font-size: 1rem;
  font-weight: 600;
  opacity: .85;
}

.premium-list {
  list-style: none;
  margin: 1rem 0 1.2rem;
  padding: 0;
  display: grid;
  gap: .54rem;
  font-size: 1rem;
}

.premium-list li {
  position: relative;
  padding-left: 1.4rem;
}

.premium-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #db9fff;
  font-weight: 900;
}

.purchase-btn {
  width: 100%;
  border-radius: 999px;
  padding: .72rem .95rem;
  font-size: 1rem;
  background: linear-gradient(92deg, #9f46ff, #7c3dff 55%, #6f33ff);
  box-shadow: 0 13px 36px #7f2cff6b, inset 0 1px 0 #ffffff3d;
}

.tiny { font-size: .86rem; }

.premium-customize {
  position: relative;
  border: 1px solid #ffffff24;
  border-radius: 14px;
  padding: .85rem;
  background: #111321;
}

.premium-options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem;
}

.premium-option-card {
  border: 1px solid #ffffff22;
  border-radius: 12px;
  background: linear-gradient(150deg, #14192a, #111525);
  padding: .75rem;
  display: grid;
  gap: .45rem;
}

.premium-option-card strong {
  color: #f1e8ff;
  font-size: .98rem;
}

.premium-option-card .muted {
  min-height: 38px;
}

.premium-option-card .btn-secondary.small,
.premium-anchor-btn {
  justify-self: start;
}

.premium-anchor-btn {
  text-decoration: none;
}

.premium-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .7rem;
}

.premium-head h3 {
  margin: 0;
}

.pill-link {
  text-decoration: none;
  font-weight: 700;
  font-size: .86rem;
  padding: .36rem .62rem;
  border-radius: 999px;
  background: #321746;
  border: 1px solid #c289ff57;
  color: #e9d0ff;
}

.pill-link.active {
  background: #173a2c;
  border-color: #58d5a86b;
  color: #c9ffe7;
}

.premium-customize.locked {
  overflow: hidden;
}

.premium-customize.locked .lock-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  border-radius: 14px;
  background: linear-gradient(140deg, #120f19d9, #221633e0);
  color: #f4e8ff;
  font-weight: 700;
  letter-spacing: .01em;
  opacity: 0;
  transition: opacity .2s ease;
}

.premium-customize.locked:hover .lock-overlay {
  opacity: 1;
}
.card.soft { background: #111322bd; }
.stat h3 { margin: 0; font-size: .95rem; color: #cad0ee; }
.big { margin: .5rem 0 0; font-size: 1.9rem; font-weight: 900; }
.overview-shell {
  display: grid;
  gap: 1rem;
}

.overview-head h2 {
  margin: .05rem 0 .1rem;
  font-size: 2rem;
}

.overview-stat-card {
  background: linear-gradient(145deg, #2a1637bf, #241532aa);
  border-color: #cf8fff4f;
}

.overview-stat-card .big {
  font-size: 1.8rem;
}

.overview-stats-wrap {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 1rem;
}

.overview-progress h3 {
  margin: 0 0 .7rem;
}

.progress-row {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.progress-track {
  flex: 1;
  height: 18px;
  border-radius: 999px;
  background: #222432;
  border: 1px solid #ffffff1d;
  overflow: hidden;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8030ff, #8e4cff, #6156ff);
  box-shadow: 0 6px 26px #7d39ff55;
}

.overview-warning {
  margin-top: .85rem;
  border: 1px solid #ffffff20;
  border-radius: 13px;
  padding: .8rem;
  background: #171a24b8;
}

.overview-warning strong {
  display: block;
  margin-bottom: .25rem;
}

.overview-warning p {
  margin: 0;
}

.overview-checks {
  margin-top: .75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}

.overview-checks span {
  border-radius: 999px;
  border: 1px solid #ffffff1f;
  padding: .45rem .66rem;
  background: #111420;
  color: #c8d1ef;
  font-size: .92rem;
}

.overview-checks span.done {
  border-color: #4ccf7b66;
  background: #10231a;
  color: #b5ffd1;
}

.overview-side {
  display: grid;
  gap: .75rem;
}

.overview-side-block {
  border: 1px solid #ffffff1f;
  border-radius: 13px;
  background: #111521d4;
  padding: .8rem;
  display: grid;
  gap: .48rem;
}

.overview-side-block h3 {
  margin: 0;
}

.overview-side-block .btn-secondary.small {
  border-radius: 10px;
}
.settings-row-btn {
  width: 100%;
  border: 1px solid #ffffff1f;
  border-radius: 11px;
  background: #0e121b;
  color: #e8edff;
  padding: .62rem .68rem;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
.settings-row-btn span {
  color: #aeb7d8;
  font-size: .9rem;
}
.settings-row-btn strong {
  color: #f1f4ff;
  font-size: .95rem;
}
.masked-email {
  letter-spacing: .06em;
}

.discord-connect-form {
  display: grid;
  gap: .45rem;
}

.discord-connect-form input {
  border-radius: 10px;
}

.discord-connect-btn {
  border-radius: 12px;
  border: 1px solid #6f79ff66;
  background: linear-gradient(95deg, #3e4fff, #5f6eff);
  color: #f2f5ff;
  font-weight: 700;
  padding: .62rem .85rem;
}

.discord-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 260;
}

.discord-modal-wrap[hidden] {
  display: none !important;
}

.discord-modal-backdrop {
  position: absolute;
  inset: 0;
  background: #03050ac7;
}

.discord-modal {
  position: relative;
  width: min(390px, calc(100vw - 2rem));
  margin: clamp(2rem, 22vh, 12rem) auto 0;
  border-radius: 16px;
  border: 1px solid #ffffff22;
  background: linear-gradient(160deg, #141922f2, #10151ff3);
  box-shadow: 0 24px 58px #000c;
  padding: 1rem;
}

.discord-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .7rem;
}

.discord-modal-head h3 {
  margin: 0;
}

.discord-modal-form {
  display: grid;
  gap: .8rem;
}

.discord-oauth-btn {
  border-radius: 14px;
  border: 1px solid #8295ff70;
  background: linear-gradient(95deg, #3e4fff, #5c69ff);
  color: #f3f5ff;
  font-weight: 800;
  padding: .78rem .95rem;
}

.discord-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #d6defd;
}

.settings-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 280;
}

.settings-modal-wrap[hidden] {
  display: none !important;
}

.settings-modal-backdrop {
  position: absolute;
  inset: 0;
  background: #03050ac7;
}

.settings-modal {
  position: relative;
  width: min(520px, calc(100vw - 2rem));
  margin: clamp(2rem, 16vh, 8rem) auto 0;
  border-radius: 16px;
  border: 1px solid #ffffff22;
  background: linear-gradient(160deg, #141922f2, #10151ff3);
  box-shadow: 0 24px 58px #000c;
  padding: 1rem;
  display: grid;
  gap: .7rem;
}

.settings-modal[hidden] {
  display: none !important;
}

.settings-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-modal-head h3 {
  margin: 0;
}

.settings-modal-form {
  display: grid;
  gap: .7rem;
}

.discord-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 6px;
}

.overview-analytics {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 1rem;
}

.analytics-donut-card h3,
.analytics-line-card h3 {
  margin: 0 0 .85rem;
}

.analytics-donut-card,
.analytics-line-card {
  background:
    radial-gradient(circle at 90% 0%, #9a61ff14, transparent 38%),
    linear-gradient(165deg, #121527dc, #101322d8 55%, #0e1120d0);
  border-color: #ffffff24;
}

.fake-donut {
  width: 220px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  margin: 0 auto 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle, #121521 46%, transparent 47%),
    conic-gradient(from 120deg, #9863dd, #8450ce, #a682e2);
  border: 1px solid #ffffff20;
}

.fake-donut span {
  color: #aeb8de;
  font-size: .95rem;
  display: block;
  margin: 0;
}

.fake-donut strong {
  font-size: 1.1rem;
  display: block;
  margin: .28rem 0 0;
  line-height: 1.1;
}

.analytics-legend {
  display: grid;
  grid-template-columns: 14px 1fr 14px 1fr 14px 1fr;
  gap: .45rem .35rem;
  align-items: center;
  margin: 0 auto .65rem;
  max-width: 260px;
  color: #bec8ea;
  font-size: .9rem;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid #ffffff33;
}

.legend-dot.desktop { background: #9f70eb; }
.legend-dot.mobile { background: #af86f1; }
.legend-dot.tablet { background: #c8a9ff; }

.analytics-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .55rem;
}

.analytics-title-row h3 {
  margin-bottom: 0;
}

.analytics-metrics {
  display: flex;
  gap: .5rem;
}

.analytics-metrics span {
  display: grid;
  gap: .12rem;
  padding: .35rem .55rem;
  border: 1px solid #ffffff24;
  border-radius: 10px;
  background: #141a2cb3;
  min-width: 68px;
}

.analytics-metrics small {
  color: #aab5db;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.analytics-metrics strong {
  font-size: .92rem;
}

.mini-chart-shell {
  position: relative;
  height: 220px;
  border-radius: 16px;
  border: 1px solid #ffffff20;
  background: linear-gradient(180deg, #0f1322, #0b0f1a);
  padding: .75rem .75rem 1.9rem;
  overflow: hidden;
}

.mini-chart-grid {
  position: absolute;
  inset: .75rem .75rem 1.9rem;
  border-radius: 12px;
  background:
    linear-gradient(to top, transparent 0, transparent calc(25% - 1px), #ffffff10 calc(25% - 1px), #ffffff10 25%, transparent 25%, transparent calc(50% - 1px), #ffffff10 calc(50% - 1px), #ffffff10 50%, transparent 50%, transparent calc(75% - 1px), #ffffff10 calc(75% - 1px), #ffffff10 75%, transparent 75%),
    linear-gradient(to right, #ffffff08 1px, transparent 1px);
  background-size: 100% 100%, calc(100% / 7) 100%;
  pointer-events: none;
}

.mini-chart {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: end;
  gap: .45rem;
  height: 100%;
  position: relative;
  z-index: 2;
}

.mini-bar {
  position: relative;
  border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, #bc8bff, #9056e9 58%, #7440ce);
  min-height: 8px;
  box-shadow: 0 8px 24px #7e4dda66;
}

.mini-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid #ffffff24;
  pointer-events: none;
}

.mini-bar em {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  font-style: normal;
  font-size: .75rem;
  color: #9fadd7;
}
.username-with-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.username-with-badge.glow-off,
.profile-badge-row.glow-off,
.profile-links.glow-off {
  filter: none !important;
  text-shadow: none !important;
}

.username-with-badge.glow-on > span:first-child {
  text-shadow: 0 0 18px color-mix(in oklab, var(--accent, #9e54ff) 75%, white 25%), 0 0 34px color-mix(in oklab, var(--accent, #9e54ff) 65%, transparent 35%);
}

.username-fx-typewriter span:first-child {
  border-right: 2px solid currentColor;
  padding-right: .12em;
  animation: fx-caret 1s steps(1, end) infinite;
}

.username-fx-rainbow span:first-child {
  background: linear-gradient(90deg, #ff4a77, #ffd260, #51e082, #62c4ff, #c37eff, #ff4a77);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fx-rainbow-slide 3.2s linear infinite;
}

.username-fx-glitch span:first-child {
  text-shadow: 1px 0 #ff4db1, -1px 0 #54e3ff;
  animation: fx-glitch-jitter 1.3s steps(2, end) infinite;
}

.username-fx-shuffle span:first-child {
  animation: fx-shuffle-pop .9s steps(2, end) infinite;
}

.username-fx-blue-spark span:first-child { text-shadow: 0 0 9px #6ea2ff, 0 0 18px #6ea2ff7a; }
.username-fx-green-spark span:first-child { text-shadow: 0 0 9px #6effac, 0 0 18px #6effac78; }
.username-fx-pink-spark span:first-child { text-shadow: 0 0 9px #ff7ccd, 0 0 18px #ff7ccd7d; }
.username-fx-red-spark span:first-child { text-shadow: 0 0 9px #ff6c6c, 0 0 18px #ff6c6c80; }
.username-fx-white-spark span:first-child { text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff6e; }
.username-fx-yellow-spark span:first-child { text-shadow: 0 0 9px #ffe66e, 0 0 18px #ffe66e78; }

.premium-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: .16rem .55rem;
  border-radius: 999px;
  border: 1px solid #c487ff8a;
  background: linear-gradient(135deg, #9e54ff, #6f35db);
  color: #f8ecff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 1px 8px #4e1f8f;
  box-shadow: 0 0 0 1px #ffffff22 inset, 0 8px 18px #6f36d270;
}

.ceo-badge {
  background: linear-gradient(135deg, #d2a2ff, #8f3dff);
  border-color: #e6c5ffb0;
  color: #1f1036;
  text-shadow: none;
  box-shadow: 0 0 0 1px #ffffff38 inset, 0 10px 22px #a14dff8a;
}

.admin-badge {
  background: linear-gradient(135deg, #8ec8ff, #5a7dff);
  border-color: #b6d8ffb8;
  color: #071935;
  text-shadow: none;
  box-shadow: 0 0 0 1px #ffffff2f inset, 0 10px 20px #4b80ff86;
}

.badges-page {
  background:
    radial-gradient(circle at 92% 0%, #bf8dff2a, transparent 34%),
    radial-gradient(circle at 0% 100%, #52a4ff18, transparent 38%),
    linear-gradient(160deg, #13182cdc, #0f1426d8);
  border-color: #b98fff3f;
  box-shadow: inset 0 1px 0 #ffffff1c, 0 20px 48px #0007;
}

.badges-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: .85rem;
}

.badges-head h2 {
  margin: 0;
  font-size: 1.55rem;
  letter-spacing: .01em;
}

.badge-filter {
  border-radius: 999px;
  border: 1px solid #c89bff5e;
  background: linear-gradient(120deg, #2f2145, #232743);
  color: #e6d8ff;
  padding: .36rem .72rem;
  font-size: .82rem;
  font-weight: 700;
  box-shadow: 0 8px 20px #743ee632;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}

.badge-card {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: .7rem;
  border-radius: 16px;
  border: 1px solid #ffffff24;
  background:
    radial-gradient(circle at 88% 0%, #9b6aff18, transparent 35%),
    linear-gradient(140deg, #131a2a, #0f1422);
  padding: .78rem;
  transition: border-color .16s ease, transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.badge-card:hover {
  border-color: #bf93ff95;
  transform: translateY(-2px);
  background:
    radial-gradient(circle at 88% 0%, #ad78ff2a, transparent 38%),
    linear-gradient(140deg, #172033, #12182a);
  box-shadow: 0 14px 30px #6d3fce3d;
}

.badge-card.unlocked {
  border-color: #8f69ffad;
  background:
    radial-gradient(circle at 88% 0%, #c39cff2b, transparent 38%),
    linear-gradient(140deg, #201f3f, #191a38);
  box-shadow: inset 0 1px 0 #ffffff28, 0 12px 30px #6f42d34a;
}

.badge-icon {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  border: 1px solid #ffffff2b;
  background: linear-gradient(145deg, #3a2a64, #251f47);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: #eddfff;
  text-shadow: 0 0 12px #7f52ff8c;
  box-shadow: inset 0 1px 0 #ffffff24;
}

.badge-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px #1b4f1f80);
}

.badge-icon img.badge-icon-leaf {
  width: 24px;
  height: 24px;
}

.badge-icon img.badge-icon-pimp {
  width: 34px;
  height: 34px;
}

.badge-icon img.badge-icon-discord {
  width: 22px;
  height: 22px;
}

.badge-card.unlocked .badge-icon {
  background: linear-gradient(145deg, #7c56df, #4f3bc2);
  color: #fbf8ff;
  box-shadow: inset 0 1px 0 #ffffff33, 0 10px 24px #6f43d06a;
}

.badge-body h3 {
  margin: 0;
  font-size: 1.06rem;
}

.badge-body p {
  margin: .16rem 0 0;
  line-height: 1.3;
  color: #9dadcf;
}

.badge-action {
  border-radius: 999px;
  border: 1px solid #ffffff2f;
  background: #1b2135;
  color: #dbe4ff;
  padding: .4rem .66rem;
  font-size: .8rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 #ffffff19;
}

.badge-card.unlocked .badge-action {
  border-color: #7ce3c08a;
  background: linear-gradient(120deg, #184035, #15513f);
  color: #cffff0;
}

.premium-badge[data-badge-tip]::after {
  content: attr(data-badge-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  background: linear-gradient(150deg, #151827f5, #0f1320f7);
  border: 1px solid #ffffff2f;
  color: #f4f7ff;
  border-radius: 10px;
  padding: .35rem .5rem;
  font-size: .72rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 12px 30px #0008;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 90;
}

.premium-badge[data-badge-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.full { grid-column: 1 / -1; }
.grouped-section {
  grid-column: 1 / -1;
  border: 1px solid #d09bff3b;
  border-radius: 18px;
  padding: 1.1rem 1.15rem;
  background:
    radial-gradient(circle at 92% 0%, #a868ff1e, transparent 36%),
    linear-gradient(155deg, #14182adf, #10131ed9);
  box-shadow: inset 0 1px 0 #ffffff12, 0 10px 28px #00000047;
}

.grouped-section > h3 {
  margin: 0 0 .7rem;
  font-size: 1.05rem;
}

.section-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.05rem;
}
.customize-shell {
  background:
    radial-gradient(circle at 88% 8%, #ffffff18, transparent 32%),
    radial-gradient(circle at 8% 95%, #8e4aff2a, transparent 34%),
    linear-gradient(155deg, #1b1430, #131622 46%, #0f131f);
  border-color: #d09bff52;
  box-shadow: inset 0 1px 0 #ffffff17, 0 28px 70px #0000006b;
}

.customize-hero {
  margin-bottom: 1rem;
  border: 1px solid #d4a4ff40;
  border-radius: 16px;
  padding: 1rem;
  background:
    radial-gradient(circle at 100% 0, #d8b8ff21, transparent 36%),
    linear-gradient(140deg, #2b1a43b8, #1a1d2ca6);
  box-shadow: inset 0 1px 0 #ffffff20;
}

.customize-hero h2 {
  margin: 0 0 .25rem;
  font-size: 1.75rem;
}

.customize-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .7rem;
}

.customize-hero-meta span {
  border-radius: 999px;
  border: 1px solid #e0b8ff4f;
  background: #1c17319e;
  color: #efe5ff;
  font-size: .77rem;
  font-weight: 700;
  padding: .3rem .55rem;
}

.customize-form {
  gap: 1.15rem;
}

.customize-form > .grouped-section:not(.premium-group) {
  margin-bottom: .7rem;
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .7rem;
  margin-bottom: .72rem;
}

.section-head h3 {
  margin: 0;
  font-size: 1.08rem;
}

.section-head small {
  color: #aab3d4;
  font-size: .8rem;
}

.field-card {
  position: relative;
  z-index: 1;
  border: 1px solid #ffffff2c;
  border-radius: 15px;
  padding: .9rem;
  background: linear-gradient(150deg, #101420d8, #0f121bd1);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
  box-shadow: inset 0 1px 0 #ffffff11;
}

.field-card.open-popover {
  z-index: 60;
}

.field-card:hover {
  border-color: #cd95ff8d;
  transform: translateY(-1px);
  background: linear-gradient(150deg, #151d2fe5, #111724de);
  box-shadow: inset 0 1px 0 #ffffff19, 0 14px 30px #0000004a;
}

.field-title {
  font-weight: 700;
  color: #d8def7;
  margin-bottom: .35rem;
}

.color-pill {
  position: relative;
  display: grid;
  grid-template-columns: 18px 1fr 30px;
  align-items: center;
  gap: .7rem;
  padding: .62rem .72rem;
  border: 1px solid #ffffff1b;
  border-radius: 999px;
  background: #06080f;
  box-shadow: inset 0 1px 0 #ffffff14;
}

.color-native {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.color-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #ffffff40;
  box-shadow: inset 0 0 0 1px #0008;
}

.color-pill input[type="text"] {
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.color-pill input[type="text"]:focus {
  outline: none;
}

.color-pick-btn {
  border: 0;
  background: transparent;
  padding: 0;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #d3daff;
}

.color-pick-btn svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.color-popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  left: 0;
  width: 250px;
  border-radius: 20px;
  border: 1px solid #ffffff22;
  background: linear-gradient(160deg, #101626f2, #0a0f1cf4);
  box-shadow: 0 20px 50px #000a, inset 0 1px 0 #ffffff1a;
  backdrop-filter: blur(10px);
  padding: .8rem;
  display: grid;
  gap: .55rem;
  transform: translateY(4px) scale(.98);
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
}

.color-popover[hidden] {
  display: none !important;
}

.color-pill.open .color-popover {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.color-popover-header {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.color-popover-header span {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #ffffff4a;
}

.sv-picker {
  position: relative;
  height: 120px;
  border-radius: 14px;
  border: 1px solid #ffffff26;
  overflow: hidden;
  cursor: crosshair;
}

.sv-picker::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.sv-picker::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.sv-cursor {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px #0009;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.hue-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  border-radius: 999px;
  border: 1px solid #ffffff2a;
  background: linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  padding: 0;
}

.hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #111827;
}

.color-hex {
  border-radius: 999px;
  border: 1px solid #ffffff2b;
  background: #05080f;
  padding: .5rem .8rem;
}

.color-rgb-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}

.color-rgb-row label {
  font-size: .72rem;
  color: #b9c4e8;
  font-weight: 700;
}

.color-rgb-row input {
  margin-top: .2rem;
  border-radius: 999px;
  border: 1px solid #ffffff2e;
  background: #04070e;
  text-align: center;
  padding: .45rem .3rem;
}

.gradient-builder {
  display: grid;
  gap: .55rem;
}

.gradient-toggle-row {
  display: flex;
  justify-content: flex-start;
}

.gradient-preview {
  height: 42px;
  border-radius: 999px;
  border: 1px solid #ffffff2a;
  box-shadow: inset 0 1px 0 #ffffff1a, 0 8px 20px #0006;
}

.gradient-stops {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}

.gradient-stop-pill {
  min-height: 44px;
  padding: .55rem .68rem;
}

.gradient-stop-pill .color-popover {
  width: 260px;
}

input[data-gradient-display] {
  border-radius: 999px;
  font-family: "JetBrains Mono", monospace;
  font-size: .92rem;
}

.assets-card h3 {
  margin: 0 0 .82rem;
}

.assets-card {
  padding: 1.15rem !important;
  margin-bottom: .95rem;
}

.assets-card .section-head {
  margin-bottom: 1rem;
}

.asset-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .9rem;
  margin-top: .25rem;
}

.asset-tile {
  border-radius: 12px;
  border: 1px solid #ffffff1f;
  background: #080b13;
  padding: 1rem;
  text-align: left;
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: .58rem;
}

.asset-preview-wrap {
  width: 100%;
  height: 72px;
  border-radius: 10px;
  border: 1px dashed #ffffff26;
  background: linear-gradient(145deg, #0f1422, #0b0f19);
  display: none;
  overflow: hidden;
}

.asset-preview-wrap.has-preview {
  display: block;
}

.asset-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-tile strong {
  font-size: 1.05rem;
}

.asset-tile span {
  color: #9ea8cb;
  font-size: .95rem;
  line-height: 1.3;
}
.asset-tile:hover {
  border-color: #c993ff83;
  background: linear-gradient(145deg, #12192a, #101622);
  box-shadow: 0 12px 26px #00000055;
}

.asset-hidden {
  display: none;
}

.effects-select {
  max-height: 210px;
}

.glow-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
}

.glow-toggle-btn {
  border: 1px solid #2e7f4f8b;
  border-radius: 12px;
  background: linear-gradient(145deg, #123622, #102f1e);
  color: #d8ffe6;
  padding: .55rem .62rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, filter .16s ease;
}

.glow-toggle-btn:hover {
  transform: translateY(-1px);
  border-color: #58b37fb0;
}

.glow-toggle-btn.active {
  border-color: #65e29ba6;
  box-shadow: 0 0 0 1px #ffffff1f inset, 0 0 20px #2ddc8c45;
}

.glow-toggle-btn:not(.active) {
  background: linear-gradient(145deg, #1e2736, #181f2c);
  border-color: #3e4a6582;
  color: #b8c3df;
}

.username-fx-open {
  margin-top: .15rem;
}

.username-effects-modal {
  width: min(560px, calc(100vw - 2rem));
}

.username-effects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  max-height: 390px;
  overflow: auto;
  padding-right: .2rem;
}

.username-fx-card {
  position: relative;
  border: 1px solid #ffffff1e;
  border-radius: 12px;
  background: #141821;
  color: #f2f4ff;
  padding: .65rem .6rem;
  text-align: left;
  display: grid;
  gap: .22rem;
  min-height: 74px;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}

.username-fx-card:hover {
  transform: translateY(-1px);
  border-color: #b786ff8c;
  background: #1a1f2c;
}

.username-fx-card.active {
  border-color: #b97bff;
  box-shadow: 0 0 0 1px #ffffff2a inset, 0 0 20px #8c4dff40;
  background: linear-gradient(145deg, #221534, #151a28);
}

.username-fx-card.locked {
  opacity: .56;
  cursor: not-allowed;
}

.username-fx-card strong {
  font-size: 1rem;
}

.username-fx-card small {
  color: #b8c3e2;
  font-size: .84rem;
}

.username-fx-lock {
  position: absolute;
  top: 6px;
  right: 7px;
  font-size: .78rem;
}

.inline-form { display: grid; grid-template-columns: 200px 1fr auto; gap: .7rem; margin-bottom: 1rem; }
.links-builder {
  display: grid;
  gap: .85rem;
  margin-bottom: 1rem;
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: .55rem;
}

.social-option {
  cursor: pointer;
  border: 0;
  padding: 0;
  background: transparent;
}

.social-option-inner {
  height: 52px;
  border-radius: 14px;
  border: 1px solid #ffffff1e;
  background: #0c0f17;
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.custom-url-option {
  grid-column: span 4;
}

.custom-url-option .social-option-inner {
  justify-content: flex-start;
  padding: 0 .85rem;
}

.custom-url-content {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.custom-url-content strong {
  display: block;
  font-size: 1.06rem;
  line-height: 1.15;
}

.custom-url-content small {
  display: block;
  color: #9ba4bf;
  font-size: .88rem;
  line-height: 1.2;
}

.social-option:hover .social-option-inner {
  transform: translateY(-1px);
  border-color: #a97bff66;
  background: #121625;
}

.social-option.active .social-option-inner {
  border-color: #b98fff9a;
  box-shadow: 0 0 0 1px #ffffff20 inset, 0 0 18px #8a46ff4d;
  background: linear-gradient(145deg, #1b1330, #121827);
}

.social-option-inner img {
  width: 24px;
  height: 24px;
}

.social-fallback {
  font-size: 1.2rem;
  line-height: 1;
}

.social-fallback-letter {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #ffffff2a;
  background: #171b24;
  color: #d7def6;
  font-size: .85rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.links-builder .inline-form {
  grid-template-columns: 1fr auto;
  margin-bottom: 0;
}

.social-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 220;
}

.social-modal-backdrop {
  position: absolute;
  inset: 0;
  background: #05070dcf;
  backdrop-filter: blur(2px);
}

.social-modal {
  position: relative;
  width: min(438px, calc(100vw - 2rem));
  margin: clamp(2rem, 12vh, 6rem) auto 0;
  border-radius: 17px;
  border: 1px solid #ffffff16;
  background: linear-gradient(180deg, #111318fa, #0c0e13fa);
  box-shadow: 0 28px 70px #000d, inset 0 1px 0 #ffffff0e;
  padding: 1.02rem 1rem;
  display: grid;
  gap: .7rem;
  font-family: "Manrope", "Segoe UI", sans-serif;
}

.social-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.social-modal-head h3 {
  margin: 0;
  font-size: 1.65rem;
  letter-spacing: 0;
  font-weight: 800;
}

.social-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #c7ccd9;
  font-size: 1.42rem;
  line-height: 1;
  padding: 0;
}

.social-close:hover {
  background: #1b1f2b;
  color: #f0f4ff;
}

.social-mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .3rem;
  border: 1px solid #ffffff1a;
  border-radius: 999px;
  background: #1a1d23;
  padding: .22rem;
}

.social-mode-toggle button {
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: #bbc2d7;
  padding: .42rem .55rem;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

.social-mode-toggle button.active {
  background: #2a2d34;
  border-color: #ffffff1d;
  color: #f6f8ff;
  box-shadow: inset 0 1px 0 #ffffff12;
}

.social-mode-label {
  margin: .1rem 0 0;
  color: #d7dbe6;
  font-size: .98rem;
  font-weight: 650;
}

.mode-help-dot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: .2rem;
  border-radius: 999px;
  border: 1px solid #ffffff2b;
  color: #c7cde0;
  font-size: .72rem;
  cursor: help;
}

.mode-help-pop {
  position: absolute;
  left: -8px;
  bottom: calc(100% + 10px);
  width: min(360px, 78vw);
  border-radius: 16px;
  border: 1px solid #ffffff1a;
  background: linear-gradient(170deg, #101218f8, #0b0d12fa);
  box-shadow: 0 22px 54px #000c;
  color: #e4e8f5;
  padding: .9rem .95rem;
  font-size: .96rem;
  line-height: 1.42;
  white-space: normal;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
}

.mode-help-pop strong {
  color: #f4f7ff;
}

.mode-help-dot:hover .mode-help-pop,
.mode-help-dot:focus .mode-help-pop,
.mode-help-dot:focus-visible .mode-help-pop {
  opacity: 1;
  transform: translateY(0);
}

.mode-icon {
  font-size: .95rem;
  opacity: .94;
}

.social-input-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: .55rem;
  align-items: center;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  background: #080b10;
  padding: .42rem .6rem;
}

.social-input-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}

.social-input-icon img {
  width: 22px;
  height: 22px;
}

.social-input-row input {
  border: 0;
  background: transparent;
  padding: .2rem 0;
  color: #dfe5f3;
  font-size: 1.02rem;
}

.social-input-row input:focus {
  outline: none;
}

.social-input-row input::placeholder {
  color: #5f6679;
}

.social-modal-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .2rem;
}

.social-modal-actions button {
  width: auto;
  border-radius: 11px;
  border: 1px solid #ffffff1e;
  background: linear-gradient(165deg, #252a33, #1d2129);
  color: #f2f5ff;
  padding: .45rem .92rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 #ffffff1c;
}

.social-modal-actions button:hover {
  background: linear-gradient(165deg, #2d313b, #232731);
}

.social-modal-actions .muted {
  font-size: 1.02rem;
  color: #9ca4ba;
}

.audio-manager-modal {
  width: min(700px, calc(100vw - 2rem));
}

.audio-manager-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .8rem;
  margin: 0;
}

.audio-track-list {
  display: grid;
  gap: .55rem;
  max-height: 260px;
  overflow: auto;
  padding-right: .2rem;
}

.audio-track-item {
  border: 1px solid #ffffff1f;
  border-radius: 12px;
  background: #0b0f18;
  padding: .62rem;
  display: grid;
  gap: .5rem;
}

.audio-track-item.active {
  border-color: #5fd88f88;
  box-shadow: inset 0 0 0 1px #5fd88f44;
}

.audio-track-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
}

.audio-pill {
  border-radius: 999px;
  border: 1px solid #2b9858;
  background: #1a5f35;
  color: #d8ffe9;
  font-size: .72rem;
  padding: .16rem .5rem;
  font-weight: 700;
}

.audio-track-actions {
  display: flex;
  gap: .45rem;
  align-items: center;
  flex-wrap: wrap;
}

.audio-inline-form {
  display: inline-flex;
  gap: .45rem;
  align-items: center;
}

.audio-inline-form input {
  width: 180px;
  border-radius: 10px;
  border: 1px solid #ffffff24;
  background: #060910;
  color: #eef2ff;
  padding: .38rem .55rem;
}

.audio-settings-form {
  margin-top: .2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}

.audio-add-form {
  margin-top: .35rem;
  display: grid;
  gap: .65rem;
}

.audio-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .72rem;
}

#custom-css-field textarea {
  margin-top: .45rem;
  min-height: 180px;
}

#custom-css-field {
  margin-top: .92rem;
  margin-bottom: .95rem;
  padding: 1.1rem 1.15rem;
}

.premium-group {
  margin-top: .08rem;
}

.premium-group .section-head {
  margin-bottom: .7rem;
}

.customize-save-btn {
  margin-top: .2rem;
}

.links-list { display: grid; gap: .75rem; }
.link-item {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  align-items: center;
  background: #0f1119;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: .8rem;
}
.link-item p { margin: .25rem 0 0; word-break: break-all; }

.check {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
}
.check input { width: auto; }
.panel-transparent-toggle {
  margin-top: .7rem;
  width: fit-content;
  background: #0c1223;
  border: 1px solid #ffffff22;
  border-radius: 999px;
  padding: .35rem .7rem;
}
.panel-switch-line {
  margin-top: .7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  font-weight: 700;
  color: #eaf0ff;
}
.panel-switch {
  position: relative;
  width: 56px;
  height: 32px;
  display: inline-flex;
  align-items: center;
}
.panel-switch input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.panel-switch-slider {
  width: 56px;
  height: 32px;
  border-radius: 999px;
  background: #151a24;
  border: 1px solid #ffffff1c;
  box-shadow: inset 0 0 0 1px #0006;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  position: relative;
}
.panel-switch-slider::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #a2a8b8;
  box-shadow: 0 3px 10px #0007;
  transition: transform .2s ease, background .2s ease;
}
.panel-switch input:checked + .panel-switch-slider {
  background: linear-gradient(135deg, #9046d7, #b86bff);
  border-color: #d7b2ff8a;
  box-shadow: 0 0 0 1px #0004, 0 0 20px #9c55ff54;
}
.panel-switch input:checked + .panel-switch-slider::before {
  transform: translateX(24px);
  background: #f8f5ff;
}
.panel-opacity-row {
  margin-top: .65rem;
  display: grid;
  gap: .45rem;
  color: #dfe6fb;
  font-weight: 600;
}
.panel-opacity-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .6rem;
}
.panel-opacity-controls input[type="range"] {
  width: 100%;
  accent-color: #9f5cff;
}
.panel-opacity-controls output {
  min-width: 48px;
  text-align: right;
  color: #f5e7ff;
  font-weight: 700;
}

.customize-save-btn {
  border-radius: 14px;
  border: 1px solid #c28dff8f;
  background: linear-gradient(95deg, #8f4fff, #6f4bff 52%, #556dff);
  color: #f7f3ff;
  font-weight: 800;
  letter-spacing: .01em;
  padding: .92rem 1rem;
  box-shadow: 0 18px 40px #5f3ef36b, inset 0 1px 0 #ffffff2d;
}

.customize-save-btn:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
}

.admin-wrap { max-width: 1200px; margin: 0 auto; padding: 1rem; display: grid; gap: 1rem; }
.admin-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.admin-main-grid {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.admin-right {
  display: grid;
  gap: 1rem;
}

.admin-left-panel h2 {
  margin: 0;
}

.admin-left-list {
  margin-top: .65rem;
  display: grid;
  gap: .6rem;
}

.panel-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
}

.panel-scroll-controls {
  display: inline-flex;
  gap: .32rem;
}

.panel-scroll-controls .btn-secondary.small {
  min-width: 36px;
  padding: .32rem .45rem;
  line-height: 1;
}

.admin-scroll-pane {
  max-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #bfc8dc #121726;
  scrollbar-gutter: stable;
  border-radius: 12px;
}

.admin-scroll-pane::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.admin-scroll-pane::-webkit-scrollbar-track {
  background: linear-gradient(180deg, #141a2a, #0f1422);
  border-radius: 999px;
  border: 1px solid #ffffff14;
}

.admin-scroll-pane::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d7deea, #a7b1c8);
  border-radius: 999px;
  border: 2px solid #121726;
  box-shadow: inset 0 1px 0 #ffffffb8, 0 0 10px #7f8cb340;
}

.admin-scroll-pane::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #e6ebf5, #b8c2d8);
}

.admin-scroll-pane::-webkit-scrollbar-corner {
  background: #121726;
}

.admin-scroll-pane::-webkit-scrollbar-button:single-button {
  display: block;
  height: 14px;
  background: #1a2236;
  border: 1px solid #ffffff1f;
}

.admin-scroll-pane::-webkit-scrollbar-button:single-button:vertical:decrement {
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(135deg, transparent 50%, #9ca8c7 50%) center 55% / 6px 6px no-repeat,
    #1a2236;
}

.admin-scroll-pane::-webkit-scrollbar-button:single-button:vertical:increment {
  border-radius: 0 0 8px 8px;
  background:
    linear-gradient(315deg, transparent 50%, #9ca8c7 50%) center 45% / 6px 6px no-repeat,
    #1a2236;
}

.admin-user-badge-row {
  border: 1px solid #ffffff20;
  border-radius: 12px;
  background: #121729;
  padding: .55rem;
  display: grid;
  gap: .45rem;
}

.admin-user-badge-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.admin-user-badge-head strong {
  font-size: .95rem;
}

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: .65rem;
  border-bottom: 1px solid var(--stroke);
}

.admin-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.admin-actions form {
  margin: 0;
  display: inline-flex;
}

.admin-actions .btn-secondary.small,
.admin-actions .btn-danger.small {
  white-space: nowrap;
  min-width: 0;
  justify-content: center;
  padding: .38rem .62rem;
  font-size: .92rem;
  line-height: 1;
}

.admin-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.admin-badge-pill {
  border: 1px solid #ffffff2a;
  background: #171c2b;
  color: #dbe2ff;
  border-radius: 999px;
  padding: .2rem .5rem;
  font-size: .74rem;
  font-family: "JetBrains Mono", monospace;
}

.admin-badge-form {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.admin-badge-form select {
  width: auto;
  min-width: 120px;
  padding: .36rem .45rem;
  border-radius: 10px;
  font-size: .8rem;
  border: 1px solid #ffffff2b;
  background: #121727;
}

.ip-toggle-btn {
  width: auto;
  border-radius: 999px;
  border: 1px solid #ffffff2a;
  background: #101522;
  color: #dbe2ff;
  padding: .3rem .55rem;
  font-size: .82rem;
  font-family: "JetBrains Mono", monospace;
}

.ip-toggle-btn.ip-blurred {
  filter: blur(4px);
  opacity: .95;
}

.profile-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 1rem;
  background:
    radial-gradient(circle at 15% 10%, #73f8ff29, transparent 30%),
    radial-gradient(circle at 88% 82%, #f2459033, transparent 35%),
    var(--bg, linear-gradient(140deg, #08090f, #11172a));
  color: var(--text, #fff);
  font-family: var(--font, sans-serif);
}

.enter-gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #00000066, #00000059);
  backdrop-filter: blur(4px);
  transition: opacity .26s ease, visibility .26s ease;
}

.enter-gate.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.enter-gate-btn {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: clamp(1.5rem, 2.8vw, 2.8rem);
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  text-shadow: 0 0 18px #ffffff2c;
}

.enter-gate-btn:hover {
  color: #f3e4ff;
  text-shadow: 0 0 24px #b76dff7a;
}

.music-hud {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 20;
  width: min(340px, calc(100vw - 28px));
  border: 1px solid #ffffff2d;
  border-radius: 12px;
  background: linear-gradient(160deg, #0f131ee6, #0b0f18e6);
  backdrop-filter: blur(8px);
  box-shadow: 0 14px 36px #0008;
  padding: .52rem .58rem .62rem;
  display: grid;
  gap: .36rem;
}

.music-hud-title {
  font-size: .86rem;
  font-weight: 700;
  color: #f7f4ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music-hud-time-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  color: #d5dcf5;
}

.music-hud-time-row input[type="range"] {
  width: 100%;
  accent-color: #fff;
  height: 3px;
}

.music-hud-controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .32rem;
}

.hud-btn {
  border: 1px solid #ffffff29;
  border-radius: 10px;
  background: #141a2ab3;
  color: #f8f8ff;
  height: 28px;
  font-size: .92rem;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0;
}

.hud-btn.play {
  font-size: 1rem;
}

.hud-btn.active {
  border-color: #d5adff8f;
  box-shadow: 0 0 14px #915eff5e;
  color: #f2dcff;
}

.profile-page.gradient-off {
  background: var(--bg, #0b1020);
}

.profile-bg-fx {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.bgfx-none {
  display: none;
}

.bgfx-aurora {
  background:
    radial-gradient(60% 45% at 12% 20%, #58ffe730, transparent 65%),
    radial-gradient(52% 40% at 84% 18%, #7b67ff2e, transparent 66%),
    radial-gradient(58% 42% at 50% 88%, #ff4ed229, transparent 70%);
  animation: bg-aurora-shift 12s ease-in-out infinite alternate;
}

.bgfx-snowflakes {
  background-image:
    radial-gradient(circle at 20% 30%, #ffffff7a 0 2px, transparent 2px),
    radial-gradient(circle at 50% 60%, #d6e7ff6f 0 2px, transparent 2px),
    radial-gradient(circle at 80% 20%, #ffffff80 0 2px, transparent 2px);
  background-size: 180px 180px, 220px 220px, 260px 260px;
  animation: bg-snow-fall 16s linear infinite;
}

.bgfx-rain {
  background:
    repeating-linear-gradient(170deg, transparent 0 8px, #a7d8ff24 8px 11px, transparent 11px 20px);
  background-size: 180px 180px;
  animation: bg-rain-fall 1.2s linear infinite;
}

.bgfx-stars {
  background-image:
    radial-gradient(circle at 15% 20%, #ffffffc9 0 1px, transparent 1px),
    radial-gradient(circle at 35% 45%, #c8d7ffbd 0 1px, transparent 1px),
    radial-gradient(circle at 70% 30%, #ffffffc9 0 1.5px, transparent 1.5px),
    radial-gradient(circle at 85% 68%, #d6c3ffcd 0 1px, transparent 1px);
  background-size: 170px 170px, 210px 210px, 250px 250px, 290px 290px;
  animation: bg-stars-twinkle 4.2s ease-in-out infinite;
}

.bgfx-waves {
  background:
    radial-gradient(130% 85% at 50% 100%, #71beff24, transparent 70%),
    radial-gradient(120% 75% at 50% 110%, #b66dff22, transparent 72%);
  animation: bg-waves-flow 8s ease-in-out infinite;
}

.bgfx-dither {
  background-image: repeating-radial-gradient(circle, #ffffff12 0 1px, transparent 1px 4px);
  background-size: 7px 7px;
}

.bgfx-plasma {
  background:
    radial-gradient(circle at 20% 25%, #ff5fd24a, transparent 45%),
    radial-gradient(circle at 80% 35%, #7b85ff4d, transparent 50%),
    radial-gradient(circle at 55% 78%, #4bffe243, transparent 55%);
  animation: bg-aurora-shift 9s ease-in-out infinite alternate;
}

#particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .55;
}

.profile-panel.premium {
  width: min(680px, 95vw);
  position: relative;
  z-index: 2;
  isolation: isolate;
  overflow: hidden;
  padding: 1.5rem 1.3rem 2.2rem;
  text-align: center;
  border-radius: 28px;
  background: transparent;
  border: 1px solid #ffffff2e;
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 90px #000a;
  animation: float-in .7s ease;
}
.profile-panel.premium::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--panel, #0f1420);
  opacity: var(--panel-opacity, 1);
}
.profile-panel.premium.transparent-panel {
  border-color: #ffffff3f;
  backdrop-filter: blur(18px);
}

.glow-on .profile-panel.premium {
  box-shadow: 0 0 60px #8a56ff52, 0 0 120px #4f8cff2b;
}

.pfp {
  width: 108px;
  height: 108px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid var(--accent, #fff);
  box-shadow: 0 0 22px #000a;
  display: block;
  margin: 0 auto .55rem;
}

h1 { margin: .25rem 0 .2rem; font-size: clamp(2rem, 4vw, 2.5rem); }
.profile-views {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  border: 1px solid #ffffff28;
  background: #101526ba;
  color: #e6ecff;
  font-size: .86rem;
  font-weight: 700;
  position: absolute;
  left: 1rem;
  bottom: .85rem;
  z-index: 2;
}

.profile-views .eye {
  font-size: .9rem;
  line-height: 1;
}

.typing-line {
  min-height: 1.6rem;
  margin: 0 0 .1rem;
  font-weight: 800;
  color: var(--accent, #80e2ff);
  text-shadow: 0 0 15px #73f8ff4d;
}
.profile-badge-row {
  margin: .2rem auto .45rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .42rem;
  max-width: 620px;
}

.profile-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  border-radius: 999px;
  border: 1px solid #ffffff2b;
  background: #121a2cbf;
  color: #edf2ff;
  padding: .28rem .56rem;
  font-size: .78rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 #ffffff24;
}

.profile-badge-row.glow-on .profile-badge-pill {
  box-shadow: inset 0 1px 0 #ffffff24, 0 0 16px #8f5cff42, 0 0 30px #5f7cff2e;
}

.profile-badge-pill img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.profile-badge-pill em {
  font-style: normal;
  font-size: .84rem;
}
.bio { max-width: 560px; margin: .35rem auto .55rem; line-height: 1.62; }
.profile-location,
.profile-discord-presence {
  margin: 0 auto .42rem;
  color: #dde6ff;
  opacity: .9;
}

.profile-location {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
}

.profile-location .loc-icon {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid #ffffff24;
  background: linear-gradient(155deg, #0f1420, #0a0f1a);
  box-shadow: inset 0 1px 0 #ffffff12, 0 0 10px #0000004f;
}

.profile-location .loc-icon svg {
  width: 12px;
  height: 12px;
  display: block;
  fill: #cfd8f8;
}
.profile-discord-presence strong {
  color: #9ba6ff;
}
.profile-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: .3rem;
}
.profile-links a {
  text-decoration: none;
  background: #0e121ddc;
  border: 1px solid #ffffff29;
  color: #f7f8ff;
  padding: .45rem .7rem;
  border-radius: 999px;
}

.profile-links.glow-on a {
  box-shadow: 0 0 12px #8f5cff3a, 0 0 24px #5f7cff24;
  border-color: #cba5ff66;
}

.profile-links.glow-on a.profile-link-icon {
  box-shadow: 0 0 14px #9a67ff52, 0 0 26px #6496ff3b;
}
.profile-links a.profile-link-icon {
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #0a0f1ee8;
}
.profile-link-icon img {
  width: 21px;
  height: 21px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(160, 110, 255, 0.35));
}
.profile-link-fallback {
  width: 21px;
  height: 21px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 700;
  color: #f5f3ff;
  background: linear-gradient(135deg, #7e4dff, #b56dff);
}

.ghost-btn {
  max-width: 200px;
  margin: 0 auto;
  background: #11152a;
  border: 1px solid #ffffff38;
  color: #f4f6ff;
}

.theme-midnight { --bg: linear-gradient(140deg, #030509, #0d1120, #0a1b30); }
.theme-sunset { --bg: linear-gradient(130deg, #2e1019, #4b1f37, #7d3f20); }
.theme-matrix { --bg: linear-gradient(130deg, #030a05, #0c1f11, #133a1f); }

@keyframes float-in {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bg-aurora-shift {
  from { transform: translateY(0) scale(1); filter: hue-rotate(0deg); }
  to { transform: translateY(-10px) scale(1.03); filter: hue-rotate(25deg); }
}

@keyframes bg-snow-fall {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 220px, 0 180px, 0 260px; }
}

@keyframes bg-rain-fall {
  from { background-position: 0 0; }
  to { background-position: 0 180px; }
}

@keyframes bg-stars-twinkle {
  0%, 100% { opacity: .55; }
  50% { opacity: .95; }
}

@keyframes bg-waves-flow {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(8px); opacity: .85; }
}

@keyframes fx-rainbow-slide {
  from { background-position: 0 0; }
  to { background-position: 240% 0; }
}

@keyframes fx-caret {
  0%, 49% { border-right-color: currentColor; }
  50%, 100% { border-right-color: transparent; }
}

@keyframes fx-glitch-jitter {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(1px, -1px); }
  40% { transform: translate(-1px, 1px); }
  60% { transform: translate(1px, 1px); }
  80% { transform: translate(-1px, -1px); }
}

@keyframes fx-shuffle-pop {
  0%, 100% { letter-spacing: normal; opacity: 1; }
  50% { letter-spacing: .045em; opacity: .82; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-8px) scale(.98); }
}

@media (max-width: 1000px) {
  .panel-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: static;
    top: auto;
    height: auto;
    align-self: stretch;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--stroke);
  }
  .card-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-layout { grid-template-columns: 1fr; }
  .asset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audio-add-row { grid-template-columns: 1fr; }
  .overview-stats-wrap { grid-template-columns: 1fr; }
  .overview-analytics { grid-template-columns: 1fr; }
  .admin-main-grid { grid-template-columns: 1fr; }
  .premium-options-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .grid-form { grid-template-columns: 1fr; }
  .inline-form { grid-template-columns: 1fr; }
  .links-builder .inline-form { grid-template-columns: 1fr; }
  .card-grid.four { grid-template-columns: 1fr; }
  .asset-grid { grid-template-columns: 1fr; }
  .audio-add-row { grid-template-columns: 1fr; }
  .custom-url-option { grid-column: span 2; }
  .glow-settings-grid { grid-template-columns: 1fr; }
  .username-effects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-checks { grid-template-columns: 1fr; }
  .analytics-title-row { flex-direction: column; }
  .analytics-metrics { width: 100%; }
  .analytics-metrics span { flex: 1; }
  .badges-grid { grid-template-columns: 1fr; }
  .badge-card { grid-template-columns: 34px 1fr; }
  .badge-action { grid-column: 1 / -1; justify-self: start; }
  .admin-main-grid { grid-template-columns: 1fr; }
}