/* bounty site theme: soft lavender, taken from the bounty avatar.
   A near-black night, dusky lavender satin behind it (silk.js), lavender pill
   buttons and Solar icons (solar.js). Loaded after the other stylesheets.
   Variable names such as --pink are kept so every existing rule follows; they hold lavender. */

:root {
  --bg: #060709;
  --bg-2: #080b10;
  --card: rgba(11, 14, 21, .74);
  --card-2: rgba(15, 19, 28, .8);
  --line: rgba(156, 181, 231, .13);
  --line-2: rgba(156, 181, 231, .26);
  --text: #f3f6fc;
  --muted: #b9c3d6;
  --dim: #949dad;

  --pink: #96b0e8;
  --pink-hot: #6c8dd1;
  --pink-soft: #cdd9f4;
  --lilac: #82a3ed;

  /* "teal" is kept as a name so every existing rule follows; it is lavender now. */
  --teal: #a8beec;
  --teal-deep: #344c7e;
  --teal-ink: #0b101a;

  --mono-grad: linear-gradient(100deg, #e3eafa 0%, #96b0e8 50%, #82a3ed 100%);
  --glass: linear-gradient(180deg, rgba(56, 82, 135, .38) 0%, rgba(28, 38, 60, .38) 100%);
  --glass-hi: var(--glass);
  --edge: linear-gradient(180deg, rgba(170, 193, 240, .3), rgba(170, 193, 240, .05));
  --btn: linear-gradient(180deg, #262f42 0%, #181e2c 100%);
  --btn-line: rgba(177, 197, 239, .2);
  --btn-cta: linear-gradient(180deg, #344d81 0%, #23314e 100%);
}

html { background: var(--bg); }
body { background: transparent; color: var(--text); }
::selection { background: rgba(120, 149, 209, .45); color: #fff; }

/* The silk canvas (silk.js) sits behind everything; the old starfield is retired. */
#stars { display: none !important; }
#silk { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; opacity: .45; }
/* Solar icons (assets/solar.js) sit in text like a font icon and take its colour. */
.si { width: 1em; height: 1em; display: inline-block; flex: none; vertical-align: -.125em; }
[data-solar] { display: inline-flex; line-height: 0; }
.badge-ico .si { width: 44px; height: 44px; }
/* Font Awesome icons swapped for Solar: hide the font glyph, show the svg in its place. */
i.si-i::before { content: none !important; display: none !important; }
i.si-i { display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
/* The silk gives the page its glow now, so the old fixed glow blobs are off. iPhone Safari
   colours its status bar and toolbar from fixed elements at the screen edges (ignoring
   blur and opacity), so the blobs were turning its bars lavender and indigo. */
.glow { display: none !important; }
#silk { background-color: var(--bg); }

/* Highlighted words: the avatar's lavender, from its palest highlight to its mid tone. */
:root { --mono-grad: linear-gradient(100deg, #edf2fe 0%, #afc4f5 45%, #829fdb 100%); }
.hl, .hl-x {
  background-image: var(--mono-grad);
  background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: none;
}

/* ------------------------------------------------------------ buttons
   Dark pink glass, and no hover movement at all: no lift, no glow, no scale. */
.btn, .btn:hover, .btn:focus-visible, .btn:active,
.pr-buy, .pr-buy:hover, .tb-cta, .tb-cta:hover {
  transform: none !important;
  transition: none !important;
  animation: none !important;
}
.btn {
  color: #fff !important;
  background: var(--btn) !important;
  border: 1px solid var(--btn-line) !important;
  box-shadow: inset 0 1px 0 rgba(220, 230, 250, .08) !important;
}
.btn:hover { background: var(--btn) !important; box-shadow: inset 0 1px 0 rgba(220, 230, 250, .08) !important; filter: none !important; }
.btn::before, .btn::after { display: none !important; }
.btn i { color: #c4d3f4 !important; }
.btn[data-invite], .pr-plan.best .pr-buy {
  background: var(--btn-cta) !important;
  border-color: rgba(186, 205, 245, .32) !important;
  color: #fff !important;
}
.btn[data-invite] i, .pr-plan.best .pr-buy i { color: #e3eafa !important; }

/* ------------------------------------------------------------ top bar (one floating glass bar) */
.nav-wrap { display: none !important; }
.topbar {
  position: fixed; z-index: 50; top: 18px; left: 50%; transform: translateX(-50%);
  width: min(800px, calc(100% - 32px));
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 8px 22px; border-radius: 24px;
  background: rgba(6, 8, 13, .62);
  border: 1px solid rgba(170, 193, 240, .1);
  backdrop-filter: blur(24px) saturate(1.3); -webkit-backdrop-filter: blur(24px) saturate(1.3);
}
.topbar.scrolled { background: rgba(6, 8, 13, .8); }
.tb-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: #fff; letter-spacing: -.01em; margin-right: auto; }
.tb-brand img { width: 32px; height: 32px; border-radius: 50%; display: block; }
.tb-links { display: flex; align-items: center; gap: 2px; }
.tb-links a { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; border-radius: 32px; font-size: 14px; font-weight: 500; color: #d9dfed; }
.tb-links a:hover, .tb-links a.on { background: rgba(149, 175, 231, .12); color: #fff; }
.tb-cta {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: #fff; background: var(--btn-cta); border: 1px solid rgba(186, 205, 245, .32);
}
.tb-cta i { font-size: 12px; color: #e3eafa; }
.tb-menu { display: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(170, 193, 240, .16); background: rgba(28, 38, 60, .35); color: #fff; font-size: 15px; place-items: center; }
.tb-sheet { display: none; }
@media (max-width: 760px) {
  .tb-links, .tb-cta { display: none; }
  .tb-menu { display: grid; }
  .topbar { padding: 8px 8px 8px 16px; flex-wrap: wrap; }
  .topbar.open { border-radius: 22px; background: rgba(6, 8, 13, .92); }
  .topbar.open .tb-sheet { display: grid; gap: 4px; width: 100%; padding: 10px 6px 6px; border-top: 1px solid rgba(170, 193, 240, .1); margin-top: 6px; animation: tb-in .18s ease both; }
  .tb-sheet a { padding: 12px 14px; border-radius: 14px; font-weight: 600; color: #e2e7f3; }
  .tb-sheet a.on, .tb-sheet a:hover { background: rgba(149, 175, 231, .12); color: #fff; }
  .tb-sheet .tb-sheet-cta { margin-top: 4px; justify-content: center; display: flex; gap: 8px; align-items: center; background: var(--btn-cta); border: 1px solid rgba(186, 205, 245, .32); color: #fff; }
}
@keyframes tb-in { from { opacity: 0; transform: translateY(-6px); } }

/* ------------------------------------------------------------ hero, centred */
.hero.center-hero { display: block; text-align: center; padding: 190px 0 70px; }
.hero.center-hero > div { max-width: 820px; margin: 0 auto; }
.hero.center-hero h1 { font-size: clamp(40px, 6.6vw, 78px); }
.hero.center-hero p.lead { margin-left: auto; margin-right: auto; }
.hero.center-hero .actions { justify-content: center; }
.hero.center-hero .stat-line { text-align: center; }
@media (max-width: 760px) { .hero.center-hero { padding-top: 140px; } }

/* ------------------------------------------------------------ cards */
.card, .tile, .gw-card, .rank-card, .tpanel, .vm-panel, .dash-prev, .pr-plan, .pr-perk, .pr-table, .pr-faq details, .pr-me {
  background-color: var(--card) !important;
  border-color: var(--line) !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.card { box-shadow: inset 0 1px 0 rgba(214, 225, 248, .06), 0 30px 80px -30px rgba(0, 0, 0, .7); }
.badge-ico { background: linear-gradient(145deg, #718dc9, #314f97) !important; color: #fff !important; box-shadow: 0 10px 28px -10px rgba(108, 141, 209, .7) !important; border: 0 !important; }
.badge-ico i { color: #fff !important; }
.section-head p, .card p { color: var(--muted); }
.card h3 { color: #d6e0f6; }

/* The reading progress bar along the top. */
.progress { background: linear-gradient(90deg, #344d81, #96b0e8, #82a3ed); z-index: 60; }

/* ------------------------------------------------------------ server wall: no pills, clickable */
.server {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 10px 26px 10px 6px !important; border-radius: 16px !important; color: inherit;
}
a.server { cursor: pointer; }
a.server:hover b { color: #fff; text-decoration: underline; text-decoration-color: rgba(150, 176, 232, .6); text-underline-offset: 4px; }
.server .av { box-shadow: 0 0 0 2px rgba(150, 176, 232, .35) !important; }
.server em { font-style: normal; color: var(--pink); font-weight: 700; }

/* ------------------------------------------------------------ precision purge: a little Discord channel */
.purge-card { display: flex; flex-direction: column; gap: 18px; }
.pg-chat { position: relative; display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: #0e1118; border: 1px solid var(--line); }
.pg-top { display: flex; align-items: center; gap: 8px; padding: 2px 4px 10px; border-bottom: 1px solid rgba(170, 193, 240, .1); color: #e6eaf4; font-size: 14px; }
.pg-top i { color: var(--dim); font-size: 13px; }
.pg-count { margin-left: auto; color: var(--dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.pg-feed { display: grid; gap: 2px; }
.pg-msg { display: flex; gap: 12px; align-items: flex-start; padding: 7px 8px; border-radius: 10px; max-height: 70px; overflow: hidden;
  transition: background .3s, opacity .45s ease, max-height .5s ease .15s, padding .5s ease .15s, transform .45s ease; }
.pg-msg b { display: block; font-size: 14px; color: #fff; }
.pg-msg b em { font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 5px; margin-left: 4px; border-radius: 4px; background: #5865f2; color: #fff; vertical-align: 2px; }
.pg-msg p { margin: 1px 0 0 !important; font-size: 14px; color: #d6dae4 !important; }
.pg-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: var(--c); }
.pg-ping { background: rgba(88, 101, 242, .3); color: #c9cdfb; border-radius: 4px; padding: 0 3px; }
.pg-msg.flag { background: rgba(136, 167, 232, .12); box-shadow: inset 3px 0 0 #96b0e8; }
.pg-msg.gone { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; transform: translateX(24px); }
.pg-filters { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.pg-filters button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  color: #dee3ee; background: rgba(28, 38, 60, .45); border: 1px solid rgba(170, 193, 240, .14); }
.pg-filters button i { font-size: 12px; color: #aebee0; }
.pg-filters button.on { background: #2e426d; border-color: rgba(186, 205, 245, .4); color: #fff; }
.pg-filters button.on i { color: #e3eafa; }
.pg-input { display: flex; align-items: center; gap: 2px; height: 44px; padding: 0 6px 0 14px; border-radius: 12px; background: #151920; border: 1px solid rgba(170, 193, 240, .1);
  font-family: var(--mono); font-size: 13.5px; color: #e5ebf7; }
.pg-typed:empty::before { content: 'Message #general'; color: #7a8395; font-family: var(--font); }
.pg-caret { width: 2px; height: 18px; background: #96b0e8; margin-left: 1px; animation: pg-blink 1s steps(1) infinite; }
@keyframes pg-blink { 50% { opacity: 0; } }
.pg-run { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; background: #2e426d; color: #fff; border: 0; display: grid; place-items: center; font-size: 13px; }
.pg-toast { position: absolute; left: 50%; bottom: 66px; transform: translate(-50%, 8px); display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px;
  background: #1b2234; border: 1px solid rgba(186, 205, 245, .3); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.pg-toast i { color: #cfdcf8; }
.pg-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Footer. */
footer { border-top-color: var(--line) !important; background: rgba(6, 7, 9, .65); backdrop-filter: blur(10px); }
footer a:hover { color: var(--pink); }

/* Discord look-alike previews keep Discord's own colours; only their frame turns pink. */
.dc, .dc-side { border-color: var(--line) !important; }

/* ------------------------------------------------------------ one button style everywhere
   Dark plum, a thin pink rim, a pink icon, white text. Selected ones turn a
   deeper pink. Nothing moves or glows on hover. */
:root {
  --b-bg: linear-gradient(180deg, #212837 0%, #151a26 100%);
  --b-line: rgba(177, 197, 239, .18);
  --b-icon: #adc1ec;
  --b-on: linear-gradient(180deg, #2b3c60 0%, #212b40 100%);
  --b-on-line: rgba(186, 205, 245, .38);
}
.filters button, .console .toggles button, .pg-filters button, .vm-grid button, .spin-btn, .enter, .pg-run, .tb-menu, .chip, .chips-row span, .pr-manage {
  background: var(--b-bg) !important;
  border: 1px solid var(--b-line) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(220, 230, 250, .07) !important;
  transform: none !important;
  transition: none !important;
  filter: none !important;
}
.filters button, .console .toggles button, .pg-filters button, .vm-grid button, .chip { border-radius: 12px !important; }
.filters button:hover, .console .toggles button:hover, .pg-filters button:hover, .vm-grid button:hover, .vm-grid button:active,
.spin-btn:hover, .enter:hover, .pg-run:hover, .tb-menu:hover, .chip:hover {
  background: var(--b-bg) !important; border-color: var(--b-line) !important; transform: none !important; box-shadow: inset 0 1px 0 rgba(220, 230, 250, .07) !important;
}
.filters button i, .console .toggles button i, .pg-filters button i, .vm-grid button i, .spin-btn i, .enter i, .chip i, .chips-row span i { color: var(--b-icon) !important; }
.filters button span { color: #b9c3d6 !important; }
/* Selected / switched on. */
.filters button.on, .console .toggles button.on, .pg-filters button.on, .vm-grid button.flash, .enter.in, .enter.joined {
  background: var(--b-on) !important; border-color: var(--b-on-line) !important;
}
.filters button.on i, .pg-filters button.on i, .vm-grid button.flash i { color: #e3eafa !important; }
/* The two "main" buttons keep the same shape and look, a touch deeper. */
.btn[data-invite], .tb-cta, .pr-plan.best .pr-buy, .tb-sheet .tb-sheet-cta { background: var(--b-on) !important; border-color: var(--b-on-line) !important; }
.btn:hover, .btn[data-invite]:hover, .tb-cta:hover { filter: none !important; }

/* ------------------------------------------------------------ category icons: flat, no gradient */
.badge-ico {
  background: #1c2333 !important;
  border: 1px solid rgba(177, 197, 239, .22) !important;
  box-shadow: none !important;
  color: var(--b-icon) !important;
}
.badge-ico i { color: var(--b-icon) !important; }
.badge-ico::before, .badge-ico::after { background: none !important; box-shadow: none !important; }
.tile .ico, .step .num, .int .logo {
  background: #1c2333 !important;
  border: 1px solid rgba(177, 197, 239, .2) !important;
  box-shadow: none !important;
  color: var(--b-icon) !important;
}
.tile .ico i, .step .num i, .int .logo i { color: var(--b-icon) !important; }

/* ------------------------------------------------------------ platform logos, scrolling
   Two rows drifting in opposite directions, each logo in its brand's own
   colour. Every row holds its list twice; sliding one copy's width makes the
   loop seamless. Hovering a row pauses it. */
.pl-marquee { display: grid; gap: 14px; margin: 0 0 40px; }
.pl-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pl-row {
  display: flex; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.pl-track {
  flex: none; min-width: 100%; display: flex; justify-content: space-around; gap: 12px; padding-right: 12px;
  animation: pl-slide 46s linear infinite;
}
.pl-row.rev .pl-track { animation-direction: reverse; animation-duration: 52s; }
.pl-row:hover .pl-track { animation-play-state: paused; }
@keyframes pl-slide { to { transform: translateX(-100%); } }
.pl {
  flex: none; display: inline-flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 20px 0 16px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--text); font-size: 15px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
  transition: border-color .2s;
}
.pl:hover { border-color: color-mix(in srgb, var(--c, #fff) 55%, transparent); }
.pl-ico { width: 22px; height: 22px; flex: none; fill: var(--c); }
.pl-ig .pl-ico { fill: url(#pl-ig-grad); }
.pl-ig:hover { border-color: rgba(214, 41, 118, .55); }
/* TikTok's logo is white with its cyan and red offset echo. */
.pl-tiktok .pl-ico { filter: drop-shadow(-1.2px -1px 0 #25F4EE) drop-shadow(1.2px 1px 0 #FE2C55); }
@media (max-width: 760px) {
  .pl { height: 44px; font-size: 14px; padding: 0 16px 0 13px; }
  .pl-ico { width: 20px; height: 20px; }
}
/* No motion wanted: show every logo once, wrapped and still. */
@media (prefers-reduced-motion: reduce) {
  .pl-row { -webkit-mask-image: none; mask-image: none; }
  .pl-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 10px; padding-right: 0; }
  .pl-track[aria-hidden] { display: none; }
}

/* ------------------------------------------------------------ lavender pill buttons
   The look of the "bounty Premium" badge: a see-through lavender fill and a soft
   white rim that fades towards the bottom. Main buttons get a touch more colour. */
:root {
  --pill-fill: linear-gradient(180deg, rgba(156, 182, 234, .22) 0%, rgba(103, 129, 178, .14) 100%);
  --pill-fill-strong: linear-gradient(180deg, rgba(160, 184, 239, .38) 0%, rgba(120, 147, 203, .26) 100%);
  --pill-fill-on: linear-gradient(180deg, rgba(160, 184, 239, .34) 0%, rgba(120, 147, 203, .22) 100%);
  --pill-rim: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .06));
  --pill-rim-soft: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04));
  --pill-text: #f0f4fe;
  --pill-icon: #d5e2fe;
}
.btn, .tb-cta, .tb-sheet .tb-sheet-cta, .pr-buy, .pr-manage, .pr-kicker {
  border: 1px solid transparent !important;
  background: var(--pill-fill) padding-box, var(--pill-rim) border-box !important;
  color: var(--pill-text) !important;
  box-shadow: 0 12px 34px -16px rgba(3, 6, 11, .9) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15);
}
.btn[data-invite], .tb-cta, .tb-sheet .tb-sheet-cta, .pr-plan.best .pr-buy {
  background: var(--pill-fill-strong) padding-box, var(--pill-rim) border-box !important;
}
.btn i, .btn .si, .tb-cta i, .tb-sheet-cta i, .pr-buy i, .pr-manage i, .pr-kicker i,
.btn[data-invite] i, .pr-plan.best .pr-buy i { color: var(--pill-icon) !important; }
.btn:hover, .btn[data-invite]:hover, .tb-cta:hover, .pr-buy:hover, .pr-manage:hover { filter: brightness(1.12) !important; }
.btn:focus-visible, .tb-cta:focus-visible { outline: 2px solid #afc4f5; outline-offset: 3px; }

/* The homepage's demo toggles and chips wear the same pill, softer. */
.filters button, .console .toggles button, .pg-filters button, .vm-grid button, .spin-btn, .enter, .pg-run, .tb-menu, .chip, .chips-row span {
  border: 1px solid transparent !important;
  background: var(--pill-fill) padding-box, var(--pill-rim-soft) border-box !important;
  border-radius: 999px !important;
  color: var(--pill-text) !important;
  box-shadow: none !important;
}
.filters button.on, .console .toggles button.on, .pg-filters button.on, .vm-grid button.flash, .enter.in, .enter.joined {
  background: var(--pill-fill-on) padding-box, var(--pill-rim) border-box !important;
}
.pg-run, .tb-menu { border-radius: 50% !important; }
/* The VoiceMaster panel's buttons are tall tiles, so they keep soft corners rather than a full pill. */
.vm-grid button { border-radius: 18px !important; }

/* ------------------------------------------------------------ smooth pill edges
   The rim is drawn with inset shadows instead of a gradient border: shadows
   follow the curve and anti-alias cleanly at any zoom, where a 1px gradient
   border lands on fractional pixels and comes out thicker in places. No
   backdrop blur either: Chrome draws blurred rounded corners with jagged
   edges. And one rim only (the main button had a second, solid border on top). */
.btn, .tb-cta, .tb-sheet .tb-sheet-cta, .pr-buy, .pr-manage, .pr-kicker {
  border: 0 !important;
  border-color: transparent !important;
  background: var(--pill-fill) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .09),
    0 12px 34px -16px rgba(3, 6, 11, .9) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.btn[data-invite], .tb-cta, .tb-sheet .tb-sheet-cta, .pr-plan.best .pr-buy {
  background: var(--pill-fill-strong) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .32),
    inset 0 0 0 1px rgba(255, 255, 255, .13),
    0 12px 34px -16px rgba(3, 6, 11, .9) !important;
}
/* The homepage's demo toggles and chips: the same clean rim, softer. */
.filters button, .console .toggles button, .pg-filters button, .vm-grid button, .spin-btn, .enter, .pg-run, .tb-menu, .chip, .chips-row span {
  border: 0 !important;
  background: var(--pill-fill) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .07) !important;
}
.filters button.on, .console .toggles button.on, .pg-filters button.on, .vm-grid button.flash, .enter.in, .enter.joined {
  background: var(--pill-fill-on) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
}