/* QTC Tokenomics Explorer — "the mint" theme: deep emerald ink, mint glow, treasury gold. */
:root{
  --ink:#04120d; --ink2:#071b14; --panel:rgba(10,32,24,.72);
  --line:rgba(94,234,212,.14); --line2:rgba(240,192,96,.16);
  --mint:#5eead4; --mint-dim:#8fd8c4; --gold:#f0c060; --gold2:#e8a94a;
  --text:#e9f5ef; --mut:#9db8ac; --faint:#6b8578;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--text); background:var(--ink);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.6; overflow-x:hidden;
}
#dust{position:fixed; inset:0; z-index:-1; background:
  radial-gradient(1100px 600px at 15% -5%, rgba(46,160,120,.16), transparent 60%),
  radial-gradient(900px 700px at 90% 10%, rgba(240,192,96,.07), transparent 60%),
  radial-gradient(1200px 900px at 50% 110%, rgba(20,90,66,.20), transparent 60%),
  var(--ink);}
.topbar{display:flex; justify-content:space-between; align-items:center; padding:18px 28px; max-width:1180px; margin:0 auto;}
.back{color:var(--mint-dim); text-decoration:none; font-weight:600; font-size:.95rem;}
.back:hover{color:var(--mint);}
.mint-pill{display:flex; gap:8px; align-items:center; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mint-dim); border:1px solid var(--line); border-radius:999px; padding:7px 16px; background:rgba(10,32,24,.5);}
.mint-ico{color:var(--mint);}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px 60px;}
.hero{padding:34px 0 10px;}
.hero-badge{display:inline-block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mint);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px; margin-bottom:18px; background:rgba(94,234,212,.06);}
.hero h1{font-family:var(--serif); font-size:clamp(2.2rem,5vw,3.6rem); margin:0 0 14px; letter-spacing:.01em;
  background:linear-gradient(100deg,#f4fffa 20%,var(--mint) 55%,var(--gold) 90%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero .sub{max-width:860px; color:var(--mut); font-size:1.06rem;}
.hero .sub b{color:var(--text);}
.live-strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:26px 0 8px;}
.live-tile{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; backdrop-filter:blur(6px);}
.live-tile .k{display:block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:4px;}
.live-tile .v{font-family:var(--serif); font-size:1.55rem; color:var(--mint);}
.live-tile .s{display:block; font-size:.78rem; color:var(--faint); margin-top:4px;}
.fineprint{font-size:.82rem; color:var(--faint); max-width:900px;}
.panel{margin-top:44px;}
.panel h2{font-family:var(--serif); font-size:1.9rem; margin:0 0 6px; color:#f2fff9;}
.panel .lede{color:var(--mut); max-width:920px; margin:0 0 20px;}
.panel code{font-size:.86em; color:var(--mint-dim); background:rgba(94,234,212,.08); padding:1px 6px; border-radius:6px;}
.alloc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px;}
.alloc-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px;}
.alloc-card.gold{border-color:var(--line2);}
.alloc-card h3{margin:0 0 4px; font-size:1.05rem;}
.alloc-card .amt{font-family:var(--serif); font-size:1.7rem; color:var(--mint);}
.alloc-card.gold .amt{color:var(--gold);}
.alloc-card .shr{font-size:.85rem; color:var(--faint);}
.alloc-card .term{font-size:.88rem; color:var(--mut); margin:10px 0 0;}
.alloc-bar{display:flex; height:26px; border-radius:8px; overflow:hidden; margin-top:18px; border:1px solid var(--line);}
.alloc-bar span{display:block; height:100%;}
.alloc-legend{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:10px; font-size:.82rem; color:var(--mut);}
.alloc-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px;}
.clock-controls{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-bottom:16px;}
.clock-controls label{font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint);}
.clock-controls input[type=range]{width:100%; margin:12px 0 8px; accent-color:var(--mint);}
.clock-read{display:flex; justify-content:space-between; align-items:baseline; font-family:var(--serif);}
.clock-read #clockDate{font-size:1.35rem; color:var(--mint);}
.clock-read #clockPct{font-size:1rem; color:var(--gold);}
.clock-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin-bottom:18px;}
.clock-cell{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:14px 16px;}
.clock-cell .n{font-size:.82rem; color:var(--mut);}
.clock-cell .u{font-family:var(--serif); font-size:1.35rem; color:var(--text);}
.clock-cell .p{font-size:.8rem; color:var(--faint);}
.clock-cell .ubar{height:6px; border-radius:4px; background:rgba(255,255,255,.07); margin-top:10px; overflow:hidden;}
.clock-cell .ubar i{display:block; height:100%; background:linear-gradient(90deg,var(--mint),var(--gold)); border-radius:4px;}
.chart-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px;}
.chart-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px;}
.chart-head h3{margin:0; font-size:1.1rem; font-family:var(--serif);}
.chart-note{font-size:.8rem; color:var(--faint);}
.chart-card svg{width:100%; height:auto; display:block;}
.milestones{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:10px; margin-top:14px;}
.ms{background:rgba(94,234,212,.05); border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-size:.86rem;}
.ms b{color:var(--mint); font-family:var(--serif);}
.ms .d{color:var(--faint); font-size:.78rem;}
.emit-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:14px; margin-top:16px;}
@media(max-width:860px){.emit-grid{grid-template-columns:1fr;}}
.emit-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px;}
.emit-card h3{margin:0 0 10px; font-family:var(--serif); font-size:1.1rem;}
.mrow{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px dashed rgba(94,234,212,.12); font-size:.92rem;}
.mrow:last-child{border-bottom:none;}
.mrow .mv{font-family:var(--serif); color:var(--mint);}
.fld{display:block; font-size:.85rem; color:var(--mut); margin:6px 0 12px;}
.fld input{width:100%; margin-top:6px; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
  background:#0a2018; color:var(--text); font-size:1rem; font-family:inherit;}
.fld input:focus{outline:none; border-color:var(--mint);}
.emit-out{font-size:.95rem; color:var(--mut);}
.emit-out .big{font-family:var(--serif); font-size:1.5rem; color:var(--mint); display:block; margin:4px 0;}
.fee-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:860px){.fee-grid{grid-template-columns:1fr;}}
.fee-card{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px;}
.fee-card h3{margin:0 0 8px; font-family:var(--serif); font-size:1.1rem;}
.fee-out .frow{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed rgba(94,234,212,.12); font-size:.9rem; color:var(--mut);}
.fee-out .frow:last-child{border-bottom:none;}
.fee-out .frow b{font-family:var(--serif); color:var(--text);}
.fee-out .frow.hl b{color:var(--gold);}
.fee-bar{display:flex; height:18px; border-radius:8px; overflow:hidden; margin-top:12px; border:1px solid var(--line);}
.fee-bar span{display:block; height:100%;}
.fund-table{display:grid; gap:10px;}
.fund-row{display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:10px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; padding:14px 18px; font-size:.92rem; align-items:center;}
.fund-row.head{background:none; border:none; padding:4px 18px; color:var(--faint); font-size:.76rem;
  letter-spacing:.1em; text-transform:uppercase;}
