/* qubo — shared styles. light is default, dark is the toggle. */
:root,html[data-theme="light"]{
  --bg:#57E6F5; --bg-2:#E9F8FA; --panel:#FFFFFF; --panel-solid:#FFFFFF;
  --line:rgba(8,8,12,.12); --line-2:rgba(8,8,12,.32);
  --fg:#0A0A0D; --body:#24262B; --mute:#4B5157; --dim:#6E767C;
  --sig:#5CF0FF; --sig-ink:#007C8C; --up:#0E7A52; --down:#C42F49; --warn:#A8560F;
  --f:'Roboto Condensed',system-ui,sans-serif; --m:'Geist Mono',ui-monospace,monospace;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#071518; --bg-2:#0F2226; --panel:#0E1A1D; --panel-solid:#122125;
  --line:rgba(236,236,242,.10); --line-2:rgba(236,236,242,.26);
  --fg:#F2F2F5; --body:#CFCFD6; --mute:#9A9AA4; --dim:#6A6A74;
  --sig:#5CF0FF; --sig-ink:#5CF0FF; --up:#39D98A; --down:#FF5C77; --warn:#FFB45C;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--body)}
body{font-family:var(--f);font-size:14px;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
.mono{font-family:var(--m)}
::selection{background:var(--sig);color:#0A0A0D}

/* drifting glyph field behind everything */
#field{position:fixed;inset:0;z-index:0;pointer-events:none}
.shell{position:relative;z-index:1}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:22px;padding:14px 46px;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);font-size:19px;font-weight:500;letter-spacing:-.01em}
.brand img{width:30px;height:30px;display:block}
.brand small{font-family:var(--m);font-size:10px;letter-spacing:.14em;border:1px solid var(--line-2);padding:3px 7px;color:var(--fg)}
.nav{margin-left:auto;display:flex;gap:26px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.nav a:hover,.nav a[aria-current]{color:var(--fg)}
.theme{width:38px;height:20px;border:1px solid var(--line-2);border-radius:20px;position:relative}
.theme::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--fg);transition:left .2s}
html[data-theme="dark"] .theme::after{left:21px}
.status{font-family:var(--m);font-size:10px;letter-spacing:.12em;color:var(--mute);display:flex;align-items:center;gap:7px;text-transform:uppercase}
.status i{width:6px;height:6px;border-radius:50%;background:var(--up)}
.wbtn{border:1px solid var(--line-2);padding:10px 16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);display:flex;gap:8px;align-items:center}
.wbtn::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dim)}
.wbtn.on::before{background:var(--up)}
.wbtn:hover{background:var(--fg);color:var(--bg)}

/* ---------- layout ---------- */
.wrap{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - 60px)}
.side{border-right:1px solid var(--line);padding:28px 22px 28px 46px;position:sticky;top:60px;height:calc(100vh - 60px);display:flex;flex-direction:column}
.side h6{font-family:var(--m);font-weight:500;font-size:10px;letter-spacing:.16em;color:var(--mute);margin-bottom:14px}
.side a{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:15px;color:var(--body)}
.side a b{font-weight:400;flex:1;white-space:nowrap}
.side a em{font-style:normal;white-space:nowrap;font-family:var(--m);font-size:9.5px;letter-spacing:.12em;color:var(--mute)}
.side a i{width:9px;height:9px;flex:none}
.side a[aria-current] b{color:var(--fg);font-weight:500}
.side a:hover b{color:var(--fg)}
.side hr{border:0;border-top:1px solid var(--line);margin:16px 0}
.side .note{margin-top:auto;font-family:var(--m);font-size:10.5px;line-height:1.9;color:var(--mute);border-top:1px solid var(--line);padding-top:14px}
.side .note b{color:var(--fg);font-weight:500}
.main{padding:30px 46px 60px;min-width:0}

