/* Binance Meme Radar — unofficial concept. Tokens mirror the reference "midnight" theme. */
@font-face { font-family: BinanceNova; src: url(../assets/fonts/BinanceNova-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: BinanceNova; src: url(../assets/fonts/BinanceNova-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: BinanceNova; src: url(../assets/fonts/BinanceNova-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: BinanceNova; src: url(../assets/fonts/BinanceNova-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --color-BasicBg: #000000;
  --color-LiteBg1: #222222;
  --color-LiteBg2: #111111;
  --color-CardBg: #1A1A1A;
  --color-CardSurface: #202020;
  --color-TableRowBg: #0d0d0d;
  --color-Input: #222222;
  --color-InputLine: #4F4F4F;
  --color-Line: #3D3D3D;
  --color-LineAlpha: rgba(255, 255, 255, 0.08);
  --color-SectionDivider: #242424;
  --color-Popup: #333333;
  --color-Vessel: #333333;
  --color-TabBg: #282828;
  --color-TagBg: #4F4F4F;
  --color-Mask: rgba(0, 0, 0, 0.6);
  --color-PrimaryText: #FFFFFF;
  --color-ParagraphText: #DDDDDD;
  --color-SecondaryText: #9C9C9C;
  --color-TertiaryText: #7D7D7D;
  --color-DisableText: #5B5B5B;
  --color-IconNormal: #7D7D7D;
  --color-PrimaryYellow: #F0B90B;
  --color-BtnBg: #FCD535;
  --color-TextLink: #F0B90B;
  --color-TextOnYellow: #000000;
  --color-YellowAlpha01: rgba(252, 213, 53, 0.15);
  --color-YellowAlpha02: rgba(252, 213, 53, 0.2);
  --color-Buy: #28A473;
  --color-BuyHover: #2EBD85;
  --color-Sell: #F63C55;
  --color-SellHover: #F6465D;
  --color-GreenAlpha01: rgba(40, 164, 115, 0.2);
  --color-RedAlpha01: rgba(246, 60, 85, 0.2);
  --color-SuccessBg: #102821;
  --color-DepthSellBg: #35141D;
  --color-EmphasizeText: #FF693D;
  --color-ToastBg: #4F4F4F;
  --color-WidgetSurface: rgba(255, 255, 255, 0.04);
  --color-WidgetSecondaryBg: rgba(255, 255, 255, 0.06);
  --color-WidgetPrimaryBg: rgba(255, 255, 255, 0.08);
  --rail-w: 206px;
  --hdr-h: 94px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-BasicBg); color: var(--color-PrimaryText); font: 400 16px/24px BinanceNova, Arial, sans-serif; -webkit-font-smoothing: antialiased; padding-bottom: 40px; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select { font: inherit; color: inherit; }
img { display: block; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--color-PrimaryYellow); outline-offset: 2px; border-radius: 4px; }
.ic { width: 1em; height: 1em; flex-shrink: 0; display: inline-block; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.up { color: var(--color-Buy); }
.down { color: var(--color-Sell); }
.muted { color: var(--color-TertiaryText); }
.sec { color: var(--color-SecondaryText); }
.yel { color: var(--color-PrimaryYellow); }
.num { font-variant-numeric: tabular-nums; }
.t-cap { font-size: 12px; line-height: 18px; }
.t-sub2 { font-size: 14px; line-height: 22px; font-weight: 500; }
.t-body2 { font-size: 14px; line-height: 22px; }

/* ---------- header (mirrors reference: 58px bar + 32px watch bar + 4px divider) ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--color-BasicBg); }
.hdr-top { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 0.5px solid var(--color-Line); gap: 16px; }
.hdr-left { display: flex; align-items: center; gap: 24px; min-width: 0; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { width: 82px; height: 24px; }
.concept-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 4px; border: 1px solid var(--color-Line); color: var(--color-SecondaryText); font-size: 11px; line-height: 16px; font-weight: 500; white-space: nowrap; letter-spacing: .01em; }
.nav { display: flex; align-items: center; gap: 24px; }
.nav a { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; line-height: 22px; font-weight: 500; white-space: nowrap; color: var(--color-PrimaryText); transition: color .15s; }
.nav a:hover { color: var(--color-PrimaryYellow); }
.nav a.is-active { color: var(--color-PrimaryYellow); }
.nav a .ic { width: 12px; height: 12px; color: var(--color-SecondaryText); }
.nav a.is-active .ic { color: var(--color-PrimaryYellow); }
.nav .new-dot { margin-left: 4px; font-size: 10px; line-height: 14px; padding: 0 4px; border-radius: 2px; background: var(--color-YellowAlpha01); color: var(--color-TextLink); }
.hdr-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.search { position: relative; }
.search-box { display: flex; align-items: center; gap: 8px; height: 32px; width: 220px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--color-Line); background: var(--color-Input); transition: border-color .15s; }
.search-box:hover, .search-box:focus-within { border-color: var(--color-PrimaryYellow); }
.search-box .ic { width: 16px; height: 16px; color: var(--color-IconNormal); }
.search-box input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font-size: 14px; font-weight: 500; line-height: 22px; }
.search-box input::placeholder { color: var(--color-IconNormal); }
.kbd { display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: var(--color-Vessel); color: var(--color-IconNormal); font-size: 12px; font-weight: 500; }
.chip-btn { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 6px 0 8px; border-radius: 6px; border: 1px solid transparent; background: var(--color-Input); transition: border-color .15s; font-size: 14px; font-weight: 500; }
.chip-btn:hover, .chip-btn[aria-expanded="true"] { border-color: var(--color-PrimaryYellow); }
.chip-btn img { width: 16px; height: 16px; border-radius: 4px; }
.chip-btn .ic { width: 12px; height: 12px; color: var(--color-SecondaryText); }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; color: var(--color-PrimaryText); transition: color .15s, background .15s; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { color: var(--color-PrimaryYellow); }
.icon-btn .ic { width: 22px; height: 22px; }
.icon-btn .badge-dot { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--color-Sell); color: #fff; font-size: 10px; line-height: 16px; font-weight: 600; text-align: center; }
.profile-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 4px; border-radius: 6px; background: var(--color-Input); border: 1px solid transparent; }
.profile-btn:hover, .profile-btn[aria-expanded="true"] { border-color: var(--color-PrimaryYellow); }
.profile-btn .avatar { width: 24px; height: 24px; border-radius: 6px; }
.profile-btn .xp-mini { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--color-PrimaryYellow); }
.profile-btn .lvl-mini { font-size: 12px; line-height: 18px; color: var(--color-SecondaryText); }
.menu-btn { display: none; }
.watch-bar { height: 32px; padding: 0 16px; display: flex; align-items: center; gap: 12px; overflow: hidden; white-space: nowrap; font-size: 12px; line-height: 18px; }
.watch-bar .wb-label { display: inline-flex; align-items: center; gap: 4px; color: var(--color-SecondaryText); }
.watch-bar .wb-label .ic { width: 14px; height: 14px; color: var(--color-PrimaryYellow); }
.watch-bar .sep { width: 1px; height: 12px; background: var(--color-Line); flex-shrink: 0; }
.watch-bar .wb-item { display: inline-flex; align-items: center; gap: 6px; padding: 0 2px; }
.watch-bar .wb-item:hover b { color: var(--color-PrimaryYellow); }
.watch-bar .wb-item b { font-weight: 500; }
.watch-bar .wb-empty { color: var(--color-TertiaryText); }
.hdr-divider { height: 4px; background: var(--color-SectionDivider); }

/* ---------- popovers ---------- */
.pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 280px; background: var(--color-CardBg); border: 1px solid var(--color-Line); border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, .6); padding: 8px; display: none; }
.pop.is-open { display: block; }
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 10px; font-size: 14px; font-weight: 600; }
.pop-head button { font-size: 12px; font-weight: 500; color: var(--color-TextLink); }
.pop-item { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px; border-radius: 8px; text-align: left; font-size: 14px; line-height: 22px; }
.pop-item:hover, .pop-item.is-hl { background: var(--color-Input); }
.pop-item[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.pop-item[aria-disabled="true"]:hover { background: none; }
.pop-item img { width: 20px; height: 20px; border-radius: 6px; }
.pop-item .grow { flex: 1; min-width: 0; }
.pop-item .ic { width: 16px; height: 16px; }
.pop-sep { height: 1px; background: var(--color-LineAlpha); margin: 6px 8px; }
.pop-note { padding: 6px 8px; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.notif { align-items: flex-start; }
.notif .n-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 8px; background: transparent; flex-shrink: 0; }
.notif.unread .n-dot { background: var(--color-PrimaryYellow); }
.notif .n-title { font-weight: 500; }
.notif .n-body { font-size: 12px; line-height: 18px; color: var(--color-SecondaryText); }
.notif .n-time { font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.search-pop { left: 0; right: auto; width: 360px; }
.search-pop .sr-meta { font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.profile-pop { width: 300px; }
.profile-card { padding: 8px; display: flex; gap: 12px; align-items: center; }
.profile-card .avatar { width: 44px; height: 44px; border-radius: 10px; }

/* ---------- page shell ---------- */
.page { max-width: 1440px; margin: 0 auto; padding: 16px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.layout { display: flex; gap: 24px; align-items: flex-start; }
.rail { position: sticky; top: calc(var(--hdr-h) + 8px); width: var(--rail-w); flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.rail-item { display: flex; align-items: center; gap: 8px; height: 60px; padding: 12px 16px; border-radius: 12px; border: 1px solid transparent; background: var(--color-LiteBg2); color: var(--color-SecondaryText); font-size: 14px; line-height: 22px; font-weight: 500; transition: color .15s, background .15s; white-space: nowrap; }
.rail-item .ic { width: 20px; height: 20px; color: var(--color-IconNormal); }
.rail-item:hover { color: var(--color-PrimaryText); }
.rail-item.is-active { background: var(--color-YellowAlpha02); color: var(--color-PrimaryText); box-shadow: 0 0 2px 0 rgba(255, 255, 255, .2) inset, -2px 0 14px 0 rgba(0, 0, 0, .4), 0 0 6px 0 rgba(0, 0, 0, .2); }
.rail-item.is-active .ic { color: var(--color-PrimaryYellow); }
.rail-item .count { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--color-YellowAlpha01); color: var(--color-TextLink); font-size: 11px; line-height: 18px; text-align: center; font-weight: 600; }
.rail-group { margin: 8px 4px 0; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.mtabs { display: none; }

/* ---------- panels & headings ---------- */
.panel { border: 1px solid var(--color-Line); border-radius: 16px; padding: 24px; min-width: 0; }
.panel--flat { background: var(--color-LiteBg2); border-color: transparent; }
.sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--color-Line); }
.sec-head--tight { padding-bottom: 16px; margin-bottom: 16px; }
.sec-title { display: flex; align-items: center; gap: 4px; min-width: 0; }
.sec-title h2 { font-size: 24px; line-height: 34px; font-weight: 600; }
.sec-title .ic { width: 16px; height: 16px; color: var(--color-SecondaryText); }
.sec-sub { font-size: 14px; line-height: 22px; color: var(--color-TertiaryText); }
.sec-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sub-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; min-height: 28px; }
.sub-head h3 { font-size: 20px; line-height: 28px; font-weight: 500; }
.sub-head__link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.sub-head__more { margin-left: auto; color: var(--color-SecondaryText); }
.sub-head__more .ic { width: 16px; height: 16px; }
.tag-y { display: inline-flex; align-items: center; height: 16px; padding: 0 4px; border-radius: 2px; background: var(--color-YellowAlpha01); color: var(--color-TextLink); font-size: 12px; line-height: 18px; white-space: nowrap; }
.tag-g { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--color-GreenAlpha01); color: var(--color-Buy); font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.tag-n { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--color-WidgetPrimaryBg); color: var(--color-SecondaryText); font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.tag-n .ic { width: 12px; height: 12px; }
.demo-note { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.demo-note .ic { width: 14px; height: 14px; }
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main-side { grid-template-columns: minmax(0, 1.82fr) minmax(0, 1fr); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; font-size: 14px; line-height: 22px; font-weight: 500; white-space: nowrap; transition: opacity .15s, background .15s, color .15s, border-color .15s; }
.btn .ic { width: 16px; height: 16px; }
.btn-y { background: var(--color-BtnBg); color: var(--color-TextOnYellow); }
.btn-y:hover { opacity: .9; }
.btn-g { background: var(--color-Input); color: var(--color-PrimaryText); }
.btn-g:hover { background: var(--color-Popup); }
.btn-o { border: 1px solid var(--color-Line); color: var(--color-PrimaryText); }
.btn-o:hover { border-color: var(--color-PrimaryYellow); color: var(--color-PrimaryYellow); }
.btn-sm { height: 32px; padding: 0 12px; border-radius: 6px; }
.btn-xs { height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12px; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--color-Input); color: var(--color-DisableText); cursor: not-allowed; opacity: 1; }
.btn-block { width: 100%; }
.link { color: var(--color-TextLink); font-weight: 500; }
.link:hover { text-decoration: underline; }

/* ---------- tabs ---------- */
.tabs { display: flex; align-items: center; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--color-TertiaryText); white-space: nowrap; transition: color .15s; }
.tab:hover { color: var(--color-SecondaryText); }
.tab.is-active { color: var(--color-PrimaryText); }
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 8px; background: var(--color-Input); }
.seg button { height: 28px; padding: 0 12px; border-radius: 6px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--color-SecondaryText); white-space: nowrap; }
.seg button.is-active { background: var(--color-TabBg); color: var(--color-PrimaryText); box-shadow: 0 0 2px rgba(255, 255, 255, .15) inset; }
.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill-tab { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; background: var(--color-LiteBg2); color: var(--color-SecondaryText); font-size: 14px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; transition: color .15s, background .15s; }
.pill-tab:hover { color: var(--color-PrimaryText); }
.pill-tab.is-active { background: var(--color-YellowAlpha02); color: var(--color-PrimaryText); }
.pill-tab .ic { width: 16px; height: 16px; }
.pill-tab.is-active .ic { color: var(--color-PrimaryYellow); }
.pill-tab .n { font-size: 12px; color: var(--color-TertiaryText); }

