@charset "utf-8";

* { box-sizing: border-box; }

:root { --bg: #0e0f14; --sidebar-bg: #111318; --panel: #18191f; --panel2: #1e2027; --border: #26272e; --text: #f0f1f5; --muted: #6b7280; --muted2: #9ca3af; --green: #86efac; --green-strong: #22c55e; --green-dim: #0d2318; --green-ink: #052e16; --red: #ef4444; --red-dim: #2d1214; --accent: #86efac; --sidebar-w: 212px; }

body { margin: 0px; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; }

.app-layout { display: flex; min-height: 100vh; }

.sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0px; left: 0px; height: 100vh; z-index: 20; overflow: hidden auto; transition: width 0.2s, min-width 0.2s; }

.sidebar--collapsed .sidebar-nav { padding: 4px 8px; }

.sidebar--collapsed .nav-item { justify-content: center; padding: 9px 0px; }

.sidebar--collapsed .sidebar-cta { padding: 11px 0px; }

.sidebar--collapsed .sidebar-cta-wrap { padding: 10px 8px 6px; }

.sidebar-logo { display: flex; align-items: center; gap: 6px; padding: 18px 16px 14px; text-decoration: none; min-width: 0px; }

.sidebar--collapsed .sidebar-logo { padding: 18px 8px 14px; justify-content: center; gap: 0px; }

.sidebar-logo-text { font-size: 17px; font-weight: 800; letter-spacing: -0.4px; color: var(--text); flex: 1 1 0%; min-width: 0px; overflow: hidden; white-space: nowrap; }

.sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 6px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: transparent; color: var(--muted2); cursor: pointer; flex-shrink: 0; margin-left: auto; transition: background 0.12s, color 0.12s; }

.sidebar-toggle:hover { background: var(--panel2); color: var(--text); }

.sidebar--collapsed .sidebar-toggle { margin-left: 0px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; flex: 1 1 0%; }

.nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; background: transparent; width: 100%; text-align: left; transition: background 0.12s, color 0.12s; white-space: nowrap; position: relative; }

.nav-item-active { background: var(--panel2); color: var(--text); }

.nav-item-inactive { color: var(--muted2); }

.nav-item-inactive:hover { background: var(--panel2); color: var(--text); }

.nav-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }

.nav-badge { margin-left: auto; background: var(--green); color: var(--green-ink); font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.2px; }

.nav-badge--dot { margin-left: 0px; padding: 2px 4px; font-size: 8px; position: absolute; top: 6px; right: 6px; }

.sidebar-cta-wrap { padding: 10px 12px 6px; }

.sidebar-cta { width: 100%; background: var(--green); color: var(--green-ink); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 12px; padding: 11px 14px; font-size: 14px; font-weight: 800; cursor: pointer; transition: background 0.12s; letter-spacing: -0.2px; display: flex; align-items: center; justify-content: center; gap: 6px; }

.sidebar-cta:hover { background: rgb(157, 243, 187); }

.sidebar-cta-wrap { position: relative; }

.create-dropdown { position: absolute; bottom: calc(100% + 8px); left: 0px; right: 0px; background: rgb(28, 29, 36); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: rgba(0, 0, 0, 0.45) 0px 8px 32px; z-index: 100; animation: 0.15s ease 0s 1 normal none running dropup; }

.create-dropdown--right { left: calc(100% + 8px); right: auto; bottom: 0px; width: 220px; animation: 0.15s ease 0s 1 normal none running dropin; }

@keyframes dropin { 
  0% { opacity: 0; transform: translate(-6px); }
  100% { opacity: 1; transform: translate(0px); }
}

@keyframes dropup { 
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.create-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--text); cursor: pointer; text-align: left; transition: background 0.12s; width: 100%; }

.create-option:hover { background: var(--panel); }

.create-option + .create-option { border-top: 1px solid var(--border); }

.create-option-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }

.create-option-label { font-size: 14px; font-weight: 700; }

.create-option-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }

.sidebar-footer { padding: 10px 12px 20px; border-top: 1px solid var(--border); margin-top: 6px; }

.sidebar-tagline { display: flex; flex-direction: column; align-items: center; gap: 0px; padding: 8px 10px; }

.sidebar-tagline-top { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: 1px; text-transform: uppercase; }

.sidebar-tagline-bottom { font-size: 16px; font-weight: 900; letter-spacing: -0.3px; color: rgb(255, 107, 53); }

.main-area { margin-left: var(--sidebar-w); flex: 1 1 0%; min-width: 0px; display: flex; flex-direction: column; transition: margin-left 0.2s; }

.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; border-bottom: 1px solid var(--border); background: var(--bg); position: sticky; top: 0px; z-index: 10; }

.topbar-search { flex: 1 1 0%; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0px 12px; max-width: 420px; }

.topbar-search input { flex: 1 1 0%; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--text); font-size: 14px; padding: 9px 0px; outline: none; }

.topbar-search input::placeholder { color: var(--muted); }

.topbar-search-kbd { display: flex; gap: 3px; align-items: center; }

.topbar-search-clear { background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 4px; line-height: 1; flex-shrink: 0; }

.topbar-search-clear:hover { color: var(--text); background: var(--panel2); }