.fund-row .fv{font-family:var(--serif); font-size:1.15rem; color:var(--mint);}
.fund-row .lead{color:var(--gold);}
@media(max-width:760px){.fund-row{grid-template-columns:1fr 1fr;}.fund-row.head{display:none;}}
.fund-implied{margin-top:14px; background:rgba(240,192,96,.05); border:1px solid var(--line2); border-radius:12px; padding:14px 18px; color:var(--mut); font-size:.92rem;}
.fund-implied b{color:var(--gold); font-family:var(--serif);}
.src-list{margin:0 0 10px; padding-left:20px; color:var(--mut); font-size:.93rem; max-width:980px;}
.src-list li{margin-bottom:10px;}
.src-list code{font-size:.84em;}
.foot{border-top:1px solid var(--line); margin-top:56px; padding:26px 28px 40px; text-align:center; font-size:.88rem; color:var(--mut);}
.foot a{color:var(--mint-dim);}
.foot .quiet{color:var(--faint); font-size:.8rem;}
.donate .copy{font:inherit; color:var(--gold); background:rgba(240,192,96,.08); border:1px dashed var(--line2);
  border-radius:8px; padding:3px 10px; cursor:pointer;}
.donate .copy:hover{background:rgba(240,192,96,.16);}

/* === v1.8 craft pass === */
:root{--focus:#5eead4}
body{font-family:var(--font-sans,Inter,system-ui,sans-serif)}
.topbar.chrome{
  max-width:1180px;margin:0 auto;padding:14px 28px;
  background:rgba(4,18,13,.84);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  position:sticky;top:0;z-index:50;backdrop-filter:blur(16px)
}
.qmb-switch > summary{border-color:rgba(94,234,212,.3);background:rgba(94,234,212,.06);color:var(--mint)}
.qmb-switch[open] > summary{border-color:var(--mint);background:rgba(94,234,212,.12)}
.qmb-menu{background:rgba(4,16,12,.97);border-color:rgba(94,234,212,.22);color:var(--text)}
.qmb-menu a{color:var(--text)}
.qmb-menu a:hover{background:rgba(94,234,212,.1)}
.qmb-menu a.current{background:rgba(94,234,212,.14);color:var(--mint)}
.hero{padding:40px 0 16px}
.live-tile{transition:border-color .2s,transform .2s}
.live-tile:hover{transform:translateY(-2px);border-color:rgba(94,234,212,.35)}
.alloc-card,.clock-cell,.emit-card,.fee-card,.chart-card,.fund-row{
  transition:border-color .2s,transform .2s,box-shadow .25s
}
.alloc-card:hover,.emit-card:hover,.fee-card:hover{
  transform:translateY(-2px);border-color:rgba(94,234,212,.32);box-shadow:0 14px 36px rgba(0,0,0,.28)
}
.panel{scroll-margin-top:72px}
.fld input{transition:border-color .18s,box-shadow .18s}
.fld input:focus{box-shadow:0 0 0 3px rgba(94,234,212,.15)}
.clock-controls input[type=range]{height:28px;cursor:pointer}
@media(max-width:760px){
  .topbar.chrome{padding:12px 16px}
  .mint-pill span:not(.mint-ico){display:none}
  .wrap{padding:0 16px 48px}
  .hero h1{font-size:clamp(1.8rem,7vw,2.6rem)}
  .panel{margin-top:32px}
}
@media(prefers-reduced-motion:reduce){
  .live-tile:hover,.alloc-card:hover,.emit-card:hover,.fee-card:hover{transform:none}
}

/* mobile overflow fix */
html,body{overflow-x:hidden;max-width:100%}
.wrap{overflow-x:hidden}
.fund-row{word-break:break-word}
.donate .copy{max-width:100%;word-break:break-all}
.alloc-bar{max-width:100%}
@media(max-width:760px){
  .live-tile .v{font-size:1.25rem}
  .hero .sub{font-size:.98rem}
}