/* ---------- token rows (mirrors reference 24h Trending list) ---------- */
.rows { display: flex; flex-direction: column; }
.trow { display: flex; align-items: center; gap: 12px; height: 40px; box-sizing: content-box; padding: 12px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; transition: background .15s; }
.trow:hover { background: var(--color-Input); }
.trow .rank { width: 24px; flex-shrink: 0; text-align: center; font-size: 24px; line-height: 34px; font-weight: 600; color: var(--color-TextLink); }
.trow .rank.dim { color: var(--color-SecondaryText); font-size: 18px; }
.trow .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trow .nm { display: flex; align-items: center; gap: 4px; font-size: 14px; line-height: 22px; font-weight: 500; min-width: 0; }
.trow .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .meta { display: flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); white-space: nowrap; overflow: hidden; }
.trow .meta .bar { width: 1px; height: 10px; background: var(--color-Line); }
.trow .val { text-align: right; flex-shrink: 0; }
.trow .val b { display: block; font-size: 14px; line-height: 22px; font-weight: 500; }
.trow .val small { display: block; font-size: 12px; line-height: 18px; }

/* ---------- token icon ---------- */
.tok-ic { position: relative; display: inline-flex; flex-shrink: 0; border-radius: 50%; }
.tok-ic__face { width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 25%, hsl(var(--h) 85% 72%), hsl(var(--h) 70% 38%) 75%); line-height: 1; overflow: hidden; }
.tok-ic .tok-ic__img, .tok-ic .tok-ic__chain { border-radius: 50%; }
.tok-ic .tok-ic__img { width: 100%; height: 100%; }
.tok-ic__img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--color-Input); }
.tok-ic__chain { position: absolute; right: -2px; bottom: -2px; border-radius: 50%; border: 1.5px solid var(--color-BasicBg); background: #000; box-sizing: content-box; }

/* ---------- tables (mirrors reference Alpha table) ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-size: 12px; line-height: 18px; font-weight: 400; color: var(--color-TertiaryText); text-align: right; padding: 0 6px 8px; white-space: nowrap; }
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 0; }
.tbl th.l, .tbl td.l { text-align: left; }
.tbl th button { color: inherit; font-size: inherit; display: inline-flex; align-items: center; gap: 2px; }
.tbl th button:hover, .tbl th button.is-active { color: var(--color-PrimaryText); }
.tbl th button .ic { width: 12px; height: 12px; }
.tbl td { padding: 10px 6px; text-align: right; font-size: 14px; line-height: 22px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tbl tbody tr { cursor: pointer; transition: background .15s; }
.tbl tbody tr:hover td { background: var(--color-Input); }
.tbl tbody tr td:first-child { border-radius: 8px 0 0 8px; }
.tbl tbody tr td:last-child { border-radius: 0 8px 8px 0; }
.tbl .tok { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tbl .tok .nm { font-weight: 500; display: flex; align-items: center; gap: 4px; }
.tbl .tok .meta { font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); display: flex; gap: 4px; align-items: center; }
.tbl .tok .meta .age { color: var(--color-Buy); }
.tbl-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

/* ---------- badges ---------- */
.sent { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.sent--strong-yes, .sent--yes { background: var(--color-GreenAlpha01); color: var(--color-Buy); }
.sent--split { background: var(--color-YellowAlpha01); color: var(--color-TextLink); }
.sent--no, .sent--strong-no { background: var(--color-RedAlpha01); color: var(--color-Sell); }
.sent--none { background: var(--color-WidgetPrimaryBg); color: var(--color-SecondaryText); }
.risk { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 12px; line-height: 18px; font-weight: 500; white-space: nowrap; }
.risk .ic { width: 12px; height: 12px; }
.risk--low { color: var(--color-Buy); background: var(--color-GreenAlpha01); }
.risk--medium { color: var(--color-TextLink); background: var(--color-YellowAlpha01); }
.risk--high { color: var(--color-Sell); background: var(--color-RedAlpha01); }
.pill { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 12px; line-height: 18px; white-space: nowrap; background: var(--color-WidgetPrimaryBg); color: var(--color-SecondaryText); }
.pill b { font-weight: 500; color: var(--color-PrimaryText); font-variant-numeric: tabular-nums; }
.pill .ic { width: 12px; height: 12px; }
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-Buy); box-shadow: 0 0 0 3px var(--color-GreenAlpha01); }
.pill--soon { color: var(--color-TextLink); background: var(--color-YellowAlpha01); }
.pill--paused { color: var(--color-EmphasizeText); background: rgba(255, 105, 61, .14); }
.age-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 4px; border-radius: 4px; font-size: 12px; line-height: 18px; background: var(--color-GreenAlpha01); color: var(--color-Buy); font-weight: 500; }

/* ---------- vote bar ---------- */
.vbar { display: flex; gap: 2px; height: 4px; border-radius: 2px; overflow: hidden; background: var(--color-Input); }
.vbar span { height: 100%; transition: width .4s ease; }
.vbar__yes { background: var(--color-Buy); border-radius: 2px 0 0 2px; }
.vbar__no { background: var(--color-Sell); border-radius: 0 2px 2px 0; }
.vbar--lg { height: 8px; border-radius: 4px; }

/* ---------- progress ---------- */
.prog { height: 6px; border-radius: 3px; background: var(--color-Input); overflow: hidden; }
.prog span { display: block; height: 100%; background: var(--color-PrimaryYellow); border-radius: 3px; transition: width .4s ease; }
.prog--sm { height: 4px; }
.prog--done span { background: var(--color-Buy); }

