:root{
    --bg:#0A0D12;
    --surface:#10141B;
    --surface-2:#151A22;
    --border:#212836;
    --border-soft:#1a2029;
    --text:#E7ECF3;
    --text-dim:#AEB7C5;
    --text-faint:#98A2B3;
    --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:system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-body:system-ui,-apple-system,'Segoe UI',sans-serif;
    --font-mono:ui-monospace,'SFMono-Regular',Consolas,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:var(--surface); border:1px solid var(--border); color:var(--text); border-radius:9px; width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; transition:background .15s,border-color .15s;}
  .menu-btn:hover{background:var(--surface-2); border-color:var(--text-faint);}
  .menu-btn:active{background:var(--surface-2);}
  .menu-btn[aria-expanded="true"]{background:var(--surface-2); border-color:var(--pulse);}

  /* ---------- Blog ---------- */
  .blog-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
  .blog-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:8px; transition:border-color .15s;}
  .blog-card:hover{border-color:var(--text-faint);}
  .blog-date{font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono);}
  .blog-card h3{font-size:16px; line-height:1.3;}
  .blog-card p{color:var(--text-dim); font-size:13px; line-height:1.6; margin:0;}
  .article-body{max-width:720px; color:var(--text-dim); font-size:15px; line-height:1.75;}
  .article-body h2{color:var(--text); font-size:19px; margin:28px 0 10px;}
  .article-body p{margin:0 0 14px;}
  .article-meta{display:flex; gap:10px; align-items:center; color:var(--text-faint); font-size:12.5px; margin:10px 0 22px; font-family:var(--font-mono);}
  .article-hero-img{width:100%; max-width:820px; aspect-ratio:16/9; background:linear-gradient(135deg,var(--surface),var(--surface-2)); border:1px solid var(--border-soft); border-radius:12px; overflow:hidden; margin:14px 0 26px;}
  .article-hero-img img{width:100%; height:100%; object-fit:cover; display:block;}
  .article-body img{width:100%; border-radius:10px; margin:8px 0 18px; border:1px solid var(--border-soft);}
  .inline-link{color:var(--pulse); text-decoration:none; border-bottom:1px solid rgba(47,217,232,.35);}
  .inline-link:hover{border-bottom-color:var(--pulse);}

  /* ---------- 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,.footer-heading{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;}
    nav.main-nav a{padding:13px 16px; font-size:15px; border-radius:8px;}
    nav.main-nav a:hover, nav.main-nav a.active{background:var(--surface-2);}
    .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: 720px){
    .mover-card,.trend-card,.chip,.seg button{min-height:44px;}
    .footer-col a{min-height:44px; display:flex; align-items:center;}
  }
  @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;}
  }

/* PageSpeed/accessibility: treemap tiles below the minimum touch target are
   visual-only at any viewport size; List view remains complete navigation. */
.hm-cell-visual{cursor:default;}
.hm-cell-visual:hover{filter:none; outline:none;}
/* Article sharing: brand-recognizable, responsive buttons. */
nav[aria-label="Share this article"] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 22px;
  font-size: 0;
}

nav[aria-label="Share this article"] > a,
nav[aria-label="Share this article"] > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 7px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: filter .16s ease, transform .16s ease;
}

nav[aria-label="Share this article"] > a:hover,
nav[aria-label="Share this article"] > button:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

nav[aria-label="Share this article"] > a:focus-visible,
nav[aria-label="Share this article"] > button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

