:root{
    --ink:#1A1B1F; --paper:#FFFDF6;
    --sky:#B9E6F7; --sky-deep:#9BDAF0;
    --pink:#FF8FA6; --yellow:#FFD35C; --green:#63E3B4;
    --purple:#C9AEFF; --blue:#2FB8E8; --orange:#FFB067;
    --red:#FF7A6B; --grey:#B9C2BF;
    --positive:#0F7A4C; --negative:#CC3E30; --subtitle:#5E6C68;
    --line:rgba(26,27,31,.14);
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  body{font-family:'Space Grotesk',sans-serif;color:var(--ink);
    background:var(--ink);display:flex;justify-content:center;}
  .phone{width:100%;max-width:430px;min-height:100dvh;position:relative;
    background:linear-gradient(180deg,var(--sky) 0%,var(--sky-deep) 100%);
    padding-bottom:24px;}

  /* header — identical to reference */
  .hdr{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--paper);
    padding:9px 14px;display:flex;align-items:center;justify-content:space-between;
    gap:10px;cursor:pointer;}
  .hdr .l{font-family:'JetBrains Mono',monospace;font-size:8.5px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;opacity:.6;}
  .hdr .a{font-family:'Fredoka',sans-serif;font-weight:700;font-size:19px;line-height:1.15;
    color:var(--green);}
  .hdr .go{background:var(--yellow);border-radius:100px;font-weight:600;font-size:11px;
    color:var(--ink);padding:5px 11px;display:flex;align-items:center;gap:4px;white-space:nowrap;
    border:none;font-family:inherit;}
  .hdr .go svg{width:11px;height:11px;}

  .page{padding:12px 14px 14px;}

  /* BACK BAR — was missing entirely */
  .backbar{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
    color:#2C3A36;cursor:pointer;margin-bottom:12px;background:none;border:0;
    font-family:inherit;padding:6px 2px;position:relative;}
  .backbar::after{content:"";position:absolute;inset:-8px;}
  .backbar svg{width:15px;height:15px;}
  .backbar:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px;}

  .lbl{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;
    letter-spacing:.13em;text-transform:uppercase;color:#3E4D49;
    margin:14px 0 6px;display:flex;align-items:center;gap:6px;}
  .lbl:first-of-type{margin-top:0;}
  .lbl::after{content:"";flex:1;height:1.5px;background:var(--ink);opacity:.16;}

  .card{background:var(--paper);border:2px solid var(--ink);border-radius:14px;
    box-shadow:3px 3px 0 var(--ink);overflow:hidden;}

  /* member row — mirrors .row in reference */
  .row{display:flex;align-items:center;gap:10px;padding:10px 12px;
    border-bottom:1.5px solid var(--line);}
  .row:last-child{border-bottom:none;}
  .av{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    font-family:'Fredoka',sans-serif;font-weight:600;font-size:13px;color:var(--ink);}
  .mid{flex:1;min-width:0;}
  .mid .n{font-weight:600;font-size:14.5px;line-height:1.25;
    display:flex;align-items:center;gap:6px;}
  .mid .n .you{font-family:'JetBrains Mono',monospace;font-size:7.5px;font-weight:600;
    letter-spacing:.06em;background:var(--yellow);border:1.5px solid var(--ink);
    border-radius:100px;padding:1px 5px;}
  .mid .s{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--subtitle);
    margin-top:3px;letter-spacing:.04em;}
  .mid .lock{display:block;font-size:10px;color:var(--subtitle);margin-top:3px;
    font-style:italic;}
  .bal{font-family:'Fredoka',sans-serif;font-weight:700;font-size:14.5px;
    text-align:right;flex-shrink:0;}
  .bal.pos{color:var(--positive);} .bal.neg{color:var(--negative);}
  .bal.zero{color:var(--grey);}

  /* two direct action buttons — no nested menu */
  .acts{display:flex;gap:6px;flex-shrink:0;}
  .iconbtn{width:34px;height:34px;border:2px solid var(--ink);border-radius:9px;
    background:var(--paper);display:flex;align-items:center;justify-content:center;
    cursor:pointer;position:relative;padding:0;color:var(--ink);}
  .iconbtn::after{content:"";position:absolute;inset:-6px;}
  .iconbtn svg{width:15px;height:15px;}
  .iconbtn:active{transform:translate(2px,2px);}
  .iconbtn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
  .iconbtn.danger{border-color:var(--red);color:var(--negative);}
  .iconbtn:disabled{opacity:.32;cursor:not-allowed;}
  .iconbtn:disabled:active{transform:none;}

  .addbtn{width:100%;margin-top:10px;border:2px solid var(--ink);border-radius:12px;
    background:var(--paper);font-family:inherit;font-weight:600;font-size:13.5px;
    padding:11px 0;cursor:pointer;color:var(--ink);box-shadow:3px 3px 0 var(--ink);
    display:flex;align-items:center;justify-content:center;gap:7px;}
  .addbtn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
  .addbtn svg{width:14px;height:14px;}

  .note{font-size:11.5px;color:var(--subtitle);line-height:1.5;margin-top:10px;
    padding:0 2px;}

  /* bottom sheet */
  .ovl{position:fixed;inset:0;background:rgba(26,27,31,.55);z-index:60;
    display:flex;align-items:flex-end;justify-content:center;}
  .sheet{width:100%;max-width:430px;background:var(--paper);
    border-top:3px solid var(--ink);border-radius:20px 20px 0 0;
    padding-bottom:max(16px,env(safe-area-inset-bottom));
    animation:up .28s cubic-bezier(.22,1,.36,1);}
  @keyframes up{from{transform:translateY(100%);}}
  .sheet h3{font-family:'Fredoka',sans-serif;font-weight:600;font-size:17px;
    padding:15px 15px 4px;display:flex;align-items:center;justify-content:space-between;}
  .sheet h3 button{font-size:22px;cursor:pointer;line-height:1;background:none;
    border:0;color:var(--ink);padding:4px 8px;}
  .sheet .who{padding:0 15px 12px;font-size:12.5px;color:var(--subtitle);
    display:flex;align-items:center;gap:8px;}
  .sheet .body{padding:0 15px;}
  .act{width:100%;display:flex;align-items:center;gap:10px;
    border:2px solid var(--ink);border-radius:12px;background:var(--paper);
    font-family:inherit;font-weight:600;font-size:14px;color:var(--ink);
    padding:12px 13px;cursor:pointer;margin-bottom:8px;text-align:left;
    box-shadow:3px 3px 0 var(--ink);}
  .act:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
  .act svg{width:16px;height:16px;flex-shrink:0;}
  .act .sub{display:block;font-weight:400;font-size:11px;color:var(--subtitle);
    margin-top:2px;}
  .act.danger{border-color:var(--red);color:var(--negative);}
  .act:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}
  .act:disabled:active{transform:none;}

  .f{margin-bottom:14px;}
  .f label{display:flex;align-items:center;gap:5px;
    font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:600;
    letter-spacing:.11em;text-transform:uppercase;color:#3E4D49;margin-bottom:6px;}
  .f input{width:100%;border:2px solid var(--ink);background:var(--paper);
    border-radius:10px;padding:11px;font-family:inherit;font-size:16px;color:var(--ink);}
  .f input:focus{outline:none;box-shadow:2px 2px 0 var(--ink);}
  .cta{width:100%;border:2.5px solid var(--ink);border-radius:12px;background:var(--green);
    font-family:inherit;font-weight:700;font-size:15px;padding:12px 0;cursor:pointer;
    color:var(--ink);box-shadow:3px 3px 0 var(--ink);}
  .cta:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink);}
  .cta:disabled{background:var(--grey);opacity:.6;cursor:not-allowed;}

  .warn{display:flex;gap:8px;background:var(--orange);border:2px solid var(--ink);
    border-radius:11px;padding:10px 11px;font-size:12px;line-height:1.5;margin-bottom:12px;}
  .warn svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;}

  #snack{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
    max-width:402px;width:calc(100% - 28px);z-index:70;}
  .snack{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);
    border-radius:11px;padding:11px 14px;font-size:12.5px;}
  .snack button{margin-left:auto;cursor:pointer;font-family:'JetBrains Mono',monospace;
    font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--yellow);
    background:none;border:0;}

  button:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.01ms !important;transition-duration:.01ms !important;}}