kbd { background: var(--panel2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-size: 11px; color: var(--muted); font-family: inherit; }

.topbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.wallet-btn { background: transparent; border: 1.5px solid var(--green); color: var(--green); padding: 8px 18px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.12s, color 0.12s; white-space: nowrap; }

.wallet-btn:hover { background: var(--green); color: var(--green-ink); }

.wallet-connected { display: flex; align-items: center; gap: 6px; }

.wallet-addr, .wallet-balance-inline { font-size: 14px; font-weight: 700; }

.wallet-sep { font-size: 12px; opacity: 0.4; font-weight: 400; }

.wallet-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: 1.6s ease 0s infinite normal none running pulse; flex-shrink: 0; }

.page-content { padding: 28px 28px 70px; max-width: 1100px; }

.hero { margin: 0px 0px 28px; }

.hero h1 { font-size: 36px; margin: 0px 0px 10px; letter-spacing: -1.2px; color: var(--text); }

.hero p { color: var(--muted2); max-width: 560px; margin: 0px 0px 18px; line-height: 1.6; }

.hero-row { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }

.stats { display: flex; gap: 26px; }

.stats div { display: flex; flex-direction: column; }

.stats b { font-size: 18px; }

.stats span { color: var(--muted); font-size: 12px; }

.filter-bar { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.filter-bar-top { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }

.filter-bar-controls { display: flex; gap: 8px; align-items: center; margin-left: auto; }

.sort-select { background-size: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; border: 1px solid var(--border); color: var(--text); padding: 7px 28px 7px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; outline: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; transition: border-color 0.12s; }

.sort-select:hover { border-color: var(--green); }

.sort-select option { background: var(--panel2); }

.size-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; }

.size-filters-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.size-chips-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }

.sort-row { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.size-chip { background: transparent; border: 1px solid var(--border); color: var(--muted); padding: 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; white-space: nowrap; }

.size-chip:hover { color: var(--text); border-color: rgb(58, 77, 119); }

.size-chip-active { background: var(--panel2); color: var(--text); border-color: var(--green); }

.sort-chip { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center no-repeat transparent; border: 1px solid var(--border); color: var(--muted); padding: 5px 28px 5px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; cursor: pointer; appearance: none; white-space: nowrap; font-family: inherit; transition: color 0.12s, border-color 0.12s; }

.sort-chip:hover { color: var(--text); border-color: rgb(58, 77, 119); }

.sort-chip option { background: var(--panel2); }

.filter-count { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

.tabs { display: flex; gap: 4px; }

.tabs button { background: transparent; color: var(--muted); border: 1px solid transparent; padding: 7px 16px; border-radius: 999px; cursor: pointer; font-size: 14px; font-weight: 600; }

.tabs button.active { background: var(--panel2); color: var(--text); border-color: var(--border); }

.groups { display: flex; flex-direction: column; gap: 10px; }

.group { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; transition: border-color 0.15s; }

.group:hover, .group-open { border-color: rgb(44, 61, 99); }

.group-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; }

.group-id { min-width: 0px; }

.group-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

.chev { color: var(--muted); transition: transform 0.15s; font-size: 14px; }

.chev-open { transform: rotate(180deg); }

.group-grid { padding: 0px 14px 14px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }

.card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s, transform 0.15s; }

.card:hover { border-color: rgb(44, 61, 99); transform: translateY(-1px); }

.card-done { opacity: 0.82; }

.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }

.token { display: flex; gap: 10px; align-items: center; min-width: 0px; }

.token-img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; background: var(--panel2); }

.token-img-fallback { display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); font-size: 13px; text-transform: uppercase; }

.token-name { font-weight: 700; font-size: 15px; display: flex; gap: 6px; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.token-sym { color: var(--muted); font-size: 12px; font-weight: 600; }

.mint-link { color: var(--muted); font-size: 12px; font-family: ui-monospace, monospace; cursor: pointer; user-select: none; }

.mint-link:hover { color: var(--green); }

.cat { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }

.cat-0 { background: rgb(28, 21, 53); color: rgb(183, 156, 255); }

.cat-1 { background: rgb(16, 35, 56); color: rgb(108, 180, 255); }

.cat-2 { background: rgb(43, 28, 13); color: rgb(255, 180, 92); }

.cat-3, .tag-gold { background: rgb(43, 34, 8); color: rgb(251, 191, 36); }

.question { font-size: 15px; font-weight: 650; line-height: 1.35; }

.card-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.tag { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }

.tag-grey { background: var(--panel2); color: var(--muted); }

.tag-green { background: var(--green-dim); color: rgb(74, 222, 128); }

.tag-red { background: var(--red-dim); color: rgb(248, 113, 113); }

.tag-live { background: var(--green-dim); color: rgb(74, 222, 128); display: inline-flex; gap: 6px; align-items: center; }

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: 1.6s ease 0s infinite normal none running pulse; }

@keyframes pulse { 
  50% { opacity: 0.3; }
}

.pools .bar { height: 8px; border-radius: 999px; background: rgba(239, 68, 68, 0.25); overflow: hidden; }

.bar-yes { height: 100%; background: linear-gradient(90deg, rgb(22, 163, 74), rgb(34, 197, 94)); }

.yes { color: rgb(74, 222, 128); }

.no { color: rgb(248, 113, 113); }

.race { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }

.race-bar { height: 10px; border-radius: 999px; background: var(--panel2); overflow: hidden; }

.race-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,var(--green-strong),var(--green)); transition: width 0.6s; }

.race-hot { background: linear-gradient(90deg, rgb(245, 158, 11), rgb(239, 68, 68)); animation: 1.4s ease 0s infinite normal none running glow; }