/* ---------- token cards (Meme Radar feed) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(296px, 1fr)); gap: 16px; }
.tcard { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 12px; background: var(--color-LiteBg2); border: 1px solid transparent; transition: border-color .15s, background .15s; cursor: pointer; min-width: 0; }
.tcard:hover { border-color: var(--color-Line); background: #151515; }
.tcard__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tcard__id { flex: 1; min-width: 0; }
.tcard__nm { display: flex; align-items: center; gap: 6px; font-size: 16px; line-height: 24px; font-weight: 600; min-width: 0; }
.tcard__nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard__sub { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); white-space: nowrap; }
.star-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--color-IconNormal); transition: color .15s, background .15s; flex-shrink: 0; }
.star-btn:hover { background: var(--color-Input); color: var(--color-PrimaryText); }
.star-btn.is-on { color: var(--color-PrimaryYellow); }
.star-btn .ic { width: 18px; height: 18px; }
.tcard__px { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tcard__px b { display: block; font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tcard__px small { font-size: 12px; line-height: 18px; font-weight: 500; }
.tcard__px .spark { width: 120px; height: 36px; flex-shrink: 0; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 0; border-top: 1px solid var(--color-LineAlpha); border-bottom: 1px solid var(--color-LineAlpha); }
.metrics div { min-width: 0; }
.metrics span { display: block; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.metrics b { display: block; font-size: 13px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.vote-sum { display: flex; flex-direction: column; gap: 8px; }
.vote-q { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--color-PrimaryText); }
.vote-q .ic { width: 16px; height: 16px; color: var(--color-PrimaryYellow); }
.vote-sum__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; line-height: 18px; }
.vote-sum__row .yes { color: var(--color-Buy); font-weight: 500; }
.vote-sum__row .no { color: var(--color-Sell); font-weight: 500; }
.vote-sum__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.vote-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 8px; font-size: 14px; line-height: 22px; font-weight: 600; transition: background .15s, color .15s, transform .1s; }
.vbtn .ic { width: 16px; height: 16px; }
.vbtn:active { transform: scale(.98); }
.vbtn--yes { background: var(--color-GreenAlpha01); color: var(--color-Buy); }
.vbtn--yes:hover { background: var(--color-Buy); color: #fff; }
.vbtn--no { background: var(--color-RedAlpha01); color: var(--color-Sell); }
.vbtn--no:hover { background: var(--color-Sell); color: #fff; }
.vbtn.is-picked.vbtn--yes { background: var(--color-Buy); color: #fff; }
.vbtn.is-picked.vbtn--no { background: var(--color-Sell); color: #fff; }
.vbtn[aria-disabled="true"] { background: var(--color-Input); color: var(--color-DisableText); cursor: not-allowed; }
.vbtn.is-picked[aria-disabled="true"].vbtn--yes { background: var(--color-GreenAlpha01); color: var(--color-Buy); }
.vbtn.is-picked[aria-disabled="true"].vbtn--no { background: var(--color-RedAlpha01); color: var(--color-Sell); }
.vbtn--lg { height: 48px; font-size: 16px; border-radius: 10px; }
.vbtn--lg .ic { width: 20px; height: 20px; }
.voted-note { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 8px; font-size: 13px; font-weight: 500; background: var(--color-WidgetSurface); color: var(--color-SecondaryText); text-align: center; padding: 0 8px; }
.voted-note .ic { width: 16px; height: 16px; }
.voted-note.yes { color: var(--color-Buy); }
.voted-note.no { color: var(--color-Sell); }
.inelig { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 10px; border-radius: 8px; background: var(--color-WidgetSurface); color: var(--color-SecondaryText); font-size: 12px; line-height: 18px; }
.inelig .ic { width: 14px; height: 14px; flex-shrink: 0; }
.mom { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; line-height: 18px; color: var(--color-Buy); font-weight: 500; }
.mom .ic { width: 12px; height: 12px; }

/* ---------- filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.field { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--color-Input); border: 1px solid var(--color-Line); transition: border-color .15s; }
.field:focus-within, .field:hover { border-color: var(--color-PrimaryYellow); }
.field .ic { width: 16px; height: 16px; color: var(--color-IconNormal); }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 14px; }
.field input::placeholder { color: var(--color-IconNormal); }
.field .clear { color: var(--color-IconNormal); display: inline-flex; }
.field .clear:hover { color: var(--color-PrimaryText); }
.field--search { flex: 1 1 280px; max-width: 420px; }
.sel { position: relative; }
.sel select { appearance: none; -webkit-appearance: none; height: 36px; padding: 0 30px 0 12px; border-radius: 8px; background: var(--color-Input); border: 1px solid transparent; font-size: 13px; font-weight: 500; color: var(--color-PrimaryText); cursor: pointer; transition: border-color .15s; }
.sel select:hover, .sel select:focus { border-color: var(--color-PrimaryYellow); outline: 0; }
.sel select.is-set { background: var(--color-YellowAlpha01); color: var(--color-TextLink); }
.sel .ic { position: absolute; right: 10px; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); pointer-events: none; color: var(--color-SecondaryText); }
.sel option { background: var(--color-CardBg); color: var(--color-PrimaryText); }
.sel-label { font-size: 12px; color: var(--color-TertiaryText); margin-right: -2px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-toggle { display: none; }
.result-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); margin: 16px 0 12px; }
.result-line .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--color-YellowAlpha01); color: var(--color-TextLink); font-size: 12px; font-weight: 500; }
.fchip .ic { width: 12px; height: 12px; }
.load-more { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; font-size: 12px; color: var(--color-TertiaryText); }

/* ---------- empty / skeleton ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 48px 16px; color: var(--color-SecondaryText); }
.empty > .ic { width: 48px; height: 48px; color: var(--color-Line); margin-bottom: 4px; }
.empty h3 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--color-PrimaryText); }
.empty p { font-size: 14px; line-height: 22px; max-width: 420px; }
.empty .btn { margin-top: 8px; }
.skel { background: linear-gradient(90deg, var(--color-LiteBg2) 0%, #1c1c1c 50%, var(--color-LiteBg2) 100%); background-size: 200% 100%; animation: skel 1.2s infinite; border-radius: 12px; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ---------- overview ---------- */
.hero { position: relative; min-height: 286px; border-radius: 16px; border: 1px solid var(--color-Line); background: radial-gradient(480px 320px at 96% 42%, rgba(252, 213, 53, .09), transparent 68%), var(--color-LiteBg2); overflow: hidden; }
/* Mark only — the source plate is much wider than the drawing, so cover/100% clipped it. */
.hero__bg { position: absolute; z-index: 0; width: 136px; height: 130px; right: 22px; top: 50%; transform: translateY(-46%); background: url(../assets/img/banner-mark.png) center / contain no-repeat; opacity: .95; pointer-events: none; }
@media (min-width: 768px) {
  body:not(.hw) .hero h1 { max-width: min(18rem, calc(100% - 168px)); }
  body:not(.hw) .hero p { max-width: calc(100% - 168px); }
}
@media (max-width: 1199px) and (min-width: 1024px) {
  body:not(.hw) .hero h1 { max-width: min(18rem, calc(100% - 124px)); }
  body:not(.hw) .hero p { max-width: calc(100% - 124px); }
  body:not(.hw) .hero__bg { width: 112px; height: 108px; right: 14px; top: 46%; }
}
@media (max-width: 767px) {
  body:not(.hw) .hero__bg { width: 56px; height: 54px; right: 14px; top: 14px; transform: none; opacity: .9; }
}
.hero__body { position: relative; height: 100%; min-height: 286px; padding: 24px; display: flex; flex-direction: column; justify-content: center; max-width: 620px; }
.hero__chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; background: rgba(0, 0, 0, .35); color: var(--color-PrimaryYellow); font-size: 14px; font-weight: 500; margin-bottom: 16px; backdrop-filter: blur(6px); }
.hero__chip .ic { width: 16px; height: 16px; }
.hero h1 { font-size: 32px; line-height: 40px; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--color-PrimaryYellow); }
.hero p { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--color-ParagraphText); }
.hero__lvl { margin-top: 16px; max-width: 420px; }
.hero__lvl-row { display: flex; justify-content: space-between; font-size: 12px; line-height: 18px; color: var(--color-ParagraphText); margin-bottom: 6px; }
.hero__actions { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero__actions .btn { min-width: 180px; }
.hero__actions .btn-o { background: rgba(0, 0, 0, .35); }
.xp-card { min-height: 286px; border-radius: 16px; border: 1px solid var(--color-Line); padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.xp-card__total { display: flex; align-items: baseline; gap: 8px; }
.xp-card__total b { font-size: 40px; line-height: 48px; font-weight: 600; font-variant-numeric: tabular-nums; }
.xp-card__total span { font-size: 16px; color: var(--color-SecondaryText); font-weight: 500; }
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kv a, .kv div.kv-i { display: block; padding: 12px; border-radius: 12px; background: var(--color-WidgetSecondaryBg); transition: background .15s; }
.kv a:hover { background: var(--color-WidgetPrimaryBg); }
.kv span { display: block; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.kv b { display: block; font-size: 18px; line-height: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kv small { font-size: 12px; line-height: 18px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; background: var(--color-LiteBg2); border: 1px solid transparent; transition: border-color .15s; min-width: 0; }
a.stat:hover { border-color: var(--color-Line); }
.stat__ic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--color-YellowAlpha01); color: var(--color-PrimaryYellow); flex-shrink: 0; }
.stat__ic .ic { width: 22px; height: 22px; }
.stat span { display: block; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.stat .stat__ic { display: flex; color: var(--color-PrimaryYellow); }
.stat > div { min-width: 0; flex: 1; }
/* Admin */
.adm-login { max-width: 420px; width: 100%; margin: 24px auto; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 32px 24px; }
.adm-login h2 { font-size: 22px; line-height: 30px; font-weight: 600; }
.adm-login p { color: var(--color-SecondaryText); font-size: 14px; line-height: 22px; }
.adm-login form { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; }
.adm-login input { width: 100%; height: 44px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--color-Line); background: var(--color-Input); color: var(--color-PrimaryText); font: inherit; font-size: 15px; }
.adm-login input:focus { outline: 0; border-color: var(--color-PrimaryYellow); }
.adm-login .btn-y { height: 44px; }
.adm-login__msg { min-height: 22px; color: var(--color-Sell) !important; }
.adm-quick, .adm-fetch { display: flex; gap: 8px; }
.adm-quick input, .adm-fetch input, .adm-search, .adm-f input, .adm-f textarea { width: 100%; min-width: 0; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--color-Line); background: var(--color-Input); color: var(--color-PrimaryText); font: inherit; font-size: 14px; }
.adm-fetch input { height: 32px; }
.adm-f textarea { height: auto; padding: 8px 12px; resize: vertical; line-height: 20px; }
.adm-quick input:focus, .adm-fetch input:focus, .adm-search:focus, .adm-f input:focus, .adm-f textarea:focus { outline: 0; border-color: var(--color-PrimaryYellow); }
.adm-f input[readonly] { color: var(--color-TertiaryText); }
.adm-f input:disabled { opacity: .45; }
.adm-f input[type=datetime-local] { color-scheme: dark; }
.adm-bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; }
.adm-bar .pills { flex: 1; min-width: 0; }
.adm-search { width: 260px; height: 32px; font-size: 13px; }
.adm-tbl tbody tr { cursor: default; }
.adm-tbl td { vertical-align: middle; }
.adm-tbl tbody tr:hover td { background: transparent; }
.adm-tok { display: flex; align-items: center; gap: 10px; min-width: 0; }
.adm-tok a { color: var(--color-PrimaryText); }
.adm-tok a:hover b { text-decoration: underline; }
.adm-tags { display: flex; gap: 4px; margin-top: 2px; }
.adm-tags:empty { display: none; }
.adm-tag { font-size: 11px; line-height: 16px; padding: 0 6px; border-radius: 4px; background: var(--color-Input); color: var(--color-SecondaryText); }
.adm-tag--y { background: var(--color-YellowAlpha01); color: var(--color-TextLink); }
.adm-actions { display: flex; gap: 6px; justify-content: flex-start; }
.adm-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-Line); flex-wrap: wrap; }
.dialog.dialog--xl { width: min(1040px, 100%); }
.adm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.adm-cols > div { min-width: 0; }
@media (max-width: 900px) { .adm-cols { grid-template-columns: 1fr; } }
.adm-sec { margin: 16px 0 8px; font-size: 12px; line-height: 18px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--color-TertiaryText); }
.adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.adm-grid--3 { grid-template-columns: repeat(3, 1fr); }
.adm-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-f > span { font-size: 12px; line-height: 18px; color: var(--color-SecondaryText); }
.adm-f--wide { grid-column: 1 / -1; }
.adm-f input { height: 36px; }
.adm-dur { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.adm-dur .t-cap { margin-right: 4px; }
.adm-dur #e-split { margin-left: 6px; }
.adm-checks { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; }
.adm-checks label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.adm-checks input { accent-color: var(--color-PrimaryYellow); width: 16px; height: 16px; }
.adm-seg button { height: 32px; padding: 0 16px; font-size: 13px; }
.adm-note { margin-top: 14px; }
@media (max-width: 767px) {
  .adm-grid, .adm-grid--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .adm-grid--dates { grid-template-columns: minmax(0, 1fr); }
  .adm-seg { display: flex; width: 100%; }
  .adm-seg button { flex: 1; padding: 0 6px; }
  .adm-quick { flex-direction: column; }
  .adm-search { width: 100%; }
  .adm-tbl, .adm-tbl tbody { display: block; }
  .adm-tbl thead { display: none; }
  .adm-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; padding: 14px 0; border-bottom: 1px solid var(--color-Line); }
  .adm-tbl td { padding: 0; white-space: normal; }
  .adm-tbl td:nth-child(1), .adm-tbl td:nth-child(5) { grid-column: 1 / -1; }
  .adm-tbl td:nth-child(2) { align-self: center; }
  .adm-tbl td:nth-child(3) { text-align: right; }
  .adm-actions { flex-wrap: wrap; }
  .adm-foot { flex-direction: column; align-items: stretch; }
}