nav[aria-label="Share this article"] > a[href*="twitter.com"] { background: #111; }
nav[aria-label="Share this article"] > a[href*="facebook.com"] { background: #1877f2; }
nav[aria-label="Share this article"] > a[href*="linkedin.com"] { background: #0a66c2; }
nav[aria-label="Share this article"] > a[href*="reddit.com"] { background: #ff4500; }
nav[aria-label="Share this article"] > a[href*="wa.me"] { background: #25d366; color: #071b10; }
nav[aria-label="Share this article"] > a[href*="t.me"] { background: #229ed9; }
nav[aria-label="Share this article"] > .share-tiktok { background: #050505; gap: 7px; }
.share-tiktok-icon { width: 17px; height: 17px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.share-tiktok-icon .tk-cyan { stroke: #25f4ee; transform: translate(-.65px,.55px); }
.share-tiktok-icon .tk-pink { stroke: #fe2c55; transform: translate(.65px,-.45px); }
.share-tiktok-icon .tk-white { stroke: #fff; }
.share-status:not(.sr-only) { display:block; margin:-14px 0 20px; color:var(--text-dim); font-size:13px; }

/* Blog articles: spacious reading column plus a useful desktop sidebar. */
.article-page-wrap {
  max-width: 1200px !important;
  display: grid;
  grid-template-columns: minmax(0, 820px) 320px;
  align-items: start;
  gap: 40px;
}
.article-main-column { min-width: 0; }
.article-sidebar { min-width: 0; padding-top: 72px; }
.article-sidebar-sticky { position: static; display: grid; gap: 14px; }
.sidebar-card,
.sidebar-cta {
  background: linear-gradient(145deg, var(--surface), rgba(21,27,36,.96));
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.sidebar-card h2,
.sidebar-cta h2 { margin: 0 0 12px; color: var(--text); font-size: 15px; line-height: 1.3; }
.sidebar-live-dot { display: inline-flex; align-items: center; gap: 4px; margin-left: 5px; color: var(--green); font: 9px var(--font-mono); text-transform: uppercase; letter-spacing: .06em; vertical-align: 2px; }
.sidebar-live-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px rgba(31,214,122,.7); }
.sidebar-loading { margin: 0; color: var(--text-faint); font-size: 12.5px; line-height: 1.5; }
.sidebar-error { margin: 12px 0 0; color: var(--text-faint); font-size: 12px; }
.sidebar-market-list { display: grid; }
.sidebar-market-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto 54px;
  align-items: center;
  gap: 7px;
  padding: 9px 4px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--border-soft);
}
.sidebar-market-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.sidebar-market-row:hover strong { color: var(--blue-light); }
.sidebar-market-row > img,
.sidebar-chart-head img { border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.sidebar-coin-fallback { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); font: 9px var(--font-mono); }
.sidebar-coin,
.sidebar-quote { display: flex; flex-direction: column; gap: 2px; }
.sidebar-coin { min-width: 0; }
.sidebar-coin strong,
.sidebar-quote strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; transition: color .15s ease; }
.sidebar-coin small,
.sidebar-quote small { color: var(--text-faint); font: 11px var(--font-mono); }
.sidebar-quote { text-align: right; }
.sidebar-quote small.up-txt { color: var(--green); }
.sidebar-quote small.down-txt { color: var(--red); }
.sidebar-sparkline { width: 54px; height: 28px; display: block; opacity: .9; }
.sidebar-sparkline-empty { border-bottom: 1px dashed var(--border); }
.sidebar-tick .sidebar-quote strong { animation: sidebarTick .45s ease; }
@keyframes sidebarTick { 0% { color: var(--blue-light); transform: translateY(-1px); } 100% { color: var(--text); transform: none; } }
.sidebar-coin-tabs { display: flex; gap: 5px; margin: -2px 0 12px; }
.sidebar-coin-tabs button { flex: 1; min-width: 0; padding: 6px 2px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--text-faint); font: 10px var(--font-mono); cursor: pointer; }
.sidebar-coin-tabs button:hover,
.sidebar-coin-tabs button.active { color: #fff; background: var(--blue); border-color: var(--blue); }
.sidebar-chart-panel { min-height: 172px; }
.sidebar-chart-head { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.sidebar-chart-head > span { display: flex; align-items: center; gap: 8px; }
.sidebar-chart-head > span:last-child { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.sidebar-chart-head strong { color: var(--text); font-size: 12px; }
.sidebar-chart-head small { display: block; color: var(--text-faint); font: 10px var(--font-mono); }
.sidebar-chart-stage { height: 92px; margin: 10px 0 6px; display: grid; place-items: center; overflow: hidden; }
.sidebar-overview-chart { width: 100%; height: 88px; display: block; animation: sidebarChartIn .28s ease; }
.sidebar-overview-chart.sidebar-chart-static { animation: none; }
@keyframes sidebarChartIn { from { opacity: .25; transform: translateX(5px); } to { opacity: 1; transform: none; } }
.sidebar-chart-stats { display: flex; justify-content: space-between; gap: 8px; color: var(--text-faint); font-size: 9.5px; }
.sidebar-chart-stats span { display: flex; flex-direction: column; gap: 1px; }
.sidebar-chart-stats span:last-child { text-align: right; }
.sidebar-chart-stats strong { color: var(--text-dim); font: 10px var(--font-mono); }
.sidebar-movers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.sidebar-movers-grid h3 { margin: 0 0 7px; color: var(--text); font-size: 11px; }
.sidebar-movers-grid a { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 5px 0; color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--border-soft); }
.sidebar-movers-grid a:last-child { border-bottom: 0; }
.sidebar-movers-grid a span { display: flex; flex-direction: column; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 8.5px var(--font-mono); }
.sidebar-movers-grid a strong { color: var(--text); font: 10.5px var(--font-body); }
.sidebar-movers-grid a b { flex: none; font: 9px var(--font-mono); }
.sidebar-stat { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px; }
.sidebar-stat:last-child { border-bottom: 0; padding-bottom: 0; }
.sidebar-stat span { color: var(--text-faint); }
.sidebar-stat strong { color: var(--text); font-family: var(--font-mono); font-weight: 600; }
.sidebar-news-list { display: grid; gap: 11px; }
.sidebar-news-item { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.sidebar-news-item img { width: 80px; height: 45px; object-fit: cover; border-radius: 7px; border: 1px solid var(--border-soft); background: var(--surface-2); }
.sidebar-news-item span { min-width: 0; }
.sidebar-news-item strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 11.5px; line-height: 1.35; }
.sidebar-news-item small { display: block; margin-top: 4px; color: var(--text-faint); font-size: 9.5px; }
.sidebar-news-item:hover strong { color: var(--blue-light); }
.sidebar-topic-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sidebar-topic-chips a { padding: 6px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); font-size: 11.5px; text-decoration: none; }
.sidebar-topic-chips a:hover { color: var(--text); border-color: var(--blue); transform: translateY(-1px); }
.sidebar-cta { background: linear-gradient(135deg, rgba(47,111,237,.2), rgba(94,200,255,.06)); border-color: rgba(94,200,255,.28); }
.sidebar-cta p { margin: 0 0 13px; color: var(--text-dim); font-size: 12.5px; line-height: 1.5; }
.sidebar-cta div { display: flex; gap: 8px; }
.sidebar-cta a { flex: 1; padding: 8px 9px; border-radius: 8px; background: var(--blue); color: #fff; text-align: center; text-decoration: none; font-size: 11.5px; font-weight: 700; }
.sidebar-cta a:last-child { background: var(--surface-2); border: 1px solid var(--border); }
.sidebar-cta a:hover { filter: brightness(1.12); }

@media (max-width: 1100px) {
  .article-page-wrap { grid-template-columns: minmax(0, 1fr) 288px; gap: 24px; }
}
@media (max-width: 900px) {
  .article-page-wrap { display: block; max-width: 820px !important; }
  .article-sidebar { padding-top: 28px; }
  .article-sidebar-sticky { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar-cta { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .article-sidebar-sticky { grid-template-columns: 1fr; }
  .sidebar-overview,
  .sidebar-topics { display: none; }
  .sidebar-cta { grid-column: auto; }
  .sidebar-news-item { min-height: 52px; }
  .sidebar-topic-chips a,
  .sidebar-cta a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar-tick .sidebar-quote strong,
  .sidebar-overview-chart { animation: none; }
}