/* Engage app stylesheet. Same system as the landing page:
   Void background, Signal Green money color, mono labels, tight display type. */

:root{
  --void:#0A0A0F;
  --panel:#101018;
  --panel2:#13131D;
  --green:#00FF87;
  --green-dim:rgba(0,255,135,0.55);
  --violet:#9945FF;
  --ghost:#F2F4F3;
  --static:#83879B;
  --red:#FF5C5C;
  --line:rgba(242,244,243,0.09);
  --line2:rgba(242,244,243,0.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--ghost);font-family:'Inter',sans-serif;line-height:1.6;min-height:100vh}
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--green);color:var(--void)}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-0.02em;line-height:1.1}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.mono{font-family:'IBM Plex Mono',monospace}
.hidden{display:none!important}
.g{color:var(--green)}
.r{color:var(--red)}
.muted{color:var(--static)}

/* topbar */
.topbar{position:sticky;top:0;z-index:80;background:rgba(10,10,15,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topin{max-width:1280px;margin:0 auto;display:flex;align-items:center;height:60px;padding:0 24px;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.02rem;letter-spacing:0.02em;white-space:nowrap}
.brand svg{width:24px;height:24px}
.app-tag{font-family:'IBM Plex Mono',monospace;font-size:0.56rem;letter-spacing:0.2em;color:var(--void);background:var(--green);padding:2px 6px;font-weight:500}
.nav{display:flex;gap:20px;flex:1}
.nav a{font-family:'IBM Plex Mono',monospace;font-size:0.66rem;letter-spacing:0.16em;color:var(--static);padding:6px 2px;border-bottom:1px solid transparent;transition:color .15s}
.nav a:hover{color:var(--ghost)}
.nav a.on{color:var(--green);border-bottom-color:var(--green)}
.me{display:flex;align-items:center;gap:12px}
.bal-pill{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--green);border:1px solid var(--line2);padding:6px 12px;white-space:nowrap}
.me img{width:30px;height:30px;border-radius:50%;object-fit:cover;border:1px solid var(--line2)}
.me .hdl{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--static)}
.me .out{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.1em;color:var(--static);cursor:pointer}
.me .out:hover{color:var(--red)}

/* layout */
.frame{max-width:1280px;margin:0 auto;padding:36px 24px 80px}
.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.page-head h2{font-size:1.9rem}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:0.64rem;letter-spacing:0.28em;color:var(--green);margin-bottom:10px;display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--green)}

/* buttons and inputs */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:0.16em;font-weight:500;padding:11px 20px;border-radius:2px;cursor:pointer;border:1px solid transparent;transition:all .15s;white-space:nowrap}
.btn-fill{background:var(--green);color:var(--void)}
.btn-fill:hover{background:var(--ghost)}
.btn-fill:disabled{background:var(--static);cursor:not-allowed}
.btn-line{border-color:var(--line2);color:var(--ghost)}
.btn-line:hover{border-color:var(--green);color:var(--green)}
.btn-danger{border-color:rgba(255,92,92,0.4);color:var(--red)}
.btn-sm{padding:7px 13px;font-size:0.62rem}
input,textarea,select{
  width:100%;background:var(--void);border:1px solid var(--line2);color:var(--ghost);
  font-family:'IBM Plex Mono',monospace;font-size:0.8rem;padding:11px 12px;border-radius:2px;outline:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--green)}
textarea{min-height:88px;resize:vertical;line-height:1.5}
label{display:block;font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.18em;color:var(--static);margin:16px 0 6px;text-transform:uppercase}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}
.card{border:1px solid var(--line);background:var(--panel);padding:20px;transition:border-color .15s;position:relative}
.card:hover{border-color:var(--line2)}
.card.clickable{cursor:pointer}
.card.clickable:hover{border-color:var(--green-dim)}
.mrow{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:0.68rem}
.mrow:first-of-type{border-top:none}
.mrow .l{letter-spacing:0.14em;color:var(--static)}
.mrow .v{color:var(--ghost)}
.mrow .v.g{color:var(--green)}
.chip{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:0.56rem;letter-spacing:0.16em;padding:3px 8px;border:1px solid var(--line2);color:var(--static)}
.chip.green{border-color:var(--green-dim);color:var(--green)}
.chip.violet{border-color:rgba(153,69,255,0.5);color:#B987FF}
.chip.red{border-color:rgba(255,92,92,0.4);color:var(--red)}
.pbar{height:3px;background:rgba(242,244,243,0.08);margin:12px 0 4px}
.pbar i{display:block;height:100%;background:var(--green)}

.mission-card .title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.08rem;margin:10px 0 2px}
.mission-card .by{font-size:0.74rem;color:var(--static);margin-bottom:12px}
.type-ico{width:26px;height:26px;color:var(--green)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}

/* filter chips */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.fchip{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.16em;padding:7px 14px;border:1px solid var(--line2);color:var(--static);cursor:pointer;transition:all .15s}
.fchip:hover{color:var(--ghost)}
.fchip.on{border-color:var(--green);color:var(--green)}

