/* NjangiPlus web — Cameroon palette, mobile-first */
:root{
  --green:#007A3D; --green-dark:#005C2E; --green-deep:#04331A; --red:#CE1126; --yellow:#FCD116;
  --gold-deep:#D4AF37;
  --ink:#14231A; --muted:#6B7268; --line:#EFE6D4; --bg:#FBF5EA; --card:#FFFDF8;
  --paid:#0a7d42; --pending:#b07d10; --overdue:#c81e1e; --partial:#2563eb; --disputed:#7c3aed;
  --radius:18px; --shadow:0 2px 6px rgba(58,46,0,.07),0 10px 28px rgba(58,46,0,.08);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.5}
a{color:var(--green);font-weight:600;text-decoration:none}
a:hover{text-decoration:underline}
.hidden{display:none!important}
.muted{color:var(--muted)}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit}

/* Header */
#topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--card);border-bottom:3px solid var(--gold-deep);padding:8px 14px;box-shadow:0 1px 6px rgba(58,46,0,.06)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand:hover{text-decoration:none}
.brand-badge{width:42px;height:42px;border-radius:10px}
.wordmark,.hero-wordmark{font-weight:800;letter-spacing:-.5px;position:relative}
.wordmark{font-size:24px}
.wm-green{color:var(--green)} .wm-red{color:var(--red)}
.wm-yellow{color:var(--yellow);text-shadow:0 0 2px rgba(120,90,0,.55),0 1px 1px rgba(120,90,0,.35)}
.wm-star{color:#d4af37;font-size:.62em;vertical-align:super;margin-left:2px;text-shadow:none}
#mainnav{display:flex;gap:14px;align-items:center;margin-inline-start:8px}
.nav-link{color:var(--ink);font-weight:600}
.notif-badge{background:var(--red);color:#fff;border-radius:999px;font-size:12px;font-weight:700;padding:1px 7px;margin-inline-start:-8px}
.top-actions{margin-inline-start:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lang-toggle{display:flex;border:1.5px solid var(--green);border-radius:999px;overflow:hidden}
.lang-toggle button{border:0;background:#fff;color:var(--green);font-weight:700;padding:4px 12px}
.lang-toggle button.active{background:var(--green);color:#fff}
.user-chip{font-weight:600;color:var(--muted);font-size:14px}

/* Buttons & forms */
.btn{background:var(--green);color:#fff;border:0;border-radius:13px;padding:11px 19px;font-weight:700;box-shadow:0 3px 10px rgba(0,90,50,.28)}
.btn:hover{background:var(--green-dark)}
.btn-ghost{background:#fff;color:var(--green);border:1.5px solid var(--green);box-shadow:none}
.btn-small{padding:6px 12px;font-size:14px}
.btn-big{padding:13px 22px;font-size:17px}
.btn-block{width:100%;margin-top:8px}
.btn[disabled]{opacity:.6;cursor:wait}
.form label{display:block;font-weight:600;font-size:14px;margin:10px 0}
.form input,.form select,.form textarea{width:100%;margin-top:4px;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:#fff;font-weight:400}
.form input:focus,.form select:focus{outline:2px solid var(--green);border-color:var(--green)}
.form-error{color:var(--red);font-weight:600;font-size:14px}
.form.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.form .span2{grid-column:span 2}
.form-actions{display:flex;gap:10px;margin-top:8px}
.inline-form{display:flex;gap:10px}
.inline-form input{flex:1;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px}
@media (max-width:640px){.form.grid2{grid-template-columns:1fr}.form .span2{grid-column:span 1}}

/* Layout */
main{max-width:1060px;margin:0 auto;padding:18px 14px 40px}
.view{animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);margin:14px 0}
.card h3{margin-top:0}
.page-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.page-head h2{margin:6px 0}
.section-title{text-align:center;margin:34px 0 4px}
.section-sub{text-align:center;color:var(--muted);margin:0 auto 10px;max-width:640px}
.back-link{font-size:15px}

/* Hero — deep-green command panel, gold-ringed badge, Toghu strip */
.hero{text-align:center;padding:42px 18px 26px;margin-top:4px;color:#fff;border-radius:26px;overflow:hidden;
  background:linear-gradient(155deg,#0A5A30 0%,var(--green-deep) 62%,#032412 100%);
  box-shadow:0 16px 36px rgba(4,51,26,.35)}
.hero-badge{width:150px;height:150px;border-radius:34px;border:3px solid var(--gold-deep);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.hero-wordmark{font-size:52px;margin:12px 0 2px}
.hero .wm-green{color:#3ED598}
.hero-tag{font-size:21px;font-weight:800;margin:4px 0;color:#fff}
.hero-sub{color:#CFE8D8;max-width:620px;margin:8px auto}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:18px 0 12px}
.hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.hero .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.never{display:inline-block;background:rgba(252,209,22,.14);border:1px solid rgba(252,209,22,.55);color:#FFE97A;border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px}
.toghu{height:10px;border-radius:99px;margin:20px auto 2px;max-width:560px;opacity:.92;
  background:repeating-conic-gradient(from 45deg,var(--green) 0 25%,var(--red) 0 50%,var(--gold-deep) 0 75%,var(--green) 0 100%);
  background-size:15px 15px}
.summary-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:20px 0 4px}
.sum-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);text-align:center}
.sum-n{font-size:26px;font-weight:900;color:var(--green)}
.sum-item:nth-child(2) .sum-n{color:var(--gold-deep)} .sum-item:nth-child(3) .sum-n{color:var(--red)}
.sum-l{color:var(--muted);font-size:13.5px;margin-top:2px}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:26px 0 6px}
.feature{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.feature-ico{font-size:26px;width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:#E6F4EC}
.feature:nth-child(2) .feature-ico{background:#FFF6D8}
.feature:nth-child(3) .feature-ico{background:#FDECEC}
.feature:nth-child(4) .feature-ico{background:#E6F4EC}
.feature h3{margin:10px 0 4px;font-size:17px}
.feature p{margin:0;color:var(--muted);font-size:14px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:14px 0}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.plan.hot{border:2px solid var(--gold-deep);box-shadow:0 12px 30px rgba(212,175,55,.22)}
.plan h3{margin:0 0 2px}
.plan .price{font-size:20px;font-weight:800;color:var(--green);margin:4px 0 10px}
.plan ul{margin:0;padding-inline-start:18px;color:var(--muted);font-size:14px}
.plan-note{text-align:center;color:var(--muted);font-size:14px;max-width:680px;margin:6px auto}

/* Auth */
.auth-card{max-width:440px;margin:26px auto}
.tabs{display:flex;gap:8px;margin-bottom:8px}
.tab{flex:1;padding:10px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font-weight:700;color:var(--muted)}
.tab.active{background:var(--green);border-color:var(--green);color:#fff}

/* Groups */
.group-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:14px}
.group-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.group-card:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 6px 14px rgba(58,46,0,.10),0 16px 34px rgba(58,46,0,.12)}
.group-card h3{margin:0 0 4px}
.group-meta{color:var(--muted);font-size:14px}
.chip{display:inline-block;border-radius:999px;padding:1px 10px;font-size:12px;font-weight:700;vertical-align:middle}
.chip-plan{background:#e7f4ec;color:var(--green-dark);text-transform:capitalize}
.chip-role{background:#eef2ff;color:#3730a3;text-transform:capitalize}
.chip-paid{background:#e2f4e8;color:var(--paid)} .chip-pending{background:#fdf0d3;color:var(--pending)}
.chip-overdue{background:#fde3e3;color:var(--overdue)} .chip-partial{background:#e0ebff;color:var(--partial)}
.chip-disputed{background:#efe7fd;color:var(--disputed)} .chip-scheduled{background:#eef0ee;color:#445}
.chip-approved{background:#e2f4e8;color:var(--paid)} .chip-delayed{background:#fde3e3;color:var(--overdue)}
.pot{font-size:18px;font-weight:800;color:var(--green)}

/* Group detail */
.gd-head{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.gd-head h2{margin:0}
.gd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 15px;box-shadow:var(--shadow)}
.stat .k{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.stat .v{font-size:20px;font-weight:800}
.stat .v.green{color:var(--green)} .stat .v.red{color:var(--red)}
.gtabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 6px}
.gtab{border:1.5px solid var(--line);background:var(--card);padding:8px 16px;font-weight:700;color:var(--muted);border-radius:999px}
.gtab.active{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 3px 10px rgba(0,90,50,.25)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th,table.tbl td{padding:8px 8px;border-bottom:1px solid var(--line);text-align:start;vertical-align:top}
table.tbl th{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.tbl-wrap{overflow-x:auto}
.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.row-actions select,.row-actions input{padding:6px 8px;border:1.5px solid var(--line);border-radius:8px}
.row-actions input[type=number]{width:110px}
.mini{font-size:12px;padding:5px 10px;border-radius:8px}
.history{font-size:13px;color:var(--muted);background:#fafcfa;border:1px dashed var(--line);border-radius:8px;padding:8px 10px;margin-top:6px}
details.contrib{border-bottom:1px solid var(--line);padding:10px 2px}
details.contrib summary{cursor:pointer;list-style:none}
details.contrib summary::-webkit-details-marker{display:none}
.contrib-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.contrib-line .grow{flex:1;min-width:140px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0}
.toolbar select{padding:8px 10px;border:1.5px solid var(--line);border-radius:10px}

/* Notifications */
.notif{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:13px 17px;margin:10px 0;box-shadow:var(--shadow);cursor:pointer}
.notif.unread{border-inline-start:5px solid var(--green)}
.notif h4{margin:0 0 2px;font-size:15px}
.notif p{margin:0;color:var(--muted);font-size:14px}
.notif .when{font-size:12px;color:var(--muted)}

/* Toast */
.toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:80;background:var(--ink);color:#fff;
  padding:10px 18px;border-radius:10px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.25);max-width:92vw;text-align:center}
.toast.err{background:var(--red)}

/* Chat */
#chat-fab{position:fixed;bottom:18px;inset-inline-end:18px;z-index:60;background:var(--green);color:#fff;border:0;
  border-radius:999px;padding:12px 18px;font-weight:700;box-shadow:0 6px 20px rgba(0,90,50,.35)}
#chat-panel{position:fixed;bottom:76px;inset-inline-end:14px;z-index:60;width:min(380px,94vw);height:min(540px,72vh);
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.22);display:flex;flex-direction:column;overflow:hidden}
.chat-head{background:var(--green);color:#fff;padding:12px 14px;display:flex;justify-content:space-between;align-items:center}
.chat-head button{background:transparent;border:0;color:#fff;font-size:16px}
.chat-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#fbfdfb}
.msg{max-width:85%;padding:9px 12px;border-radius:14px;font-size:14px;white-space:pre-wrap;word-break:break-word}
.msg.jerry{background:#e7f4ec;align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:var(--green);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 10px 0}
.chipq{border:1.5px solid var(--green);color:var(--green);background:#fff;border-radius:999px;padding:4px 10px;font-size:13px;font-weight:600}
.chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.chat-form input{flex:1;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px}

/* Mystery-box draw */
.btn-draw-cancel{background:var(--red)}
.btn-draw-cancel:hover{background:#a50d1f}
.box-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:12px}
.mbox{border-radius:18px;padding:16px 8px;text-align:center;border:2px solid var(--line);background:#fff;font-family:inherit;box-shadow:0 3px 10px rgba(58,46,0,.08)}
.mbox.sealed{background:linear-gradient(150deg,var(--green) 0%,#005c2d 70%);color:#fff;border-color:#005c2d}
button.mbox.sealed{cursor:pointer}
button.mbox.sealed:hover{filter:brightness(1.12)}
.mbox.sealed:disabled{opacity:.55;cursor:default}
.mbox-q{font-size:34px;font-weight:900;line-height:1;color:var(--yellow)}
.mbox.flipped{background:#fffbe8;border-color:var(--yellow)}
.mbox.flipped.mine{border-color:#d4af37;box-shadow:0 0 0 3px rgba(212,175,55,.35)}
.mbox-num{font-size:30px;font-weight:900;color:var(--green);line-height:1.05}
.mbox-name{font-size:12px;font-weight:700;margin-top:4px;word-break:break-word}
.mbox-box{font-size:11px;color:var(--muted);margin-top:2px}
.mbox.sealed .mbox-box{color:#d9ecdf}
.seal-card code,.hash-full{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;word-break:break-all}
.tbl tr.hl td{background:#fffbe8}
.chip-accepted{background:#e2f4e8;color:var(--paid)} .chip-revoked{background:#fde3e3;color:var(--overdue)}
.chip-expired{background:#eef0ee;color:#445}

footer{text-align:center;padding:26px 14px 90px;color:var(--muted);border-top:1px solid var(--line);background:#fff;margin-top:10px}
.foot-badge{width:44px;height:44px;border-radius:10px}
footer p{margin:6px 0}

/* Route A — gold action button (pay / send payout) */
.btn-gold{background:#FCD116;color:#3A2E00;box-shadow:0 3px 10px rgba(160,120,0,.25)}
.btn-gold:hover{background:#e9c213}
.pay-box label{display:block;margin:6px 0;font-size:13px}
.pay-box input[type=tel],.pay-box select{padding:6px 8px;border:1.5px solid var(--line);border-radius:8px}