/* ================================================================
   SMALL CIRCLES — main.css  v2  (Supabase + PayPal edition)
   Design: Andrew Charnyi brutalist zine · dark mode default
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg:#1a1a1c; --surface:#1e1c1a; --surface2:#242220;
  --text:#f5f0e8; --muted:#8c8a85; --lime:#c4ff0e;
  --orange:#ff6b35; --paypal:#0070ba; --purple:#a78bfa;
  --error:#ff4444; --success:#22c55e;
  --border:#3a3a3c; --border2:#4a4845;
  --mono:'Share Tech Mono','Courier New',monospace;
  --head:'Space Mono','Courier New',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:14px;line-height:1.6;overflow-x:hidden;cursor:crosshair;}
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");opacity:.04;pointer-events:none;z-index:9999;mix-blend-mode:overlay;}
body::before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;z-index:9998;}

/* LAYOUT */
.container{max-width:720px;margin:0 auto;padding:0 16px;}
.section{padding:32px 0;border-bottom:1px solid var(--border);}
.section:last-child{border-bottom:none;}
.section-head{padding:32px 0 20px;border-bottom:1px solid var(--border);}
.section-num{font-size:10px;color:var(--muted);letter-spacing:.2em;text-transform:uppercase;margin-bottom:6px;}

/* TYPE */
h1{font-family:var(--head);font-size:clamp(28px,6vw,52px);font-weight:700;line-height:1.1;letter-spacing:-.02em;color:var(--text);text-transform:lowercase;margin-bottom:16px;}
h2{font-family:var(--head);font-size:18px;font-weight:700;color:var(--text);text-transform:lowercase;line-height:1.3;}
h3{font-family:var(--head);font-size:13px;font-weight:700;color:var(--text);text-transform:lowercase;}
p{color:var(--muted);font-size:13px;line-height:1.7;}
a{color:var(--muted);}a:hover{color:var(--text);}
strong{color:var(--text);}.hl{color:var(--lime);}
.strike{text-decoration:line-through;color:var(--muted);text-decoration-color:var(--orange);text-decoration-thickness:2px;}

/* NAV */
#nav{border-bottom:1px solid var(--border);padding:11px 0;position:sticky;top:0;background:var(--bg);z-index:200;}
#nav .inner{display:flex;align-items:center;justify-content:space-between;max-width:720px;margin:0 auto;padding:0 16px;gap:12px;}
.logo{font-family:var(--head);font-size:14px;font-weight:700;color:var(--lime);text-decoration:none;letter-spacing:.04em;flex-shrink:0;}
.logo span{color:var(--muted);font-weight:400;}
.nav-right{display:flex;align-items:center;gap:12px;}
.nav-status{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;}
.nav-status strong{color:var(--text);}
.pulse{width:6px;height:6px;background:var(--lime);border-radius:50%;animation:blink 2s infinite;flex-shrink:0;}
.lang-sel{background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--mono);font-size:11px;padding:4px 6px;cursor:pointer;outline:none;}

/* MARQUEE */
.marquee-wrap{overflow:hidden;border-bottom:1px solid var(--border);padding:7px 0;background:var(--surface);}
.marquee-track{display:flex;gap:40px;animation:marquee 24s linear infinite;white-space:nowrap;}
.marquee-track span{font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;flex-shrink:0;}
.marquee-track span.ac{color:var(--lime);}

/* HERO */
.hero{border-bottom:1px solid var(--border);padding:44px 0 36px;position:relative;overflow:hidden;}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px;opacity:.25;}
.hero-inner{position:relative;z-index:1;}
.tag-line{font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;display:flex;align-items:center;gap:8px;}
.tag-line::before{content:'//';color:var(--lime);}
.hero-sub{font-size:14px;color:var(--muted);max-width:440px;margin-bottom:28px;line-height:1.75;}