/* Wallet connection */
body.is-guest .acct-only, body:not(.is-guest) .guest-only { display: none !important; }
.connect-btn .ic { width: 18px; height: 18px; }
.btn .ic { flex-shrink: 0; }
.watch-bar button.wb-empty { color: var(--color-TextLink); font-size: inherit; }
.watch-bar button.wb-empty:hover { text-decoration: underline; }
.wallet-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.wallet-opt { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--color-Line); background: var(--color-Input); font-size: 15px; font-weight: 500; text-align: left; transition: border-color .15s, background .15s; }
.wallet-opt:hover { border-color: var(--color-PrimaryYellow); }
.wallet-opt:active { background: var(--color-Line); }
.wallet-opt__ic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--color-Vessel, #2b3139); color: var(--color-SecondaryText); flex-shrink: 0; overflow: hidden; }
.wallet-opt__ic img { width: 24px; height: 24px; object-fit: contain; }
.wallet-opt__ic--fill { background: none; }
.wallet-opt__ic--fill img { width: 32px; height: 32px; }
.wallet-other { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 14px auto 0; padding: 8px 12px; font-size: 13px; line-height: 20px; color: var(--color-TextLink); }
.wallet-other:hover { text-decoration: underline; }
.wallet-terms { margin: 12px 0 0; text-align: center; color: var(--color-SecondaryText); }
/* Connect dialog. Desktop stays a centered card; a short window can still
   scroll the body. Phones use a bottom sheet (see the 767px block) that fits
   without an inner scroller. */
