/* FomoMarket UI. Monochrome. Green is a signal, never decoration. No gradients, no blur, no shadows except the sheet. */
:root{
  --bg:#000; --s1:#0A0A0A; --s2:#111; --s3:#171717;
  --fg:#FAFAFA; --fg-2:#A3A3A3; --fg-3:#737373; --fg-4:#525252;
  --b1:rgba(255,255,255,.10); --b2:rgba(255,255,255,.18); --b3:rgba(255,255,255,.28);
  --green:#00C805; --green-fg:#001A02; --green-dim:rgba(0,200,5,.12); --red:#FF5000;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --display:"Inter Tight",var(--sans); --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r1:6px; --r2:10px; --r3:14px; --ease:cubic-bezier(.2,.7,.2,1);
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px; --sp7:48px; --sp8:64px; --sp9:96px;
}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 14px/1.5 var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;letter-spacing:-.005em}
::selection{background:var(--green);color:var(--green-fg)}
:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
button,input,select{font:inherit;color:inherit} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0} ul,ol{padding:0;list-style:none}
.mono{font-family:var(--mono)} .wrap{max-width:1152px;margin:0 auto;padding:0 var(--sp5)} @media (max-width:640px){.wrap{padding:0 var(--sp4)}}

/* type */
.d1{font-family:var(--display);font-size:clamp(2.6rem,6vw,5rem);line-height:1;letter-spacing:-.04em;font-weight:600;text-wrap:balance}
.d2{font-family:var(--display);font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.08;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
.d3{font-family:var(--display);font-size:1.25rem;line-height:1.2;letter-spacing:-.025em;font-weight:600}
.lead{font-size:1.0625rem;line-height:1.6;color:var(--fg-2)} .sm{font-size:13px} .xs{font-size:12px} .c2{color:var(--fg-2)} .c3{color:var(--fg-3)} .pos{color:var(--green)} .neg{color:var(--red)}

/* primitives */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp2);height:36px;padding:0 var(--sp4);border-radius:var(--r1);font-weight:500;font-size:14px;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background 120ms,border-color 120ms,color 120ms;user-select:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--green);color:var(--green-fg)} .btn-primary:hover{background:#12d418}
.btn-white{background:var(--fg);color:#000} .btn-white:hover{background:#fff}
.btn-outline{background:transparent;border-color:var(--b2);color:var(--fg)} .btn-outline:hover{border-color:var(--b3);background:var(--s2)}
.btn-ghost{background:transparent;color:var(--fg-2)} .btn-ghost:hover{color:var(--fg);background:var(--s2)}
.btn-sm{height:32px;padding:0 var(--sp3);font-size:13px} .btn-lg{height:44px;padding:0 var(--sp5);font-size:15px}
.btn-icon{width:32px;height:32px;padding:0;border-radius:var(--r1);background:transparent;border:1px solid var(--b1);color:var(--fg-2);display:inline-grid;place-items:center;cursor:pointer} .btn-icon:hover{color:var(--fg);border-color:var(--b2)} .btn-icon:disabled{opacity:.35}
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 var(--sp2);border-radius:999px;font-size:11px;font-weight:500;border:1px solid var(--b1);color:var(--fg-2);background:var(--s1)}
.badge-green{color:var(--green);border-color:rgba(0,200,5,.35);background:var(--green-dim)}
.badge-solid{background:var(--fg);color:#000;border-color:var(--fg)}
.kbd{font-family:var(--mono);font-size:11px;padding:1px 5px;border:1px solid var(--b2);border-bottom-width:2px;border-radius:4px;color:var(--fg-2)}
.field{height:36px;padding:0 var(--sp3);border-radius:var(--r1);background:var(--s1);border:1px solid var(--b2);width:100%;transition:border-color 120ms} .field:hover{border-color:var(--b3)} .field:focus{outline:none;border-color:var(--fg)}
.tabs{display:flex;gap:var(--sp5);border-bottom:1px solid var(--b1)} .tabs button{background:none;border:0;padding:var(--sp3) 0;color:var(--fg-2);cursor:pointer;position:relative;font-weight:500} .tabs button:hover{color:var(--fg)} .tabs button[aria-selected=true]{color:var(--fg)} .tabs button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fg)}
.seg{display:inline-flex;padding:2px;border-radius:var(--r1);background:var(--s2);border:1px solid var(--b1)} .seg button{border:0;background:transparent;color:var(--fg-2);padding:5px 10px;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer} .seg button[aria-pressed=true]{background:var(--fg);color:#000}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--b2);background:transparent;font-size:12px;font-weight:500;color:var(--fg-2);cursor:pointer} .chip:hover{color:var(--fg);border-color:var(--b3)} .chip[aria-pressed=true]{background:var(--fg);color:#000;border-color:var(--fg)}
.card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r3)} .card-h{padding:var(--sp4) var(--sp5);border-bottom:1px solid var(--b1);display:flex;align-items:center;justify-content:space-between;gap:var(--sp3)}
.sep{height:1px;background:var(--b1);border:0;margin:0}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block;flex:none;box-shadow:0 0 0 0 rgba(0,200,5,.5);animation:pulse 2.4s var(--ease) infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,200,5,.45)}70%{box-shadow:0 0 0 7px rgba(0,200,5,0)}100%{box-shadow:0 0 0 0 rgba(0,200,5,0)}}
.skel{background:var(--s2);border-radius:4px;position:relative;overflow:hidden} .skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);animation:sh 1.4s linear infinite} @keyframes sh{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.av{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--s3);border:1px solid var(--b2);font-size:11px;font-weight:600;color:var(--fg-2);flex:none;letter-spacing:0;position:relative;overflow:hidden} .av.lg{width:48px;height:48px;font-size:14px} .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rise{opacity:0;transform:translateY(10px);animation:rise 700ms var(--ease) forwards;animation-delay:var(--d,0ms)} @keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}.dot{animation:none}.skel::after{animation:none}.ticker-track{animation:none}}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--b1)}
.nav .wrap{display:flex;align-items:center;gap:var(--sp5);height:56px}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.03em} .wordmark img{width:24px;height:24px}
.nav ul{display:none;gap:2px} @media (min-width:900px){.nav ul{display:flex}}
.nav ul a{padding:6px 10px;border-radius:var(--r1);font-size:13px;color:var(--fg-2)} .nav ul a:hover,.nav ul a[aria-current]{color:var(--fg);background:var(--s2)}
.nav-right{margin-left:auto;display:flex;gap:var(--sp2);align-items:center}