@keyframes glow { 
  50% { filter: brightness(1.35); }
}

.race-labels { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 7px; flex-wrap: wrap; }

.race-labels b { color: var(--text); }

.delta-up { color: rgb(74, 222, 128); font-weight: 700; }

.delta-down { color: rgb(248, 113, 113); font-weight: 700; }

.odds-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }

.odds-chip { font-size: 15px; font-weight: 800; padding: 2px 0px; }

.odds-yes { color: rgb(74, 222, 128); }

.odds-no { color: rgb(248, 113, 113); }

.odds-vol { font-size: 11.5px; color: var(--muted); }

.tag-amber { background: rgb(45, 32, 8); color: rgb(251, 191, 36); display: inline-flex; gap: 6px; align-items: center; }

.tag-amber .dot { background: rgb(251, 191, 36); }

.tag-red .dot { background: var(--red); }

.tag-urgent { display: inline-flex; gap: 6px; align-items: center; animation: 1s ease 0s infinite normal none running urgentpulse; }

@keyframes urgentpulse { 
  50% { box-shadow: rgba(239, 68, 68, 0.5) 0px 0px 12px; }
}

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

.bet-hint { font-size: 11.5px; color: var(--muted); text-align: center; }

.position { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; }

.actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }

.oracle-row { display: flex; gap: 6px; }

.betbox { display: flex; gap: 8px; }

.amt { display: flex; align-items: center; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0px 10px 0px 0px; flex: 0 0 92px; }

.amt input { width: 100%; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--text); padding: 9px 4px 9px 10px; font-size: 14px; outline: none; }

.amt span { color: var(--muted); font-size: 13px; }

.btn { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: rgb(255, 255, 255); padding: 9px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }

.btn small { font-weight: 600; opacity: 0.75; font-size: 11px; }

.btn:disabled { opacity: 0.45; cursor: default; }

.btn-green { background: rgb(21, 128, 61); flex: 1 1 0%; }

.btn-green:hover:not(:disabled) { background: rgb(22, 163, 74); }

.btn-red { background: rgb(185, 28, 28); flex: 1 1 0%; }

.btn-red:hover:not(:disabled) { background: rgb(220, 38, 38); }

.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--muted); }

.btn-outline:hover:not(:disabled) { color: rgb(255, 255, 255); border-color: rgb(58, 77, 119); }

.btn-cta { background: var(--green); color: var(--green-ink); padding: 11px 22px; font-size: 14.5px; border-radius: 12px; }

.btn-cta:hover:not(:disabled) { background: rgb(157, 243, 187); }

.toast { padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; word-break: break-word; }

.toast-ok { background: var(--green-dim); color: rgb(74, 222, 128); border: 1px solid rgb(20, 83, 45); }

.toast-err { background: var(--red-dim); color: rgb(252, 165, 165); border: 1px solid rgb(127, 29, 29); }

.empty { color: var(--muted); text-align: center; padding: 60px 0px; grid-column: 1 / -1; }

.empty a { color: var(--green); cursor: pointer; }

.hint { color: var(--muted); font-size: 13px; line-height: 1.5; }

footer { margin-top: 40px; color: rgb(82, 93, 117); font-size: 12px; text-align: center; line-height: 1.8; }

code { background: var(--panel2); padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }

.modal-bg { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }

.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 22px; width: 460px; max-width: 100%; }

.modal h2 { margin: 0px 0px 8px; font-size: 19px; }

.modal input { width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--text); padding: 11px 12px; border-radius: 10px; font-size: 14px; margin-top: 12px; font-family: ui-monospace, monospace; outline: none; }

.modal input:focus { border-color: var(--green); }

.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

@keyframes lm-spin { 
  100% { transform: rotate(360deg); }
}

@keyframes lm-fade-in { 
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0px); }
}

.lm-btn-spinner { display: inline-block; width: 13px; height: 13px; border-width: 2px; border-style: solid; border-color: rgb(0, 0, 0) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25); border-image: initial; border-radius: 50%; animation: 0.7s linear 0s infinite normal none running lm-spin; flex-shrink: 0; }

.lm-status { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 12px; animation: 0.3s ease 0s 1 normal both running lm-fade-in; }

.lm-status-checking { background: rgba(0, 220, 110, 0.06); border: 1px solid rgba(0, 220, 110, 0.2); }

.lm-status-signing { background: rgba(255, 190, 50, 0.07); border: 1px solid rgba(255, 190, 50, 0.25); }

.lm-status-done { background: rgba(0, 220, 110, 0.08); border: 1px solid rgba(0, 220, 110, 0.3); }

.lm-status-spinner { display: inline-block; width: 22px; height: 22px; border-width: 2.5px; border-style: solid; border-right-color: rgba(0, 220, 110, 0.2); border-bottom-color: rgba(0, 220, 110, 0.2); border-left-color: rgba(0, 220, 110, 0.2); border-image: initial; border-top-color: var(--green); border-radius: 50%; animation: 0.85s linear 0s infinite normal none running lm-spin; flex-shrink: 0; }

.lm-status-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255, 190, 50, 0.12); color: rgb(255, 190, 50); }

.lm-status-icon-ok { background: rgba(0, 220, 110, 0.12); color: var(--green); }

.lm-status-text { display: flex; flex-direction: column; gap: 3px; }

