:root{
    --bg:#0A0D12;
    --surface:#10141B;
    --surface-2:#151A22;
    --border:#212836;
    --border-soft:#1a2029;
    --text:#E7ECF3;
    --text-dim:#8B95A7;
    --text-faint:#5B6478;
    --up:#1FD67A;
    --up-bg:rgba(31,214,122,0.12);
    --down:#FF4D5E;
    --down-bg:rgba(255,77,94,0.12);
    --neutral:#5B6478;
    --pulse:#2FD9E8;
    --pulse-dim:rgba(47,217,232,0.14);
    --amber:#F5B942;
    --radius:10px;
    --font-display:'Sora',system-ui,sans-serif;
    --font-body:'Inter',system-ui,-apple-system,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
    --maxw:1320px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  }
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--font-body); -webkit-font-smoothing:antialiased;
    font-size:15px; line-height:1.5;
  }
  h1,h2,h3{font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em;}
  a{color:inherit;}
  .mono{font-family:var(--font-mono);}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible{
    outline:2px solid var(--pulse); outline-offset:2px; border-radius:4px;
  }

  /* ---------- Header ---------- */
  header.site{position:sticky; top:0; z-index:50; background:rgba(10,13,18,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft);}
  .header-row{display:flex; align-items:center; gap:24px; height:60px;}
  .brand{display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:18px; text-decoration:none; white-space:nowrap;}
  .brand-mark{width:22px; height:22px; flex:none; display:block;}
  nav.main-nav{display:flex; gap:2px; flex:1;}
  nav.main-nav a{padding:8px 12px; border-radius:7px; text-decoration:none; color:var(--text-dim); font-size:13.5px; font-weight:500; transition:background .15s,color .15s;}
  nav.main-nav a:hover, nav.main-nav a.active{color:var(--text); background:var(--surface-2);}
  .header-actions{display:flex; align-items:center; gap:10px;}
  .search-box{position:relative;}
  .search-input{width:220px; background:var(--surface); border:1px solid var(--border); color:var(--text); font-size:13px; padding:7px 10px 7px 30px; border-radius:8px; font-family:var(--font-body);}
  .search-input::placeholder{color:var(--text-faint);}
  .search-icon{position:absolute; left:9px; top:50%; transform:translateY(-50%); width:14px; height:14px; opacity:.5; pointer-events:none;}
  .search-results{position:absolute; top:calc(100% + 6px); right:0; width:280px; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.5); max-height:340px; overflow-y:auto; display:none; z-index:60;}
  .search-results.open{display:block;}
  .search-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; cursor:pointer; text-decoration:none; color:var(--text); border-bottom:1px solid var(--border-soft);}
  .search-row:last-child{border-bottom:none;}
  .search-row:hover, .search-row:focus-visible{background:var(--surface);}
  .conn-badge{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-dim); padding:6px 10px; border:1px solid var(--border); border-radius:20px; white-space:nowrap;}
  .conn-dot{width:7px; height:7px; border-radius:50%; background:var(--neutral); flex:none;}
  .conn-dot.live{background:var(--up); box-shadow:0 0 0 0 rgba(31,214,122,.6); animation:heartbeat 2.2s ease-in-out infinite;}
  .conn-dot.warn{background:var(--amber); animation:heartbeat 1s ease-in-out infinite;}
  .conn-dot.down{background:var(--down);}
  @keyframes heartbeat{0%,100%{box-shadow:0 0 0 0 rgba(31,214,122,.45);} 50%{box-shadow:0 0 0 5px rgba(31,214,122,0);}}
  .menu-btn{display:none; background:none; border:1px solid var(--border); color:var(--text); border-radius:8px; width:36px; height:36px; align-items:center; justify-content:center; cursor:pointer;}

  /* ---------- Hero ---------- */
  .hero{padding:44px 0 20px; border-bottom:1px solid var(--border-soft);}
  .eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--pulse); font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px;}
  .eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--pulse);}
  .hero h1{font-size:clamp(28px,4vw,42px); max-width:760px; line-height:1.08;}
  .hero p.sub{color:var(--text-dim); font-size:16px; max-width:600px; margin-top:12px;}

  /* ---------- Full-bleed hero heatmap (Coin360-style, tiles fill the screen) ---------- */
  .hm-toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 20px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; background:var(--bg);}
  .hm-toolbar-left h1{font-size:17px; line-height:1.15;}
  .hm-toolbar-left .sub{color:var(--text-faint); font-size:11.5px; margin-top:2px;}
  .hm-toolbar-right{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .hm-legend-inline{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-faint);}
  .hm-legend-inline .legend-swatch{width:13px; height:9px; border-radius:2px;}
  .hero-heatmap-wrap{width:100%; height:calc(100vh - 60px - 54px); min-height:440px; max-height:820px; position:relative; background:#000; overflow:hidden; border-bottom:1px solid var(--border-soft); padding:1px;}

  /* ---------- Section shell ---------- */
  section.block{padding:36px 0; border-bottom:1px solid var(--border-soft);}
  .block-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px;}
  .block-head h2{font-size:20px;}
  .block-head .desc{color:var(--text-faint); font-size:13px; margin-top:3px;}
  .block-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .seg{display:flex; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:2px; gap:2px;}
  .seg button{background:none; border:none; color:var(--text-dim); font-size:12.5px; padding:6px 11px; border-radius:7px; cursor:pointer; font-weight:500; font-family:var(--font-body);}
  .seg button.active{background:var(--surface-2); color:var(--text);}
  .seg button[disabled]{opacity:.35; cursor:not-allowed;}

  /* ---------- Market Pulse ---------- */
  .pulse-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px;}
  .pulse-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px;}
  .pulse-label{font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;}
  .pulse-value{font-family:var(--font-mono); font-size:22px; font-weight:600;}
  .pulse-value.up{color:var(--up);} .pulse-value.down{color:var(--down);}
  .pulse-sub{font-size:11.5px; color:var(--text-faint); margin-top:4px;}
  .breadth-bar{height:8px; border-radius:5px; background:var(--down); overflow:hidden; margin-top:10px; display:flex;}
  .breadth-fill{height:100%; background:var(--up);}
  .updown-split{display:flex; gap:14px; font-size:13px; margin-top:2px;}
  .updown-split span{display:flex; align-items:center; gap:5px;}
  .dot-up{width:7px;height:7px;border-radius:50%;background:var(--up);display:inline-block;}
  .dot-down{width:7px;height:7px;border-radius:50%;background:var(--down);display:inline-block;}

  /* ---------- Heatmap ---------- */
  .heatmap-wrap{position:relative; width:100%; height:520px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; padding:3px;}
  .hm-cell{position:absolute; overflow:hidden; padding:6px 8px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; border:1px solid #000; transition:left .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1),width .5s cubic-bezier(.4,0,.2,1),height .5s cubic-bezier(.4,0,.2,1),filter .15s,outline-color .25s; text-decoration:none; color:#fff;}
  .hm-cell:hover, .hm-cell:focus-visible{outline:2px solid rgba(255,255,255,.7); z-index:5; filter:brightness(1.18);}
  .hm-hero{align-items:center; justify-content:center; text-align:center; gap:4px; padding:10px;}
  .hm-hero-sym{font-family:var(--font-display); font-weight:800; font-size:clamp(34px,9vw,64px); line-height:1;}
  .hm-hero-price{font-family:var(--font-mono); font-size:clamp(18px,3.4vw,28px); opacity:.95; margin-top:2px;}
  .hm-hero-chg{font-family:var(--font-mono); font-weight:700; font-size:clamp(14px,2.4vw,18px); color:#eafff2;}
  .hm-hero-chg-down{color:#ffe9ea;}
  .hm-hero-dom{font-size:11.5px; opacity:.8; margin-top:4px;}

  /* ---------- List view (Coin360-style table) ---------- */
  .hm-list-wrap{display:none; width:100%; height:calc(100vh - 60px - 54px); min-height:440px; max-height:820px; overflow-y:auto; background:#000; border-bottom:1px solid var(--border-soft);}
  .hm-list-wrap.active{display:block;}
  .hm-list-head{display:grid; grid-template-columns:1.6fr 1fr 0.8fr; gap:8px; padding:10px 16px; font-size:11.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; position:sticky; top:0; background:#000; border-bottom:1px solid var(--border-soft); z-index:2;}
  .hm-list-row{display:grid; grid-template-columns:1.6fr 1fr 0.8fr; gap:8px; align-items:center; padding:11px 16px; text-decoration:none; color:var(--text); border-bottom:1px solid #14181f;}
  .hm-list-row:hover, .hm-list-row:focus-visible{background:var(--surface);}
  .hm-list-coin{display:flex; align-items:center; gap:10px; min-width:0;}
  .hm-list-badge{width:28px; height:28px; border-radius:50%; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; font-family:var(--font-mono); flex:none;}
  .hm-list-names{min-width:0;}
  .hm-list-sym{font-weight:700; font-size:14px;}
  .hm-list-name{font-size:11.5px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .hm-list-price{font-family:var(--font-mono); font-size:14px; text-align:right;}
  .hm-list-chg{font-family:var(--font-mono); font-weight:700; font-size:13px; text-align:right; padding:4px 8px; border-radius:6px; justify-self:end;}
  .hm-cell.flash{outline:2px solid rgba(255,255,255,.85);}
  .hm-sym{font-family:var(--font-display); font-weight:700; letter-spacing:.01em;}
  .hm-price{font-family:var(--font-mono); opacity:.92;}
  .hm-chg{font-family:var(--font-mono); font-weight:700; display:flex; align-items:center; gap:3px;}
  .heatmap-legend{display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap; font-size:12px; color:var(--text-faint);}
  .legend-scale{display:flex; align-items:center; gap:5px;}
  .legend-swatch{width:16px; height:10px; border-radius:2px;}
  .tooltip{position:fixed; z-index:80; background:var(--surface-2); border:1px solid var(--border); border-radius:9px; padding:11px 13px; font-size:12.5px; box-shadow:0 14px 34px rgba(0,0,0,.55); pointer-events:none; min-width:190px; display:none;}
  .tooltip.show{display:block;}
  .tooltip .tt-title{font-family:var(--font-display); font-weight:700; font-size:14px; margin-bottom:6px;}
  .tooltip .tt-row{display:flex; justify-content:space-between; gap:14px; padding:2px 0; color:var(--text-dim);}
  .tooltip .tt-row b{color:var(--text); font-family:var(--font-mono); font-weight:500;}

  /* ---------- Cards grid (gainers/losers/trending) ---------- */
  .movers-columns{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .mover-list{display:flex; flex-direction:column; gap:8px;}
  .mover-card{display:grid; grid-template-columns:22px 30px 1fr auto auto; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:10px 12px; text-decoration:none; color:var(--text); transition:border-color .15s,transform .15s;}
  .mover-card:hover{border-color:var(--text-faint);}
  .mover-rank{color:var(--text-faint); font-size:12px; font-family:var(--font-mono); text-align:right;}
  .coin-badge{width:30px; height:30px; border-radius:50%; background:var(--surface-2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; font-family:var(--font-mono); border:1px solid var(--border);}
  .mover-info{min-width:0;}
  .mover-sym{font-weight:600; font-size:13.5px;}
  .mover-name{font-size:11.5px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .mover-price{font-family:var(--font-mono); font-size:13px; text-align:right;}
  .mover-chg{font-family:var(--font-mono); font-size:13px; font-weight:700; text-align:right; display:flex; align-items:center; gap:3px; justify-content:flex-end; min-width:70px;}
  .up-txt{color:var(--up);} .down-txt{color:var(--down);}
  .up-pill{background:var(--up-bg); color:var(--up); padding:2px 7px; border-radius:6px;}
  .down-pill{background:var(--down-bg); color:var(--down); padding:2px 7px; border-radius:6px;}

  /* ---------- Trending ---------- */
  .trending-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;}
  .trend-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px; text-decoration:none; color:var(--text); position:relative;}
  .trend-rank{position:absolute; top:10px; right:12px; font-family:var(--font-mono); font-size:11px; color:var(--text-faint);}
  .trend-score{margin-top:8px; height:5px; border-radius:4px; background:var(--border); overflow:hidden;}
  .trend-score-fill{height:100%; background:linear-gradient(90deg,var(--pulse),var(--up));}
  .trend-tags{display:flex; gap:6px; margin-top:9px; flex-wrap:wrap;}
  .tag{font-size:10.5px; padding:2px 7px; border-radius:5px; background:var(--surface-2); color:var(--text-dim); border:1px solid var(--border-soft);}
  .info-note{font-size:12px; color:var(--text-faint); background:var(--surface); border:1px dashed var(--border); border-radius:8px; padding:10px 12px; margin-top:14px;}

  /* ---------- Market stats / movers ---------- */
  .stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
  .stat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:15px;}
  .stat-card .pulse-label{margin-bottom:6px;}

  /* ---------- Filters bar ---------- */
  .filter-bar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
  .chip{background:var(--surface); border:1px solid var(--border); color:var(--text-dim); font-size:12.5px; padding:6px 12px; border-radius:20px; cursor:pointer; font-family:var(--font-body);}
  .chip.active{background:var(--pulse-dim); color:var(--pulse); border-color:rgba(47,217,232,.4);}

  /* ---------- Educational / FAQ ---------- */
  .edu-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
  .edu-block h3{font-size:15.5px; margin-bottom:8px;}
  .edu-block p{color:var(--text-dim); font-size:13.5px; line-height:1.65; margin:0;}
  details.faq{background:var(--surface); border:1px solid var(--border); border-radius:9px; padding:13px 15px; margin-bottom:8px;}
  details.faq summary{cursor:pointer; font-weight:600; font-size:14px; list-style:none; display:flex; justify-content:space-between; align-items:center;}
  details.faq summary::-webkit-details-marker{display:none;}
  details.faq summary::after{content:'+'; color:var(--text-faint); font-size:18px; font-weight:400;}
  details.faq[open] summary::after{content:'–';}
  details.faq p{color:var(--text-dim); font-size:13.5px; margin:10px 0 0; line-height:1.6;}

  .disclaimer-box{background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--amber); border-radius:8px; padding:16px 18px; font-size:13px; color:var(--text-dim); line-height:1.6;}
  .disclaimer-box strong{color:var(--text);}

  /* ---------- Ad container ---------- */
  .ad-slot{width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--surface),var(--surface-2)); border:1px solid var(--border-soft); border-radius:10px; color:var(--text-faint); margin:8px 0 0; position:relative; overflow:hidden;}
  .ad-slot::before{content:'Ad'; position:absolute; top:8px; left:10px; font-size:9.5px; font-weight:700; letter-spacing:.06em; color:var(--text-faint); background:var(--surface-2); border:1px solid var(--border-soft); padding:1px 6px; border-radius:4px;}
  .ad-slot .ad-tag{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-faint); opacity:.75;}
  .ad-slot-leaderboard{min-height:90px;}
  .ad-slot-rect{min-height:250px;}

  /* ---------- Footer ---------- */
  footer.site{padding:34px 0 44px; margin-top:6px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px; padding-bottom:24px; border-bottom:1px solid var(--border-soft);}
  .footer-col h4{font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px;}
  .footer-col a{display:block; font-size:13px; color:var(--text-dim); text-decoration:none; padding:4px 0;}
  .footer-col a:hover{color:var(--text);}
  .footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:18px; font-size:12px; color:var(--text-faint); flex-wrap:wrap; gap:10px;}

  /* ---------- Coin detail page ---------- */
  .page{display:none;}
  .page.active{display:block;}
  #home-page.active{display:block;}
  .breadcrumbs{font-size:12px; color:var(--text-faint); padding:16px 0 0;}
  .breadcrumbs a{color:var(--text-dim); text-decoration:none;} .breadcrumbs a:hover{color:var(--text);}
  .coin-hero{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:20px 0;}
  .coin-hero-left{display:flex; align-items:center; gap:14px;}
  .coin-hero-badge{width:52px; height:52px; border-radius:50%; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:700; font-size:16px;}
  .coin-hero h1{font-size:26px;}
  .coin-hero .coin-sub{color:var(--text-faint); font-size:13px; margin-top:3px;}
  .coin-price-block{text-align:right;}
  .coin-price{font-family:var(--font-mono); font-size:30px; font-weight:600;}
  .coin-detail-grid{display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-top:6px;}
  .chart-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px;}
  .chart-card svg{width:100%; height:280px; display:block;}
  .stat-list{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:11px;}
  .stat-list .row{display:flex; justify-content:space-between; font-size:13px; color:var(--text-dim); border-bottom:1px solid var(--border-soft); padding-bottom:9px;}
  .stat-list .row b{color:var(--text); font-family:var(--font-mono); font-weight:500;}
  .stat-list .row:last-child{border-bottom:none; padding-bottom:0;}
  .back-link{display:inline-flex; align-items:center; gap:6px; color:var(--text-dim); text-decoration:none; font-size:13px; margin-top:14px;}
  .back-link:hover{color:var(--text);}
  .related-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px;}

  .status-banner{display:none; background:var(--down-bg); border:1px solid rgba(255,77,94,.35); color:var(--down); font-size:13px; padding:10px 14px; border-radius:8px; margin:14px 0; align-items:center; gap:8px;}
  .status-banner.show{display:flex;}
  .status-banner.warn{background:rgba(245,185,66,.12); border-color:rgba(245,185,66,.35); color:var(--amber);}

  .empty-state{padding:30px; text-align:center; color:var(--text-faint); font-size:13px;}
  .skel{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-2) 37%,var(--surface) 63%); background-size:400% 100%; animation:sk 1.4s ease infinite; border-radius:6px;}
  @keyframes sk{0%{background-position:100% 50%} 100%{background-position:0 50%}}

  @media (max-width: 980px){
    .pulse-grid{grid-template-columns:repeat(2,1fr);}
    .movers-columns{grid-template-columns:1fr;}
    .edu-grid{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .coin-detail-grid{grid-template-columns:1fr;}
    .related-grid{grid-template-columns:repeat(2,1fr);}
    nav.main-nav{display:none;}
    .search-box .search-input{width:150px;}
    .menu-btn{display:flex;}
    .heatmap-wrap{height:420px;}
    .hm-toolbar{padding:10px 14px;}
    .hm-toolbar-right{width:100%; justify-content:flex-start;}
  }
  @media (max-width: 720px){
    .hero-heatmap-wrap{height:calc(100vh - 60px - 96px); min-height:380px;}
    .hm-list-wrap{height:calc(100vh - 60px - 96px); min-height:380px;}
    .hm-toolbar-left h1{font-size:15px;}
    .hm-toolbar-left .sub{display:none;}
    .seg button{padding:6px 9px; font-size:11.5px;}
  }
  @media (max-width: 600px){
    .pulse-grid{grid-template-columns:1fr 1fr;}
    .search-box{display:none;}
    .heatmap-wrap{height:360px;}
    .hm-cell{padding:4px 6px;}
    .coin-price{font-size:24px;}
    .hm-legend-inline{display:none;}
    .hm-list-head, .hm-list-row{grid-template-columns:1.5fr 1fr 0.9fr; padding-left:12px; padding-right:12px;}
    .stats-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width: 420px){
    .pulse-grid{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:1fr;}
    .hm-toolbar-right .seg{flex:1 1 auto;}
    .hm-toolbar-right .seg button{flex:1; text-align:center;}
  }