/* CAROUSEL */
.hero-carousel{width:100%;border:1px solid var(--border);margin-bottom:28px;background:var(--surface);overflow:hidden;position:relative;aspect-ratio:800/320;}
.carousel-slides{width:100%;height:100%;}
.carousel-caption{position:absolute;bottom:0;left:0;right:0;background:rgba(26,26,28,.88);padding:8px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.cc-city{font-size:10px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;}
.cc-quote{font-size:12px;color:var(--text);font-family:var(--head);}
.carousel-dots{display:flex;gap:5px;flex-shrink:0;}
.cdot{width:16px;height:3px;background:var(--border2);transition:background .3s;}
.cdot.active{background:var(--lime);}

/* CTA */
.cta-block{background:var(--surface);border:1px solid var(--border);padding:18px;margin-bottom:16px;}
.cta-label{font-size:10px;color:var(--lime);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px;}
.invite-form{display:flex;border:1px solid var(--border2);}
.invite-form input{flex:1;background:var(--bg);border:none;outline:none;padding:11px 13px;font-family:var(--mono);font-size:14px;color:var(--text);min-width:0;}
.invite-form input::placeholder{color:var(--muted);}
.invite-form input:focus{outline:1px solid var(--lime);}
.invite-form button{background:var(--lime);color:var(--bg);border:none;padding:11px 18px;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:lowercase;cursor:pointer;white-space:nowrap;flex-shrink:0;}
.invite-form button:hover{background:#d4ff2e;}
.invite-form button:active{background:#aee000;}
.cta-note{font-size:11px;color:var(--muted);margin-top:9px;}

/* DROP BAR */
.drop-bar{background:var(--surface2);border:1px solid var(--orange);padding:9px 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.db-label{font-size:10px;color:var(--orange);text-transform:uppercase;letter-spacing:.1em;}
.db-time{font-family:var(--head);font-size:20px;font-weight:700;color:var(--orange);font-variant-numeric:tabular-nums;}
.db-desc{font-size:11px;color:var(--muted);margin-left:auto;}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--border);}
.stat-cell{padding:18px 0;border-right:1px solid var(--border);text-align:center;}
.stat-cell:last-child{border-right:none;}
.stat-n{font-family:var(--head);font-size:26px;font-weight:700;color:var(--lime);display:block;line-height:1;margin-bottom:3px;}
.stat-l{font-size:11px;color:var(--muted);}

/* FEED */
.feed-loading{padding:24px 0;color:var(--muted);font-size:12px;letter-spacing:.1em;}
.feed-empty{padding:24px 0;color:var(--muted);font-size:13px;}
.receipt{background:var(--surface);border:1px solid var(--border);border-top:none;padding:15px;box-shadow:1px 1px 0 rgba(0,0,0,.4);}
.receipt:first-child{border-top:1px solid var(--border);}
.receipt.off1{margin-left:8px;}
.receipt.off2{margin-left:16px;}
.receipt.pinned{border-color:var(--lime);}
.r-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:9px;}
.r-user{display:flex;align-items:center;gap:8px;}
.avatar{width:24px;height:24px;background:var(--surface2);border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--lime);font-weight:700;flex-shrink:0;text-transform:uppercase;}
.avatar.og{border-color:var(--lime);}
.r-name{font-size:12px;color:var(--text);font-weight:700;}
.og-badge{color:var(--lime);font-size:9px;border:1px solid var(--lime);padding:1px 4px;letter-spacing:.1em;margin-left:4px;}
.r-time{font-size:10px;color:var(--muted);}
.stamp{font-size:10px;padding:2px 6px;border:1px solid;letter-spacing:.1em;text-transform:uppercase;flex-shrink:0;}
.s-food{border-color:var(--lime);color:var(--lime);}
.s-music{border-color:var(--orange);color:var(--orange);}
.s-fashion{border-color:var(--purple);color:var(--purple);}
.s-vibe{border-color:var(--muted);color:var(--muted);}
.r-place{font-size:15px;font-family:var(--head);font-weight:700;color:var(--text);margin-bottom:4px;}
.r-body{font-size:13px;color:var(--muted);line-height:1.5;margin-bottom:11px;}
.r-footer{display:flex;align-items:center;gap:10px;padding-top:9px;border-top:1px dashed var(--border);flex-wrap:wrap;}
.action-btn{font-family:var(--mono);font-size:11px;background:none;border:1px solid var(--border2);color:var(--muted);padding:4px 9px;cursor:pointer;letter-spacing:.04em;text-transform:lowercase;}
.action-btn.tap{border-color:var(--lime);color:var(--lime);}
.action-btn.tapped{background:var(--lime);color:var(--bg);border-color:var(--lime);cursor:default;}
.action-btn:hover:not(.tapped):not(:disabled){border-color:var(--text);color:var(--text);}
.r-loc{font-size:10px;color:var(--muted);margin-left:auto;}
.r-loc::before{content:'↗ ';}