.dialog.dialog--connect { width: min(440px, 100%); padding: 0; gap: 0; overflow: hidden; }
.dialog--connect .dialog__head { flex: 0 0 auto; padding: 20px 20px 12px; }
.dialog--connect .dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 20px 20px; max-height: calc(100vh - 128px); max-height: calc(100svh - 128px); scrollbar-width: thin; }
.dialog--connect.has-more .dialog__body { box-shadow: inset 0 -22px 18px -16px rgba(0, 0, 0, .72); }
.wallet-opt__ic .ic { width: 20px; height: 20px; }
.wallet-opt__st { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-SecondaryText); }
.wallet-opt__st:empty { display: none; }
.wallet-opt.is-loading { border-color: var(--color-PrimaryYellow); }
.is-busy .wallet-opt:not(.is-loading) { opacity: .45; pointer-events: none; }
.is-loading .tag-y { display: none; }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--color-Line); border-top-color: var(--color-PrimaryYellow); animation: spin .8s linear infinite; }
.gate { max-width: 480px; margin: 0 auto; padding: 48px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gate__ic { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--color-YellowAlpha01); color: var(--color-PrimaryYellow); }
.gate__ic .ic { width: 32px; height: 32px; }
.gate h2 { font-size: 24px; line-height: 32px; font-weight: 600; }
.gate p { color: var(--color-SecondaryText); font-size: 14px; line-height: 22px; }
.gate__pts { list-style: none; padding: 0; margin: 4px 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.gate__pts li { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.gate__pts .ic { width: 16px; height: 16px; color: var(--color-Buy, #2ebd85); }
.gate__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.how { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.how__row { display: flex; gap: 12px; align-items: center; }
.how__row .stat__ic { width: 36px; height: 36px; }
.how__row .stat__ic .ic { width: 20px; height: 20px; }
.how__row b { display: block; font-size: 14px; line-height: 20px; }
.how__row small { display: block; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.addr-txt { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pcard__who b .addr-txt { display: inline; font-size: inherit; line-height: inherit; color: inherit; }
.stat b { display: block; font-size: 20px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat small { display: block; font-size: 12px; line-height: 18px; color: var(--color-SecondaryText); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* missions */
.mlist { display: flex; flex-direction: column; gap: 8px; }
.mrow { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--color-WidgetSecondaryBg); transition: background .15s; min-width: 0; }
a.mrow:hover { background: var(--color-WidgetPrimaryBg); }
.mrow.is-target { box-shadow: 0 0 0 1px var(--color-PrimaryYellow) inset; }
.mrow__ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--color-YellowAlpha01); color: var(--color-PrimaryYellow); flex-shrink: 0; }
.mrow__ic .ic { width: 20px; height: 20px; }
.mrow.is-done .mrow__ic { background: var(--color-GreenAlpha01); color: var(--color-Buy); }
.mrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mrow__title { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 22px; font-weight: 500; }
.mrow__title span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow__desc { font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.mrow__xp { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--color-PrimaryYellow); white-space: nowrap; }
.mrow__side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.claimed { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--color-Buy); white-space: nowrap; }
.claimed .ic { width: 14px; height: 14px; }

/* xp log */
.xlog { display: flex; flex-direction: column; }
.xrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-LineAlpha); min-width: 0; }
.xrow:last-child { border-bottom: 0; }
.xrow__ic { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--color-WidgetSecondaryBg); color: var(--color-SecondaryText); flex-shrink: 0; }
.xrow__ic .ic { width: 16px; height: 16px; }
.xrow__ic.k-vote { color: var(--color-Buy); background: var(--color-GreenAlpha01); }
.xrow__ic.k-mission { color: var(--color-PrimaryYellow); background: var(--color-YellowAlpha01); }
.xrow__ic.k-streak { color: var(--color-EmphasizeText); background: rgba(255, 105, 61, .14); }
.xrow__body { flex: 1; min-width: 0; }
.xrow__body b { display: block; font-size: 14px; line-height: 22px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xrow__body span { font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.xrow__amt { font-size: 14px; font-weight: 600; color: var(--color-PrimaryYellow); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* campaigns (mirrors reference Booster / Airdrop cards) */
.camp { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; background: var(--color-WidgetSecondaryBg); overflow: hidden; min-height: 156px; }
.camp--hl { background: var(--color-YellowAlpha01); }
.gradient-border-yellow { position: relative; }
.gradient-border-yellow::before { content: ""; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 120% at 0 0, rgba(240, 185, 11, .9) 0%, rgba(240, 185, 11, .12) 52%, transparent 72%), radial-gradient(120% 120% at 100% 100%, rgba(240, 185, 11, .5) 0%, rgba(240, 185, 11, .08) 48%, transparent 68%), rgba(240, 185, 11, .05); padding: 1px; position: absolute; inset: 0; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.camp__art { position: absolute; right: 0; bottom: 0; width: 89px; height: 145px; background: url(../assets/img/booster.svg) no-repeat right bottom; pointer-events: none; }
.camp__head { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 24px; font-weight: 600; }
.camp__head .ic { width: 24px; height: 24px; color: var(--color-PrimaryYellow); }
.camp p { font-size: 12px; line-height: 18px; color: var(--color-SecondaryText); max-width: 240px; }
.camp__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }

/* leaderboard (mirrors reference Leaderboard cards) */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pcard { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 12px; background: var(--color-LiteBg2); border: 1px solid var(--color-SectionDivider); min-width: 0; }
.pcard .avatar { width: 44px; height: 44px; border-radius: 8px; }
.pcard__who { flex: 1; min-width: 0; }
.pcard__who b { display: block; font-size: 14px; line-height: 22px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard__who span { font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.pcard__xp { text-align: right; padding-left: 12px; border-left: 1px solid var(--color-Line); }
.pcard__xp b { display: block; font-size: 22px; line-height: 30px; font-weight: 600; color: var(--color-Buy); white-space: nowrap; }
.pcard__xp span { font-size: 12px; color: var(--color-TertiaryText); }
.medal { position: relative; flex-shrink: 0; }
.medal i { position: absolute; left: -6px; bottom: -6px; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 11px; line-height: 20px; font-weight: 700; text-align: center; color: #000; background: var(--color-PrimaryYellow); border: 2px solid var(--color-LiteBg2); }
.medal i.m2 { background: #C9CED6; }
.medal i.m3 { background: #D08C4B; }
.lb-me td { background: var(--color-YellowAlpha01) !important; }
.lb-me td:first-child { box-shadow: inset 2px 0 0 var(--color-PrimaryYellow); }
.lb-user { display: flex; align-items: center; gap: 10px; }
.lb-user .avatar { width: 28px; height: 28px; border-radius: 6px; }
.lb-rank { font-weight: 600; color: var(--color-SecondaryText); width: 32px; display: inline-block; }
.you { display: inline-flex; height: 16px; align-items: center; padding: 0 4px; border-radius: 2px; background: var(--color-PrimaryYellow); color: #000; font-size: 10px; font-weight: 600; margin-left: 6px; }

/* achievements */
.badges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bdg { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: 12px; background: var(--color-WidgetSurface); text-align: center; min-width: 0; }
.bdg__ic { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-Input); color: var(--color-DisableText); }
.bdg__ic .ic { width: 22px; height: 22px; }
.bdg.is-on .bdg__ic { background: radial-gradient(circle at 30% 30%, #ffe27a, var(--color-PrimaryYellow) 60%, #b98a00); color: #000; box-shadow: 0 0 18px rgba(240, 185, 11, .25); }
.bdg b { font-size: 13px; line-height: 20px; font-weight: 600; }
.bdg span { font-size: 11px; line-height: 16px; color: var(--color-TertiaryText); }
.bdg:not(.is-on) b { color: var(--color-SecondaryText); }

/* token detail */
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 500; color: var(--color-SecondaryText); }
.back:hover { color: var(--color-PrimaryText); }
.back .ic { width: 16px; height: 16px; }
.td-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.td-head__id { flex: 1; min-width: 220px; }
.td-head h1 { display: flex; align-items: center; gap: 8px; font-size: 28px; line-height: 36px; font-weight: 600; flex-wrap: wrap; }
.td-head h1 small { font-size: 16px; color: var(--color-SecondaryText); font-weight: 500; }
.td-head__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--color-TertiaryText); }
.addr { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--color-Input); font-size: 12px; color: var(--color-SecondaryText); font-variant-numeric: tabular-nums; }
.addr:hover { color: var(--color-PrimaryText); }
.addr .ic { width: 12px; height: 12px; }
.td-px { text-align: right; }
.td-px b { display: block; font-size: 28px; line-height: 36px; font-weight: 600; font-variant-numeric: tabular-nums; }
.td-px small { font-size: 14px; font-weight: 500; }
.chart { position: relative; height: 240px; margin-top: 8px; }
.chart svg { width: 100%; height: 100%; display: block; }
.chart--embed { height: 420px; border-radius: 12px; overflow: hidden; background: var(--color-LiteBg2); }
.chart--embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.link-row .ic { width: 14px; height: 14px; }
.chart__tip { position: absolute; top: 0; pointer-events: none; padding: 4px 8px; border-radius: 6px; background: rgba(79, 79, 79, .95); font-size: 12px; line-height: 18px; white-space: nowrap; transform: translateX(-50%); display: none; }
.chart__line { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-TertiaryText); pointer-events: none; display: none; }
.chart-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--color-TertiaryText); margin-top: 8px; }
.mgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mgrid > div { padding: 12px; border-radius: 12px; background: var(--color-WidgetSurface); }
.mgrid span { display: block; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.mgrid b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mgrid b span { display: inline; font-size: inherit; line-height: inherit; }
.mgrid b small { display: block; font-size: 12px; line-height: 18px; font-weight: 500; }
.mgrid b small span { font-size: 12px; }
.mgrid .up { color: var(--color-Buy); }
.mgrid .down { color: var(--color-Sell); }
.checks { display: flex; flex-direction: column; gap: 8px; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--color-WidgetSurface); cursor: pointer; transition: background .15s; }
.check:hover { background: var(--color-WidgetSecondaryBg); }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check__box { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--color-InputLine); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; color: transparent; transition: background .15s, border-color .15s; }
.check__box .ic { width: 14px; height: 14px; }
.check input:checked + .check__box { background: var(--color-PrimaryYellow); border-color: var(--color-PrimaryYellow); color: #000; }
.check input:focus-visible + .check__box { outline: 2px solid var(--color-PrimaryYellow); outline-offset: 2px; }
.check__body { flex: 1; min-width: 0; }
.check__body b { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; line-height: 22px; font-weight: 500; }
.check__body span { font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.finding { font-size: 12px; font-weight: 500; white-space: nowrap; }
.finding.ok { color: var(--color-Buy); }
.finding.warn { color: var(--color-TextLink); }
.finding.bad { color: var(--color-Sell); }
.check.is-locked { cursor: default; }

/* voting panel */
.vpanel { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: 16px; background: var(--color-LiteBg2); border: 1px solid transparent; min-width: 0; }
.vpanel--bordered { border-color: var(--color-Line); background: transparent; }
.vpanel__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vpanel__head .grow { flex: 1; min-width: 0; }
.vpanel__q { font-size: 14px; line-height: 22px; color: var(--color-ParagraphText); }
.vpanel__q b { color: var(--color-PrimaryText); }
.vtotals { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; }
.vtotals .side b { display: block; font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vtotals .side span { font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); font-variant-numeric: tabular-nums; }
.vtotals .side.r { text-align: right; }
.vtotals .mid { text-align: center; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); padding-bottom: 4px; }
.vtotals .mid b { display: block; font-size: 14px; color: var(--color-PrimaryText); font-weight: 600; font-variant-numeric: tabular-nums; }
.vtimes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.vtimes div { padding: 10px 12px; border-radius: 10px; background: var(--color-WidgetSurface); min-width: 0; }
.vtimes span { display: block; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.vtimes b { display: block; font-size: 13px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elig { display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 18px; }
.elig div { display: flex; align-items: center; gap: 8px; color: var(--color-SecondaryText); }
.elig .ic { width: 14px; height: 14px; flex-shrink: 0; }
.elig .ok .ic { color: var(--color-Buy); }
.elig .bad .ic { color: var(--color-Sell); }
.elig .bad { color: var(--color-PrimaryText); }
.vnote { display: flex; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--color-YellowAlpha01); font-size: 12px; line-height: 18px; color: var(--color-ParagraphText); }
.vnote .ic { width: 16px; height: 16px; color: var(--color-PrimaryYellow); flex-shrink: 0; margin-top: 1px; }
.feed { display: flex; flex-direction: column; }
.feed-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; line-height: 20px; border-bottom: 1px solid var(--color-LineAlpha); }
.feed-row:last-child { border-bottom: 0; }
.feed-row .avatar { width: 22px; height: 22px; border-radius: 5px; }
.feed-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-SecondaryText); }
.feed-row .who b { color: var(--color-PrimaryText); font-weight: 500; }
.feed-row .side-yes { color: var(--color-Buy); font-weight: 600; }
.feed-row .side-no { color: var(--color-Sell); font-weight: 600; }
.feed-row time { font-size: 12px; color: var(--color-TertiaryText); white-space: nowrap; }
.feed-row.is-new { animation: flash 1.2s ease; }
@keyframes flash { from { background: var(--color-YellowAlpha01); } to { background: transparent; } }
.rules { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 22px; color: var(--color-ParagraphText); }
.rules li { margin-bottom: 6px; }
.rules ul { margin: 0; padding-left: 18px; }
.rules h4 { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--color-PrimaryText); }
.safeguards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.safeguards div { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--color-WidgetSurface); font-size: 12px; line-height: 18px; color: var(--color-SecondaryText); }
.safeguards .ic { width: 14px; height: 14px; color: var(--color-TertiaryText); }
.safeguards .live .ic { color: var(--color-Buy); }