.crumb{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.crumb b{color:var(--fg);font-weight:500}
.crumb span{margin:0 12px}
h1{font-weight:400;color:var(--fg);font-size:30px;line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;margin:14px 0 10px}
h1 em{font-style:normal;background:var(--sig);color:#0A0A0D;padding:0 .08em}
.lede{font-size:15px;line-height:1.55;color:var(--body);max-width:640px}

/* corner-bracket panel, mekiba style */
.bx{position:relative;background:var(--panel);border:1px solid var(--line)}
.bx::before,.bx::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--line-2);pointer-events:none}
.bx::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.bx::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.tg{display:inline-block;font-family:var(--m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--fg);color:var(--fg);padding:2px 6px;line-height:1.4}
.tg.sig{background:var(--sig);border-color:var(--sig);color:#0A0A0D}
.tg.dim{border-color:var(--line-2);color:var(--mute)}
.tg.warn{border-color:var(--warn);color:var(--warn)}

.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--fg);background:var(--fg);color:var(--bg);padding:11px 18px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.btn:hover{background:var(--sig);border-color:var(--sig);color:#0A0A0D}
.btn.ghost{background:none;color:var(--fg)}
.btn.ghost:hover{background:var(--fg);color:var(--bg)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- tape ---------- */
.tape{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:22px 0 20px;white-space:nowrap;font-family:var(--m);font-size:11px;color:var(--mute)}
.tape div{display:inline-block;padding:9px 0;animation:tape 60s linear infinite}
.tape span{margin-right:34px}
.tape b{color:var(--fg);font-weight:500}
.tape .u{color:var(--up)} .tape .d{color:var(--down)}
@keyframes tape{to{transform:translateX(-50%)}}

/* ---------- board ---------- */
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.chip{border:1px solid var(--line-2);padding:7px 12px;font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.chip[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.srch{margin-left:auto;border:1px solid var(--line-2);background:var(--panel);padding:8px 12px;font-family:var(--m);font-size:12px;width:220px;outline:0}
.srch:focus{border-color:var(--fg)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.card{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:16px;transition:background .15s}
.card:hover{background:var(--panel-solid)}
.card:hover::before,.card:hover::after{border-color:var(--fg)}
.card img{width:76px;height:76px;display:block;object-fit:cover;background:var(--bg-2)}
.card .t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.card .t b{color:var(--fg);font-weight:500;font-size:16px}
.card .t s{text-decoration:none;font-family:var(--m);font-size:11px;color:var(--mute)}
.card p{font-size:12.5px;line-height:1.45;color:var(--body);margin:5px 0 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{display:flex;gap:12px;font-family:var(--m);font-size:10.5px;color:var(--mute);flex-wrap:wrap}
.card .meta b{color:var(--fg);font-weight:500}
.card .tags{grid-column:1/-1;display:flex;gap:6px;align-items:center}
.card .tags .by{margin-left:auto;font-family:var(--m);font-size:10px;color:var(--dim)}
.coh{grid-column:1/-1;height:3px;background:var(--line);position:relative}
.coh i{position:absolute;inset:0 auto 0 0;background:var(--fg)}
.coh.done i{background:var(--sig)}
.empty{padding:40px;text-align:center;font-family:var(--m);font-size:12px;color:var(--mute)}

/* ---------- coin page ---------- */
.coin-hd{display:flex;gap:18px;align-items:center;margin:16px 0 18px}
.coin-hd img{width:64px;height:64px}
.coin-hd h1{font-size:28px;margin:0;text-transform:none}
.coin-hd .sub{font-family:var(--m);font-size:11px;color:var(--mute);margin-top:4px}
.coin-hd .sub a{border-bottom:1px solid var(--line-2)}
.cols{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.stats div{padding:14px 16px;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats small{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.stats b{display:block;color:var(--fg);font-weight:400;font-size:20px;margin-top:4px}
.chart{height:340px;position:relative}
.chart canvas{width:100%;height:100%;display:block}
.chart .tf{position:absolute;top:10px;right:12px;display:flex;gap:4px;z-index:2}
.chart .tf button{font-family:var(--m);font-size:10px;padding:3px 7px;color:var(--mute);border:1px solid transparent}
.chart .tf button[aria-pressed="true"]{border-color:var(--line-2);color:var(--fg)}
.tbl{width:100%;border-collapse:collapse;font-family:var(--m);font-size:11.5px}
.tbl th{text-align:left;font-weight:500;font-size:9.5px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase;padding:10px 16px;border-bottom:1px solid var(--line)}
.tbl td{padding:9px 16px;border-bottom:1px solid var(--line);color:var(--body)}
.tbl tr:last-child td{border-bottom:0}
.tbl .u{color:var(--up)} .tbl .d{color:var(--down)}
.sect{font-family:var(--m);font-size:10px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase;padding:14px 16px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.trade{padding:16px}
.seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2);margin-bottom:14px}
.seg button{padding:10px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.seg button.sell[aria-pressed="true"]{background:var(--down);color:#fff}
.fld{display:block;margin-bottom:12px}
.fld>span{display:flex;justify-content:space-between;font-family:var(--m);font-size:10px;letter-spacing:.1em;color:var(--mute);text-transform:uppercase;margin-bottom:6px}
.inp{width:100%;border:1px solid var(--line-2);background:var(--panel-solid);padding:11px 12px;font-family:var(--m);font-size:14px;outline:0}
.inp:focus{border-color:var(--fg)}
textarea.inp{resize:vertical;min-height:84px;font-size:13px;line-height:1.5}
.quick{display:flex;gap:6px;margin:-4px 0 14px}
.quick button{flex:1;border:1px solid var(--line);font-family:var(--m);font-size:10.5px;padding:6px 0;color:var(--mute)}
.quick button:hover{border-color:var(--fg);color:var(--fg)}
.out{font-family:var(--m);font-size:11px;color:var(--mute);line-height:1.8;margin:4px 0 14px}
.out b{color:var(--fg);font-weight:500}
.trade .btn{width:100%;justify-content:center}
.msg{font-family:var(--m);font-size:11px;line-height:1.55;color:var(--warn);margin-top:10px;min-height:1em}
.kv{font-family:var(--m);font-size:11.5px;padding:6px 16px 14px}
.kv div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--line)}
.kv div:last-child{border:0}
.kv span{color:var(--mute)} .kv b{color:var(--fg);font-weight:500}
.holders li{list-style:none;display:flex;justify-content:space-between;font-family:var(--m);font-size:11.5px;padding:7px 16px;border-bottom:1px solid var(--line)}
.holders li:last-child{border:0}
.holders li span{color:var(--mute)}

/* ---------- launch ---------- */
.launch{display:grid;grid-template-columns:1fr 340px;gap:16px;align-items:start;margin-top:22px}
.launch form{padding:22px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drop{border:1px dashed var(--line-2);display:flex;gap:14px;align-items:center;padding:12px;cursor:pointer;background:var(--panel-solid)}
.drop img{width:64px;height:64px;object-fit:cover;background:var(--bg-2)}
.drop span{font-family:var(--m);font-size:11px;color:var(--mute);line-height:1.6}
.scan{padding:16px 16px 18px;font-family:var(--m);font-size:11.5px;line-height:1.7}
.scan .r{display:flex;justify-content:space-between}
.scan .r span{color:var(--mute)}
.scan p{font-family:var(--f);font-size:12.5px;color:var(--body);margin-top:10px;line-height:1.5}

/* ---------- docs ---------- */
.doc{max-width:720px;margin-top:20px}
.doc h2{font-weight:400;color:var(--fg);font-size:22px;text-transform:uppercase;margin:34px 0 10px}
.doc p,.doc li{font-size:15px;line-height:1.65;color:var(--body);margin-bottom:10px}
.doc ul{padding-left:18px}
.doc code{font-family:var(--m);font-size:12.5px;background:var(--bg-2);padding:1px 5px}

/* ---------- wallet dialog ---------- */
dialog.wd{margin:auto;border:1px solid var(--line-2);background:var(--panel-solid);color:var(--body);padding:0;width:min(380px,calc(100vw - 32px))}
dialog.wd::backdrop{background:rgba(6,6,10,.45)}
.wd h3{font-weight:400;color:var(--fg);font-size:18px;text-transform:uppercase;padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between}
.wd h3 button{font-size:20px;line-height:1;color:var(--mute)}
.wd ul{list-style:none;padding:4px 8px 8px;max-height:min(62vh,520px);overflow-y:auto}
.wd li.wh{font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:12px 12px 6px}
.wd li button{width:100%;display:flex;align-items:center;gap:12px;padding:9px 12px;text-align:left;font-size:15px;color:var(--fg)}
.wd li button:hover{background:var(--bg-2)}
.wd li img{width:30px;height:30px;border-radius:8px;flex:none}
.wd li em{margin-left:auto;font-style:normal;font-family:var(--m);font-size:10px;color:var(--mute)}
.wd p{font-family:var(--m);font-size:11px;color:var(--mute);padding:4px 20px 18px;line-height:1.6}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .5s}
#intro.out{opacity:0;pointer-events:none}
#intro small{font-family:var(--m);font-size:11px;letter-spacing:.3em;color:var(--mute)}
#intro .w{font-family:var(--m);font-size:clamp(54px,11vw,128px);color:var(--fg);margin:38px 0 46px;letter-spacing:.02em;
  text-shadow:-2px 0 rgba(255,60,120,.45),2px 0 rgba(0,210,255,.5)}
#intro .ln{width:260px;height:1px;background:var(--line-2);position:relative}
#intro .ln i{position:absolute;left:0;top:-1px;height:3px;background:var(--fg);width:0}
#intro ol{list-style:none;width:260px;margin-top:16px;font-family:var(--m);font-size:10.5px;line-height:1.75;color:var(--dim)}
#intro ol li{display:flex;justify-content:space-between;opacity:0}
#intro ol li.on{opacity:1}
#intro ol li b{font-weight:400;color:var(--up)}
#intro button{position:absolute;bottom:30px;font-family:var(--m);font-size:10px;letter-spacing:.2em;color:var(--dim)}

.foot{border-top:1px solid var(--line);margin-top:50px;padding-top:18px;display:flex;gap:20px;font-family:var(--m);font-size:10.5px;color:var(--dim);flex-wrap:wrap}
.foot a:hover{color:var(--fg)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--fg);color:var(--bg);font-family:var(--m);font-size:11.5px;padding:10px 16px;z-index:60;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}

/* ---------- mobile ---------- */
.mnav{display:none}
@media (max-width:980px){
  .cols,.launch{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:820px){
  .hdr{padding:12px 16px;gap:12px}
  .nav,.status{display:none}
  .wrap{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:20px 16px 40px}
  .mnav{display:flex;gap:8px;overflow-x:auto;padding:10px 16px;border-bottom:1px solid var(--line);font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
  .mnav a{border:1px solid var(--line-2);padding:6px 10px;white-space:nowrap;color:var(--mute)}
  .mnav a[aria-current]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
  h1{font-size:32px}
  .srch{width:100%;margin-left:0}
  .grid{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .wbtn{padding:8px 10px;margin-left:auto;font-size:10px}
  .brand small{display:none}
}

/* board top: koth strip + feed instead of a hero */
.top{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:stretch;margin-bottom:18px}
.koth{display:flex;gap:14px;align-items:center;padding:12px 14px}
.koth img{width:54px;height:54px;object-fit:cover}
.koth small{font-family:var(--m);font-size:10px;color:var(--mute)}
.koth b{display:block;color:var(--fg);font-weight:500;font-size:15px}
.koth .coh{width:180px;margin-top:6px}
.koth .mc{margin-left:auto;text-align:right;font-family:var(--m);font-size:11px;color:var(--mute)}
.koth .mc b{font-size:18px;font-family:var(--f);font-weight:400}
.top .btn{align-self:stretch;padding:0 26px}
.feed{display:flex;gap:26px;overflow:hidden;white-space:nowrap;font-family:var(--m);font-size:11px;color:var(--mute);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0;margin-bottom:16px}
.feed span b{color:var(--fg);font-weight:500}
.feed .u{color:var(--up)} .feed .d{color:var(--down)}
.feed>span:first-child{animation:flash 1s}
@keyframes flash{from{background:var(--sig)}to{background:transparent}}
@media (max-width:820px){.top{grid-template-columns:1fr}.top .btn{padding:12px;justify-content:center}.koth .coh{width:110px}}

.fu{animation:fu 1.2s}.fd{animation:fd 1.2s}
@keyframes fu{from{color:var(--up);background:color-mix(in srgb,var(--up) 18%,transparent)}}
@keyframes fd{from{color:var(--down);background:color-mix(in srgb,var(--down) 18%,transparent)}}
.card.hit{animation:hit .9s}
@keyframes hit{from{background:color-mix(in srgb,var(--sig) 30%,var(--panel))}}

/* ink header on the cyan page */
.hdr{background:#0A0A0D;border-bottom:0;color:#F2F2F5;backdrop-filter:none}
.hdr .brand{color:#F2F2F5}
.hdr .brand small{color:#F2F2F5;border-color:rgba(242,242,245,.35)}
.hdr .nav{color:#9A9FA6}
.hdr .nav a:hover,.hdr .nav a[aria-current]{color:#5CF0FF}
.hdr .status{color:#9A9FA6}
.hdr .theme{border-color:rgba(242,242,245,.4)}
.hdr .theme::after{background:#F2F2F5}
.hdr .wbtn{color:#0A0A0D;background:#5CF0FF;border-color:#5CF0FF}
.hdr .wbtn::before{background:#0A0A0D}
.hdr .wbtn.on::before{background:#0E7A52}
.hdr .wbtn:hover{background:#F2F2F5;border-color:#F2F2F5;color:#0A0A0D}
/* things sitting straight on the page get a solid strip so the boxes never fight the text */
.side{background:color-mix(in srgb,var(--bg) 88%,#000 0%);border-right-color:var(--line-2)}
html[data-theme="light"] .side{background:#57E6F5}
.feed{background:var(--panel);border:1px solid var(--line);padding:8px 12px}
.chip{background:var(--panel)}
.chip[aria-pressed="true"]{background:var(--fg)}
.crumb,.lede{background:var(--panel);display:block;width:fit-content;padding:4px 8px}
h1{background:var(--panel);display:block;width:fit-content;padding:2px 10px}
.foot{background:var(--panel);padding:14px 16px;border:1px solid var(--line)}
.mnav{background:var(--panel)}
.koth .coh i{background:var(--fg)}
html[data-theme="dark"] .side{background:#071518}