.lm-status-title { font-size: 14px; font-weight: 700; color: var(--text); }

.lm-status-sub { font-size: 12px; color: var(--muted); line-height: 1.45; }

.bet-confirm-modal { max-width: 380px; }

.bconf-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0px; border-bottom: 1px solid var(--border); }

.bconf-label { color: var(--muted); font-size: 13px; }

.bconf-val { font-size: 14px; font-weight: 600; text-align: right; max-width: 60%; word-break: break-word; }

.bconf-side { font-size: 15px; }

.bconf-yes { color: var(--green); }

.bconf-no { color: var(--red); }

.bconf-amount-row { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; padding-bottom: 0px; }

.bconf-amount { font-size: 22px; color: var(--text); }

.bconf-notice { margin: 12px 0px 0px; padding: 10px 12px; background: rgba(255, 200, 50, 0.08); border: 1px solid rgba(255, 200, 50, 0.25); border-radius: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }

.modal-x { position: absolute; top: 14px; right: 14px; background: var(--panel2); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px; z-index: 2; }

.modal-x:hover { color: var(--text); }

.bd-link { display: inline-block; color: var(--muted); font-size: 13px; text-decoration: none; margin-top: 6px; }

.bd-link:hover { color: var(--green); }

.group-clickable .group-head { cursor: pointer; }

.group-clickable:hover { border-color: rgb(58, 77, 68); }

.bd2 { position: relative; display: grid; grid-template-columns: 1fr 320px; grid-template-rows: auto 1fr; gap: 0px; width: 880px; max-width: 100%; max-height: 90vh; background: var(--panel); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }

.bd2-hero { grid-area: 1 / 1; display: flex; gap: 16px; align-items: flex-start; padding: 26px 62px 0px 26px; }

.bd2-body { grid-area: 2 / 1; padding: 20px 26px 26px; overflow-y: auto; }

.bd2-img { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; flex-shrink: 0; background: var(--panel2); }

.bd2-img-fallback { display: flex; align-items: center; justify-content: center; font-size: 44px; }

.bd2-tagrow { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

.bd2-title { margin: 0px; font-size: 26px; line-height: 1.2; letter-spacing: -0.6px; }

.bd2-section { margin-bottom: 22px; }

.bd2-section h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin: 0px 0px 10px; }

.bd2-section p { margin: 0px; line-height: 1.7; font-size: 14.5px; color: rgb(212, 216, 224); white-space: pre-wrap; }

.bd2-deliverables { margin: 0px; padding: 0px; list-style: none; display: flex; flex-direction: column; gap: 8px; }

.bd2-deliverables li { line-height: 1.55; font-size: 14px; color: rgb(212, 216, 224); padding-left: 26px; position: relative; }

.bd2-deliverables li::before { content: "✓"; position: absolute; left: 0px; top: 0px; color: var(--green-strong); font-weight: 700; }

.bd2-showmore { color: var(--green); text-decoration: none; font-weight: 600; white-space: nowrap; }

.bd2-showmore:hover { text-decoration: underline; }

.bd2-side { grid-area: 1 / 2 / 3; background: var(--bg); border-left: 1px solid var(--border); padding: 22px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; max-height: 90vh; }

.bd2-reward { display: flex; flex-direction: column; gap: 2px; }

.bd2-reward-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

.bd2-reward-amt { font-size: 34px; font-weight: 800; letter-spacing: -1px; color: var(--green); }

.bd2-meta { display: flex; flex-direction: column; gap: 10px; }

.bd2-metarow { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--muted); }

.bd2-metarow b { color: var(--text); font-size: 14px; }

.bd2-betcard { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }

.bd2-q { font-size: 14px; font-weight: 700; line-height: 1.35; }

.bd2-actions { margin-top: 4px; }

.bd2-oracle { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }

.bd2-betcard .betwrap { width: 100%; }

.bd2-betcard .betbox { flex-wrap: wrap; }

.bd2-betcard .amt { flex: 1 1 100%; }

.bd2-betcard .btn-green, .bd2-betcard .btn-red { flex: 1 1 0%; }

.page-content-bounties { max-width: none; padding: 0px 0px 70px; }

.bl-layout { display: grid; grid-template-columns: 1fr 268px; gap: 0px 20px; padding: 28px; align-items: start; }

.bl-main { min-width: 0px; display: flex; flex-direction: column; }

.bl-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 20px; flex-wrap: wrap; }

.bl-header-left { display: flex; flex-direction: column; }

.bl-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--muted); text-transform: uppercase; margin-bottom: 4px; }

.bl-title { margin: 0px 0px 4px; font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }

.bl-sub { margin: 0px; color: var(--muted2); font-size: 13px; }

.bl-stats { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; padding-top: 4px; }

.bl-stat { display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 16px; min-width: 80px; }

.bl-stat b { font-size: 17px; font-weight: 800; color: var(--text); }

.bl-stat span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); }

.bl-stat-green b { color: var(--green); }

.bl-grid-wrap { min-width: 0px; }

.bl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding-top: 16px; }

.bc { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; cursor: pointer; transition: transform 0.15s, border-color 0.15s; display: flex; flex-direction: column; }

.bc:hover { transform: translateY(-2px); border-color: var(--green); }

.bc-img-wrap { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel2); flex-shrink: 0; }

.bc-img { width: 100%; height: 100%; object-fit: cover; }

.bc-img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 42px; }