/* ---------- toast & modal ---------- */
.toasts { position: fixed; top: 106px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(420px, calc(100vw - 32px)); }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 12px 14px; border-radius: 12px; background: var(--color-ToastBg); box-shadow: 0 8px 28px rgba(0, 0, 0, .5); font-size: 14px; line-height: 22px; animation: tin .25s ease; }
.toast.out { animation: tout .2s ease forwards; }
.toast .ic { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.toast b { display: block; font-weight: 600; }
.toast span { display: block; font-size: 12px; line-height: 18px; color: var(--color-TextOnGray, #EDEDED); }
.toast .xp { margin-left: auto; font-weight: 700; color: var(--color-PrimaryYellow); white-space: nowrap; }
.toast--ok .ic { color: var(--color-BuyHover); }
.toast--err .ic { color: var(--color-SellHover); }
.toast--xp .ic { color: var(--color-PrimaryYellow); }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes tout { to { opacity: 0; transform: translateY(-8px); } }
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; align-items: safe center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: var(--color-Mask); animation: fade .15s ease; overflow: auto; }
@keyframes fade { from { opacity: 0; } }
.dialog { width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); min-height: 0; overflow: auto; background: var(--color-CardBg); border: 1px solid var(--color-Line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.dialog { scrollbar-width: none; }
.dialog::-webkit-scrollbar { display: none; }
.dialog--wide { width: min(820px, 100%); }
.dialog--wide .rules { font-size: 13px; line-height: 20px; gap: 10px; }
.dialog--wide .rules li { margin-bottom: 4px; }
.dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog__head h2 { font-size: 20px; line-height: 28px; font-weight: 600; }
.dialog__foot { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.ack { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 20px; color: var(--color-ParagraphText); cursor: pointer; }
.ack input { margin-top: 3px; accent-color: var(--color-PrimaryYellow); width: 16px; height: 16px; }
.cfg { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; font-size: 14px; }
.cfg label span { display: block; font-size: 12px; color: var(--color-TertiaryText); }
.cfg input[type=number] { width: 88px; height: 32px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--color-Line); background: var(--color-Input); text-align: right; font-variant-numeric: tabular-nums; }
.cfg input[type=number]:focus { outline: 0; border-color: var(--color-PrimaryYellow); }
.switch { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--color-Popup); transition: background .15s; flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--color-PrimaryYellow); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.cfg-sec { font-size: 12px; font-weight: 600; color: var(--color-SecondaryText); text-transform: uppercase; letter-spacing: .04em; grid-column: 1 / -1; margin-top: 8px; }

/* ---------- footer + bottom tools bar (mirrors reference) ---------- */
.foot { border-top: 1px solid var(--color-SectionDivider); margin-top: 8px; padding: 20px 0 8px; display: flex; gap: 16px; justify-content: space-between; flex-wrap: wrap; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); }
.foot p { max-width: 820px; }
.foot b { color: var(--color-SecondaryText); font-weight: 500; }
.tools-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 9px 22px; background: var(--color-BasicBg); border-top: 1px solid var(--color-SectionDivider); }
.tools-bar__l { display: flex; align-items: center; gap: 12px; }
.tools-bar__r { display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 18px; color: var(--color-TertiaryText); white-space: nowrap; }
.tb-item { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 2px 8px; border-radius: 4px; border: 1px solid transparent; font-size: 12px; line-height: 18px; color: var(--color-PrimaryText); white-space: nowrap; }
.tb-item:hover { background: var(--color-Input); }
.tb-item.is-active { background: var(--color-Input); }
.tb-item .ic { width: 14px; height: 14px; }
.tb-sep { width: 1px; height: 12px; background: var(--color-Line); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-PrimaryYellow); display: inline-block; margin-right: 4px; flex-shrink: 0; }
.live-dot.is-live { background: var(--color-Buy); box-shadow: 0 0 0 3px rgba(40, 164, 115, .2); }
.live-dot.is-stale { background: var(--color-Sell); }
.live-dot.is-loading { animation: dot-pulse 1s ease-in-out infinite; }
@keyframes dot-pulse { 50% { opacity: .3; } }
#data-status { display: inline-flex; align-items: center; gap: 6px; }
#data-status .tb-item { padding: 2px 4px; color: var(--color-SecondaryText); }
#data-status .tb-item[disabled] .ic { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.foot .link { color: var(--color-SecondaryText); text-decoration: underline; }

/* ---------- drawer (mobile/tablet nav) ---------- */
.drawer { position: fixed; inset: 0; z-index: 80; display: none; }
.drawer.is-open { display: block; }
.drawer__mask { position: absolute; inset: 0; background: var(--color-Mask); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: var(--color-CardBg); border-left: 1px solid var(--color-Line); padding: 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; animation: slide .2s ease; }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.drawer__group { font-size: 12px; color: var(--color-TertiaryText); margin: 12px 4px 4px; }
.drawer button.d-link { width: 100%; }
.drawer a.d-link, .drawer button.d-link { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--color-SecondaryText); }
.drawer a.d-link:hover { background: var(--color-Input); color: var(--color-PrimaryText); }
.drawer a.d-link.is-active { background: var(--color-YellowAlpha02); color: var(--color-PrimaryText); }
.drawer a.d-link .ic { width: 18px; height: 18px; }
.drawer a.d-link.is-active .ic { color: var(--color-PrimaryYellow); }