/* CREW DROP */
.crew-drop{background:var(--surface);border:1px solid var(--orange);padding:15px;position:relative;overflow:hidden;}
.crew-drop::before{content:'crew drop';position:absolute;top:-1px;right:-1px;background:var(--orange);color:var(--bg);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;}
.cd-biz{font-size:11px;color:var(--muted);margin-bottom:4px;}
.cd-deal{font-family:var(--head);font-size:22px;font-weight:700;color:var(--orange);margin-bottom:5px;}
.cd-cond{font-size:12px;color:var(--muted);margin-bottom:12px;}
.cd-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.cd-timer{font-size:11px;color:var(--orange);}
.claim-btn{background:var(--orange);color:var(--bg);border:none;padding:8px 15px;font-family:var(--head);font-size:11px;font-weight:700;text-transform:lowercase;cursor:pointer;}
.claim-btn:hover{background:#ff8450;}

/* HOW IT WORKS */
.how-item{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:18px 0;border-bottom:1px solid var(--border);align-items:start;}
.how-item:last-child{border-bottom:none;}
.how-n{font-family:var(--head);font-size:22px;font-weight:700;color:var(--border2);line-height:1;}
.how-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px;text-transform:lowercase;}
.how-desc{font-size:13px;color:var(--muted);line-height:1.6;}
.how-desc strong{color:var(--lime);}

/* EARNINGS */
.income-demo{background:var(--surface);border:1px solid var(--border);padding:18px;}
.income-line{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px dashed var(--border);font-size:13px;gap:12px;}
.income-line:last-child{border-bottom:none;}
.il-label{color:var(--muted);flex:1;}
.il-val{font-family:var(--head);font-weight:700;color:var(--text);flex-shrink:0;}
.il-val.pos{color:var(--lime);}
.income-total{display:flex;justify-content:space-between;align-items:center;padding-top:11px;margin-top:3px;border-top:2px solid var(--border2);}
.it-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;}
.it-val{font-family:var(--head);font-size:22px;font-weight:700;color:var(--lime);}

/* PAYPAL NOTE */
.pp-note{background:rgba(0,112,186,.07);border:1px solid rgba(0,112,186,.25);padding:13px 15px;display:flex;gap:11px;align-items:flex-start;margin-top:10px;}
.pp-icon{color:var(--paypal);font-size:15px;flex-shrink:0;font-family:var(--head);font-weight:700;margin-top:1px;}
.pp-text{font-size:12px;color:var(--muted);line-height:1.65;}
.pp-text strong{color:var(--paypal);}

/* NOTIFICATIONS */
.notif{background:var(--surface2);border:1px solid var(--border);border-left:3px solid;padding:11px 13px;margin-bottom:7px;}
.notif.nv{border-left-color:var(--lime);}
.notif.ns{border-left-color:var(--orange);}
.notif.nd{border-left-color:var(--purple);}
.n-app{font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;}
.n-body{font-size:13px;color:var(--text);line-height:1.4;}
.n-time{font-size:10px;color:var(--muted);margin-top:3px;}

