.status-bar{
      position:absolute;
      top:0; left:0; right:0;
      height:44px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:10px 24px 0;
      font-size:12px;
      font-weight:700;
      color:#1a2f35;
      background:#ffffff;
      font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      z-index:20;
    }
    .screen.dark .status-bar{
      color:#e8edf0;
      background:#0b141a;
    }

    .view{
      position:absolute;
      top:44px; right:0; bottom:0; left:0;
      opacity:0;
      pointer-events:none;
      transform:translateX(18px);
      transition:opacity .24s ease, transform .24s ease;
      background:#f1f3f4;
    }

    .view.active{
      opacity:1;
      pointer-events:auto;
      transform:translateX(0);
    }

    .topbar{
      height:62px;
      background:#128c7e;
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 16px;
      font-weight:700;
      font-size:18px;
      box-shadow:0 1px 3px rgba(0,0,0,.08);
    }

    .topbar .sub{
      display:block;
      font-size:12px;
      font-weight:600;
      opacity:.92;
      margin-top:2px;
    }

    .body-scroll{
      height:calc(100% - 74px);
      overflow:auto;
      position:relative;
    }

    .search{
      margin:14px 16px;
      background:#e7eaed;
      border-radius:18px;
      height:52px;
      display:flex;
      align-items:center;
      padding:0 16px;
      color:#88949b;
      gap:10px;
      font-size:15px;
      cursor:text;
    }

    .search-input{
      flex:1;
      min-width:0;
      border:none;
      background:transparent;
      outline:none;
      font-family:inherit;
      font-size:15px;
      color:#334;
    }

    .home-brand{
      height:62px;
      background:#ffffff;
      border-bottom:1px solid #e9edef;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:0 16px 0 20px;
      color:#111b21;
    }

    .home-brand .logo{
      font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      font-size:24px;
      color:#128c7e;
      letter-spacing:-0.01em;
      font-weight:700;
    }

    .summary{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px;
      margin:0 16px 12px;
    }

    .sum-card{
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      padding:14px;
      display:flex;
      align-items:center;
      gap:10px;
      box-shadow:0 8px 18px rgba(0,0,0,.04);
    }

    .icon-round{
      width:40px;height:40px;border-radius:50%;
      display:grid;place-items:center;
      color:#fff;font-weight:800;
      flex:0 0 auto;
    }

    .in{background:#10b68a}
    .out{background:#ef5d63}

    .sum-meta small{
      display:block;
      color:#70828a;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.14em;
      font-weight:800;
    }

    .sum-meta strong{
      display:block;
      font-size:15px;
      margin-top:4px;
    }

    .promo{
      margin:0 16px 14px;
      border-radius:22px;
      border:2px solid #2fd67f;
      color:#4a5f65;
      background:#fafffc;
      padding:14px 16px;
      line-height:1.45;
      font-size:14px;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:8px;
    }

    .promo-close{
      flex:0 0 auto;
      cursor:pointer;
      font-size:18px;
      color:#88a09a;
      line-height:1;
    }

    .list{
      display:grid;
      gap:12px;
      padding:0 16px 90px;
    }

    .chat{
      background:#fff;
      border:1px solid var(--line);
      border-radius:24px;
      padding:14px;
      display:grid;
      grid-template-columns:58px 1fr auto;
      gap:12px;
      align-items:center;
      box-shadow:0 10px 18px rgba(0,0,0,.04);
      cursor:pointer;
      transition:.18s ease;
    }

    .chat:hover{transform:translateY(-2px)}
    .avatar{
      width:58px;height:58px;border-radius:50%;
      display:grid;place-items:center;
      color:#fff;
      font-weight:800;
      font-size:28px;
      position:relative;
    }

    .avatar::after{
      content:attr(data-net);
      position:absolute;
      right:-2px;bottom:-2px;
      min-width:22px;height:22px;
      padding:0 4px;
      border-radius:999px;
      display:grid;place-items:center;
      font-size:10px;
      font-weight:800;
      color:#fff;
      background:#16b88e;
      border:2px solid #fff;
    }

    .c1{background:#e57e80}
    .c2{background:#d5df5c}
    .c3{background:#b3998d}
    .c4{background:#f1b54d}
    .c5{background:#69ace8}
    .c6{background:#9a74d7}
    .c7{background:#58c1bb}
    .c8{background:#8ec96a}

    .chat-name{
      font-size:16px;
      font-weight:800;
      line-height:1.12;
      margin-bottom:5px;
    }

    .chat-sub{
      font-weight:800;
      font-size:14px;
    }

    .sent{color:var(--danger)}
    .received{color:#0ea879}

    .chat-side{
      text-align:right;
      display:grid;
      gap:10px;
      justify-items:end;
    }

    .time{
      color:#7b8d95;
      font-size:13px;
    }

    .badge-row{
      display:flex;
      gap:8px;
      align-items:center;
    }

    .pill{
      border-radius:999px;
      padding:7px 10px;
      color:#fff;
      font-size:11px;
      font-weight:800;
      line-height:1;
    }

    .pill.mpesa{background:#0fa07f}
    .pill.equity{background:#f14f58}
    .pill.till{background:#9ea8af}
    .pill.airtel{background:#ef5a62}
    .pill.pochi{background:#9ca6af}
    .count{
      min-width:28px;height:28px;border-radius:50%;
      display:grid;place-items:center;
      background:#2dd66f;color:#fff;font-size:12px;font-weight:800;
    }

    .nav-bottom{
      position:absolute;
      left:0;right:0;bottom:0;
      height:78px;
      background:#fff;
      border-top:1px solid var(--line);
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      text-align:center;
      align-items:center;
      color:#7f8f95;
      font-size:13px;
      z-index:4;
    }

    .nav-bottom div{
      cursor:pointer;
      font-weight:600;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:4px;
    }

    .nav-bottom .nav-icon{
      font-size:22px;
    }

    .nav-bottom .active{
      color:#138d7b;
      font-weight:800;
    }

    .fab{
      position:absolute;
      right:18px;
      bottom:94px;
      width:66px;height:66px;border-radius:50%;
      background:linear-gradient(180deg,#31de86,#1fc96f);
      color:#fff;
      display:grid;place-items:center;
      font-size:40px;
      box-shadow:0 16px 24px rgba(31,201,111,.28);
      z-index:4;
      cursor:pointer;
      transition:.18s ease;
    }

    .fab:hover{transform:scale(1.06)}

    .chat-header{
      height:62px;
      background:#128c7e;
      color:#fff;
      display:flex;
      align-items:center;
      gap:12px;
      padding:0 16px;
      font-weight:700;
      box-shadow: 0 1px 3px rgba(0,0,0,.08);
    }

    .back{
      font-size:24px;
      cursor:pointer;
      transform: translateY(-2px);
      line-height: 1;
    }

    .chat-scroll{
      height:calc(100% - 62px);
      overflow:auto;
      background:#e5ded9;
      padding:14px 16px 90px;
      position:relative;
    }

    .insight{
      width:max-content;
      max-width:80%;
      margin:6px auto 18px;
      background:#f3e9b6;
      color:#7c7440;
      padding:14px 18px;
      border-radius:20px;
      text-align:center;
      box-shadow:0 8px 16px rgba(0,0,0,.04);
      cursor:pointer;
    }

    .insight strong{
      display:block;
      margin-top:4px;
      color:#1a8c79;
    }

    .date{
      font-size:14px;
      font-weight:800;
      margin:16px 0 10px;
      text-align:center;
      color:#7a8d94;
    }

    .bubble{
      max-width:75%;
      padding:6px 9px 8px 9px;
      border-radius:8px;
      margin-bottom:6px;
      box-shadow:0 1px 2px rgba(0,0,0,.1);
      font-size:15px;
      line-height:20px;
    }

    .bubble.in{
      background:#fff;
      margin-right:auto;
      border-top-left-radius:8px;
    }

    .bubble.out{
      background:#d3f6c8;
      margin-left:auto;
      border-top-right-radius:8px;
    }

    .amt{
      font-size:15px;
      font-weight:700;
      color:#198b7a;
      margin-bottom:2px;
    }

    .meta{
      font-size:11px;
      color:#667781;
    }

    .download-float{
      position:absolute;
      right:18px;
      bottom:18px;
      width:64px;height:64px;border-radius:50%;
      background:#fff;
      border:1px solid var(--line);
      display:grid;place-items:center;
      color:#138d7b;
      font-size:30px;
      box-shadow:0 14px 24px rgba(0,0,0,.08);
      z-index:3;
      cursor:pointer;
      text-decoration:none;
    }

    .reports-search-top{
      background:linear-gradient(180deg,var(--teal-2),var(--teal));
      color:#fff;
      padding:16px;
    }

    .progress-track, .bar, .member-bar{
      height:4px;
      border-radius:28px;
      background:#e9edef;
      margin-top:10px;
      overflow:hidden;
    }
    .screen.dark .progress-track, .screen.dark .bar, .screen.dark .member-bar{
      background:#2a3942;
    }

    .progress-fill, .bar span, .member-bar span{
      height:100%;
      background:#25d366;
      border-radius:inherit;
      display:block;
    }
    .screen.dark .progress-fill, .screen.dark .bar span, .screen.dark .member-bar span{
      background:#00a884;
    }

    .progress-fill{
      width:33%;
    }

    /* ── Report list cards ── */
    .tabs{
      display:flex;
      gap:8px;
      padding:12px 16px;
    }

    .tab{
      border-radius:999px;
      padding:10px 16px;
      background:#fff;
      border:1px solid var(--line);
      color:#7a8a90;
      font-weight:700;
      cursor:pointer;
      font-family:inherit;
      font-size:13px;
    }

    .tab.active{
      background:linear-gradient(180deg,var(--teal-2),var(--teal));
      border-color:transparent;
      color:#fff;
    }

    .report-list{
      display:grid;
      gap:12px;
      padding:0 14px 90px;
    }

    .report-item{
      background:#fff;
      border:1px solid var(--line);
      border-radius:20px;
      padding:14px;
      box-shadow:0 6px 16px rgba(0,0,0,.04);
      cursor:pointer;
      transition:.18s ease;
    }

    .report-item:hover{transform:translateY(-2px)}

    .report-item-head{
      display:grid;
      grid-template-columns:50px 1fr auto;
      gap:12px;
      align-items:flex-start;
    }

    .report-avatar{
      width:50px;height:50px;border-radius:50%;
      display:grid;place-items:center;
      color:#fff;font-size:22px;font-weight:800;
      flex:0 0 auto;
    }

    .report-item-meta{line-height:1}
    .report-item-name{
      font-size:15px;font-weight:800;margin-bottom:5px;color:#1a2f35;
    }
    .report-item-line{
      display:flex;align-items:center;gap:5px;
      color:#74858c;font-size:12.5px;margin-bottom:3px;
    }
    .report-item-line svg{flex:0 0 auto}

    .report-item-right{
      display:flex;flex-direction:column;align-items:flex-end;gap:6px;
    }

    .status-active{
      display:inline-flex;align-items:center;gap:5px;
      padding:4px 9px;
      border-radius:999px;
      background:rgba(18,140,126,.12);
      color:#128c7e;
      font-size:11px;
      font-weight:700;
    }

    .status-tracking{
      display:inline-flex;align-items:center;gap:5px;
      padding:4px 9px;
      border-radius:999px;
      background:#f3f5f6;
      color:#667781;
      font-size:11px;
      font-weight:700;
    }

    .report-member-count{
      display:flex;align-items:center;gap:4px;
      color:#7a8e95;font-size:12px;font-weight:700;
    }

    /* .bar replaced by unified progress styles */

    .bar-row{
      display:flex;align-items:center;justify-content:flex-end;
      margin-top:5px;
    }

    .bar-pct{
      font-size:12px;font-weight:800;color:#138d7b;
    }

    /* ── Report detail ── */
    .report-card-lg{
      margin:12px;
      background:#fff;
      border:1px solid #e9edef;
      border-radius:16px;
      padding:18px;
      box-shadow:0 2px 6px rgba(0,0,0,.04);
    }

    .report-flex{
      display:flex;
      gap:18px;
      align-items:center;
    }

    .ring-wrap{
      position:relative;
      width:90px;height:90px;
      flex:0 0 auto;
    }
    .ring-svg{
      position:absolute;inset:0;
      width:90px;height:90px;
      transform:rotate(-90deg);
    }
    .ring-svg circle{
      fill:none;
      stroke-linecap:round;
    }
    .ring-track{stroke:#e9edef;stroke-width:4}
    .ring-fill{stroke:#25d366;stroke-width:4}
    .ring-label{
      position:absolute;
      inset:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      font-weight:800;
      color:#128c7e;
      font-size:16px;
      line-height:1.1;
    }
    .ring-label span{
      display:block;
      font-size:9px;
      font-weight:600;
      color:#667781;
    }

    .report-stats{
      flex:1;
      display:grid;
      gap:10px;
    }

    .big-money{
      font-size:22px;
      font-weight:800;
      color:#00a884;
    }

    .report-mini{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
      padding-top:10px;
      margin-top:10px;
      border-top:1px solid #e9edef;
    }

    .report-mini span{
      display:block;
      color:#667781;
      font-size:9px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.08em;
    }

    .report-mini strong{
      display:block;
      margin-top:1px;
      font-size:16px;
      color:#111b21;
    }

    .copy-btn{
      margin-top:12px;
      width:100%;
      height:48px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fafbfb;
      color:#687a81;
      font-weight:800;
      font-size:13px;
      cursor:pointer;
      font-family:inherit;
      transition:.18s ease;
    }

    .copy-btn:hover{background:#f0f4f4}

    /* ── Members section ── */
    .section-label{
      padding:0 14px;
      color:#718189;
      font-size:11px;
      font-weight:800;
      letter-spacing:.16em;
      text-transform:uppercase;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .section-head-full{
      display:flex;align-items:center;gap:7px;
      padding:14px 14px 8px;
    }

    .section-head-full .sh-label{
      font-size:11px;font-weight:800;letter-spacing:.12em;
      text-transform:uppercase;flex:1;color:#4a5d62;
    }

    .sh-count{
      min-width:24px;height:24px;border-radius:50%;
      display:grid;place-items:center;
      font-size:11px;font-weight:800;color:#fff;
    }

    .sh-count-green{background:#2fd46d}
    .sh-count-orange{background:#f5a623}

    .member-card{
      margin:0 14px 8px;
      background:#fff;
      border:1px solid #e9edef;
      border-radius:14px;
      padding:14px 14px 12px;
      box-shadow:0 2px 6px rgba(0,0,0,.04);
    }

    /* empty-state shown when report has 0 members */
    .empty-state{
      text-align:center;
      padding:40px 20px 20px;
    }
    .empty-state .es-icon{
      width:88px;height:88px;border-radius:50%;
      background:#e8f5f3;
      display:grid;place-items:center;
      margin:0 auto 20px;
    }
    .empty-state .es-icon svg{stroke:#128c7e}
    .empty-state .es-title{
      font-size:20px;font-weight:800;color:#111b21;
      margin-bottom:8px;
    }
    .empty-state .es-sub{
      font-size:14px;color:#667781;line-height:1.5;
      max-width:280px;margin:0 auto 24px;
    }
    .how-add-bar{
      padding:14px 14px 12px;
      color:#667781;font-size:11px;font-weight:800;
      letter-spacing:.10em;text-transform:uppercase;
    }
    .how-card{
      margin:0 14px 8px;
      background:#f0faf8;
      border:1px solid #d1d9db;
      border-radius:12px;
      padding:13px 14px;
      display:flex;align-items:center;gap:12px;
      cursor:pointer;
      transition:.18s ease;
    }
    .how-card:hover{transform:translateY(-1px)}
    .how-card .hc-icon{
      width:36px;height:36px;border-radius:50%;
      display:grid;place-items:center;
      flex:0 0 auto;
      font-size:18px;
      background:#e8f5f3;
      color:#128c7e;
    }
    .how-card .hc-title{font-size:14px;font-weight:800;color:#111b21;margin-bottom:2px}
    .how-card .hc-sub{font-size:12px;color:#667781}

    .member-card-row{
      display:grid;
      grid-template-columns:52px 1fr auto;
      gap:10px;
      align-items:flex-start;
    }

    .member-av-wrap{
      position:relative;
      width:52px;height:52px;
    }

    .member-av-ring{
      position:absolute;inset:0;border-radius:50%;
    }

    .member-av{
      position:absolute;
      inset:5px;
      border-radius:50%;
      display:grid;place-items:center;
      color:#fff;font-size:20px;font-weight:800;
    }

    .member-name{
      font-size:15px;font-weight:700;color:#111b21;
      margin-bottom:5px;line-height:1.1;
      max-lines:1;
    }

    .pay-chips{
      display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px;
    }

    .pay-chip{
      display:inline-flex;align-items:center;gap:4px;
      padding:4px 8px;
      border-radius:999px;
      font-size:11px;font-weight:800;
    }

    .pay-chip-mpesa{background:#e8f5f3;color:#128c7e}
    .pay-chip-cash{background:#e8f5f3;color:#128c7e}

    .needs-more{
      font-size:11px;color:#f44336;font-weight:700;
      margin-top:4px;
    }

    .member-amount{
      font-size:16px;font-weight:800;color:#00a884;
      white-space:nowrap;
    }

    .paid-badge{
      display:inline-block;
      padding:3px 10px;
      border-radius:999px;
      background:rgba(37,211,102,.12);
      border:1px solid #25d366;
      color:#25d366;
      font-size:10px;font-weight:800;
      letter-spacing:.06em;
      margin-top:5px;
    }

    /* .member-bar replaced by unified progress styles */

    /* ── Members area section label with sort ── */
    .members-section-bar{
      display:flex;align-items:center;justify-content:space-between;
      padding:10px 14px 8px;
    }

    .members-section-bar .ms-title{
      display:flex;align-items:center;gap:6px;
      color:#718189;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    }

    .sort-btn{
      background:#fff;
      border:1px solid var(--line);
      border-radius:999px;
      padding:7px 12px;
      font-size:11px;font-weight:700;
      color:#5a7080;
      cursor:pointer;
      font-family:inherit;
      display:flex;align-items:center;gap:4px;
    }

    .menu{
      position:absolute;
      top:74px;
      right:0;
      width:220px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:0 0 18px 18px;
      box-shadow:0 20px 40px rgba(0,0,0,.12);
      z-index:6;
      display:none;
      overflow:hidden;
    }

    .menu.show{display:block}

    .menu button{
      width:100%;
      border:none;
      background:#fff;
      text-align:left;
      padding:18px 20px;
      font-size:16px;
      color:#1f2d31;
      cursor:pointer;
      font-family:inherit;
      font-weight:600;
      border-bottom:1px solid #f0f3f4;
      display:flex;
      align-items:center;
      gap:10px;
    }

    .menu button:last-child{border-bottom:none}
    .menu button:hover{background:#f7f9fa}

    .guide{
      padding:22px;
    }

    .guide h2{
      margin:0 0 10px;
      font-family:"Space Grotesk",sans-serif;
      font-size:32px;
      letter-spacing:-.05em;
    }

    .guide p{
      margin:0 0 18px;
      color:var(--muted);
      line-height:1.65;
    }

    .steps{
      display:grid;
      gap:12px;
    }

    .step{
      padding:16px;
      border-radius:20px;
      background:#f8fbfa;
      border:1px solid var(--line);
    }

    .step strong{
      display:block;
      margin-bottom:4px;
    }

    .path{
      margin-top:18px;
      padding:16px;
      border-radius:20px;
      background:#eef8f5;
      border:1px solid #d7eee5;
      color:#1f6d61;
      font-weight:700;
      line-height:1.6;
    }

    .hidden{display:none !important}