.bc-img-overlay { position: absolute; inset: 0px; background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.72) 100%); pointer-events: none; }

.bc-badges { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }

.bc-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; padding: 3px 7px; border-radius: 20px; text-transform: uppercase; display: flex; align-items: center; gap: 4px; }

.bc-badge-open { background: rgba(34, 197, 94, 0.2); border: 1px solid var(--green-strong); color: var(--green); }

.bc-badge-closed { background: rgba(107, 114, 128, 0.25); border: 1px solid var(--border); color: var(--muted2); }

.bc-badge-open .dot { background: var(--green); width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.bc-ticker { font-size: 10px; font-weight: 600; color: var(--text); background: rgba(0, 0, 0, 0.55); padding: 3px 7px; border-radius: 20px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bc-body { padding: 12px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 0%; }

.bc-reward { font-size: 18px; font-weight: 800; color: var(--green); letter-spacing: -0.5px; }

.bc-title { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--text); }

.bc-meta-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.bc-vol { font-size: 11px; color: var(--muted); white-space: nowrap; }

.bc-odds-row { display: flex; align-items: center; gap: 6px; }

.bc-yes { font-size: 11px; font-weight: 700; color: var(--green); white-space: nowrap; }

.bc-no { font-size: 11px; font-weight: 700; color: var(--red); white-space: nowrap; }

.bc-bar { flex: 1 1 0%; height: 5px; background: var(--red); border-radius: 3px; overflow: hidden; }

.bc-bar-yes { height: 100%; background: var(--green); border-radius: 3px; }

.bc-mypos { font-size: 11px; color: var(--muted2); padding-top: 4px; border-top: 1px solid var(--border); }

.bc-mypos .yes { color: var(--green); }

.bc-mypos .no { color: var(--red); }

.bl-side { position: sticky; top: 72px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }

.bsp-create { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); }

.bsp-create-btn { width: 100%; justify-content: center; }

.bsp-section { padding: 14px 16px; border-bottom: 1px solid var(--border); }

.bsp-section:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

.bsp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

.bsp-head > span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.9px; color: var(--muted); }

.bsp-all { font-size: 11px; color: var(--green); cursor: pointer; text-decoration: none; }

.bsp-all:hover { text-decoration: underline; }

.bsp-item { display: flex; align-items: center; gap: 8px; padding: 6px 0px; cursor: pointer; border-radius: 8px; transition: background 0.1s; }

.bsp-item:hover { background: var(--panel2); margin: 0px -6px; padding: 6px; }

.bsp-rank { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 16px; text-align: center; }

.bsp-info { display: flex; align-items: center; gap: 7px; flex: 1 1 0%; min-width: 0px; overflow: hidden; }

.bsp-info > div { min-width: 0px; overflow: hidden; }

.bsp-img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }

.bsp-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bsp-reward { font-size: 12px; font-weight: 700; color: var(--green); white-space: nowrap; }

.tc-cats { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }

.tc-cat-pill { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.3px; white-space: nowrap; }

.tc-cat-live { background: rgba(34, 197, 94, 0.15); color: var(--green); border: 1px solid rgba(34, 197, 94, 0.3); }

.tc-cat-done { background: var(--panel2); color: var(--muted); border: 1px solid var(--border); }

.tc-cat-res { opacity: 0.75; }

.td-modal { position: relative; width: 960px; max-width: calc(-32px + 100vw); max-height: 90vh; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; overflow-y: auto; padding: 28px; display: flex; flex-direction: column; gap: 0px; }

.td-header { display: flex; gap: 18px; align-items: flex-start; padding-right: 40px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }

.td-img { width: 86px; height: 86px; border-radius: 16px; object-fit: cover; flex-shrink: 0; background: var(--panel2); }

.td-img-fallback { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 28px; color: var(--muted); text-transform: uppercase; }

.td-headerinfo { display: flex; flex-direction: column; gap: 8px; min-width: 0px; }

.td-title { margin: 0px; font-size: 26px; font-weight: 800; letter-spacing: -0.6px; }

.td-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.td-mintrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.td-section-label { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); margin: 22px 0px 14px; }

.td-markets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

.td-markets .card { background: var(--panel); border-color: var(--border); }

.td-markets .card:hover { border-color: rgba(0, 220, 110, 0.3); transform: translateY(-2px); }

.td-markets .betbox { display: grid; grid-template-columns: 76px 1fr; grid-template-rows: auto auto; gap: 6px; }

.td-markets .betbox .amt { grid-row: 1 / 3; flex: 0 0 auto; align-self: stretch; }

.td-markets .betbox .btn-green, .td-markets .betbox .btn-red { flex: 0 0 auto; white-space: nowrap; width: 100%; justify-content: center; padding: 9px 10px; }

@media (max-width: 680px) {
  .td-modal { width: 100%; border-radius: 18px 18px 0px 0px; max-height: 92vh; padding: 20px 16px 32px; }
  .td-header { padding-right: 36px; padding-bottom: 16px; }
  .td-img { width: 64px; height: 64px; border-radius: 12px; }
  .td-title { font-size: 20px; }
  .td-markets { grid-template-columns: 1fr; }
  .modal-bg:has(.td-modal) { padding: 0px; align-items: flex-end; }
}

.bottom-nav { display: none; }