/* detail layout */
.split{display:grid;grid-template-columns:1.1fr 0.9fr;gap:24px;align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}
.panel{border:1px solid var(--line);background:var(--panel);padding:24px}
.panel h3{font-size:1.05rem;margin-bottom:14px}
table{width:100%;border-collapse:collapse}
th{font-family:'IBM Plex Mono',monospace;font-size:0.56rem;letter-spacing:0.18em;color:var(--static);font-weight:400;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line2)}
td{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;color:var(--static);padding:8px 10px;border-bottom:1px solid var(--line)}
td:first-child{color:var(--ghost)}
td.g{color:var(--green)}
td img{width:20px;height:20px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:7px}

/* action checkboxes */
.acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.act{display:flex;align-items:center;gap:8px;border:1px solid var(--line2);padding:9px 14px;font-family:'IBM Plex Mono',monospace;font-size:0.66rem;letter-spacing:0.12em;cursor:pointer;user-select:none}
.act input{width:auto}
.act.on{border-color:var(--green);color:var(--green)}

/* type picker on create */
.types{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:880px){.types{grid-template-columns:repeat(2,1fr)}}
.tpick{border:1px solid var(--line2);padding:14px 10px;text-align:center;cursor:pointer;transition:all .15s}
.tpick .nm{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:0.9rem;margin-top:8px}
.tpick .d{font-size:0.62rem;color:var(--static);line-height:1.4;margin-top:3px}
.tpick svg{width:22px;height:22px;color:var(--static);transition:color .15s}
.tpick.on{border-color:var(--green)}
.tpick.on svg{color:var(--green)}
.optrow{display:flex;gap:8px;flex-wrap:wrap}
.opt{border:1px solid var(--line2);padding:8px 14px;font-family:'IBM Plex Mono',monospace;font-size:0.64rem;letter-spacing:0.12em;cursor:pointer;color:var(--static)}
.opt.on{border-color:var(--green);color:var(--green)}
.pricebox{border:1px solid var(--green-dim);padding:16px 18px;margin-top:20px}
.pricebox .big{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.7rem;color:var(--green)}

/* score gauge */
.gauge-bar{height:8px;background:rgba(242,244,243,0.08);position:relative;margin:14px 0 8px}
.gauge-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--green))}
.score-big{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:3.4rem;line-height:1}
.score-big small{font-size:1rem;color:var(--static);font-weight:500}
.parts .mrow .v{color:var(--green)}
.pulse-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:0.8rem}
.pulse-item .ok{color:var(--green);font-family:'IBM Plex Mono',monospace}
.pulse-item .bad{color:var(--red);font-family:'IBM Plex Mono',monospace}
.pulse-item .note{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:0.62rem;color:var(--static)}

/* wallet */
.balance-hero{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:2.8rem;color:var(--green);line-height:1.1}
.balance-hero small{display:block;font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.24em;color:var(--static);font-weight:400;margin-top:4px}

/* stats */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:24px}
.stat{border:1px solid var(--line);background:var(--panel);padding:18px}
.stat b{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.5rem}
.stat span{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;letter-spacing:0.2em;color:var(--static)}
.stack{display:flex;height:14px;background:var(--panel2);margin:18px 0 14px}
.stack i{display:block;height:100%}

/* login overlay */
.login{position:fixed;inset:0;z-index:100;background:var(--void);display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.login::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(242,244,243,0.05) 1px, transparent 1px);
  background-size:26px 26px;pointer-events:none;
}
.login-card{max-width:520px;width:100%;text-align:center;position:relative;padding:40px 0}
.login-mascot{width:130px;height:auto;filter:drop-shadow(0 10px 30px rgba(0,255,135,0.3));margin-bottom:22px;animation:bob 4.5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-7px)}}
.login .kick{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;letter-spacing:0.3em;color:var(--green);margin-bottom:16px}
.login h1{font-size:2.8rem}
.login .sub{color:var(--static);margin:16px auto 28px;max-width:38ch;font-size:0.95rem}
.personas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
@media(max-width:560px){.personas{grid-template-columns:repeat(2,1fr)}}
.persona{border:1px solid var(--line2);background:var(--panel);padding:14px 8px;cursor:pointer;transition:border-color .15s;text-align:center}
.persona:hover{border-color:var(--green)}
.persona img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.persona .h{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;color:var(--ghost);margin-top:8px}
.persona .s{font-family:'IBM Plex Mono',monospace;font-size:0.58rem;color:var(--green)}
.custom-handle{display:flex;gap:8px;margin-top:4px}
.fine-login{margin-top:26px;font-size:0.56rem;letter-spacing:0.22em;color:var(--static)}
.mock-note{font-family:'IBM Plex Mono',monospace;font-size:0.6rem;letter-spacing:0.14em;color:var(--static);margin:18px 0 10px}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--panel);border:1px solid var(--green);color:var(--ghost);font-family:'IBM Plex Mono',monospace;font-size:0.7rem;padding:12px 20px;animation:pop .2s ease}
.toast.err{border-color:var(--red)}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}

/* empty state */
.empty{text-align:center;padding:60px 20px;color:var(--static)}
.empty img{width:90px;opacity:0.9;margin-bottom:18px;filter:drop-shadow(0 8px 22px rgba(0,255,135,0.25))}
.empty .mono{font-size:0.64rem;letter-spacing:0.2em}

@media(max-width:880px){
  .nav{display:none}
  .topin{justify-content:space-between}
}