:root {
  --plox-violet: #5700d4;
  --plox-deep: #310a87;
  --plox-ink: #21074f;
  --plox-lilac: #a967f5;
  --plox-glass: rgba(69, 16, 145, .48);
  --plox-glass-strong: rgba(57, 12, 126, .72);
  --plox-line: rgba(255, 255, 255, .24);
  --plox-shadow: 0 22px 64px rgba(27, 2, 77, .2);
  --bg: #310a87;
  --card: rgba(57, 12, 126, .58);
  --soft: rgba(255, 255, 255, .1);
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, .68);
  --line: rgba(255, 255, 255, .18);
  --green: #a967f5;
  --mint: #dbc0ff;
  --shadow: var(--plox-shadow);
}

html { background: #310a87; }

body,
.home-page,
.rewards-page,
.token-page {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 74% 18%, rgba(255, 255, 255, .12), transparent 30%),
    linear-gradient(132deg, #310a87 0%, #5700d4 52%, #a967f5 100%);
  background-attachment: fixed;
  color: #fff;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(46vw, 680px);
  height: min(23vw, 330px);
  top: -145px;
  right: -185px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 82px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(191, 137, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  transform: rotate(-36deg);
  backdrop-filter: blur(8px);
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(52vw, 760px);
  height: min(29vw, 420px);
  left: -330px;
  bottom: -235px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 150px 240px 110px 210px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .12), rgba(120, 46, 221, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  transform: rotate(-24deg);
  backdrop-filter: blur(8px);
}

::selection { background: #d8b4ff; color: #260065; }

.rail {
  width: 78px;
  padding: 20px 0;
  border-right: 2px solid rgba(169, 103, 245, .92);
  background: linear-gradient(180deg, rgba(239, 226, 255, .98), rgba(210, 174, 255, .98));
  box-shadow: 12px 0 40px rgba(31, 0, 82, .14), inset -1px 0 rgba(255, 255, 255, .34);
  backdrop-filter: blur(24px);
}

.rail-logo { width: 58px; height: 62px; gap: 5px; }
.rail-logo img { width: 39px; height: 36px; filter: drop-shadow(0 8px 14px rgba(75, 16, 181, .22)); }
.rail-logo span { color: #4d149e; font-size: 9px; letter-spacing: .3em; }
.rail nav { margin-top: 46px; gap: 16px; }
.rail-link { width: 46px; height: 46px; border-radius: 15px; color: #642bb2; }
.rail-link svg { width: 21px; height: 21px; }
.rail-link:hover,
.rail-link.active {
  background: rgba(255, 255, 255, .62);
  color: #5700d4;
  box-shadow: 0 10px 24px rgba(66, 15, 150, .16), inset 0 0 0 1px rgba(122, 63, 220, .14);
}
.rail-link.active { box-shadow: inset 3px 0 #5700d4, 0 12px 28px rgba(100, 35, 214, .2); }
.rail-chain { display: none; }

.topbar,
.home-page .topbar,
.token-page .topbar {
  height: 72px;
  padding: 0 clamp(22px, 4vw, 58px);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  background: rgba(49, 10, 135, .26);
  box-shadow: 0 8px 28px rgba(20, 0, 64, .06);
  backdrop-filter: blur(20px);
}

.topbar {
  left: auto;
  margin-left: 78px;
}

.home-page .topbar,
.token-page .topbar {
  left: 78px;
  margin-left: 0;
}

.topbar::before {
  content: none;
}

.topbar,
.home-page .topbar,
.token-page .topbar { justify-content: flex-end; }

.network,
.home-network {
  height: 43px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: rgba(91, 30, 177, .4);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  backdrop-filter: blur(14px);
}

.home-x-button {
  width: 43px;
  height: 43px;
  border-color: rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: rgba(91, 30, 177, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.home-x-button:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .65); }
.home-x-button img { filter: invert(1); }

.wallet-button,
.home-wallet-button {
  min-width: 184px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  background: rgba(91, 30, 177, .4);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
  backdrop-filter: blur(14px);
}
.wallet-button:hover,
.home-wallet-button:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .62); }
.home-wallet-button.connected { background: rgba(255, 255, 255, .9); color: var(--plox-ink); }
.home-wallet-menu { border-color: var(--plox-line); background: rgba(49, 10, 110, .92); color: #fff; backdrop-filter: blur(24px); }
.home-wallet-menu > button { color: #fff; }
.home-wallet-menu > button:hover { background: rgba(255, 255, 255, .1); }
.home-wallet-menu small,
.home-wallet-menu > p { color: rgba(255, 255, 255, .68); }

/* Home */
.home-main { margin-left: 78px; padding-top: 72px; }
.home-shell { width: min(1280px, calc(100% - 64px)); }
.hero {
  min-height: 690px;
  padding: 58px 0 46px;
  grid-template-columns: minmax(0, 1.04fr) minmax(470px, .96fr);
  gap: clamp(28px, 4vw, 64px);
}
.hero-copy .eyebrow,
.rewards-hero .eyebrow,
.intro .eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 24px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 999px;
  background: rgba(87, 16, 196, .34);
  color: #fff;
  letter-spacing: .2em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  backdrop-filter: blur(12px);
}
.hero-copy .eyebrow span { color: #d8b7ff; font-size: .78em; }
.hero-copy h1 {
  max-width: 680px;
  margin-bottom: 24px;
  color: #fff;
  font-size: clamp(64px, 6.25vw, 96px);
  line-height: .9;
  letter-spacing: -.068em;
}
.hero-copy h1 span {
  display: block;
  background: linear-gradient(90deg, #fff 0%, #d8b7ff 35%, #b177ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.hero-copy .lead { max-width: 660px; margin-bottom: 30px; color: rgba(255, 255, 255, .82); font-size: 17px; line-height: 1.55; }
.hero-copy .lead strong { color: #fff; font-weight: 800; }
.sol-inline { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sol-inline img { width: 23px; height: 20px; object-fit: contain; }
.hero-actions { gap: 16px; }
.hero-actions a { min-width: 210px; min-height: 62px; padding: 0 26px; border-radius: 17px; justify-content: space-between; font-size: 14px; }
.hero-primary { background: #e3ceff; color: #451098; box-shadow: 0 14px 34px rgba(29, 0, 80, .14); }
.hero-primary:hover { background: #eddfff; }
.hero-secondary { border-color: rgba(255, 255, 255, .54); background: rgba(255, 255, 255, .09); color: #fff; backdrop-filter: blur(12px); }
.hero-secondary:hover { background: rgba(255, 255, 255, .18); }
.hero-note {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 25px;
  color: rgba(255, 255, 255, .9);
  font: 600 12px Manrope, sans-serif;
}
.hero-note span { display: inline-flex; align-items: center; gap: 8px; }
.hero-note span + span { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .28); }
.hero-note b { color: #d9b8ff; font-size: 17px; }

.hero-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 48px;
}
.hero-features > div {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 18px;
  border-left: 1px solid rgba(255, 255, 255, .2);
}
.hero-features > div:first-child { padding-left: 0; border-left: 0; }
.hero-features svg { width: 26px; height: 26px; flex: 0 0 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-features .feature-logo { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; object-fit: cover; }
.hero-features p { min-width: 0; margin: 0; }
.hero-features strong,
.hero-features span { display: block; white-space: nowrap; }
.hero-features strong { color: #fff; font-size: 13px; }
.hero-features span { margin-top: 5px; color: rgba(255, 255, 255, .62); font-size: 10px; }

.hero-board { min-height: 530px; perspective: 1100px; }
.board-card {
  inset: 54px 6px 10px 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .3);
  background: linear-gradient(145deg, rgba(79, 20, 164, .58), rgba(169, 103, 245, .2));
  color: #fff;
  border-radius: 38px;
  padding: 40px;
  box-shadow: 0 30px 76px rgba(18, 0, 73, .26), inset 0 1px 0 rgba(255, 255, 255, .3);
  transform: rotate(1.8deg) rotateY(-4deg);
  backdrop-filter: blur(22px) saturate(135%);
}
.board-card::before {
  content: "";
  position: absolute;
  inset: -35% 35% 35% -30%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .08), transparent);
  pointer-events: none;
}
.board-tag,
.token-row p,
.board-metrics span { color: rgba(255, 255, 255, .68); }
.board-tag { font-size: 11px; letter-spacing: .2em; }
.token-row { margin: 46px 0 30px; }
.token-row h2 { font-size: 27px; }
.token-orb { background: rgba(239, 218, 255, .86); color: #6b1bd5; box-shadow: inset 0 1px 0 #fff; }
.board-metrics { border-color: rgba(255, 255, 255, .24); }
.board-metrics div { border-color: rgba(255, 255, 255, .24); }
.board-pills { gap: 10px; margin-top: 26px; }
.board-pills span { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 15px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; font: 700 10px Manrope, sans-serif; }
.board-pills img { width: 18px; height: 18px; object-fit: contain; }
.board-pills svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.float-card { border: 1px solid rgba(255, 255, 255, .28); background: linear-gradient(145deg, rgba(169, 103, 245, .88), rgba(87, 0, 212, .82)); box-shadow: 0 16px 38px rgba(32, 0, 90, .16); }
.float-card small { color: rgba(255, 255, 255, .7); }
.float-price { right: -2px; top: 8px; min-width: 148px; padding: 22px 24px; text-align: center; }
.float-price strong { font-size: 24px; }

.token-directory {
  padding-top: 34px;
  background: linear-gradient(180deg, rgba(49, 10, 135, .12), rgba(49, 10, 135, .34));
  color: #fff;
}
.directory-shell { border-color: rgba(255, 255, 255, .2); }
.token-filters button { border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .09); color: #fff; backdrop-filter: blur(10px); }
.token-filters button:hover { border-color: rgba(255, 255, 255, .7); color: #fff; }
.token-filters button.active { border-color: #e4d0ff; background: #e4d0ff; color: #4b129d; box-shadow: 0 10px 26px rgba(25, 0, 70, .14); }
.directory-heading .eyebrow { color: #dec4ff; }
.directory-heading > span { background: rgba(255, 255, 255, .13); color: #fff; }
.token-empty { border-color: rgba(255, 255, 255, .36); background: rgba(255, 255, 255, .1); }
.token-empty p { color: rgba(255, 255, 255, .72); }
.token-empty a { color: #fff; }

/* Create */
body > main:not(.home-main):not(.rewards-main):not(.token-main):not(.admin-main) { margin-left: 78px; }
.intro h1,
.intro > p:last-child { color: #fff; }
.intro > p:last-child { opacity: .78; }
.form-card,
.preview-card {
  border-color: var(--plox-line);
  background: var(--plox-glass);
  box-shadow: var(--plox-shadow), inset 0 1px 0 rgba(255, 255, 255, .16);
  backdrop-filter: blur(22px);
}
.form-card,
.form-card h2,
.form-card legend,
.form-card label,
.form-card .single-step-label,
.form-card .reward-option b { color: #fff; }
.form-card .section-title p,
.form-card .reward-intro,
.form-card .reward-disclosure,
.form-card .payment-disclosure { color: rgba(255, 255, 255, .68); }
.form-card input,
.form-card textarea,
.form-card .image-picker,
.form-card .payment-selector {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .09);
  color: #fff;
}
.form-card input::placeholder,
.form-card textarea::placeholder { color: rgba(255, 255, 255, .48); }
.form-card input:focus,
.form-card textarea:focus { border-color: rgba(255, 255, 255, .48); background: rgba(255, 255, 255, .14); box-shadow: 0 0 0 3px rgba(223, 197, 255, .1); }
.form-card label small,
.form-card .optional-label { color: rgba(255, 255, 255, .56); }
.form-card .outline-button,
.form-card .payment-selector button.active {
  border-color: rgba(255, 255, 255, .34);
  background: #e1cbff;
  color: #451098;
}
.form-card .payment-selector button { color: rgba(255, 255, 255, .72); }
.form-card .initial-buy-block,
.form-card .reward-block { border-color: rgba(255, 255, 255, .18); }
.form-card .reward-option { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff; }
.form-card .reward-option small { color: rgba(255, 255, 255, .66); }
.form-card .reward-option i { background: rgba(226, 203, 255, .16); color: #eadcff; }
.form-card .valuation-note { background: rgba(255, 255, 255, .1); }
.form-card .valuation-note p { color: rgba(255, 255, 255, .76); }
.preview-card {
  background: linear-gradient(150deg, rgba(77, 19, 161, .58), rgba(169, 103, 245, .18));
  color: #fff;
}
.preview-card .preview-description,
.preview-card dt,
.preview-help,
.preview-label { color: rgba(255, 255, 255, .72); }
.preview-card dl,
.preview-card dl > div { border-color: rgba(255, 255, 255, .23); }
.preview-foot span { background: rgba(255, 255, 255, .14); color: #fff; }
.preview-avatar { background: rgba(255, 255, 255, .18); color: #fff; }
.primary-button,
.primary-action,
.swap-action { background: #e2ccff; color: #451098; box-shadow: 0 12px 28px rgba(34, 0, 82, .14); }
.primary-button:hover:not(:disabled),
.primary-action:hover,
.swap-action:hover { background: #eddfff; }
.reward-option:has(input:checked) { border-color: rgba(255, 255, 255, .58); background: rgba(213, 180, 255, .18); }
.how-section { color: #fff; }
.how-section > div { border-color: rgba(255, 255, 255, .28); }
.how-section span,
.how-section p { color: rgba(255, 255, 255, .72); }
footer { border-color: rgba(255, 255, 255, .24); color: rgba(255, 255, 255, .72); }
footer strong { color: #fff; }

/* Creator fees */
.rewards-main { margin-left: 78px; padding-top: 138px; }
.rewards-hero h1 { color: #fff; text-shadow: 0 22px 50px rgba(29, 0, 76, .24); }
.rewards-hero > p:last-child { color: rgba(255, 255, 255, .76); }
.connect-panel,
.creator-empty,
.creator-token-card {
  border-color: var(--plox-line);
  background: var(--plox-glass);
  box-shadow: var(--plox-shadow);
  color: #fff;
  backdrop-filter: blur(22px);
}
.connect-panel p,
.creator-empty p,
.creator-token-card p { color: rgba(255, 255, 255, .66); }
.balance-card { border: 1px solid var(--plox-line); background: linear-gradient(135deg, rgba(49, 10, 135, .68), rgba(87, 0, 212, .5)); box-shadow: var(--plox-shadow); backdrop-filter: blur(22px); }
.token-list-head { color: #fff; }
.token-list-head .card-index { color: #dec0ff; }
.refresh-button,
.secondary-action { border-color: rgba(255, 255, 255, .3); background: #e2ccff; color: #451098; }

/* Token market */
.token-main { margin-left: 78px; }
.token-back { color: #fff; }
.token-identity,
.market-card,
.swap-card,
.data-card,
.market-details {
  border-color: var(--plox-line);
  background: var(--plox-glass);
  box-shadow: var(--plox-shadow);
  color: #fff;
  backdrop-filter: blur(22px);
}
.token-identity p,
.data-card p,
.swap-card > p { color: rgba(255, 255, 255, .66); }
.swap-tabs,
.swap-input,
.swap-receive { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .09); }
.swap-tabs button,
.swap-label,
.swap-route span,
.swap-protection { color: rgba(255, 255, 255, .68); }
.swap-tabs button.active,
.swap-settlement button.active { background: #e2ccff; color: #451098; }
.swap-settlement button,
.swap-percentages button { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; }
.swap-input input { color: #fff; }
.identity-copy h1,
.identity-metrics strong,
.panel-heading h2,
.swap-route strong,
.swap-protection strong,
.market-details strong,
.market-details a { color: #fff; }
.identity-meta > strong,
.identity-meta button b,
.holder-wallet a,
.trade-link-row,
.swap-links a { color: #dec8ff; }
.identity-meta button,
.identity-copy > p,
.identity-metrics span,
.panel-heading span,
.swap-receive > div > span,
.swap-receive small,
.market-details span { color: rgba(255, 255, 255, .64); }
.identity-metrics,
.identity-metrics div,
.detail-socials a,
.market-details div { border-color: rgba(255, 255, 255, .2); }
.identity-metrics div,
.swap-receive { background: rgba(255, 255, 255, .08); }
.detail-socials a { color: #f0e4ff; }
.swap-receive strong { color: #fff; }
.data-card th { color: rgba(255, 255, 255, .56); }
.data-card td { border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .82); }
.holder-wallet small { color: rgba(255, 255, 255, .5); }

.token-page .chart-card {
  border-color: rgba(255, 255, 255, .18);
  background: #08070d;
  color: #f7f4ff;
  box-shadow: 0 24px 70px rgba(10, 2, 28, .34);
}
.token-page .terminal-toolbar,
.token-page .terminal-market-head,
.token-page .terminal-chart-stage,
.token-page .price-chart,
.token-page .terminal-footer { background: #08070d; }
.token-page .terminal-toolbar,
.token-page .terminal-market-head,
.token-page .terminal-footer { border-color: #272330; }
.token-page .terminal-toolbar button,
.token-page .terminal-tool,
.token-page .chart-mode span,
.token-page .chart-pair,
.token-page .chart-ohlc,
.token-page .terminal-footer,
.token-page .chart-legend { color: #9f98aa; }
.token-page .terminal-toolbar button:hover { color: #fff; background: #1b1724; }
.token-page .terminal-toolbar button.active { color: #fff; background: #4f1ca2; }
.token-page .toolbar-divider { background: #302a3a; }
.token-page .chart-pair strong,
.token-page .chart-ohlc b { color: #f7f4ff; }
.token-page .chart-volume-label { color: #aaa2b4; }
.token-page .chart-volume-label b,
.token-page .tradingview-credit { color: #bb87ff; }
.token-page .chart-empty { color: #8d8598; }
.token-page .chart-legend i { border-color: #a967f5; }
.token-page .chart-legend .candle-up { border-color: #28c7a1; background: #28c7a1; }
.token-page .chart-legend .candle-down { border-color: #f06f83; background: #f06f83; }
.token-page .chart-legend .volume-key { border: 0; background: #665b75; }

/* Protocol setup */
.admin-main { margin-left: 78px; }
.admin-main .intro h1,
.admin-main .intro p { color: #fff; }
.admin-card,
.protocol-card,
.address-card,
.setup-card {
  border-color: var(--plox-line) !important;
  background: var(--plox-glass) !important;
  box-shadow: var(--plox-shadow) !important;
  color: #fff !important;
  backdrop-filter: blur(22px);
}

@media (max-width: 920px) {
  .hero { padding-top: 90px; }
  .home-shell { width: min(100% - 34px, 1280px); }
}

@media (max-width: 620px) {
  body,
  .home-page,
  .rewards-page,
  .token-page { background-attachment: scroll; }
  .topbar,
  .home-page .topbar,
  .token-page .topbar { left: 0; margin-left: 0; padding: 0 12px; }
  .topbar::before { content: ""; }
  .home-main,
  .rewards-main,
  .token-main,
  body > main:not(.home-main):not(.rewards-main):not(.token-main):not(.admin-main) { margin-left: 0; }
  .hero-copy h1 { font-size: 56px; }
  .hero-board { min-height: 440px; }
  .home-wallet-button { min-width: 142px; }
  .network { display: none; }
  body::before { width: 390px; height: 210px; top: -120px; right: -230px; border-radius: 58px; }
  body::after { width: 430px; height: 260px; left: -300px; bottom: -170px; border-radius: 110px 180px 90px 160px; }
}