:root{
  --bg:#040605; --bg2:#07100c; --panel:rgba(6,14,10,.82);
  --green:#00ff88; --green2:#3dffa8; --green-dim:#0f8f55; --green-faint:rgba(0,255,136,.14);
  --white:#e9fff4; --muted:#8fb3a2; --line:rgba(0,255,136,.28);
  --gold:#ffc94a; --gold2:#ffe39a;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --plex:"IBM Plex Mono","JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--white);font-family:var(--plex);-webkit-font-smoothing:antialiased;
  background:radial-gradient(ellipse 80% 60% at 50% 30%,#0b1a13 0%,var(--bg2) 40%,var(--bg) 100%) fixed;
  overflow-x:hidden;min-height:100dvh;
}
::selection{background:var(--green);color:#001a0d}

/* ---------- background: matrix rain, pills, CRT ---------- */
#matrix{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
.crt{position:fixed;inset:0;z-index:40;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.22) 2px 3px),
    radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%);
  animation:crtFlicker 7s steps(1) infinite}
.crt::after{content:"";position:absolute;left:0;right:0;height:18vh;top:-20vh;
  background:linear-gradient(180deg,rgba(0,255,136,0),rgba(0,255,136,.035),rgba(0,255,136,0));animation:scan 9s linear infinite}
@keyframes scan{to{transform:translateY(140vh)}}
@keyframes crtFlicker{0%,100%{opacity:1}47%{opacity:.86}48%{opacity:1}83%{opacity:.92}84%{opacity:1}}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px clamp(14px,4vw,32px);background:linear-gradient(180deg,rgba(4,6,5,.92),rgba(4,6,5,.6));
  backdrop-filter:blur(8px);border-bottom:1px dashed var(--line)}
