:root {
  --bg: #090b0a;
  --panel: #0f1211;
  --panel-2: #131715;
  --line: #232a26;
  --muted: #7f8a84;
  --text: #eef3ef;
  --lime: #c7ff3f;
  --green: #42dc91;
  --red: #ff5c70;
}

* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--bg); }
body { margin: 0; background: radial-gradient(circle at 78% -10%, rgba(199,255,63,.08), transparent 31%), var(--bg); color: var(--text); font-family: Manrope, sans-serif; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
.noise { position: fixed; inset: 0; opacity: .035; pointer-events: none; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.muted { color: #626c66; }
.topbar { height: 68px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: rgba(9,11,10,.76); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 10; }
.rpc-banner { min-height: 58px; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 14px; padding: 9px max(24px, calc((100% - 1480px) / 2)); border-bottom: 1px solid #6e2c32; background: linear-gradient(90deg, #291012, #1a0e0f 66%, #231011); color: #ffd9dc; position: sticky; top: 68px; z-index: 9; box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.rpc-banner[hidden] { display: none; }
.rpc-banner-icon, .state-alert { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid #ff5c70; border-radius: 50%; color: #ff7182; font: 600 15px/1 DM Mono, monospace; }
.rpc-banner-copy strong, .rpc-banner-copy span { display: block; }.rpc-banner-copy strong { color: #ff697a; font-size: 12px; }.rpc-banner-copy span { margin-top: 3px; color: #b98a8f; font: 400 9px/1.35 DM Mono, monospace; }
.rpc-banner-time { color: #976b70; font: 400 9px/1 DM Mono, monospace; white-space: nowrap; }
.rpc-banner button, .chart-state button { min-height: 34px; padding: 0 13px; border: 1px solid #7c353c; border-radius: 7px; background: #321418; color: #ffbdc4; cursor: pointer; font: 500 9px/1 DM Mono, monospace; }.rpc-banner button:hover, .chart-state button:hover { border-color: #ff5c70; background: #45191e; }
.brand { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.brand-mark, .coin { display: grid; place-items: center; color: #0b0d0c; background: var(--lime); font-weight: 900; transform: rotate(-4deg); }
.brand-mark { width: 29px; height: 29px; border-radius: 8px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.network, .ghost-button, .x-button { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; font: 500 11px/1 DM Mono, monospace; }
.network i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 12px var(--green); }
.network.loading i { background: #ffc267; box-shadow: 0 0 10px rgba(255,194,103,.65); animation: pulse 1.15s ease-in-out infinite; }.network.offline { color: #ff8794; border-color: #673037; background: rgba(255,92,112,.05); }.network.offline i { background: var(--red); box-shadow: 0 0 10px rgba(255,92,112,.7); }
@keyframes pulse { 50% { opacity: .35; } }
.ghost-button:hover, .x-button:hover { border-color: #56615a; background: #151917; }
.x-button { background: #e9eee9; color: #0b0d0c; border-color: #e9eee9; font-family: Manrope, sans-serif; font-weight: 800; }
main { width: min(1480px, calc(100% - 48px)); margin: 0 auto; }
.hero-row { min-height: 176px; display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 38px; }
.asset { display: flex; gap: 16px; align-items: center; }
.coin { width: 52px; height: 52px; border-radius: 16px; font-size: 26px; box-shadow: inset 0 -7px 18px rgba(0,0,0,.14), 0 0 40px rgba(199,255,63,.08); }
.pair { font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.pair span { color: #748078; font-weight: 500; }
.pair b { color: var(--lime); background: rgba(199,255,63,.1); font: 500 9px/1 DM Mono, monospace; padding: 5px 7px; border-radius: 5px; margin-left: 10px; vertical-align: 4px; }
.address { border: 0; background: transparent; padding: 6px 0 0; cursor: pointer; color: var(--muted); font: 400 11px/1 DM Mono, monospace; }
.address:hover { color: var(--text); }
.price-block { min-width: 275px; }
.eyebrow, .metric-grid article span, .tape span { text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font: 500 10px/1.3 DM Mono, monospace; }
.price-line { display: flex; align-items: center; gap: 13px; margin: 7px 0 4px; }
.price-line strong { font-size: 35px; letter-spacing: -.055em; }
.price-line span { font: 600 12px/1 Manrope, sans-serif; padding: 6px 8px; border-radius: 7px; }
.positive { color: var(--green); background: rgba(66,220,145,.1); }
.negative { color: var(--red); background: rgba(255,92,112,.1); }
.subprice { color: var(--muted); font: 400 11px/1.4 DM Mono, monospace; }
.lifetime-top { min-width: 154px; padding: 13px 15px; border: 1px solid #302b42; border-radius: 11px; background: linear-gradient(135deg, rgba(107,76,184,.12), rgba(15,18,17,.25)); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.lifetime-top:hover { border-color: #765dc2; background: rgba(107,76,184,.16); transform: translateY(-1px); }
.lifetime-top span, .lifetime-top small { display: block; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); font: 500 9px/1.2 DM Mono, monospace; }
.lifetime-top strong { display: block; margin: 6px 0 5px; color: #d3c5ff; font-size: 19px; letter-spacing: -.035em; }.lifetime-top em { color: #8874ca; font-style: normal; font-size: 13px; margin-left: 3px; }.lifetime-top small { color: #655d78; font-size: 8px; }
.buy-button { min-width: 210px; height: 54px; padding: 0 19px 0 23px; border-radius: 12px; display: flex; align-items: center; justify-content: space-between; background: var(--lime); color: #0b0d0c; font-size: 14px; font-weight: 800; box-shadow: 0 0 28px rgba(199,255,63,.08); }
.buy-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.buy-button span { font-size: 20px; }
.bridge-guide { margin: -2px 0 16px; border: 1px solid var(--line); border-radius: 13px; background: rgba(15,18,17,.86); overflow: hidden; }
.bridge-guide summary { min-height: 76px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 14px 20px; cursor: pointer; list-style: none; user-select: none; }
.bridge-guide summary::-webkit-details-marker { display: none; }
.bridge-guide summary:hover { background: rgba(199,255,63,.025); }
.bridge-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid #38442f; border-radius: 7px; color: var(--lime); background: rgba(199,255,63,.05); font: 500 9px/1 DM Mono, monospace; letter-spacing: .06em; }
.bridge-badge i { width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.bridge-summary-copy b, .bridge-summary-copy small { display: block; }.bridge-summary-copy b { font-size: 15px; }.bridge-summary-copy small { margin-top: 5px; color: var(--muted); font: 400 10px/1.35 DM Mono, monospace; }
.bridge-summary-action { color: #aab4ae; font: 500 11px/1 DM Mono, monospace; }.bridge-summary-action i { display: inline-block; margin-left: 7px; color: var(--lime); font-style: normal; transition: transform .2s ease; }
.bridge-guide[open] .bridge-summary-action i { transform: rotate(180deg); }
.bridge-content { display: grid; grid-template-columns: minmax(300px,.78fr) minmax(470px,1.22fr); border-top: 1px solid var(--line); }
.bridge-trust { display: grid; grid-template-columns: 34px 1fr; gap: 15px; padding: 28px; border-right: 1px solid var(--line); background: radial-gradient(circle at 0 0, rgba(199,255,63,.07), transparent 42%); }
.trust-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #51623b; border-radius: 50%; color: var(--lime); background: rgba(199,255,63,.07); font: 600 14px/1 DM Mono, monospace; }
.bridge-trust span { color: var(--lime); font: 500 9px/1 DM Mono, monospace; text-transform: uppercase; letter-spacing: .09em; }
.bridge-trust h2 { max-width: 470px; margin: 9px 0 13px; font-size: 25px; line-height: 1.16; letter-spacing: -.04em; }
.bridge-trust p { margin: 0; color: #9ba59f; font-size: 14px; line-height: 1.6; }.bridge-trust p b { color: var(--text); }
.trust-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 20px; }
.trust-links a { color: #aeb8b2; border-bottom: 1px solid #3b453f; font: 400 10px/1.25 DM Mono, monospace; }.trust-links a:hover { color: var(--lime); border-color: var(--lime); }
.bridge-route { min-width: 0; padding: 24px 28px 28px; }
.route-line { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 13px; padding-bottom: 21px; border-bottom: 1px solid var(--line); }
.route-line > div span, .route-line > div b, .route-line > div small { display: block; }.route-line > div span { color: var(--muted); font: 500 8px/1 DM Mono, monospace; }.route-line > div b { margin-top: 6px; font-size: 11px; }.route-line > div small { margin-top: 4px; color: #657069; font: 400 8px/1 DM Mono, monospace; }.route-line > i { color: var(--lime); font-style: normal; }
.bridge-steps { display: grid; gap: 17px; margin: 21px 0 0; padding: 0; list-style: none; }
.bridge-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 13px; align-items: start; }.bridge-steps li > span { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #364039; border-radius: 7px; color: var(--lime); font: 500 10px/1 DM Mono, monospace; }.bridge-steps li b, .bridge-steps li small { display: block; }.bridge-steps li b { font-size: 13px; }.bridge-steps li small { margin-top: 5px; color: var(--muted); font: 400 10px/1.5 DM Mono, monospace; }
.official-bridge-address { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; margin-top: 9px; padding: 12px 13px; border: 1px solid #3d493f; border-radius: 8px; background: #090c0a; cursor: pointer; text-align: left; }.official-bridge-address:hover { border-color: #728744; background: #0d120b; }.official-bridge-address code { min-width: 0; overflow: hidden; color: #d9e0db; font: 400 10px/1.2 DM Mono, monospace; text-overflow: ellipsis; }.official-bridge-address em { color: var(--lime); font: 500 9px/1 DM Mono, monospace; font-style: normal; white-space: nowrap; }
.bridge-actions { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 15px; margin-top: 23px; }.bridge-trade { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-radius: 8px; background: var(--lime); color: #090b0a; font-size: 10px; font-weight: 800; }.bridge-trade:hover { filter: brightness(1.08); }.bridge-scan { color: #a0aaa4; font: 400 8px/1.4 DM Mono, monospace; }.bridge-scan:hover { color: var(--lime); }
.bridge-caution { display: grid; grid-template-columns: auto 1fr; gap: 15px; padding: 16px 20px; border-top: 1px solid #40351f; background: rgba(255,182,65,.045); }.bridge-caution b { color: #ffc267; font: 600 10px/1.45 DM Mono, monospace; }.bridge-caution span { color: #a39d90; font: 400 10px/1.55 DM Mono, monospace; }.bridge-caution strong { color: #d4cdbc; }
.terminal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; border: 1px solid var(--line); border-radius: 15px; overflow: hidden; background: var(--panel); box-shadow: 0 26px 90px rgba(0,0,0,.25); }
.chart-panel { min-width: 0; border-right: 1px solid var(--line); }
.chart-toolbar { min-height: 61px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.range-tabs, .chart-mode { display: flex; background: #0b0e0d; padding: 4px; border: 1px solid #1e2421; border-radius: 9px; }
.range-tabs button, .chart-mode button { border: 0; background: transparent; color: var(--muted); height: 30px; min-width: 44px; border-radius: 6px; cursor: pointer; font: 500 10px/1 DM Mono, monospace; }
.range-tabs button:hover, .chart-mode button:hover { color: var(--text); }
.range-tabs button.active { background: var(--lime); color: #0a0c0b; }
.chart-mode button { min-width: 92px; }
.chart-mode button.active { background: #202622; color: var(--text); }
.chart-tools { display: flex; align-items: center; gap: 9px; }
.view-controls { display: flex; border: 1px solid #1e2421; border-radius: 9px; overflow: hidden; background: #0b0e0d; }
.view-controls button { width: 34px; height: 38px; padding: 0; border: 0; border-right: 1px solid #1e2421; background: transparent; color: var(--muted); cursor: pointer; font: 500 15px/1 DM Mono, monospace; }
.view-controls button:last-child { border-right: 0; }.view-controls button:hover { color: var(--lime); background: #171c19; }
.ohlc { height: 35px; padding: 10px 21px 0; color: #9aa49e; font: 400 10px/1 DM Mono, monospace; }
.chart-wrap { height: 510px; position: relative; overflow: hidden; user-select: none; background: linear-gradient(180deg, #101412 0%, #0d100f 100%); }
#chart { width: 100%; height: 100%; display: block; cursor: crosshair; }
#chart table { font-family: DM Mono, monospace!important; }
.chart-panel:fullscreen { background: var(--panel); display: flex; flex-direction: column; }
.chart-panel:fullscreen .chart-wrap { height: auto; flex: 1; min-height: 0; }
.chart-panel:fullscreen .chart-footer { flex: 0 0 42px; }
.chart-state { position: absolute; inset: 0; background: rgba(15,18,17,.9); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 28px; text-align: center; z-index: 2; }
.chart-state.hidden { display: none; }
.chart-state b { font-size: 13px; }
.chart-state small { max-width: 470px; color: var(--muted); font: 400 10px/1.55 DM Mono, monospace; }.chart-state.error { background: radial-gradient(circle at 50% 42%, rgba(255,92,112,.08), transparent 34%), rgba(12,14,13,.96); }.chart-state.error b { color: #ff8d99; font-size: 15px; }.chart-state.error .state-alert { width: 38px; height: 38px; margin-bottom: 3px; }.chart-state.error button { margin-top: 5px; }.chart-state.error em { color: #59635d; font: 400 9px/1.4 DM Mono, monospace; font-style: normal; }
.spinner { width: 26px; height: 26px; border: 2px solid #303732; border-top-color: var(--lime); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tooltip { display: none; position: absolute; pointer-events: none; min-width: 184px; background: rgba(18,23,20,.97); border: 1px solid #3b453f; border-radius: 8px; padding: 10px 11px; font: 400 10px/1.65 DM Mono, monospace; box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 4; }
.tooltip b { color: var(--text); }.tooltip .tip-value { color: var(--lime); font-size: 11px; }
.chart-footer { height: 42px; display: flex; align-items: center; gap: 17px; padding: 0 20px; border-top: 1px solid var(--line); color: var(--muted); font: 400 9px/1 DM Mono, monospace; }
.legend { display: inline-block; width: 6px; height: 6px; border-radius: 1px; margin-right: 5px; }.legend.up { background: var(--green); }.legend.down { background: var(--red); }.source { margin-left: auto; }
.interaction-hint { color: #56615b; }
.stats-panel { background: #0c0f0e; }
.panel-title { height: 61px; border-bottom: 1px solid var(--line); padding: 0 20px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 700; }
.panel-title small { color: var(--muted); font: 400 9px/1 DM Mono, monospace; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.metric-grid article { min-height: 117px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric-grid article:nth-child(2n) { border-right: 0; }.metric-grid article:nth-child(n+3) { border-bottom: 0; }
.metric-grid article span { display: block; }.metric-grid article em { font-style: normal; color: var(--lime); border: 1px solid #465337; border-radius: 50%; padding: 0 3px; }
.metric-grid article strong { display: block; font-size: 22px; letter-spacing: -.04em; margin: 10px 0 5px; }
.metric-grid article small { color: #59645e; font: 400 9px/1.3 DM Mono, monospace; }
.supply-card .supply-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.supply-card .supply-row small { color: #738078; }.supply-card .supply-row b { color: var(--lime); font: 500 9px/1 DM Mono, monospace; }
.supply-track { height: 4px; margin-top: 7px; border-radius: 4px; background: #242b27; overflow: hidden; }.supply-track i { display: block; width: 50%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8bcf35, var(--lime)); box-shadow: 0 0 12px rgba(199,255,63,.3); }
.flow-card { margin: 15px; padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.flow-head, .flow-labels { display: flex; align-items: center; justify-content: space-between; }
.flow-head { font-size: 11px; color: var(--muted); }.flow-head strong { font-size: 18px; color: var(--text); }
.flow-labels { margin-top: 17px; color: #77827c; font: 400 9px/1 DM Mono, monospace; }.flow-labels b { color: var(--text); }
.flow-bar { height: 5px; margin-top: 10px; background: var(--red); border-radius: 5px; overflow: hidden; }.flow-bar i { display: block; width: 50%; height: 100%; background: var(--green); transition: width .5s ease; }
.links { border-top: 1px solid var(--line); }
.links a { min-height: 66px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 13px; padding: 0 19px; }
.links a:hover { background: #131715; }.links a > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid #2c342f; border-radius: 7px; color: var(--lime); }
.links b, .links small { display: block; }.links b { font-size: 11px; }.links small { margin-top: 4px; color: var(--muted); font: 400 9px/1 DM Mono, monospace; }
.tape { margin: 14px 0 0; min-height: 66px; display: flex; align-items: center; gap: 44px; padding: 12px 20px; border: 1px solid var(--line); background: rgba(15,18,17,.8); border-radius: 12px; }
.tape div span, .tape div b { display: block; }.tape div b { margin-top: 6px; font: 500 10px/1 DM Mono, monospace; }.live-text { color: var(--green); }.live-text.connecting { color: #ffc267; }.live-text.offline { color: var(--red); }
.tape { margin-bottom: 42px; }

@media (max-width: 1050px) {
  .hero-row { grid-template-columns: 1fr auto auto; gap: 25px; }.asset { grid-column: 1 / -1; }.price-block { grid-row: 2; margin-bottom: 24px; }.lifetime-top, .buy-button { grid-row: 2; }
  .terminal-grid { grid-template-columns: 1fr; }.chart-panel { border-right: 0; }.stats-panel { border-top: 1px solid var(--line); }.metric-grid { grid-template-columns: repeat(4,1fr); }.metric-grid article { border-bottom: 0; }.metric-grid article:nth-child(2) { border-right: 1px solid var(--line); }
  .links { display: grid; grid-template-columns: repeat(3,1fr); }.links a { border-right: 1px solid var(--line); }.tape { flex-wrap: wrap; }
  .bridge-content { grid-template-columns: 1fr; }.bridge-trust { border-right: 0; border-bottom: 1px solid var(--line); }.bridge-trust h2 { max-width: 700px; }
}
@media (max-width: 700px) {
  .rpc-banner { grid-template-columns: auto 1fr; gap: 9px 12px; padding: 12px 16px; position: relative; top: auto; }.rpc-banner-time { display: none; }.rpc-banner button { grid-column: 2; justify-self: start; }.rpc-banner-copy span { max-width: 300px; }
  .topbar { padding: 0 16px; }.hide-mobile, .network { display: none; } main, footer { width: calc(100% - 24px); }
  .hero-row { display: flex; flex-wrap: wrap; padding: 26px 0 22px; gap: 16px; }.asset { width: 100%; }.price-block { min-width: 0; margin: 0; flex: 1 1 52%; }.lifetime-top { min-width: 138px; flex: 1 1 38%; }.buy-button { width: 100%; min-width: 170px; flex: 1 1 100%; }
  .price-line strong { font-size: 28px; }.pair { font-size: 19px; }.chart-toolbar { height: auto; min-height: 105px; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }.range-tabs button { flex: 1; min-width: 0; }.chart-tools { justify-content: space-between; }.chart-mode { flex: 1; }.chart-mode button { flex: 1; min-width: 0; }.view-controls button { width: 31px; }.chart-wrap { height: 420px; }.ohlc { overflow: hidden; white-space: nowrap; }
  .metric-grid { grid-template-columns: 1fr 1fr; }.metric-grid article { border-bottom: 1px solid var(--line)!important; }.metric-grid article:nth-child(2n) { border-right: 0!important; }.metric-grid article:nth-child(n+3) { border-bottom: 0!important; }
  .links { grid-template-columns: 1fr; }.links a { border-right: 0; }.tape { gap: 22px; }.source, .interaction-hint { display: none; }
  .bridge-guide { margin-top: 0; }.bridge-guide summary { grid-template-columns: 1fr auto; gap: 10px; padding: 14px; }.bridge-badge { grid-column: 1 / -1; justify-self: start; }.bridge-summary-copy small { max-width: 230px; }.bridge-summary-action { font-size: 0; }.bridge-summary-action i { margin-left: 0; font-size: 12px; }.bridge-trust { grid-template-columns: 1fr; padding: 21px 17px; }.bridge-trust h2 { font-size: 19px; }.bridge-route { padding: 19px 16px 22px; }.route-line { gap: 7px; }.route-line > div b { font-size: 9px; }.route-line > div small { line-height: 1.3; }.official-bridge-address { grid-template-columns: 1fr; }.official-bridge-address code { font-size: 8px; }.bridge-actions { grid-template-columns: 1fr; }.bridge-scan { text-align: center; }.bridge-caution { grid-template-columns: 1fr; gap: 7px; padding: 14px 16px; }
}