/* hero */
.hero{padding:var(--sp9) 0 var(--sp8);border-bottom:1px solid var(--b1)}
.hero-grid{display:grid;gap:var(--sp7)} @media (min-width:1000px){.hero-grid{grid-template-columns:5fr 7fr;align-items:center}}
.hero .lead{margin-top:var(--sp5);max-width:42ch}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--sp2);margin-top:var(--sp6);align-items:center}
.partner{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px 0 4px;border-radius:999px;border:1px solid var(--b1);font-size:12px;color:var(--fg-2)} .partner img{width:22px;height:22px;border-radius:6px} .partner b{color:var(--fg);font-weight:500} .partner:hover{border-color:var(--b3);color:var(--fg)}
.facts{display:flex;gap:var(--sp6);margin-top:var(--sp7);padding-top:var(--sp5);border-top:1px solid var(--b1);flex-wrap:wrap}
.facts b{display:block;font-family:var(--display);font-size:1.75rem;letter-spacing:-.04em;font-weight:600;line-height:1;white-space:nowrap} .facts div>span{display:block;margin-top:6px;font-size:12px;color:var(--fg-3)} .facts b span{display:inline;margin:0;font:inherit;color:inherit}

/* product frame: a real window, not a card */
.frame{border:1px solid var(--b2);border-radius:var(--r3);background:var(--s1);overflow:hidden}
.frame-bar{display:flex;align-items:center;gap:var(--sp3);height:44px;padding:0 var(--sp4);border-bottom:1px solid var(--b1);font-size:12px;color:var(--fg-3)}
.frame-bar .lights{display:flex;gap:6px} .frame-bar .lights i{width:10px;height:10px;border-radius:50%;background:var(--s3);border:1px solid var(--b2)}
.frame-bar .url{margin-left:auto;font-family:var(--mono);font-size:11px;padding:3px 8px;border:1px solid var(--b1);border-radius:4px}
.frame table{font-size:13px}
.frame td,.frame th{padding:10px 14px} .frame .price small{display:none} .frame table{table-layout:auto}

/* table */
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;font-weight:500;color:var(--fg-3);padding:10px var(--sp4);border-bottom:1px solid var(--b1);white-space:nowrap;letter-spacing:.01em}
th button{background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;display:inline-flex;gap:4px;align-items:center} th button:hover{color:var(--fg)} th[aria-sort] button{color:var(--fg)}
td{padding:12px var(--sp4);border-bottom:1px solid var(--b1);vertical-align:middle;white-space:nowrap}
tbody tr{transition:background 120ms} tbody tr:hover{background:var(--s2)} tbody tr.row-btn{cursor:pointer} tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.who{display:flex;align-items:center;gap:10px;min-width:0} .who b{font-weight:500;display:block;letter-spacing:-.01em} .who b .pos{display:inline;font-size:11px;margin-left:2px} .who>div>span{display:block;font-size:12px;color:var(--fg-3)} .who>div>span .pos{display:inline}
.spark{width:96px;height:28px} .spark svg{width:100%;height:100%}
.price{font-family:var(--mono)} .price small{display:block;font-family:var(--sans);font-size:11px;color:var(--fg-3);margin-top:1px}
@media (max-width:760px){.hide-md{display:none}}