@media (max-width: 900px) {
  :root { --sidebar-w: 64px; }
  .sidebar-logo-text { display: none; }
  .nav-item span:not(.nav-icon):not(.nav-badge) { display: none; }
  .nav-badge { display: none; }
  .sidebar-cta { font-size: 0px; padding: 11px 0px; gap: 0px; }
  .sidebar-cta::before { content: "+"; font-size: 20px; }
  .sidebar-helius-label { display: none; }
}

@media (max-width: 960px) {
  .bl-layout { grid-template-columns: 1fr; padding: 18px 16px; }
  .bl-side { position: static; margin-top: 20px; }
}

@media (max-width: 720px) {
  .bd2 { grid-template-columns: 1fr; grid-template-rows: auto auto auto; width: 100%; max-width: 460px; }
  .bd2-hero { grid-area: 1 / 1; }
  .bd2-side { grid-area: 2 / 1; border-left-width: medium; border-left-style: none; border-left-color: currentcolor; border-top: 1px solid var(--border); max-height: none; }
  .bd2-body { grid-area: 3 / 1; overflow-y: visible; }
  .page-content { padding: 16px; }
  .bl-body { padding: 0px 16px 20px; }
  .bl-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
}

@media (max-width: 600px) {
  .sidebar { display: none; }
  .main-area { margin-left: 0px; }
  .topbar { padding: 10px 14px; gap: 8px; }
  .topbar-search, .topbar-search-kbd { display: none; }
  .page-content { padding: 16px 14px 100px; }
  .page-content-bounties { padding: 0px 0px 100px; }
  .hero h1 { font-size: 26px; }
  .grid { grid-template-columns: 1fr; }
  .bl-layout { padding: 14px 14px 80px; }
  .bl-header { flex-direction: column; gap: 10px; padding: 0px 0px 14px; }
  .bl-header-left { padding: 0px; margin: 0px; }
  .bl-title { font-size: 21px; letter-spacing: -0.3px; }
  .bl-sub { font-size: 12px; margin: 0px; }
  .bl-sub + .bl-sub { display: none; }
  .bl-stats { flex-wrap: nowrap; gap: 5px; width: 100%; overflow: visible; }
  .bl-stat { flex: 1 1 0%; min-width: 0px; padding: 7px 8px; }
  .bl-stat b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .bl-stat span { font-size: 8px; letter-spacing: 0.4px; }
  .filter-bar { gap: 8px; margin-bottom: 12px; }
  .filter-bar-top { padding-bottom: 2px; }
  .tabs { width: 100%; justify-content: stretch; gap: 3px; }
  .tabs button { flex: 1 1 0%; text-align: center; padding: 6px 2px; font-size: 12px; white-space: nowrap; }
  .size-chips-row { display: none; }
  .size-filters { flex-wrap: nowrap; gap: 4px; }
  .sort-row { margin-left: 0px; width: auto; gap: 6px; }
  .sort-chip { flex-shrink: 0; font-size: 12px; padding: 4px 26px 4px 10px; }
  .filter-count { margin-left: 0px; font-size: 11px; }
  .bl-grid { grid-template-columns: 1fr; gap: 10px; }
  .bl-side { display: none; }
  .modal-bg { padding: 0px; align-items: flex-end; }
  .bd2 { display: flex; flex-direction: column; border-radius: 18px 18px 0px 0px; width: 100%; max-width: 100%; max-height: 92vh; overflow: hidden auto; overscroll-behavior: contain; }
  .bd2-hero { order: 1; grid-area: unset; flex-shrink: 0; padding: 20px; }
  .bd2-side { order: 2; grid-area: unset; flex-shrink: 0; border-top: 1px solid var(--border); border-left-width: medium; border-left-style: none; border-left-color: currentcolor; padding: 16px 20px; max-height: none; }
  .bd2-body { order: 3; grid-area: unset; flex-shrink: 0; overflow-y: visible; padding: 16px 20px 28px; }
  .bottom-nav { display: flex; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 64px; background: var(--sidebar-bg); border-top: 1px solid var(--border); align-items: center; justify-content: space-around; z-index: 30; padding-top: 0px; padding-right: 4px; padding-left: 4px; padding-bottom: env(safe-area-inset-bottom); }
  .bnav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; background: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--muted); font-size: 10px; font-weight: 600; cursor: pointer; padding: 6px 12px; border-radius: 10px; text-decoration: none; transition: color 0.12s; flex: 1 1 0%; }
  .bnav-item:hover, .bnav-active { color: var(--green); }
  .bnav-cta { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--green); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; color: var(--green-ink); cursor: pointer; flex-shrink: 0; transition: background 0.12s, transform 0.12s; box-shadow: rgba(134, 239, 172, 0.35) 0px 0px 16px; }
  .bnav-cta:hover { background: rgb(157, 243, 187); transform: scale(1.07); }
}

@keyframes orb-drift-1 { 
  0%, 100% { transform: translate(0px) scale(1); }
  33% { transform: translate(60px, -40px) scale(1.15); }
  66% { transform: translate(-40px, 60px) scale(0.9); }
}

@keyframes orb-drift-2 { 
  0%, 100% { transform: translate(0px) scale(1); }
  33% { transform: translate(-80px, 50px) scale(1.2); }
  66% { transform: translate(60px, -30px) scale(0.85); }
}

@keyframes orb-drift-3 { 
  0%, 100% { transform: translate(0px) scale(1); }
  50% { transform: translate(40px, 60px) scale(1.1); }
}