/* ONBOARDING */
.ob-step{display:none;}.ob-step.active{display:block;}
.step-bar{display:flex;gap:4px;margin-bottom:28px;}
.step-pip{width:22px;height:3px;background:var(--border);}
.step-pip.done{background:var(--lime);}.step-pip.cur{background:var(--text);}
.big-input{width:100%;background:var(--surface);border:1px solid var(--border2);color:var(--text);font-family:var(--mono);font-size:15px;padding:14px;outline:none;margin-bottom:11px;}
.big-input::placeholder{color:var(--muted);}
.big-input:focus{border-color:var(--lime);}
.big-btn{display:block;width:100%;background:var(--lime);color:var(--bg);border:none;padding:14px;font-family:var(--head);font-size:13px;font-weight:700;text-transform:lowercase;cursor:pointer;letter-spacing:.05em;margin-bottom:9px;}
.big-btn:hover{background:#d4ff2e;}
.big-btn.sec{background:none;border:1px solid var(--border2);color:var(--muted);}
.big-btn.sec:hover{border-color:var(--text);color:var(--text);}
.big-btn.pp{background:var(--paypal);color:#fff;}
.big-btn.pp:hover{background:#0082d6;}
.big-btn:disabled{opacity:.5;cursor:not-allowed;}
.age-warn{background:rgba(255,68,68,.09);border:1px solid rgba(255,68,68,.3);padding:12px;font-size:12px;color:#ffaaaa;margin-bottom:14px;line-height:1.65;}
.ob-note{font-size:12px;color:var(--muted);line-height:1.7;margin-top:8px;}
.ob-note a{color:var(--muted);text-decoration:underline;}

/* TERMS */
.terms-block{background:var(--surface);border:1px solid var(--border);padding:20px;}
.clause{margin-bottom:20px;}
.clause:last-child{margin-bottom:0;}
.clause h3{font-size:11px;color:var(--lime);text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;border-bottom:1px solid var(--border);padding-bottom:5px;}
.clause p{font-size:12px;color:var(--muted);line-height:1.75;margin-bottom:8px;}
.clause p:last-child{margin-bottom:0;}
.clause p strong{color:var(--text);}
.terms-footer-note{font-size:11px;color:var(--muted);border-top:1px dashed var(--border);padding-top:12px;margin-top:4px;}

/* DASHBOARD */
.dash-card{background:var(--surface);border:1px solid var(--border);padding:18px;margin-bottom:12px;}
.dash-stat-row{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px dashed var(--border);margin-top:14px;}
.dash-stat{padding:12px 0;border-right:1px dashed var(--border);text-align:center;}
.dash-stat:last-child{border-right:none;}
.dash-stat-n{font-family:var(--head);font-size:20px;font-weight:700;color:var(--text);display:block;}
.dash-stat-l{font-size:10px;color:var(--muted);}
.bar-track{height:4px;background:var(--surface2);border:1px solid var(--border);margin-top:5px;}
.bar-fill{height:100%;background:var(--lime);}
.payout-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border);font-size:12px;}
.payout-row:last-child{border-bottom:none;}
.payout-status{font-size:10px;padding:2px 6px;border:1px solid;}
.payout-status.pending{border-color:var(--orange);color:var(--orange);}
.payout-status.paid{border-color:var(--lime);color:var(--lime);}
.payout-status.failed{border-color:var(--error);color:var(--error);}
.code-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--border);flex-wrap:wrap;}
.code-row:last-child{border-bottom:none;}
.code-val{font-family:var(--head);font-size:14px;font-weight:700;color:var(--lime);flex:1;}
.code-st{font-size:11px;}
.code-st.used{color:var(--muted);text-decoration:line-through;}
.code-st.live{color:var(--lime);}
.code-st.exp{color:var(--orange);}

/* FOOTER */
footer{border-top:1px solid var(--border);padding:28px 0;}
.ascii-logo{font-size:9px;color:var(--border2);line-height:1.3;white-space:pre;margin-bottom:22px;user-select:none;font-family:var(--mono);overflow-x:auto;}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:22px;}
.footer-col h4{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:9px;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:5px;}
.footer-col ul li a{font-size:12px;color:var(--muted);text-decoration:none;}
.footer-col ul li a:hover{color:var(--text);}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:18px;border-top:1px solid var(--border);flex-wrap:wrap;gap:8px;}
.footer-copy{font-size:10px;color:var(--muted);}
.footer-age{font-size:10px;color:var(--muted);border:1px solid var(--border);padding:2px 7px;letter-spacing:.1em;}

/* TOAST */
.sc-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--lime);color:var(--text);font-family:var(--mono);font-size:12px;padding:9px 18px;z-index:10000;white-space:nowrap;letter-spacing:.04em;pointer-events:none;transition:opacity .3s;}
.sc-toast.err{border-color:var(--error);}
.sc-toast.ok{border-color:var(--success);}

/* UTILITIES */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;}
.reveal.visible{opacity:1;transform:none;}
.glitch{position:relative;display:inline-block;}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;}
.glitch::before{color:var(--lime);animation:glitch-a 5s infinite linear;left:2px;opacity:.65;clip:rect(0,900px,0,0);}
.glitch::after{color:var(--orange);animation:glitch-b 4s infinite linear;left:-2px;opacity:.45;clip:rect(0,900px,0,0);}
.hidden{display:none!important;}

/* ANIMATIONS */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes glitch-a{0%,90%,100%{clip:rect(0,0,0,0)}92%{clip:rect(0,900px,4px,0)}95%{clip:rect(14px,900px,18px,0)}97%{clip:rect(0,0,0,0)}}
@keyframes glitch-b{0%,87%,100%{clip:rect(0,0,0,0)}89%{clip:rect(28px,900px,33px,0)}92%{clip:rect(0,0,0,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--lime);border-radius:50%;animation:spin .6s linear infinite;display:inline-block;}

@media(max-width:520px){
  h1{font-size:26px;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .db-desc{display:none;}
  .nav-status{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .glitch::before,.glitch::after,.pulse,.marquee-track{animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
}