.brand{display:flex;align-items:center;gap:10px;font:700 17px var(--mono);color:var(--white);letter-spacing:.02em}
.brand-mark{color:var(--gold);text-shadow:0 0 10px rgba(255,201,74,.8)}
.brand-name b{color:var(--green);text-shadow:0 0 10px rgba(0,255,136,.7)}
.brand-ver{margin-left:8px;font-size:11px;font-weight:500;color:var(--muted);border:1px solid var(--line);padding:1px 6px}
.top-actions{display:flex;align-items:center;gap:10px}
.counter{display:flex;align-items:center;gap:8px;font:500 12.5px var(--mono);color:var(--green);padding:8px 12px;border:1px solid var(--line);background:rgba(0,255,136,.05)}
.counter::before{content:"[";color:var(--muted)}.counter::after{content:"]";color:var(--muted)}
.counter-dot{width:8px;height:8px;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.4s steps(2) infinite}
.counter.empty{color:#ff5c7a;border-color:rgba(255,92,122,.45);cursor:pointer}
.counter.empty .counter-dot{background:#ff5c7a;box-shadow:0 0 10px #ff5c7a}
@keyframes pulse{50%{opacity:.25}}

.btn{font:700 13px var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:9px 14px;cursor:pointer;border:1px solid var(--green);transition:.15s;color:var(--green);background:transparent;border-radius:0}
.btn-ghost{box-shadow:0 0 0 0 rgba(0,255,136,0),inset 0 0 12px rgba(0,255,136,.08)}
.btn-ghost:hover{background:var(--green);color:#00130a;box-shadow:0 0 22px rgba(0,255,136,.55)}
.btn-gold{background:var(--gold);color:#1d1200;border-color:var(--gold);box-shadow:0 0 24px rgba(255,201,74,.35)}
.btn-gold:hover:not(:disabled){background:var(--gold2);box-shadow:0 0 34px rgba(255,201,74,.6)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-block{width:100%;padding:13px;font-size:14px}

/* ---------- layout ---------- */
.app{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:0 clamp(12px,4vw,24px);min-height:calc(100dvh - 60px);display:flex;flex-direction:column}
.hero{text-align:center;padding:2vh 0 0;display:flex;flex-direction:column;align-items:center}

.banner{margin:0 0 4px;font:700 min(11px,calc((100vw - 28px) / 42)) / 1 var(--mono);color:var(--green);white-space:pre;
  text-shadow:0 0 6px rgba(0,255,136,.75),0 0 22px rgba(0,255,136,.35);animation:glitch 6s steps(1) infinite}
@keyframes glitch{0%,100%{transform:none;filter:none}92%{transform:translateX(2px) skewX(-4deg);filter:hue-rotate(40deg)}93%{transform:translateX(-2px);filter:none}94%{transform:none}}

/* ---------- ASCII Jesus ---------- */
.hero-figure{position:relative;display:flex;justify-content:center;align-items:flex-end;margin:0 auto;padding-bottom:14px}
.ascii-jesus{position:relative;z-index:2;margin:0;font-family:var(--mono);font-weight:700;line-height:1;white-space:pre;letter-spacing:0;
  color:var(--green);user-select:none;transform-origin:50% 80%;animation:bob 5s ease-in-out infinite,flick 4.5s steps(1) infinite}
.ascii-jesus b{font-weight:inherit}
.ascii-jesus .r{color:var(--green);text-shadow:0 0 6px rgba(0,255,136,.55)}
.ascii-jesus .d{color:#35d68c}
.ascii-jesus .g{color:#9dffcf;text-shadow:0 0 6px rgba(0,255,136,.6)}
.ascii-jesus .k{color:#f4fff8;text-shadow:0 0 6px rgba(255,255,255,.55)}
.ascii-jesus .h{color:var(--gold);text-shadow:0 0 6px var(--gold),0 0 16px rgba(255,201,74,.8)}
.ascii-jesus .s{color:#0a0f0c;text-shadow:0 0 1px var(--green),0 0 4px rgba(0,255,136,.9)}
.ascii-jesus.big{font-size:min(8.2px,calc((100dvh - 330px) / 62),calc((100vw - 28px) / 60));
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
.ascii-jesus.head{display:none;font-size:4.6px;animation-duration:4s,4.5s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-14px) rotate(1deg)}}
@keyframes flick{0%,100%{opacity:1}31%{opacity:.82}32%{opacity:1}67%{opacity:.9}68%{opacity:1}}
.figure-glow{position:absolute;z-index:1;left:50%;top:0;width:min(560px,95vw);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 50% 22%,rgba(255,201,74,.22) 0%,rgba(255,201,74,0) 22%),
             radial-gradient(circle at 50% 45%,rgba(0,255,136,.20) 0%,rgba(0,255,136,.06) 40%,rgba(0,255,136,0) 66%);
  animation:glowPulse 5s ease-in-out infinite}
@keyframes glowPulse{50%{opacity:.65;transform:translateX(-50%) scale(1.05)}}
.figure-shadow{position:absolute;z-index:1;bottom:2px;left:50%;width:220px;height:16px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,255,136,.45) 0%,rgba(0,255,136,.12) 45%,rgba(0,0,0,0) 72%);animation:shadowPulse 5s ease-in-out infinite}
@keyframes shadowPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(.8);opacity:.55}}
.boot-line{margin:4px 0 0;font:500 12.5px var(--mono);color:var(--muted)}
.boot-line .prompt{color:var(--green)}
.boot-line .ok{color:var(--gold)}

/* compact (chatting) mode */
.hero.compact{flex-direction:row;justify-content:center;gap:16px;padding:10px 0 2px}
.hero.compact .ascii-jesus.big,.hero.compact .boot-line,.hero.compact .figure-shadow{display:none}
.hero.compact .ascii-jesus.head{display:block}
.hero.compact .hero-figure{padding-bottom:6px;order:-1}
.hero.compact .figure-glow{width:170px;top:-34px}
.hero.compact .banner{font-size:min(6.5px,calc((100vw - 170px) / 42));margin:0}

/* ---------- chat ---------- */
.chat{flex:1;display:flex;flex-direction:column;gap:18px;padding:16px 0 8px}
.chat:not(:empty){position:relative;margin-top:10px;padding:22px clamp(10px,2.4vw,20px) 18px;border:1px solid var(--line);background:rgba(3,8,6,.88);backdrop-filter:blur(4px);
  box-shadow:inset 0 0 40px rgba(0,255,136,.05),0 0 30px rgba(0,0,0,.6)}
.chat:not(:empty)::before{content:"┌─[ /dev/heaven ]─ session open ─";position:absolute;top:-9px;left:12px;padding:0 6px;background:var(--bg);font:500 11.5px/1.4 var(--mono);color:var(--green);white-space:nowrap;overflow:hidden;max-width:calc(100% - 24px)}
.chat:not(:empty)::after{content:"─[ EOF ]─┘";position:absolute;bottom:-9px;right:12px;padding:0 6px;background:var(--bg);font:500 11.5px/1.4 var(--mono);color:var(--muted)}

.msg{display:flex;gap:10px;align-items:flex-start;animation:rise .35s cubic-bezier(.2,.8,.2,1) both}
.msg.user{flex-direction:row-reverse}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bubble{position:relative;max-width:min(80%,640px);padding:12px 16px;line-height:1.65;font-size:15px;white-space:normal;word-wrap:break-word}
.bubble::before{position:absolute;top:-1px;font:700 10.5px/1 var(--mono);transform:translateY(-50%);padding:0 6px;background:#050a08;letter-spacing:.05em}
.msg.bot .bubble{background:rgba(0,255,136,.045);color:var(--white);border:1px solid rgba(0,255,136,.4);box-shadow:0 0 18px rgba(0,255,136,.08)}
.msg.bot .bubble::before{content:"jesus.exe";left:10px;color:var(--green)}
.msg.user .bubble{background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.4);font-family:var(--mono);font-size:14.5px}
.msg.user .bubble::before{content:"anon@degen";right:10px;color:#cfd8d4}
.bubble p{margin:0 0 10px}.bubble p:last-child{margin:0}
.bubble strong{color:var(--green);font-weight:600}
.bubble .verse{display:block;margin:10px 0;padding:8px 12px;border-left:2px solid var(--gold);background:rgba(255,201,74,.07);font-style:italic;color:var(--gold2)}
.bubble .verse::before{content:"// ";color:rgba(255,201,74,.6);font-style:normal}
.bubble em{color:#b9d9c9}
.msg.error .bubble{border-color:rgba(255,92,122,.6);color:#ffc1cc;background:rgba(255,92,122,.07)}
.msg.error .bubble::before{content:"stderr";color:#ff5c7a}

/* mini ASCII avatar */
.avatar{flex:none;margin:0;font:700 9.5px/1.05 var(--mono);white-space:pre;text-align:center;padding:4px 3px;border:1px solid rgba(0,255,136,.3);background:rgba(0,0,0,.4)}
.avatar .h{color:var(--gold);text-shadow:0 0 6px var(--gold)}
.avatar .k{color:#f4fff8}
.avatar .s{color:var(--green);text-shadow:0 0 6px var(--green)}

/* typing indicator */
.typing{font:500 13.5px var(--mono);color:var(--green)}
.typing .dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.typing .blk{display:inline-block;width:.6em;height:1.05em;margin-left:4px;vertical-align:-2px;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1s steps(1) infinite}
.typing-label{font:12px var(--mono);color:var(--muted);margin-top:4px}
@keyframes blink{50%{opacity:0}}

/* ---------- composer ---------- */
.composer{position:sticky;bottom:0;z-index:3;padding:12px 0 calc(10px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(4,6,5,.97) 62%,rgba(4,6,5,0))}
.term-frame{border:1px solid var(--line);background:rgba(3,9,6,.92);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 28px rgba(0,255,136,.08);transition:.2s}
.term-frame:focus-within{border-color:var(--green);box-shadow:0 0 0 1px rgba(0,255,136,.25),0 0 30px rgba(0,255,136,.22)}
.term-bar{display:flex;justify-content:space-between;padding:4px 10px;font:500 11px var(--mono);color:var(--green-dim);border-bottom:1px dashed rgba(0,255,136,.18)}
.term-dots{color:#24483a;letter-spacing:2px}
.composer-inner{display:flex;align-items:flex-start;gap:10px;padding:8px 8px 8px 12px}
.ps1{font:700 16px/1.5 var(--mono);color:var(--green);padding-top:8px;text-shadow:0 0 8px rgba(0,255,136,.7)}
.input-wrap{position:relative;flex:1;min-width:0}
textarea{display:block;width:100%;resize:none;border:0;outline:0;background:transparent;color:var(--white);font:15px/1.5 var(--mono);padding:8px 0;max-height:160px;caret-color:transparent}
textarea::placeholder{color:#4f7564}
.fake-cursor{position:absolute;left:0;top:8px;width:.6em;height:1.4em;font:15px/1.5 var(--mono);background:var(--green);box-shadow:0 0 10px var(--green);animation:blink 1s steps(1) infinite;pointer-events:none;opacity:.9}
.fake-cursor.typing-now{animation:none}
.input-wrap .mirror{position:absolute;visibility:hidden;inset:0 auto auto 0;width:100%;white-space:pre-wrap;word-wrap:break-word;font:15px/1.5 var(--mono);padding:8px 0}
.send{flex:none;align-self:center;height:40px;padding:0 14px;border:1px solid var(--green);cursor:pointer;color:#00130a;background:var(--green);font:800 13px var(--mono);letter-spacing:.06em;transition:.15s;box-shadow:0 0 16px rgba(0,255,136,.45)}
.send:hover:not(:disabled){background:#7dffc0;box-shadow:0 0 26px rgba(0,255,136,.7)}
.send:disabled{opacity:.45;cursor:not-allowed}
.disclaimer{font:11px/1.5 var(--mono);color:#7d9a8c;text-align:center;margin:9px 0 0}
.disclaimer b{color:var(--gold)}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.72);backdrop-filter:blur(4px);animation:fade .25s both}
.modal-backdrop[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.modal{position:relative;width:min(460px,100%);text-align:center;padding:0 24px 22px;background:#050b08;color:var(--white);font-family:var(--mono);
  border:1px solid var(--green);box-shadow:0 0 0 4px #050b08,0 0 0 5px rgba(0,255,136,.35),0 0 60px rgba(0,255,136,.25);animation:pop .35s cubic-bezier(.2,1.2,.3,1) both}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.modal-bar{display:flex;justify-content:space-between;align-items:center;margin:0 -24px 14px;padding:6px 10px 6px 12px;border-bottom:1px solid var(--line);font:500 12px var(--mono);color:var(--green);background:rgba(0,255,136,.06)}
.modal-close{background:none;border:0;color:var(--green);font:700 13px var(--mono);cursor:pointer;padding:2px 4px}
.modal-close:hover{background:var(--green);color:#00130a}
.modal-avatar{margin:6px auto 10px;font:700 22px/1.05 var(--mono);display:inline-block;animation:bobSmall 4s ease-in-out infinite}
.modal-avatar .h{color:var(--gold);text-shadow:0 0 10px var(--gold)}.modal-avatar .k{color:#fff}.modal-avatar .s{color:var(--green);text-shadow:0 0 10px var(--green)}
@keyframes bobSmall{50%{transform:translateY(-5px)}}
.modal h2{font:800 19px/1.35 var(--mono);margin:4px 0 10px;color:#fff}
.gold{color:var(--gold);text-shadow:0 0 12px rgba(255,201,74,.6)}
.modal-sub{color:#b9d3c6;margin:0 0 16px;font-size:13.5px;line-height:1.6}
.modal-sub b{color:var(--green)}
.steps{list-style:none;padding:0;margin:0 0 18px;text-align:left;display:grid;gap:6px}
.steps li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);padding:9px 12px;border:1px dashed rgba(0,255,136,.22);transition:.3s}
.steps li span{color:var(--green-dim);font-weight:700}
.steps li span::before{content:"[";}.steps li span::after{content:"]"}
.steps li.done{color:#fff;border-style:solid;border-color:var(--green)}
.steps li.done span{color:var(--green)}
.pay-status{min-height:20px;font-size:12.5px;color:var(--gold);margin:12px 0 4px;word-break:break-word}
.pay-status.err{color:#ff5c7a}
.pay-status a{color:var(--green)}
.fine{font-size:10.5px;color:#6f8c7e;margin:6px 0 0;line-height:1.5}

.toast{position:fixed;left:50%;bottom:130px;transform:translateX(-50%);z-index:30;padding:10px 16px;background:#06100b;color:var(--green);border:1px solid var(--green);box-shadow:0 0 24px rgba(0,255,136,.25);font:13px var(--mono);max-width:90vw;text-align:center;animation:toastIn .3s both}
.toast::before{content:"> "}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- pill rain (decorative, behind content) ---------- */
.pill-rain{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.pill{position:absolute;top:0;left:var(--x);width:var(--w);height:calc(var(--w) * .42);opacity:calc(var(--o) * .6);
  transform:translate3d(0,-12vh,0) rotate(var(--r));animation:pillFall var(--d) linear var(--delay) infinite;will-change:transform}
.pill i{position:absolute;inset:0;border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,#00ff88 0 50%,#f2fff8 50% 100%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.35),0 0 10px rgba(0,255,136,.55),0 0 22px rgba(0,255,136,.2);border:1px solid rgba(0,255,136,.5)}
.pill i::before{content:"";position:absolute;left:50%;top:8%;bottom:8%;width:1px;background:rgba(0,0,0,.25)}
.pill i::after{content:"";position:absolute;left:12%;right:12%;top:14%;height:22%;border-radius:999px;background:rgba(255,255,255,.5)}
@keyframes pillFall{
  from{transform:translate3d(0,-12vh,0) rotate(var(--r))}
  to{transform:translate3d(var(--drift),112vh,0) rotate(calc(var(--r) + var(--spin)))}}

@media (max-width:600px){
  .topbar{padding:10px 12px}
  .counter{padding:7px 8px;font-size:10.5px;white-space:nowrap;gap:6px}
  .counter::before,.counter::after{display:none}
  .top-actions{gap:6px}
  .btn-ghost{white-space:nowrap}
  .btn{padding:8px 9px;font-size:10.5px}
  .brand-name{display:none}
  .bubble{max-width:calc(100% - 62px);font-size:14px;padding:11px 12px}
  .msg.user .bubble{max-width:88%}
  .avatar{font-size:8px}
  .boot-line{font-size:11px}
  .chat:not(:empty)::before{content:"┌─[ /dev/heaven ]─"}
  .ascii-jesus.big{font-size:min(8px,calc((100vw - 20px) / 60),calc((100dvh - 330px) / 62))}
  .term-bar span:first-child{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .pill{transform:translate3d(0,var(--y),0) rotate(var(--r))}}

.cabar{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid rgba(57,255,20,.18);position:relative;z-index:4}
.ca-copy{font-family:inherit;font-size:13px;background:rgba(0,0,0,.5);color:#9dffb0;border:1px dashed rgba(57,255,20,.5);border-radius:6px;padding:7px 12px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-copy:hover{border-style:solid;color:#fff}
.ca-label{color:#39ff14;font-weight:bold}.ca-icon{color:#39ff14}
.ca-pump{font-size:13px;padding:7px 14px;text-decoration:none;background:#39ff14;color:#000;font-weight:bold;border-radius:6px}
.ca-pump:hover{filter:brightness(1.15)}
@media(max-width:600px){.ca-text{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}}

.ca-ticker{font-weight:bold;color:#39ff14;font-size:15px;letter-spacing:1px;text-shadow:0 0 8px rgba(57,255,20,.7)}