@keyframes glow-pulse { 
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) scale(1.18); }
}

@keyframes ring-spin-outer { 
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes ring-spin-inner { 
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes logo-float { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes shimmer-slide { 
  0% { left: -80%; }
  100% { left: 130%; }
}

@keyframes fade-up { 
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0px); }
}

@keyframes grid-fade { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.hp { position: relative; min-height: 100%; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 0px 24px 80px; }

.hp-orb { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }

.hp-orb-1 { width: 520px; height: 520px; top: -80px; left: -120px; background: radial-gradient(circle, rgba(0, 220, 110, 0.22) 0%, transparent 70%); animation: 18s ease-in-out 0s infinite normal none running orb-drift-1; }

.hp-orb-2 { width: 400px; height: 400px; top: 200px; right: -100px; background: radial-gradient(circle, rgba(0, 180, 90, 0.16) 0%, transparent 70%); animation: 22s ease-in-out 0s infinite normal none running orb-drift-2; }

.hp-orb-3 { width: 300px; height: 300px; bottom: 100px; left: 30%; background: radial-gradient(circle, rgba(0, 220, 110, 0.1) 0%, transparent 70%); animation: 15s ease-in-out 0s infinite normal none running orb-drift-3; }

.hp-grid { position: absolute; inset: 0px; background-image: linear-gradient(rgba(0, 220, 110, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 220, 110, 0.04) 1px, transparent 1px); background-size: 48px 48px; z-index: 0; animation: 1.2s ease 0s 1 normal both running grid-fade; mask-image: radial-gradient(80% 60% at 50% 30%, black 40%, transparent 100%); }

.hp-hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 60px; gap: 0px; }

.hp-logo-wrap { position: relative; width: 120px; height: 120px; margin-bottom: 24px; animation: 0.7s ease 0s 1 normal both running fade-up; }

.hp-logo-ring { position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none; }

.hp-logo-ring-outer { width: 170px; height: 170px; border: 1px solid rgba(0, 220, 110, 0.2); animation: 12s linear 0s infinite normal none running ring-spin-outer; background: transparent; }

.hp-logo-ring-outer::before { content: ""; position: absolute; top: -3px; left: 30%; width: 10px; height: 6px; border-radius: 50%; background: rgba(0, 220, 110, 0.9); box-shadow: rgba(0, 220, 110, 0.7) 0px 0px 10px 3px; }

.hp-logo-ring-inner { width: 148px; height: 148px; border: 1px dashed rgba(0, 220, 110, 0.12); animation: 20s linear 0s infinite normal none running ring-spin-inner; background: transparent; }

.hp-logo-glow { position: absolute; top: 50%; left: 50%; width: 160px; height: 160px; background: radial-gradient(circle, rgba(0, 220, 110, 0.45) 0%, transparent 70%); transform: translate(-50%, -50%); border-radius: 50%; animation: 3s ease-in-out 0s infinite normal none running glow-pulse; pointer-events: none; }

.hp-logo-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 22px; animation: 4s ease-in-out 0s infinite normal none running logo-float; filter: drop-shadow(rgba(0, 220, 110, 0.5) 0px 0px 20px); z-index: 2; }

.hp-wordmark { font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; animation: 0.7s ease 0.1s 1 normal both running fade-up; opacity: 0; }

.hp-wordmark-green { color: var(--green); }

.hp-headline { margin: 0px 0px 20px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; animation: 0.7s ease 0.2s 1 normal both running fade-up; opacity: 0; }

.hp-headline-line { font-size: clamp(52px, 7vw, 80px); font-weight: 900; letter-spacing: -2.5px; line-height: 1; color: var(--text); }

.hp-headline-green { color: transparent; background: linear-gradient(135deg, rgb(0, 220, 110), rgb(0, 255, 136) 40%, rgb(0, 200, 94)) text; filter: drop-shadow(rgba(0, 220, 110, 0.5) 0px 0px 24px); }

.hp-tagline { font-size: 16px; color: var(--muted); line-height: 1.65; max-width: 440px; margin: 0px 0px 36px; animation: 0.7s ease 0.3s 1 normal both running fade-up; opacity: 0; }

.hp-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; background: var(--green); color: rgb(0, 0, 0); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 14px; padding: 16px 36px; font-size: 17px; font-weight: 800; letter-spacing: -0.3px; cursor: pointer; animation: 0.7s ease 0.4s 1 normal both running fade-up; opacity: 0; box-shadow: rgba(0, 220, 110, 0.4) 0px 0px 0px 1px, rgba(0, 220, 110, 0.3) 0px 8px 32px; transition: transform 0.18s, box-shadow 0.18s; }

.hp-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: rgba(0, 220, 110, 0.6) 0px 0px 0px 1px, rgba(0, 220, 110, 0.45) 0px 12px 40px; }

.hp-cta-shimmer { position: absolute; top: 0px; left: -80%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skew(-20deg); animation: 2.8s ease-in-out 1.2s infinite normal none running shimmer-slide; }

.hp-features { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; max-width: 640px; margin-top: 56px; animation: 0.7s ease 0.5s 1 normal both running fade-up; opacity: 0; }

.hp-feat { background: var(--panel); border: 1px solid var(--border); border-radius: 18px; padding: 28px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; cursor: pointer; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }

.hp-feat:hover { border-color: rgba(0, 220, 110, 0.4); transform: translateY(-3px); box-shadow: rgba(0, 220, 110, 0.12) 0px 8px 32px; }

