*{box-sizing:border-box} :root{--g:#00ff9d;--g2:#62ffc2;--bg:#020806;--line:#087d51;--muted:#91aaa2}
html,body{margin:0;background:#010604;color:#e8fff6;font-family:Consolas,"Courier New",monospace;min-height:100%}
#matrix{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:.22;pointer-events:none}
body:after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 68% 10%,transparent 0,rgba(0,0,0,.1) 30%,rgba(0,0,0,.72) 100%)}
header,main,footer{position:relative;z-index:2} header{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 3.3vw;gap:55px;background:rgba(1,8,5,.74)}
.logo{display:flex;align-items:center;gap:10px;color:var(--g);font-size:20px;letter-spacing:4px;text-decoration:none}.logo img{width:30px;height:30px}
nav{display:flex;gap:38px;height:100%;align-items:center}nav a{font-size:12px;color:var(--g2);height:100%;display:flex;align-items:center;border-bottom:2px solid transparent}nav .active{border-color:var(--g)}
.motto{margin-left:auto;color:var(--g2);font-size:11px;letter-spacing:2px}
main{max-width:1440px;margin:auto;padding:28px 4.5vw 20px}.hero{display:grid;grid-template-columns:1.35fr .65fr;min-height:300px;align-items:center}
.kicker{color:var(--g);font-size:12px;letter-spacing:5px;margin-bottom:15px}h1{font-size:54px;line-height:1;margin:0 0 12px;letter-spacing:-2px}h1 b{color:var(--g);text-shadow:0 0 18px #00ff9d55}h2{color:var(--g2);font-size:20px;margin:0 0 12px;font-weight:400}
.hero p{color:#b6c8c1;font-family:Arial,sans-serif;line-height:1.55}.search{height:50px;border:1px solid var(--g);display:flex;max-width:760px;background:#02100b;box-shadow:0 0 22px #00ff9d10}
.search span{font-size:29px;padding:4px 12px;color:var(--g)}.search input{flex:1;background:transparent;border:0;outline:0;color:white;font:14px Consolas;padding:0 8px}.search button{width:145px;background:#03120c;color:var(--g2);border:0;border-left:1px solid var(--g);font:bold 14px Consolas;letter-spacing:2px;cursor:pointer}.search button:hover{background:#06301f}
.hint{color:var(--g);font-size:11px;margin-top:9px}.orb{display:flex;align-items:center;justify-content:center;gap:12px;color:#75ffd0;font-size:12px;letter-spacing:4px;line-height:2.1}.orb img{width:min(310px,25vw);filter:drop-shadow(0 0 18px #00ff9d33)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:5px 0 32px}.stat{border:1px solid var(--line);padding:17px 20px;background:linear-gradient(135deg,#03120d,#010705);min-height:90px}.stat .k{color:var(--g);font-size:11px;letter-spacing:2px}.stat .v{color:var(--g2);font-size:25px;font-weight:bold;margin-top:8px}
.lower{display:grid;grid-template-columns:2.2fr 1fr;gap:18px}.ranking,.sidebox,.quote{border:1px solid var(--line);background:rgba(1,10,6,.82)}.ranking{padding:14px 20px}.title{display:flex;align-items:end;justify-content:space-between}.title h3,.sidebox h3{color:var(--g2);font-size:22px;letter-spacing:1px;margin:0 0 12px}.title span{font-size:10px;color:#6bd9ae;margin-bottom:12px}
.tablebox{overflow:auto}table{width:100%;border-collapse:collapse;min-width:800px}th{background:#062017;color:#5dffc2;font-size:10px;letter-spacing:1px;text-align:left;padding:9px}td{border-bottom:1px solid #0b3a28;padding:8px 9px;font-size:11px}tr:hover{background:#062017}.address{max-width:300px}.label{color:var(--g)}
.badge{border:1px solid var(--g);padding:3px 8px;color:var(--g);font-size:9px}.badge.pool{border-color:#b15cff;color:#d59cff}.badge.staking,.badge.token_contract{border-color:#ff9f1c;color:#ffc26c}
.note{color:#8fa79f;font:11px Arial,sans-serif;line-height:1.5;padding:12px 0 2px}aside{display:flex;flex-direction:column;gap:12px}.sidebox{padding:18px}.sidebox p{font:12px Arial,sans-serif;color:#9fb5ad;line-height:1.55}.crosshair{text-align:center;color:var(--g);font-size:55px;padding:18px}.methodology h4{color:var(--g);margin:0}.quote{padding:25px;text-align:center;color:var(--g2);letter-spacing:3px;line-height:1.7}
.result{border:1px solid var(--g);margin:0 0 16px;padding:16px;background:#03140d;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:15px}.hidden{display:none}.result .rank{font-size:30px;color:var(--g);font-weight:bold}.result .rstat{border-left:1px solid #14583d;padding-left:14px}.small{font-size:9px;color:#77aa96;letter-spacing:1px}.big{font-size:18px;margin-top:5px}
footer{border-top:1px solid var(--line);padding:20px 3.3vw;margin-top:0;display:flex;justify-content:space-between;color:var(--g);font-size:10px;letter-spacing:1px;background:#010705}
@media(max-width:900px){.hero{grid-template-columns:1fr}.orb{display:none}.lower{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}nav{gap:15px}.motto{display:none}h1{font-size:42px}}
@media(max-width:560px){header{height:auto;padding:18px;display:block}nav{margin-top:15px;height:auto;flex-wrap:wrap}.stats{grid-template-columns:1fr}.search button{width:100px}main{padding:28px 16px}.result{grid-template-columns:1fr}.result .rstat{border-left:0;border-top:1px solid #14583d;padding:10px 0 0}}

/* v2.2: Top-100 scrolling + richer rank panel + mobile holder cards */
.holder-scroll{
  max-height:520px;
  overflow-y:auto;
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:#00ff9d #03110b;
}
.holder-scroll::-webkit-scrollbar{width:8px;height:8px}
.holder-scroll::-webkit-scrollbar-track{background:#03110b}
.holder-scroll::-webkit-scrollbar-thumb{background:#0c8b5c;border:1px solid #00ff9d}
.holder-scroll thead th{
  position:sticky;
  top:0;
  z-index:3;
  box-shadow:0 1px 0 #087d51;
}

.rank-panel{min-height:265px}
.rank-result-title{color:var(--g2);font-size:13px;letter-spacing:2px;margin-bottom:10px}
.rank-big{
  font-size:42px;
  line-height:1;
  color:var(--g);
  font-weight:700;
  text-shadow:0 0 18px #00ff9d33;
}
.rank-percent{
  display:inline-block;
  margin-top:10px;
  border:1px solid var(--g);
  padding:6px 10px;
  color:var(--g2);
  font-size:13px;
  letter-spacing:1px;
}
.rank-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:16px;
}
.rank-mini{
  border:1px solid #0d4b34;
  background:#02100a;
  padding:10px;
}
.rank-mini .rk{font-size:9px;color:#76a993;letter-spacing:1px}
.rank-mini .rv{margin-top:5px;color:#e9fff7;font-size:15px}
.share-line{margin-top:12px;color:#8fa79f;font:11px Arial,sans-serif;line-height:1.5}

.mobile-holder-list{display:none}

@media(max-width:900px){
  .holder-scroll{max-height:460px}
}

@media(max-width:700px){
  body:after{background:radial-gradient(circle at 50% 8%,transparent 0,rgba(0,0,0,.18) 32%,rgba(0,0,0,.78) 100%)}
  header{padding:14px 16px}
  .logo{font-size:18px}
  nav{gap:12px}
  nav a{font-size:10px}
  main{padding:22px 14px 16px}
  h1{font-size:38px;line-height:1.04}
  h2{font-size:17px}
  .hero p{font-size:14px}
  .search{height:auto;display:grid;grid-template-columns:42px 1fr}
  .search span{grid-row:1 / 2}
  .search input{min-height:48px;width:100%}
  .search button{
    grid-column:1 / -1;
    width:100%;
    min-height:44px;
    border-left:0;
    border-top:1px solid var(--g);
  }
  .stats{grid-template-columns:1fr 1fr;gap:9px}
  .stat{padding:14px;min-height:82px}
  .stat .v{font-size:20px}
  .ranking{padding:12px}
  .title h3,.sidebox h3{font-size:18px}
  .title{align-items:flex-start;gap:10px}
  .title span{font-size:9px;text-align:right}

  /* Elegant mobile list instead of squeezed desktop table */
  .holder-scroll{display:none}
  .mobile-holder-list{
    display:block;
    max-height:62vh;
    overflow-y:auto;
    padding-right:3px;
    scrollbar-width:thin;
    scrollbar-color:#00ff9d #03110b;
  }
  .mobile-holder-card{
    border:1px solid #0c4d35;
    background:linear-gradient(135deg,#03110c,#010604);
    margin-bottom:9px;
    padding:12px;
  }
  .mobile-holder-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
  }
  .mobile-rank{
    color:var(--g);
    font-size:18px;
    min-width:42px;
  }
  .mobile-address{
    flex:1;
    min-width:0;
    color:#dff8ef;
    font-size:11px;
    word-break:break-all;
  }
  .mobile-label{color:var(--g2);font-size:11px;margin-bottom:4px}
  .mobile-total{
    color:var(--g2);
    font-size:15px;
    font-weight:700;
    white-space:nowrap;
  }
  .mobile-breakdown{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:6px;
    margin-top:10px;
  }
  .mobile-cell{
    border-top:1px solid #0a3324;
    padding-top:7px;
  }
  .mobile-cell .mk{font-size:8px;color:#719486;letter-spacing:.7px}
  .mobile-cell .mv{font-size:11px;margin-top:3px}
  .result{grid-template-columns:1fr 1fr}
  aside{gap:10px}
  .rank-panel{min-height:0}
  .crosshair{padding:10px}
  footer{font-size:9px;gap:16px;flex-direction:column}
}

@media(max-width:430px){
  .stats{grid-template-columns:1fr}
  h1{font-size:34px}
  .kicker{letter-spacing:3px}
  nav{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}
  nav a{justify-content:center;text-align:center}
  .result{grid-template-columns:1fr}
  .rank-grid{grid-template-columns:1fr 1fr}
  .mobile-breakdown{grid-template-columns:1fr 1fr}
  .mobile-breakdown .mobile-cell:last-child{grid-column:1 / -1}
}


/* v3 - What is NETA page */
.about-page{padding-top:36px}
.about-hero{
  min-height:430px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  align-items:center;
  gap:40px;
  border-bottom:1px solid #0a3d2a;
  padding-bottom:38px;
}
.about-copy{max-width:820px}
.about-copy .lead{
  font-size:19px;
  line-height:1.7;
  color:#d1e6de;
  max-width:760px;
}
.about-copy p{
  font-family:Arial,sans-serif;
  color:#9fb5ad;
  line-height:1.7;
  max-width:760px;
}
.terminal-line{
  display:inline-block;
  margin:14px 0 6px;
  padding:8px 10px;
  border-left:2px solid var(--g);
  background:#02110b;
  color:var(--g);
  font-size:12px;
  letter-spacing:2px;
}
.about-orb{text-align:center}
.about-orb img{
  width:min(390px,29vw);
  filter:drop-shadow(0 0 28px #00ff9d3a);
}
.orb-caption{
  margin-top:-18px;
  color:var(--g2);
  font-size:16px;
  letter-spacing:2px;
  line-height:1.5;
}
.orb-caption span{font-size:9px;color:#648d7d;letter-spacing:3px}

.principles{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:34px 0;
}
.principle{
  border:1px solid var(--line);
  background:linear-gradient(145deg,#03140d,#010705);
  padding:24px;
  min-height:220px;
  position:relative;
  overflow:hidden;
}
.principle:after{
  content:"";
  position:absolute;right:-35px;bottom:-55px;width:130px;height:130px;
  border:1px solid #0e4b35;border-radius:50%;
}
.principle-no{color:#2f8a62;font-size:11px;letter-spacing:2px}
.principle h3{color:var(--g2);font-size:23px;letter-spacing:2px;margin:18px 0 12px}
.principle p{font:14px/1.65 Arial,sans-serif;color:#9fb5ad}

.story-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:16px;
  margin-bottom:32px;
}
.panel{
  border:1px solid var(--line);
  background:rgba(1,10,6,.84);
  padding:28px;
}
.story-main h2{font-size:34px;margin:0;line-height:1.08}
.story-main h2.green{color:var(--g);margin-bottom:22px}
.story-main p{font:15px/1.75 Arial,sans-serif;color:#a8bbb4;max-width:760px}
.fact-row{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:12px 0;
  border-bottom:1px solid #0a3827;
}
.fact-row span{color:#6f9485;font-size:10px;letter-spacing:1px}
.fact-row strong{color:#dffcf1;font-size:12px;text-align:right}
.fact-note{margin-top:14px;color:#527565;font-size:10px}

.why-ranking{
  border-top:1px solid #0a3d2a;
  border-bottom:1px solid #0a3d2a;
  padding:34px 0;
  margin-bottom:32px;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:34px;
}
.why-title h2{font-size:31px;margin:0;color:var(--g2)}
.why-items{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.why-items div{border:1px solid #0a422e;padding:16px;background:#02100a}
.why-items span{color:var(--g);font-size:11px}
.why-items p{font:13px/1.55 Arial,sans-serif;color:#9fb5ad;margin:8px 0 0}

.about-method{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:35px;
  margin-bottom:22px;
}
.about-method h3{color:var(--g2);font-size:21px;margin:0}
.about-method-text p{font:13px/1.65 Arial,sans-serif;color:#9fb5ad;margin:0 0 12px}

.cta-panel{
  border:1px solid var(--g);
  background:linear-gradient(90deg,#03140d,#010805);
  padding:25px 28px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:30px;
}
.cta-panel h2{margin:0;color:var(--g2);font-size:28px}
.cta-button{
  text-decoration:none;
  border:1px solid var(--g);
  color:#001b10;
  background:var(--g);
  padding:14px 18px;
  font-weight:bold;
  font-size:12px;
  letter-spacing:1px;
}
.cta-button:hover{filter:brightness(1.12)}

@media(max-width:900px){
  .about-hero{grid-template-columns:1fr;min-height:0}
  .about-orb{display:none}
  .principles{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr}
  .why-ranking{grid-template-columns:1fr}
  .about-method{grid-template-columns:1fr}
}
@media(max-width:700px){
  .about-page{padding-top:20px}
  .about-copy .lead{font-size:16px}
  .principle{min-height:0}
  .why-items{grid-template-columns:1fr}
  .cta-panel{display:block}
  .cta-button{display:block;text-align:center;margin-top:18px}
  .story-main h2{font-size:27px}
  .why-title h2{font-size:27px}
}


/* NETA DAO history */
.dao-hero{
  display:grid;grid-template-columns:1.25fr .75fr;gap:45px;align-items:center;
  min-height:420px;padding:24px 0 42px;border-bottom:1px solid #0a3d2a
}
.dao-hero .lead{font:18px/1.7 Arial,sans-serif;color:#c7ddd4;max-width:800px}
.dao-actions{display:flex;gap:12px;margin-top:27px;flex-wrap:wrap}
.ghost-button{
  text-decoration:none;border:1px solid #19613f;color:#8dbca8;padding:14px 18px;
  font-weight:bold;font-size:12px;letter-spacing:1px;background:#020c08
}
.ghost-button:hover{border-color:var(--g);color:var(--g)}
.dao-sigil{text-align:center;position:relative}
.dao-sigil img{width:min(360px,28vw);filter:drop-shadow(0 0 30px #00ff9d35)}
.dao-sigil div{
  margin-top:-12px;color:var(--g);font-size:12px;letter-spacing:5px;line-height:1.6
}
.timeline{padding:40px 0 24px}
.timeline-title{margin-bottom:24px}
.timeline-title h2{font-size:34px;color:var(--g2);margin:0}
.timeline-item{
  display:grid;grid-template-columns:180px 1fr;gap:30px;padding:23px 0;
  border-top:1px solid #0a3827
}
.timeline-date{color:var(--g);font-size:11px;letter-spacing:2px;padding-top:5px}
.timeline-item h3{margin:0 0 9px;color:#dffcf1;font-size:19px;letter-spacing:1px}
.timeline-item p{margin:0;max-width:850px;font:14px/1.7 Arial,sans-serif;color:#98b0a6}
.dao-philosophy{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 32px}
.dao-philosophy h3{color:var(--g2);font-size:20px;margin:15px 0 10px}
.dao-philosophy p{font:13px/1.65 Arial,sans-serif;color:#9fb5ad}
.dao-statement{
  display:grid;grid-template-columns:.7fr 1.3fr;gap:42px;margin-bottom:24px
}
.dao-statement h2{color:var(--g);font-size:31px;margin:0}
.dao-statement p{font:14px/1.7 Arial,sans-serif;color:#9fb5ad;margin:0 0 12px}
.source-strip{
  border:1px solid var(--g);background:linear-gradient(90deg,#03140d,#010805);
  padding:27px 28px;display:flex;align-items:center;justify-content:space-between;
  gap:30px;margin-bottom:22px
}
.source-strip h2{margin:0 0 6px;color:var(--g2);font-size:28px}
.source-strip p{margin:0;max-width:720px;font:13px/1.55 Arial,sans-serif;color:#8fa89d}
.dao-source-note{margin-top:0}
@media(max-width:900px){
  .dao-hero{grid-template-columns:1fr;min-height:0}
  .dao-sigil{display:none}
  .dao-philosophy{grid-template-columns:1fr}
  .dao-statement{grid-template-columns:1fr}
}
@media(max-width:700px){
  .timeline-item{grid-template-columns:1fr;gap:8px}
  .source-strip{display:block}
  .source-strip .cta-button{display:block;text-align:center;margin-top:18px}
  .dao-hero .lead{font-size:16px}
  .timeline-title h2{font-size:28px}
}


/* Telegram community CTA */
.community-strip{
  margin:34px 0 10px;
  padding:24px 26px;
  border:1px solid #0d6a46;
  background:linear-gradient(100deg,rgba(0,255,120,.08),rgba(1,9,6,.94) 48%,rgba(0,255,120,.04));
  display:grid;
  grid-template-columns:58px 1fr auto;
  gap:20px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.community-strip:after{
  content:"";
  position:absolute;
  right:170px;top:-80px;
  width:190px;height:190px;
  border:1px solid rgba(0,255,120,.08);
  transform:rotate(45deg);
  pointer-events:none;
}
.telegram-icon{
  width:52px;height:52px;border:1px solid var(--g);
  display:grid;place-items:center;
  background:#03160e;
  box-shadow:0 0 22px rgba(0,255,120,.12);
}
.telegram-icon svg{width:28px;height:28px;fill:var(--g)}
.community-copy h2{margin:1px 0 5px;color:var(--g2);font-size:24px;letter-spacing:1px}
.community-copy p{margin:0;font:12px/1.5 Arial,sans-serif;color:#829f92}
.telegram-button{
  position:relative;z-index:1;
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;
  border:1px solid var(--g);
  color:#001b10;background:var(--g);
  padding:14px 18px;
  font-weight:bold;font-size:11px;letter-spacing:1.5px;
  white-space:nowrap;
}
.telegram-button:hover{filter:brightness(1.12);box-shadow:0 0 20px rgba(0,255,120,.18)}
.telegram-button span{font-size:16px}
@media(max-width:700px){
  .community-strip{grid-template-columns:48px 1fr;padding:19px 17px;gap:14px}
  .telegram-icon{width:44px;height:44px}
  .telegram-icon svg{width:24px;height:24px}
  .community-copy h2{font-size:19px}
  .community-copy p{font-size:11px}
  .telegram-button{grid-column:1/-1;justify-content:center;width:100%;box-sizing:border-box}
}