/* ---------- responsive ---------- */
@media (max-width: 1599px) {
  .nav .nav-x { display: none; }
}
@media (max-width: 1365px) {
  .nav { gap: 18px; }
  .search-box { width: 180px; }
}
@media (max-width: 1199px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .search-box { width: 180px; }
  .g-main-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 > :last-child { grid-column: 1 / -1; }
  .badges { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  :root { --hdr-h: 58px; }
  .watch-bar, .hdr-divider { display: none; }
  .rail { display: none; }
  .mtabs { display: flex; position: sticky; top: 58px; z-index: 45; gap: 8px; padding: 10px 16px; margin: 0 -16px; background: var(--color-BasicBg); border-bottom: 1px solid var(--color-SectionDivider); overflow-x: auto; scrollbar-width: none; }
  .mtabs::-webkit-scrollbar { display: none; }
  .page { padding: 0 16px 24px; gap: 12px; }
  .layout { flex-direction: column; align-items: stretch; gap: 12px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-main-side { grid-template-columns: 1fr; }
  .xp-card { height: auto; }
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .podium { grid-template-columns: 1fr; }
  .profile-btn .lvl-mini { display: none; }
  .toasts { top: 70px; }
}
@media (max-width: 767px) {
  body { padding-bottom: 0; }
  .tools-bar { display: none; }
  .hdr-top { padding: 0 12px; gap: 8px; }
  .hdr-right { gap: 6px; }
  .hdr-left { gap: 8px; }
  .search { position: static; }
  .search-box { width: 36px; padding: 0; justify-content: center; border-color: transparent; background: none; }
  .search-box input, .search-box .kbd { display: none; }
  .search.is-open .search-box { position: absolute; left: 12px; right: 12px; top: 13px; width: auto; padding: 0 12px; background: var(--color-Input); border-color: var(--color-PrimaryYellow); justify-content: flex-start; z-index: 2; }
  .search.is-open .search-box input { display: block; }
  .search-pop { left: 12px; right: 12px; width: auto; top: 54px; }
  .net-btn { display: none; }
  .profile-btn { padding: 0 4px; }
  .profile-btn .xp-mini { display: none; }
  .concept-tag { font-size: 10px; padding: 0 4px; }
  .panel { padding: 16px; border-radius: 12px; }
  .sec-head { padding-bottom: 16px; margin-bottom: 16px; }
  .sec-title h2 { font-size: 20px; line-height: 28px; }
  .sec-right { margin-left: 0; width: 100%; }
  .tab { font-size: 16px; line-height: 24px; }
  .tabs { gap: 16px; }
  .hero { height: auto; }
  .hero__body { padding: 20px 16px; }
  .hero h1 { font-size: 24px; line-height: 32px; }
  .hero__actions .btn { min-width: 0; flex: 1; }
  .stats { gap: 8px; }
  .stat { padding: 12px; gap: 10px; }
  .stat__ic { width: 32px; height: 32px; }
  .stat b { font-size: 16px; line-height: 24px; }
  .stat small { white-space: normal; }
  .g-2, .g-3, .g-4, .cols-3 { grid-template-columns: minmax(0, 1fr); }
  .vpanel__head { flex-wrap: wrap; row-gap: 8px; }
  .vpanel__head a + .grow { flex-basis: calc(100% - 52px); }
  .vpanel__head a + .grow + .pill { margin-left: 52px; }
  div.mrow { flex-wrap: wrap; }
  div.mrow .mrow__body { flex-basis: calc(100% - 48px); }
  div.mrow .mrow__side { margin-left: 48px; }
  .mrow__title span:first-child, .xrow__body b { white-space: normal; }
  .stat:has(> .btn) { flex-wrap: wrap; }
  .stat:has(> .btn) > div { flex-basis: calc(100% - 52px); }
  .stat:has(> .btn) > .btn { width: 100%; }
  .cards { grid-template-columns: 1fr; }
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart--embed { height: 340px; }
  .badges { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .safeguards { grid-template-columns: 1fr; }
  .td-px { text-align: left; width: 100%; }
  .filter-toggle { display: inline-flex; }
  .filters { display: none; width: 100%; }
  .filters.is-open { display: flex; }
  .filters .sel, .filters .sel select { width: 100%; }
  .filters .sel { flex: 1 1 calc(50% - 4px); }
  .field--search { max-width: none; }
  .tbl .hide-m { display: none; }
  .foot { padding-bottom: 16px; }
  .dialog { padding: 20px; }
}
@media (max-width: 420px) {
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   Seasonal theme — "Nocturne": Dark Gothic Finance x Binance.
   Scoped to body.hw (remove the class on <body> to disable, or
   delete this block + the .hw-decor markup + assets/img/hw/).
   Antique gold on charcoal-aubergine, a fine-line engraving
   texture, a composed moonlit hero scene, and the Binance
   diamond reprised as the recurring seasonal ornament.
   ============================================================ */
body.hw {
  --hw-gold: #C8A24C;
  --hw-gold-bright: #E6C06A;
  --hw-gold-deep: #7d6225;
  --hw-amber: #D98A3A;
  --hw-aubergine: #1a1030;
  --hw-ink: #0f0a14;
  --hw-line: rgba(200, 162, 76, .22);

  /* Remap the shared accent tokens so the whole product follows along. */
  --color-BasicBg: var(--hw-ink);
  --color-PrimaryYellow: #D7A94E;
  --color-BtnBg: #E0A23C;
  --color-TextLink: #E3B35C;
  --color-TextOnYellow: #241403;
  --color-EmphasizeText: #E0913C;
  --color-YellowAlpha01: rgba(200, 162, 76, .14);
  --color-YellowAlpha02: rgba(200, 162, 76, .20);

  background-color: var(--hw-ink);
  background-image:
    radial-gradient(1200px 760px at 82% -12%, rgba(214, 186, 120, .10), transparent 58%),
    radial-gradient(1000px 680px at -10% 112%, rgba(72, 38, 96, .22), transparent 55%),
    radial-gradient(140% 130% at 50% 44%, transparent 60%, rgba(5, 3, 9, .55) 100%),
    linear-gradient(180deg, #120c1a 0%, #0f0a14 60%, #0c0811 100%),
    url(../assets/img/hw/texture-engrave.svg);
  background-size: auto, auto, auto, auto, 7px 7px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

/* ---- header + watchlist strip ---- */
body.hw .hdr { background: linear-gradient(180deg, rgba(26, 16, 48, .5), rgba(15, 10, 20, 0) 78%), var(--hw-ink); }
body.hw .hdr-top { border-bottom-color: var(--hw-line); }
body.hw .hdr-divider { background: var(--hw-ink); border-top: 1px solid var(--hw-line); box-shadow: 0 1px 10px rgba(200, 162, 76, .08); }
body.hw .watch-bar .wb-label .ic { color: var(--hw-gold); }
body.hw .nav a.is-active, body.hw .nav a:hover { color: var(--hw-gold-bright); }

/* ---- left rail: illuminated active state ---- */
body.hw .rail-item { background: #120d17; border-color: rgba(200, 162, 76, .06); }
body.hw .rail-item.is-active {
  background: linear-gradient(90deg, rgba(200, 162, 76, .16), rgba(200, 162, 76, .03));
  border-color: rgba(200, 162, 76, .26);
  box-shadow: inset 2px 0 0 var(--hw-gold), -2px 0 16px rgba(0, 0, 0, .45);
}
body.hw .rail-item.is-active .ic { color: var(--hw-gold-bright); }
body.hw .pill-tab.is-active { background: linear-gradient(180deg, rgba(200, 162, 76, .18), rgba(200, 162, 76, .05)); border-color: rgba(200, 162, 76, .24); }

/* ---- the recurring ornament: Binance diamond, re-cut in gold ---- */
body.hw .sec-title h2 { display: inline-flex; align-items: center; gap: 11px; }
body.hw .sec-title h2::before {
  content: ""; width: 9px; height: 9px; flex-shrink: 0; transform: rotate(45deg); border-radius: 1px;
  background: linear-gradient(135deg, var(--hw-gold-bright), var(--hw-gold-deep));
  box-shadow: 0 0 8px rgba(200, 162, 76, .35), inset 0 0 0 1px rgba(255, 240, 200, .25);
}

/* ---- panels + token cards: warm hairlines and top sheen ---- */
body.hw .panel { border-color: var(--hw-line); box-shadow: inset 0 1px 0 rgba(255, 236, 196, .04); }
body.hw .panel--flat { background: rgba(20, 14, 26, .5); box-shadow: none; }
body.hw .tcard { background: linear-gradient(180deg, rgba(28, 20, 38, .45), rgba(16, 11, 21, .45)); }
body.hw .tcard:hover { border-color: var(--hw-line); background: linear-gradient(180deg, rgba(36, 25, 48, .6), rgba(18, 12, 23, .6)); }
body.hw .stat, body.hw .xp-card { border-color: var(--hw-line); }
body.hw .xp-card { background: linear-gradient(180deg, rgba(28, 20, 38, .4), rgba(14, 10, 18, .15)); }

/* ---- primary action: struck antique-gold ---- */
body.hw .btn-y {
  background: linear-gradient(180deg, #ECC06B, #C68E2C);
  color: #2a1803;
  border: 1px solid rgba(120, 82, 24, .55);
  box-shadow: inset 0 1px 0 rgba(255, 246, 214, .55), 0 1px 2px rgba(0, 0, 0, .45);
}
body.hw .btn-y:hover { background: linear-gradient(180deg, #F1CB7A, #D29A36); opacity: 1; }
body.hw .hero__actions .btn-o { background: rgba(16, 11, 22, .5); border-color: rgba(200, 162, 76, .3); }

/* =================== the hero, as a composed scene =================== */
body.hw .hero {
  isolation: isolate;
  border-color: rgba(200, 162, 76, .22);
  box-shadow: inset 0 1px 0 rgba(255, 236, 196, .06), 0 30px 70px -40px rgba(0, 0, 0, .9);
  background: #0d0912;
}
/* back plate: moonlight parked on the right, aubergine depth, blackened-olive base */
body.hw .hero__bg {
  inset: 0; width: auto; height: auto; top: 0; right: 0; transform: none;
  opacity: 1; z-index: 0;
  background:
    radial-gradient(240px 240px at 90% 28%, rgba(236, 214, 150, .16), rgba(236, 214, 150, 0) 70%),
    radial-gradient(520px 400px at 100% -8%, rgba(214, 186, 120, .10), transparent 64%),
    radial-gradient(820px 640px at -12% 124%, rgba(74, 40, 98, .3), transparent 60%),
    linear-gradient(158deg, #1e1432 0%, #150e22 52%, #0d0914 100%);
}
/* mid plate: a large moon on the right, faded only at its left edge */
body.hw .hero::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: auto; left: auto; z-index: 1; pointer-events: none;
  width: min(340px, 46%); height: min(290px, 100%);
  background: url(../assets/img/hw/hero-scene.svg) right 0 top 0 / contain no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%);
}
/* front plate: a dark scrim under the copy so the headline stays crisp */
body.hw .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12, 8, 17, .94) 0%, rgba(12, 8, 17, .88) 32%, rgba(12, 8, 17, .42) 58%, transparent 78%);
}
body.hw .hero__body { position: relative; z-index: 2; }
body.hw .hero h1 { letter-spacing: .2px; max-width: 18rem; text-shadow: 0 1px 2px rgba(6, 4, 10, .95), 0 10px 28px rgba(6, 4, 10, .72); }
body.hw .hero p { max-width: calc(100% - 168px); }
body.hw .hero h1 em { color: var(--hw-gold-bright); text-shadow: 0 1px 2px rgba(6, 4, 10, .9), 0 0 18px rgba(214, 186, 120, .28); }
body.hw .hero__chip {
  background: rgba(16, 11, 22, .6); border: 1px solid rgba(200, 162, 76, .32);
  color: var(--hw-gold-bright); backdrop-filter: blur(6px);
}

/* ---- peripheral ornament: faint gilt filigree in the gutters ---- */
.hw-decor { display: none; }
body.hw .hw-decor { display: block; position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
body.hw .hw-corner {
  position: absolute; width: clamp(96px, 9vw, 150px); aspect-ratio: 1; opacity: .4;
  background: url(../assets/img/hw/corner-filigree.svg) center / contain no-repeat;
}
body.hw .hw-corner--bl { left: 10px; bottom: 54px; transform: scaleY(-1); }
body.hw .hw-corner--br { right: 10px; bottom: 54px; transform: scale(-1, -1); }

@media (max-width: 1199px) {
  body.hw .hw-corner { display: none; }
}
@media (max-width: 767px) {
  body.hw .hero::before { width: min(168px, 48%); height: 168px; opacity: .7; }
  body.hw .hero h1, body.hw .hero p { max-width: none; }
  body.hw .hero::after { background: linear-gradient(90deg, rgba(12, 8, 17, .94) 0%, rgba(12, 8, 17, .82) 46%, rgba(12, 8, 17, .28) 74%, transparent 100%); }
}

/* ============================================================
   Nocturne polish. Ornaments stay hidden until body.hw is on,
   so the plain dark theme has no leftover seasonal chrome.
   ============================================================ */

.foot-orn, .podium-orn, .hw-event { display: none; }
.camp__seal { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; color: var(--color-PrimaryYellow); pointer-events: none; }
.camp__seal svg { display: block; width: 100%; height: 100%; }
.m-event { display: inline-flex; align-items: center; height: 16px; margin-right: 6px; padding: 0 5px; border-radius: 3px; background: var(--color-YellowAlpha01); color: var(--color-TextLink); font-size: 10px; line-height: 16px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }

/* ---- moon toggle ---- */
body.hw .moon-btn { color: var(--hw-gold-bright); background: rgba(200, 162, 76, .12); box-shadow: inset 0 0 0 1px rgba(200, 162, 76, .32); }
body.hw .moon-btn:hover { color: #F3E2B8; background: rgba(200, 162, 76, .2); }

/* ---- scrollbar + selection ---- */
html:has(body.hw) { scrollbar-width: thin; scrollbar-color: #7d6225 #0f0a14; }
html:has(body.hw)::-webkit-scrollbar { width: 10px; height: 10px; }
html:has(body.hw)::-webkit-scrollbar-track { background: #0f0a14; }
html:has(body.hw)::-webkit-scrollbar-thumb { background: #7d6225; border: 2px solid #0f0a14; border-radius: 8px; }
body.hw ::selection { background: #7d6225; color: #fff6e0; }

/* ---- footer filigree ---- */
body.hw .foot { border-top-color: rgba(200, 162, 76, .28); }
body.hw .foot-orn { display: flex; justify-content: center; flex: 1 0 100%; margin: 0 0 2px; color: var(--hw-gold); }
body.hw .foot-orn svg { width: min(220px, 72vw); height: 16px; }

/* ---- engraved medallions ---- */
body.hw .bdg { background: linear-gradient(180deg, rgba(18, 12, 24, .55), rgba(8, 6, 12, .72)); border: 1px solid rgba(200, 162, 76, .1); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .4); }
body.hw .bdg:not(.is-on) .bdg__ic { background: #100c14; color: rgba(200, 162, 76, .32); box-shadow: inset 0 3px 8px rgba(0, 0, 0, .72), inset 0 0 0 1px rgba(200, 162, 76, .12); filter: saturate(.15) brightness(.8); }
body.hw .bdg:not(.is-on) b { color: var(--color-TertiaryText); }
body.hw .bdg.is-on { border-color: rgba(200, 162, 76, .28); background: linear-gradient(180deg, rgba(200, 162, 76, .1), rgba(16, 11, 20, .35)); box-shadow: inset 0 1px 0 rgba(255, 236, 196, .08); }
body.hw .bdg.is-on .bdg__ic {
  color: #241403; filter: none;
  background:
    url(../assets/img/hw/texture-engrave.svg),
    radial-gradient(circle at 32% 26%, #F6E0A4, #E0B45A 36%, #C4923A 64%, #7A5A1C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, .85),
    inset 0 -3px 5px rgba(80, 48, 8, .45),
    0 0 0 2px #161018,
    0 0 0 3.5px rgba(230, 192, 106, .9),
    0 8px 16px rgba(0, 0, 0, .4);
}
body.hw .bdg.is-on b { color: #F3E2B8; }
body.hw .bdg--event.is-on .bdg__ic { box-shadow: inset 0 1px 0 rgba(255, 248, 220, .85), inset 0 -3px 5px rgba(80, 48, 8, .45), 0 0 0 2px #161018, 0 0 0 3.5px var(--hw-gold-bright), 0 0 18px rgba(200, 162, 76, .4); }
body.hw .lvl-medal {
  width: 64px; height: 64px; font-size: 22px; font-weight: 700; color: #241403;
  background:
    url(../assets/img/hw/texture-engrave.svg),
    radial-gradient(circle at 32% 26%, #F6E0A4, #E0B45A 40%, #C4923A 70%, #7A5A1C);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, .8),
    inset 0 -3px 6px rgba(70, 42, 8, .45),
    0 0 0 3px #140e1c,
    0 0 0 5px rgba(200, 162, 76, .75);
}

/* ---- leaderboard gilt frames (1 brightest, then cooler and dimmer) ---- */
body.hw .podium-orn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: -6px 0 14px; color: var(--hw-gold); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
body.hw .podium-orn::before, body.hw .podium-orn::after { content: ""; width: 42px; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 162, 76, .75)); }
body.hw .podium-orn::after { background: linear-gradient(90deg, rgba(200, 162, 76, .75), transparent); }
body.hw .podium-orn span { display: inline-flex; align-items: center; gap: 8px; }
body.hw .podium-orn span::before { content: ""; width: 7px; height: 7px; transform: rotate(45deg); background: linear-gradient(135deg, var(--hw-gold-bright), var(--hw-gold-deep)); flex-shrink: 0; }
body.hw .podium .pcard { background: linear-gradient(180deg, rgba(28, 20, 38, .8), rgba(14, 10, 18, .92)); }
body.hw .podium .pcard:nth-child(1) { border-color: rgba(230, 192, 106, .78); box-shadow: inset 0 0 0 1px rgba(246, 224, 164, .32), 0 12px 28px -18px rgba(200, 162, 76, .7); }
body.hw .podium .pcard:nth-child(2) { border-color: rgba(200, 162, 76, .42); box-shadow: inset 0 0 0 1px rgba(200, 162, 76, .14); }
body.hw .podium .pcard:nth-child(3) { border-color: rgba(125, 98, 37, .62); box-shadow: inset 0 0 0 1px rgba(125, 98, 37, .22); }
body.hw .medal i.m1 { background: linear-gradient(160deg, #F6E0A4, #E0A23C); color: #241403; border-color: #3a2a12; }
body.hw .medal i.m2 { background: linear-gradient(160deg, #C8A24C, #8d6b2e); color: #241403; border-color: #2c2110; }
body.hw .medal i.m3 { background: linear-gradient(160deg, #8a6a32, #4e3a16); color: #f6e7c1; border-color: #24180c; }

/* ---- vote bar: engraved 50% tick, faint gold rim on a strong YES ---- */
body.hw .vbar { position: relative; overflow: visible; background: #120c18; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55); }
body.hw .vbar::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; transform: translate(-50%, -50%) rotate(45deg); background: linear-gradient(135deg, var(--hw-gold-bright), var(--hw-gold-deep)); box-shadow: 0 0 0 2px #120c18; z-index: 2; pointer-events: none; }
body.hw .vbar--lg::after { width: 8px; height: 8px; }
body.hw .vbar[data-sent="strong-yes"] { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55), 0 0 0 1px rgba(230, 192, 106, .7); }

/* ---- open-poll cards: hairline + diamond corner ---- */
body.hw .tcard--open, body.hw .vpanel--open { border-color: rgba(200, 162, 76, .4); box-shadow: inset 0 0 0 1px rgba(200, 162, 76, .1); }
body.hw .vpanel--open { position: relative; }
body.hw .tcard--open::before, body.hw .vpanel--open::before { content: ""; position: absolute; top: 8px; left: 8px; width: 6px; height: 6px; transform: rotate(45deg); background: linear-gradient(135deg, var(--hw-gold-bright), var(--hw-gold-deep)); box-shadow: 0 0 0 1px rgba(36, 20, 3, .35); pointer-events: none; z-index: 1; }

/* ---- seasonal event banner ---- */
body.hw .hw-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px 22px; align-items: center; position: relative; overflow: hidden; padding: 20px 22px; border-radius: 16px; border: 1px solid rgba(200, 162, 76, .32); background: radial-gradient(480px 180px at 0 0, rgba(200, 162, 76, .14), transparent 68%), linear-gradient(180deg, rgba(28, 20, 38, .82), rgba(14, 10, 18, .88)); box-shadow: inset 0 1px 0 rgba(255, 236, 196, .07); }
body.hw .hw-event__seal, body.hw .hw-event__body, body.hw .hw-event__side { position: relative; z-index: 1; }
body.hw .hw-event__seal { width: 72px; height: 72px; color: var(--hw-gold-bright); filter: drop-shadow(0 0 10px rgba(200, 162, 76, .28)); }
body.hw .hw-event__seal svg { display: block; width: 100%; height: 100%; }
body.hw .hw-event__kicker { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--hw-gold); margin-bottom: 4px; }
body.hw .hw-event__title { font-size: 22px; line-height: 30px; font-weight: 600; color: #F3E2B8; }
body.hw .hw-event__copy { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--color-ParagraphText); max-width: 62ch; }
body.hw .hw-event__side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 200px; }
body.hw .hw-event__meter { width: 100%; display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 18px; color: var(--color-SecondaryText); }
body.hw .hw-event__meter div { display: flex; justify-content: space-between; gap: 12px; }
body.hw .hw-event__time { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 18px; color: var(--color-SecondaryText); }
body.hw .hw-event__time .ic { width: 14px; height: 14px; color: var(--hw-gold); }
body.hw .mrow--event { box-shadow: inset 2px 0 0 rgba(200, 162, 76, .6); }
body.hw .camp--event { border: 1px solid rgba(200, 162, 76, .32); background: linear-gradient(180deg, rgba(200, 162, 76, .1), rgba(16, 11, 21, .35)); }
body.hw .camp__seal { color: var(--hw-gold-bright); }

/* ---- connect modal ---- */
body.hw .dialog--connect { background: linear-gradient(180deg, rgba(32, 22, 44, .98), rgba(15, 10, 20, .98)), url(../assets/img/hw/texture-engrave.svg); border-color: rgba(200, 162, 76, .38); box-shadow: inset 0 1px 0 rgba(255, 236, 196, .08), 0 24px 64px rgba(0, 0, 0, .55); }
body.hw .dialog--connect .dialog__head { border-bottom: 1px solid rgba(200, 162, 76, .18); }
body.hw .dialog--connect .dialog__head h2 { display: inline-flex; align-items: center; gap: 10px; }
body.hw .dialog--connect .dialog__head h2::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: linear-gradient(135deg, var(--hw-gold-bright), var(--hw-gold-deep)); box-shadow: 0 0 8px rgba(200, 162, 76, .35); }
body.hw .dialog--connect .wallet-opt { background: rgba(12, 8, 16, .62); border-color: rgba(200, 162, 76, .18); }
body.hw .dialog--connect .wallet-opt:hover { border-color: rgba(230, 192, 106, .7); background: rgba(28, 20, 38, .8); }
body.hw .dialog--connect .wallet-opt--rec { border-color: rgba(200, 162, 76, .55); box-shadow: inset 0 0 0 1px rgba(200, 162, 76, .16); }
body.hw .dialog--connect .tag-y { height: 20px; padding: 0 6px; border-radius: 4px; border: 1px solid rgba(200, 162, 76, .45); background: rgba(200, 162, 76, .16); color: var(--hw-gold-bright); font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
body.hw .dialog--connect .wallet-other { color: var(--hw-gold-bright); }
body.hw .dialog--connect.has-more .dialog__body { box-shadow: inset 0 -22px 18px -16px rgba(8, 5, 12, .9); }
body.hw .dialog--connect .dialog__body { scrollbar-color: #7d6225 transparent; }

@media (max-width: 767px) {
  body.hw .hw-event { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 12px 14px; }
  body.hw .hw-event__seal { width: 56px; height: 56px; }
  body.hw .hw-event__title { font-size: 18px; line-height: 26px; }
  body.hw .hw-event__side { grid-column: 1 / -1; align-items: stretch; min-width: 0; }
  body.hw .hw-event__side .btn { width: 100%; }
  body.hw .podium-orn { letter-spacing: .08em; }
  body.hw .podium-orn::before, body.hw .podium-orn::after { width: 20px; }
  /* Wallet connect becomes a bottom sheet. Everything — list, alternate
     wallet, disclaimer — sits in view; the sheet itself does not scroll. */
  .modal:has(.dialog--connect) {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
  }
  .modal:has(.dialog--connect) .dialog.dialog--connect {
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .dialog--connect .dialog__head { padding: 16px 16px 8px; }
  .dialog--connect .dialog__head h2 { font-size: 18px; line-height: 24px; }
  .dialog--connect .dialog__body {
    overflow: visible;
    max-height: none;
    flex: none;
    padding: 2px 16px 14px;
  }
  .dialog--connect .wallet-list { gap: 6px; margin-top: 10px; }
  .dialog--connect .wallet-opt { height: 48px; }
  .dialog--connect .wallet-other { min-height: 36px; margin-top: 8px; padding: 6px 12px; }
  .dialog--connect .wallet-terms { margin-top: 6px; }
  .dialog--connect.has-more .dialog__body { box-shadow: none; }
}
@media (max-height: 740px) {
  .dialog--connect .wallet-opt { height: 48px; }
  .dialog--connect .wallet-list { gap: 6px; }
}