.hp-feat-icon { width: 48px; height: 48px; border-radius: 13px; background: rgba(0, 220, 110, 0.1); border: 1px solid rgba(0, 220, 110, 0.2); display: flex; align-items: center; justify-content: center; color: var(--green); }

.hp-feat-title { margin: 0px; font-size: 17px; font-weight: 800; letter-spacing: -0.3px; color: rgb(255, 255, 255); }

.hp-feat-title-green { color: var(--green); }

.hp-feat-title-orange { color: rgb(255, 107, 53); }

.hp-feat-body { margin: 0px; font-size: 13.5px; color: var(--muted); line-height: 1.6; flex: 1 1 0%; }

.hp-feat-arrow { font-size: 13px; color: var(--green); font-weight: 600; }

.hp-trust { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin-top: 48px; flex-wrap: wrap; justify-content: center; animation: 0.7s ease 0.6s 1 normal both running fade-up; opacity: 0; }

.hp-trust-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }

.hp-trust-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border); }

@media (max-width: 600px) {
  .hp { padding: 0px 16px 100px; }
  .hp-hero { padding-top: 36px; }
  .hp-headline { gap: 10px; }
  .hp-features { grid-template-columns: 1fr; margin-top: 40px; }
  .hp-cta { width: 100%; justify-content: center; }
}

.support-page { padding: 40px 24px 60px; max-width: 560px; margin: 0px auto; width: 100%; }

.support-inner { display: flex; flex-direction: column; gap: 28px; }

.support-back { display: inline-flex; align-items: center; gap: 6px; background: none; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; color: var(--muted); font-size: 13px; cursor: pointer; padding: 0px; width: fit-content; }

.support-back:hover { color: var(--text); }

.support-header { display: flex; align-items: flex-start; gap: 16px; }

.support-icon { width: 52px; height: 52px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--green); flex-shrink: 0; }

.support-title { margin: 0px 0px 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }

.support-subtitle { margin: 0px; font-size: 14px; color: var(--muted); line-height: 1.5; }

.support-card { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 20px; }

.support-card-title { margin: 0px; font-size: 16px; font-weight: 700; }

.support-card-body { margin: 0px; font-size: 14px; color: var(--muted); line-height: 1.6; }

.support-card-body strong { color: var(--text); }

.support-checklist { display: flex; flex-direction: column; gap: 16px; }

.support-check-item { display: flex; gap: 14px; align-items: flex-start; }

.support-check-num { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: rgba(0, 220, 110, 0.12); border: 1px solid rgba(0, 220, 110, 0.3); color: var(--green); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

.support-check-item strong { display: block; font-size: 14px; margin-bottom: 3px; }

.support-check-item p { margin: 0px; font-size: 13px; color: var(--muted); line-height: 1.5; }

.support-dm-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--text); color: var(--bg); border-radius: 10px; padding: 12px 20px; font-size: 14px; font-weight: 700; text-decoration: none; align-self: flex-start; transition: opacity 0.15s; }

.support-dm-btn:hover { opacity: 0.85; }

.support-note { margin: 0px; font-size: 12px; color: var(--muted); text-align: center; }

@media (max-width: 600px) {
  .support-page { padding: 24px 16px 80px; }
  .support-dm-btn { align-self: stretch; justify-content: center; }
}
/* ── Contract Address (added) ───────────────────────────── */
.hp-ca{position:relative;z-index:2;margin:22px auto 4px;max-width:520px;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 18px 16px;border-radius:18px;background:rgba(20,22,21,.55);border:1px solid rgba(0,220,110,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 40px rgba(0,220,110,.07),inset 0 1px 0 rgba(255,255,255,.04)}
.hp-ca-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#00dc6e}
.hp-ca-row{display:flex;align-items:center;gap:10px;width:100%;flex-wrap:wrap;justify-content:center}
.hp-ca-value{flex:1 1 240px;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:#e6f2ec;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);border-radius:11px;padding:11px 13px;word-break:break-all;text-align:center}
.hp-ca-copy{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;cursor:pointer;border:none;border-radius:11px;padding:11px 16px;font-size:13.5px;font-weight:700;color:#04140b;background:linear-gradient(135deg,#00f07a,#00c463);box-shadow:0 4px 18px rgba(0,220,110,.28);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.hp-ca-copy:hover{filter:brightness(1.05);box-shadow:0 6px 24px rgba(0,220,110,.4)}
.hp-ca-copy:active{transform:translateY(1px)}
.hp-ca-copy.is-copied{background:linear-gradient(135deg,#1c2a22,#16201b);color:#00dc6e;box-shadow:none}
@media(max-width:520px){.hp-ca-value{flex:1 1 100%}.hp-ca-copy{width:100%;justify-content:center}}

/* ── X / Twitter links (added) ──────────────────────────── */
.hp-ca-x{display:inline-flex;align-items:center;gap:7px;margin-top:2px;font-size:12.5px;font-weight:600;color:#94a39d;text-decoration:none;transition:color .12s ease}
.hp-ca-x:hover{color:#00dc6e}
.hp-ca-x svg{opacity:.9}
.footer-x{display:inline-flex;align-items:center;justify-content:center;margin-left:12px;vertical-align:middle;color:#94a39d;transition:color .12s ease,transform .12s ease}
.footer-x:hover{color:#fff;transform:translateY(-1px)}