/* ticker */
.ticker{border-bottom:1px solid var(--b1);overflow:hidden;background:var(--bg)}
.ticker-track{display:flex;width:max-content;animation:tk 70s linear infinite} .ticker:hover .ticker-track{animation-play-state:paused} @keyframes tk{to{transform:translateX(-50%)}}
.tick{display:inline-flex;align-items:center;gap:10px;padding:10px var(--sp5);border-right:1px solid var(--b1);font-size:12px;color:var(--fg-2);white-space:nowrap} .tick b{color:var(--fg);font-weight:500} .tick em{font-style:normal;font-family:var(--mono);color:var(--green)}

/* sections */
.section{padding:var(--sp9) 0;border-bottom:1px solid var(--b1)} .section-h{display:grid;gap:var(--sp3);margin-bottom:var(--sp6);max-width:60ch} .section-h .lead{margin:0}
.rowhead{display:flex;align-items:end;justify-content:space-between;gap:var(--sp4);margin-bottom:var(--sp5)}

/* feature list: hairlines, not boxes */
.features{display:grid;border-top:1px solid var(--b1)} @media (min-width:800px){.features{grid-template-columns:1fr 1fr}.features>div:nth-child(odd){border-right:1px solid var(--b1)}}
.features>div{padding:var(--sp6) var(--sp5) var(--sp6) 0;border-bottom:1px solid var(--b1);display:grid;grid-template-columns:36px 1fr;gap:var(--sp4)} @media (min-width:800px){.features>div:nth-child(even){padding-left:var(--sp5)}}
.features .ic{width:36px;height:36px;border-radius:var(--r2);border:1px solid var(--b2);display:grid;place-items:center;color:var(--fg)} .features h3{font-size:15px;font-weight:600;letter-spacing:-.015em} .features p{margin-top:6px;color:var(--fg-2);max-width:44ch}

/* escrow states */
.states{display:grid;gap:var(--sp2)} @media (min-width:900px){.states{grid-template-columns:repeat(4,1fr)}}
.state{padding:var(--sp5);border:1px solid var(--b1);border-radius:var(--r3);background:var(--s1);display:grid;gap:var(--sp3);position:relative}
.state .st{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-family:var(--mono);color:var(--fg-3)} .state .st i{width:6px;height:6px;border-radius:50%;background:var(--fg-4)} .state.done .st{color:var(--green)} .state.done .st i{background:var(--green)}
.state b{font-size:15px;letter-spacing:-.015em;font-weight:600} .state p{color:var(--fg-2);font-size:13px}
.state .n{position:absolute;right:var(--sp4);top:var(--sp4);font-family:var(--mono);font-size:11px;color:var(--fg-4)}

/* carousel (quotes) */
.rail{display:flex;gap:var(--sp3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*var(--sp5));padding:0 var(--sp5) var(--sp2);cursor:grab} .rail::-webkit-scrollbar{display:none} .rail.dragging{cursor:grabbing;scroll-snap-type:none} .rail>*{scroll-snap-align:start;flex:0 0 380px} @media (max-width:640px){.rail>*{flex-basis:300px}.rail{margin:0 calc(-1*var(--sp4));padding:0 var(--sp4) var(--sp2)}}
.quote{padding:var(--sp5);display:flex;flex-direction:column;gap:var(--sp5);min-height:200px} .quote p{font-size:15px;line-height:1.5;letter-spacing:-.01em} .quote .by{margin-top:auto;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fg-3)} .quote .by b{display:block;color:var(--fg);font-weight:500}

/* faq */
details{border-top:1px solid var(--b1)} details:last-child{border-bottom:1px solid var(--b1)}
summary{list-style:none;cursor:pointer;padding:var(--sp4) 0;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:var(--sp4)} summary::-webkit-details-marker{display:none}
summary::after{content:"";width:8px;height:8px;border-right:1px solid var(--fg-3);border-bottom:1px solid var(--fg-3);transform:rotate(45deg);transition:transform 160ms;margin-right:4px} details[open] summary::after{transform:rotate(-135deg)}
details p{padding-bottom:var(--sp4);color:var(--fg-2);max-width:64ch}

.cta{padding:var(--sp9) 0;text-align:center} .cta .lead{margin:var(--sp3) auto var(--sp5);max-width:44ch}
footer{padding:var(--sp7) 0 var(--sp6);font-size:13px;color:var(--fg-2)}
.foot{display:grid;gap:var(--sp6)} @media (min-width:800px){.foot{grid-template-columns:2fr 1fr 1fr 1fr}}
.foot h4{margin:0 0 var(--sp2);font-size:12px;font-weight:500;color:var(--fg-3)} .foot li{margin:6px 0} .foot a:hover{color:var(--fg)}
.legal{margin-top:var(--sp6);padding-top:var(--sp4);border-top:1px solid var(--b1);font-size:11px;line-height:1.6;color:var(--fg-3);max-width:100ch}

/* ===== app ===== */
.appbar{position:sticky;top:0;z-index:30;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--b1)}
.appbar .wrap{display:flex;align-items:center;gap:var(--sp4);height:56px}
.search{flex:1;max-width:360px;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border-radius:var(--r1);background:var(--s1);border:1px solid var(--b2);color:var(--fg-3)} .search input{background:none;border:0;outline:none;flex:1;color:var(--fg);min-width:0;font-size:13px} .search .kbd{margin-left:auto}
.app{display:grid;gap:var(--sp5);padding:var(--sp5) 0 var(--sp8)} @media (min-width:960px){.app{grid-template-columns:220px 1fr}}
.filters{display:grid;gap:var(--sp5);align-content:start;position:sticky;top:76px} .filters h4{margin:0 0 var(--sp2);font-size:11px;color:var(--fg-3);font-weight:500;display:flex;justify-content:space-between}
.filters .chips{display:flex;flex-wrap:wrap;gap:6px}
.range{-webkit-appearance:none;width:100%;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--fg) var(--p,100%),var(--b2) var(--p,100%));outline:none} .range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#000;border:2px solid var(--fg);cursor:pointer}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp3);margin-bottom:var(--sp3);flex-wrap:wrap}
.tablewrap{border:1px solid var(--b1);border-radius:var(--r3);overflow:auto;background:var(--s1)}
.empty{padding:var(--sp8);text-align:center;color:var(--fg-3)}
.sheet{position:fixed;inset:0;z-index:60;display:grid;grid-template-columns:1fr min(480px,100%);pointer-events:none}
.sheet .scrim{background:rgba(0,0,0,.6);opacity:0;transition:opacity 200ms} .sheet .panel{background:var(--bg);border-left:1px solid var(--b2);transform:translateX(100%);transition:transform 260ms var(--ease);overflow:auto;padding:var(--sp5);display:grid;gap:var(--sp5);align-content:start;pointer-events:auto}
.sheet.open{pointer-events:auto} .sheet.open .scrim{opacity:1;pointer-events:auto} .sheet.open .panel{transform:none}
@media (max-width:640px){.sheet{grid-template-columns:1fr}.sheet .scrim{display:none}}
.kv{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--b1);border-radius:var(--r2);overflow:hidden} .kv div{padding:10px 12px;border-right:1px solid var(--b1)} .kv div:last-child{border-right:0} .kv small{display:block;font-size:11px;color:var(--fg-3)} .kv b{display:block;font-family:var(--mono);font-weight:500;font-size:14px;margin-top:2px}
.hist div{display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:10px 0;border-top:1px solid var(--b1);font-size:13px} .hist div:first-child{border-top:0}
.offer{display:grid;grid-template-columns:1fr auto;gap:var(--sp2)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;padding:10px 14px;border-radius:var(--r2);font-size:13px;background:var(--fg);color:#000;transition:all 200ms var(--ease);z-index:80;pointer-events:none;display:flex;align-items:center;gap:8px;font-weight:500} .toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;z-index:70;display:none;place-items:center;background:rgba(0,0,0,.7);padding:var(--sp4)} .modal.open{display:grid} .modal .box{width:min(400px,100%);padding:var(--sp5);display:grid;gap:var(--sp3)}
.wallets{display:grid;gap:6px} .wallets button{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;border-radius:var(--r1);background:var(--s1);border:1px solid var(--b1);color:var(--fg);cursor:pointer;text-align:left} .wallets button:hover{border-color:var(--b3)} .wallets img{width:22px;height:22px;border-radius:5px}

.app>*{min-width:0}
@media (max-width:900px){.appbar .wrap{flex-wrap:wrap;height:auto;padding-top:10px;padding-bottom:10px;gap:10px}.appbar .search{order:3;flex-basis:100%;max-width:none}.appbar .wordmark{margin-right:auto}.filters{position:static}}