/* Nzura Harusi page styles — moved out of harusi/index.html (2026-10-05) so
 * the page HTML stays small and this file is cached between launches.
 * Change it, then bump its ?v= in index.html:
 *   node infra/scripts/page-assets-bump.cjs
 * (apps/web/page-assets-version.test.cjs fails until you do). */
  /* Startup splash (see <body>): logo, name, spinner — never a blank window. */
  #nzura-boot.h-boot{flex-direction:column;gap:.7rem;background:#F6F3EF}
  html.dark #nzura-boot.h-boot{background:#0f1115}
  #nzura-boot .h-boot-logo{border-radius:14px}
  #nzura-boot .h-boot-name{font:700 1rem/1.2 system-ui,-apple-system,'Segoe UI',sans-serif;letter-spacing:.02em;color:#1E2A52}
  html.dark #nzura-boot .h-boot-name{color:#e8e6e3}
  #nzura-boot .nzura-boot-spinner{margin-top:.35rem}

  /* V2 sidebar: Harusi sections live in the left rail — hide redundant tab strip on desktop */
  html[data-sidebar-v2] .h-tabs{display:none !important}
  @media(max-width:760px){
    /* Keep mobile bottom nav; sidebar drawer still available via ☰ */
    html[data-sidebar-v2] .h-bottom-nav{display:flex}
  }

  /* POS-parity layout: mobile-first cards, sticky tab strip, labelled table cards */
  :root{--h-primary:var(--accent,var(--brand-red,#c45c4a));--h-green:#15996b;--h-amber:#d97706;--h-red:#d9434a;--h-blue:#2563eb;
    /* Tints derived from the token so they follow light/dark instead of being baked in */
    --h-primary-soft:color-mix(in srgb,var(--h-primary) 12%,transparent);
    --h-primary-softer:color-mix(in srgb,var(--h-primary) 7%,transparent)}
  [data-theme="dark"]{--h-green:#2ee89a;--h-amber:#f0b542;--h-red:#ff6b72;--h-blue:#5ea3ff}
  .page-content.h-page{padding:1rem 1.1rem 5.5rem}
  .h-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
  .h-hero h1{margin:0;font-size:clamp(1.35rem,1.1rem + 1.2vw,1.65rem);color:var(--text-primary);font-weight:750}
  .h-hero p{margin:.35rem 0 0;color:var(--text-muted);font-size:.88rem;line-height:1.45;max-width:36rem}
  .h-actions{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
  .h-actions .btn{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;white-space:nowrap}
  .h-lang{border:1px solid var(--panel-border);background:var(--panel-bg);border-radius:9px;padding:.52rem .72rem;font-size:.78rem;font-weight:700;cursor:pointer;min-height:38px}
  .h-install{position:relative}
  .h-install>summary{list-style:none;cursor:pointer}
  .h-install>summary::-webkit-details-marker{display:none}
  .h-install-options{position:absolute;z-index:30;right:0;top:calc(100% + .4rem);min-width:220px;padding:.4rem;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:11px;box-shadow:var(--panel-shadow-lg,0 14px 35px rgba(15,23,42,.16))}
  .h-install-options a,
  .h-install-options button{display:block;padding:.68rem .75rem;border-radius:8px;color:var(--text-primary);text-decoration:none;font-size:.8rem;font-weight:600;font-family:inherit}
  .h-install-options a:hover,
  .h-install-options button:hover{background:var(--page-bg)}
  .h-install-options span{display:block;color:var(--text-muted);font-size:.68rem;font-weight:400;margin-top:.12rem}
  .h-event-bar{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center;margin-bottom:.85rem}
  .h-event-select{flex:1;min-width:0;max-width:100%;border:1px solid var(--panel-border);border-radius:9px;padding:.52rem .72rem;background:var(--panel-bg);color:var(--text-primary);font:inherit;font-size:.82rem;font-weight:600;box-shadow:var(--panel-shadow);min-height:44px}
  /* Suite KPI grid — same shell as Accounting / Ads Manager (.kpi-pro in app.css) */
  .h-kpis, .h-page .kpi-grid{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin-bottom:1rem;min-width:0
  }
  .h-kpis:empty, .h-page .kpi-grid:empty{display:none;margin:0}
  /* Fallback when app-shell suite styles are not applied (rare) */
  .h-page .kpi-pro{
    background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;
    padding:.85rem .9rem;min-height:118px;display:flex;flex-direction:column;gap:4px;
    position:relative;overflow:hidden;min-width:0
  }
  .h-page .kpi-pro .kpi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.5rem}
  .h-page .kpi-pro .kpi-label{
    font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);line-height:1.3
  }
  .h-page .kpi-pro .kpi-icon{
    width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
    background:transparent;color:var(--text-muted)
  }
  .h-page .kpi-pro .kpi-icon.pos{background:rgba(34,179,120,.12);color:#15996b}
  .h-page .kpi-pro .kpi-icon.accent{background:color-mix(in srgb,var(--h-primary) 14%,transparent);color:var(--h-primary)}
  .h-page .kpi-pro .kpi-icon.warn{background:rgba(217,119,6,.12);color:#d97706}
  .h-page .kpi-pro .kpi-icon.info{background:rgba(37,99,235,.12);color:#2563eb}
  .h-page .kpi-pro .kpi-icon.neg{background:rgba(239,68,68,.12);color:#dc2626}
  .h-page .kpi-pro .kpi-icon svg{display:block}
  .h-page .kpi-pro .kpi-value{
    font-size:clamp(1.05rem,.7rem + 1.1vw,1.45rem);font-weight:700;color:var(--text-primary);
    letter-spacing:-.025em;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:2px
  }
  .h-page .kpi-pro .kpi-meta{
    margin-top:auto;padding-top:.55rem;font-size:.72rem;font-weight:600;color:var(--text-muted);
    display:flex;justify-content:space-between;align-items:center;gap:.35rem;flex-wrap:wrap
  }
  .h-page .kpi-pro .kpi-delta{
    font-size:.68rem;font-weight:700;padding:.12rem .45rem;border-radius:999px;
    background:rgba(34,179,120,.12);color:#15996b
  }
  .h-page .kpi-pro .kpi-delta.muted{background:rgba(27,46,90,.07);color:var(--text-muted)}
  /* Breakdown rows inside a card ("Familia · Wanakamati · Waalikwa", "Double ·
     Single · Chini · Bado"): label left, figure right, one row each. */
  .h-page .kpi-pro .kpi-lines{display:grid;gap:3px;margin-top:.4rem;font-size:.72rem;line-height:1.3}
  .h-page .kpi-pro .kpi-line{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
    color:var(--text-muted);font-weight:600;min-width:0}
  .h-page .kpi-pro .kpi-line>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .h-page .kpi-pro .kpi-line>b{color:var(--text-primary);font-weight:700;font-variant-numeric:tabular-nums;
    white-space:nowrap;flex:0 0 auto}
  .h-page .kpi-pro .kpi-line i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:.35rem;
    vertical-align:middle;background:var(--text-muted)}
  .h-page .kpi-pro .kpi-line i.pos{background:#15996b}
  .h-page .kpi-pro .kpi-line i.info{background:#2563eb}
  .h-page .kpi-pro .kpi-line i.warn{background:#d97706}
  .h-page .kpi-pro .kpi-line i.accent{background:var(--h-primary)}
  .h-page .kpi-pro .kpi-line i.muted{background:var(--panel-border)}
  /* ── Entrance cards (Mialiko) ─────────────────────────────────────────── */
  .h-card-badge{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.06em;padding:.16rem .5rem;border-radius:999px;white-space:nowrap}
  .h-card-badge.dbl{background:var(--h-primary);color:#fff}
  .h-card-badge.sgl{background:var(--h-primary-soft);color:var(--h-primary)}
  .h-card-badge.none{background:var(--page-bg);color:var(--text-muted);border:1px solid var(--panel-border)}
  .h-card-badge.fam{background:#7c3aed;color:#fff}
  .hfk{padding:.75rem 1rem 0}
  .hfk-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;margin-bottom:.5rem}
  .hfk-head b{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
  .hfk-add{display:flex;gap:.4rem;flex-wrap:wrap}
  .hfk-add .btn{min-height:34px;padding:.3rem .7rem;font-size:.8rem}
  .hfk-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.5rem}
  .hfk-tile{border:1px solid var(--panel-border);border-left:4px solid #7c3aed;border-radius:10px;padding:.6rem .7rem;display:flex;flex-direction:column;gap:.3rem;min-width:0;cursor:pointer}
  .hfk-tile .nm{font-weight:800;font-size:.9rem;overflow-wrap:anywhere}
  .hfk-tile .ln{font-size:.76rem;color:var(--text-muted);display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
  .hfk-meter{height:6px;border-radius:999px;background:var(--page-bg);overflow:hidden;border:1px solid var(--panel-border)}
  .hfk-meter > span{display:block;height:100%;background:#7c3aed !important}
  .hfk-tile .acts{display:flex;gap:.35rem;justify-content:flex-end;flex-wrap:wrap}
  .hfk-tile .acts .btn{min-height:30px;padding:.2rem .6rem;font-size:.76rem}
  .hfk-empty{font-size:.78rem;color:var(--text-muted);padding:.2rem 0 .3rem}
  .h-card-no{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.74rem;letter-spacing:.04em;color:var(--text-muted);margin-top:.2rem}
  .h-card-no.big{font-size:1rem;color:var(--text-primary);font-weight:700}
  .h-card-fail{color:#dc2626;font-weight:600}
  .h-sub{font-size:.7rem;color:var(--text-muted)}
  .h-card-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;padding:.75rem 1rem 0}
  .h-card-stat{border:1px solid var(--panel-border);border-radius:10px;padding:.5rem .65rem;display:flex;flex-direction:column;gap:1px;min-width:0}
  .h-card-stat span{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
  .h-card-stat b{font-size:1.05rem;font-variant-numeric:tabular-nums}
  .h-card-stat i{font-style:normal;font-size:.68rem;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .h-card-auto{padding:.45rem 1rem 0;font-size:.72rem;color:var(--text-muted)}
  /* Names are stored in CAPS (server names.ts) — show them that way while typing. */
  #gName, #gCompName, #ceComp, #ceHonCustom, #setFamilyName, #fcLabel, #fcHolder{text-transform:uppercase}
  .h-att-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .6rem}
  .h-att-chips .btn{min-height:34px;padding:.3rem .7rem;font-size:.8rem}
  .h-att-wrap{max-height:52vh;overflow:auto;border:1px solid var(--panel-border);border-radius:10px}
  @media(max-width:600px){.h-card-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
  .h-cv{border:1px solid var(--panel-border);border-radius:12px;padding:.8rem .9rem;margin:.2rem 0 .6rem}
  .h-cv-name{font-size:1.15rem;font-weight:700}
  .h-cv-body{display:flex;gap:.8rem;align-items:flex-start;margin-top:.55rem}
  .h-cv-rows{flex:1;min-width:0;display:grid;gap:.3rem}
  .h-cv-row{display:flex;justify-content:space-between;gap:.6rem;font-size:.78rem;color:var(--text-muted)}
  .h-cv-row b{color:var(--text-primary);font-weight:600;text-align:right;min-width:0;overflow-wrap:anywhere}
  .h-card-qr{width:132px;height:132px;flex:0 0 auto;border-radius:6px;background:#fff;padding:4px;border:1px solid var(--panel-border)}
  @media(max-width:480px){.h-cv-body{flex-direction:column;align-items:center}.h-cv-rows{width:100%}.h-card-qr{width:180px;height:180px}}
  /* Gate: full-screen scanner over everything. */
  .hg-overlay{position:fixed;inset:0;z-index:4000;background:#0b0f14;color:#fff;display:flex;flex-direction:column}
  .hg-top{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;padding-top:max(.6rem,env(safe-area-inset-top))}
  .hg-top b{font-size:.95rem}
  .hg-x,.hg-torch{all:unset;cursor:pointer;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);font-size:1rem}
  .hg-torch{margin-left:auto}
  .hg-torch[hidden]{display:none}  /* all:unset above also drops the UA [hidden] rule */
  .hg-net{font-size:.7rem;padding:.15rem .5rem;border-radius:999px;background:rgba(255,255,255,.12)}
  .hg-net.off{background:#b45309}
  .hg-net.on{background:rgba(34,179,120,.35)}
  .hg-stage{flex:1;min-height:0;position:relative}
  /* Camera off until asked for (battery): a big "Changanua QR" button in its place. */
  .hg-idle{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:1.2rem;text-align:center}
  .hg-idle p{margin:0;max-width:22rem;font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.75)}
  .hg-cam-btn{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;width:9.5rem;height:9.5rem;border-radius:50%;background:#16a34a;color:#fff;font-weight:800;font-size:1rem;box-shadow:0 0 0 6px rgba(22,163,74,.25)}
  .hg-cam-btn:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .hg-cam-ico{font-size:2.4rem;line-height:1}
  .hg-cam-off{all:unset;cursor:pointer;margin-left:auto;padding:.45rem .8rem;border-radius:999px;background:rgba(255,255,255,.14);font-size:.8rem;font-weight:700}
  .hg-cam-off[hidden]{display:none}
  .hg-torch:not([hidden]) ~ .hg-cam-off{margin-left:0}
  /* Look-up by name / phone / number: matches between the stage and the box. */
  .hg-matches{max-height:46vh;overflow:auto;background:#fff;color:#111;border-radius:14px 14px 0 0;padding:.35rem 0}
  .hg-matches[hidden]{display:none}
  .hg-m-item{display:flex;align-items:center;gap:.4rem;padding-right:.7rem;border-bottom:1px solid #eef0f3}
  .hg-m-item:last-child{border-bottom:0}
  .hg-m-row{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:.7rem;flex:1;min-width:0;padding:.6rem .9rem;min-height:52px}
  /* Instant card send (WhatsApp + SMS) on the right of each match. */
  .hg-m-send{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 auto;display:inline-flex;align-items:center;gap:.35rem;min-height:40px;padding:.45rem .8rem;border-radius:999px;background:#16a34a;color:#fff;font-size:.82rem;font-weight:800}
  .hg-m-send:focus-visible{outline:3px solid #86efac;outline-offset:2px}
  .hg-m-send-ico{font-size:.8rem;line-height:1}
  .hg-m-send.busy{background:#9ca3af;cursor:progress}
  .hg-m-send.done{background:#dcfce7;color:#15803d;cursor:default}
  .hg-m-send.done .hg-m-send-ico{display:none}
  .hg-m-send.fail{background:#dc2626}
  /* Card list export sheet: two-button rows that wrap on a narrow phone; a section title. */
  .h-cl-row{display:flex;flex-wrap:wrap;gap:.5rem}
  .h-cl-row .btn{flex:1 1 9rem;min-width:0;min-height:46px;justify-content:center;white-space:normal;text-align:center}
  .h-cl-sec{font-weight:750;font-size:.95rem;margin-top:.4rem;padding-top:.7rem;border-top:1px solid var(--panel-border)}
  .h-cl .h-group-pick button{max-width:100%;white-space:normal;text-align:left}
  .hg-m-edit{all:unset;box-sizing:border-box;cursor:pointer;flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#f3f4f6;color:#374151;font-size:1.05rem}
  .hg-m-edit:focus-visible{outline:3px solid #86efac;outline-offset:2px}
  /* Edit a guest's SMS numbers on the gate itself (above the list and the result). */
  .hg-sheet{position:absolute;inset:0;z-index:5;background:rgba(0,0,0,.45);display:flex;align-items:flex-end}
  .hg-sheet-box{width:100%;max-height:88vh;overflow:auto;box-sizing:border-box;background:#fff;color:#111;border-radius:16px 16px 0 0;padding:1rem;padding-bottom:max(1rem,env(safe-area-inset-bottom))}
  .hg-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
  .hg-sheet-head b{font-size:1.02rem}
  .hg-x.hg-x-light{background:#f3f4f6;color:#111}
  .hg-sheet-who{font-weight:800;font-size:1rem;margin-bottom:.6rem}
  .hg-sheet label{display:block;font-size:.74rem;font-weight:700;color:#374151;margin:.55rem 0 .2rem}
  .hg-sheet input{width:100%;box-sizing:border-box;min-height:48px;padding:.6rem .75rem;border:1px solid #d1d5db;border-radius:10px;background:#fff;color:#111;font:inherit;font-size:1rem;color-scheme:light;outline:none}
  .hg-sheet input:focus{border-color:var(--accent,#16a34a);box-shadow:0 0 0 3px rgba(22,163,74,.18)}
  .hg-sheet-note{font-size:.78rem;color:#6b7280;margin:.55rem 0 0}
  /* Toasts sat under the gate (z 120 vs 4000): send results and errors were invisible there. */
  body:has(#hgGate) .h-toast{z-index:4100;bottom:calc(5.2rem + env(safe-area-inset-bottom,0px))}
  .hg-m-row:active,.hg-m-row:hover{background:#f3f4f6}
  .hg-m-no{flex:0 0 auto;min-width:3.6rem;font-size:1.05rem;font-weight:800;color:#15803d}
  .hg-m-main{display:flex;flex-direction:column;min-width:0}
  .hg-m-name{font-weight:700;font-size:.92rem;overflow-wrap:anywhere}
  .hg-m-sub{font-size:.76rem;color:#6b7280;overflow-wrap:anywhere}
  .hg-m-empty{padding:.9rem;font-size:.86rem;color:#6b7280;text-align:center}
  .hg-cam{position:absolute;inset:0;overflow:hidden}
  .hg-cam video{width:100%;height:100%;object-fit:cover}
  .hg-guide{position:absolute;left:7%;right:7%;top:39%;height:22%;border:2px solid rgba(255,255,255,.85);border-radius:12px;box-shadow:0 0 0 2000px rgba(0,0,0,.35)}
  .hg-guide span{position:absolute;left:0;right:0;top:calc(100% + .5rem);text-align:center;font-size:.78rem;color:#fff;text-shadow:0 1px 2px #000}
  .hg-cam-msg{position:absolute;left:1rem;right:1rem;top:1rem;background:rgba(0,0,0,.7);padding:.7rem;border-radius:10px;font-size:.85rem}
  .hg-manual{display:flex;gap:.5rem;padding:.6rem .8rem;padding-bottom:max(.6rem,env(safe-area-inset-bottom));background:#0b0f14}
  .hg-manual input{flex:1;min-width:0;font-size:1.05rem;letter-spacing:.02em;padding:.6rem .7rem;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:#111827;color:#fff;font-family:inherit}
  .hg-result{position:absolute;left:0;right:0;bottom:0;max-height:78vh;overflow:auto;background:#fff;color:#111;border-radius:16px 16px 0 0;padding:1rem;padding-bottom:max(1rem,env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(0,0,0,.35)}
  /* Leave a result any time: back to the search (or the next scan). */
  .hg-res-x{all:unset;box-sizing:border-box;cursor:pointer;float:right;margin:0 0 .4rem .5rem;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#f3f4f6;color:#111;font-size:1rem}
  .hg-res-x:focus-visible{outline:3px solid #86efac;outline-offset:2px}
  .hg-verdict{font-size:1.15rem;font-weight:800;letter-spacing:.02em;padding:.6rem .8rem;border-radius:10px;margin-bottom:.7rem}
  .hg-result.ok .hg-verdict{background:#16a34a;color:#fff}
  .hg-result.warn .hg-verdict{background:#d97706;color:#fff}
  .hg-result.bad .hg-verdict{background:#dc2626;color:#fff}
  .hg-result.checking .hg-verdict{background:#e5e7eb}
  .hg-name{font-size:1.25rem;font-weight:800;margin-bottom:.35rem}
  .hg-line{font-size:.86rem;margin:.25rem 0;color:#374151}
  .hg-hist{margin:.4rem 0 0;padding-left:1.1rem;font-size:.8rem;color:#6b7280}
  .hg-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem}
  .hg-actions .btn{flex:1 1 140px;min-height:48px;font-size:.95rem}
  .hg-fam-row{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
  .hg-fam-row label{font-size:.86rem;font-weight:700;color:#374151}
  .hg-fam-step{display:flex;align-items:center;gap:.35rem}
  .hg-fam-step .btn{flex:0 0 auto !important;min-width:44px;min-height:44px;font-size:1.2rem;padding:0}
  .hg-fam-step input.hg-input{width:5.5rem;text-align:center;font-size:1.15rem;font-weight:800;padding:.5rem;border-radius:10px;border:1px solid #d1d5db;background:#fff;color:#111;color-scheme:light;outline:none}
  .hg-fam-step input.hg-input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.18)}
  .hg-second{margin-top:.7rem;padding:.7rem;border-radius:10px;background:#fef3c7;border:1px solid #fcd34d}
  .hg-second .hg-line{color:#78350f}
  .hg-second label.hg-line{display:block;margin-top:.5rem;font-weight:600}
  .hg-second-row{display:flex;gap:.5rem;margin-top:.35rem}
  .hg-second-row .btn{flex:0 0 auto;min-height:44px}
  .hg-second-row input.hg-input{flex:1;min-width:0;font-size:1rem;padding:.55rem .7rem;border-radius:10px;border:1px solid #d6c7a1;background:#fff;color:#111;color-scheme:light;outline:none}
  .hg-second-row input.hg-input:focus{border-color:#d97706;box-shadow:0 0 0 3px rgba(217,119,6,.18)}
  .h-search-btn{display:none}
  @media(max-width:768px){.h-search-btn{display:inline-flex;align-items:center;justify-content:center}}
  html[data-viewport="mobile"] .h-search-btn{display:inline-flex;align-items:center;justify-content:center}
  /* ── Dashboard KPI cards: compact, phone first (2026-10-03) ────────────
     Same six cards and rows as before — only tighter. On a phone the short
     cards pair up ([Ahadi | Familia], [Mchango | Wanakamati]) and the two
     long ones (Imekusanywa, Waalikwa) take the full width, so no card is
     stretched into an empty box by a tall neighbour. */
  #kpis .kpi-pro{padding:.65rem .75rem !important;min-height:0 !important;gap:2px !important;border-radius:11px !important}
  #kpis .kpi-pro .kpi-icon{width:26px !important;height:26px !important;border-radius:8px !important}
  #kpis .kpi-pro .kpi-icon svg{width:14px !important;height:14px !important}
  #kpis .kpi-pro .kpi-value{font-size:clamp(1rem,.75rem + .8vw,1.3rem) !important}
  #kpis .kpi-pro .kpi-lines{row-gap:1px !important;margin-top:.3rem !important;font-size:.7rem !important}
  #kpis .kpi-pro .kpi-meta{padding-top:.4rem !important;font-size:.68rem !important}
  #kpis.h-kpis{gap:.6rem !important}
  /* A shared enhancer appends an empty .kpi-spark (36px chart slot) to every
     card on tablet/desktop; Harusi draws no sparkline, so it was dead space. */
  #kpis .kpi-pro .kpi-spark{display:none !important}
  .h-page .kpi-pro .kpi-lines-2col{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:.9rem}
  .h-page .kpi-pro .kpi-lines-2col .kpi-lines-h{grid-column:1/-1}
  /* Three rows of two at EVERY width (owner, 2026-10-03):
       [Ahadi | Familia] [Imekusanywa | Waalikwa wote] [Wengineo | Wanakamati] */
  #kpis.h-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #kpis .kpi-o1{order:1 !important} #kpis .kpi-o2{order:2 !important} #kpis .kpi-o3{order:3 !important}
  #kpis .kpi-o4{order:4 !important} #kpis .kpi-o5{order:5 !important} #kpis .kpi-o6{order:6 !important}
  /* Date · siku zimebaki · ukumbi, above the cards. */
  .h-ev-strip-top{padding:0 0 .55rem !important;border-bottom:0 !important}
  @media(max-width:600px){
    #kpis.h-kpis{gap:.45rem !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important}
    #kpis .kpi-pro{padding:.55rem .6rem !important;border-radius:10px !important}
    #kpis .kpi-pro .kpi-label{font-size:.56rem !important;letter-spacing:.07em !important}
    #kpis .kpi-pro .kpi-icon{width:22px !important;height:22px !important;border-radius:7px !important}
    #kpis .kpi-pro .kpi-icon svg{width:12px !important;height:12px !important}
    #kpis .kpi-pro .kpi-value{font-size:1.02rem !important;margin-top:0 !important}
    #kpis .kpi-pro .kpi-lines{font-size:.66rem !important;margin-top:.25rem !important}
    #kpis .kpi-pro .kpi-meta{padding-top:.3rem !important;font-size:.62rem !important;gap:.25rem !important}
    #kpis .kpi-pro .kpi-delta{font-size:.6rem !important;padding:.05rem .35rem !important}
    #kpis .kpi-pro .kpi-go{font-size:.66rem !important;margin-top:.25rem !important}
    /* Half-width cards on a phone: holders one per row, short amounts. */
    .h-page #kpis .kpi-pro .kpi-lines-2col{grid-template-columns:1fr !important}
    .h-ev-strip-top{gap:.3rem !important;padding-bottom:.45rem !important}
    .h-ev-strip-top .h-ev-chip{font-size:.68rem;padding:.24rem .5rem}
  }
  .h-page .kpi-pro .kpi-lines-h{margin-top:.35rem;padding-top:.4rem;border-top:1px solid var(--panel-border);
    font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
  .h-page .kpi-pro .kpi-go{all:unset;cursor:pointer;color:var(--h-primary);font-weight:700;font-size:.72rem;
    margin-top:.4rem}
  .h-page .kpi-pro .kpi-go:hover{text-decoration:underline}
  .h-page .kpi-pro .kpi-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
  /* KPI meta: app.css forces `white-space:nowrap` + ellipsis on the last meta
     span under 768px, so Harusi's status breakdown read "✓✓ 8 Waliomaliza ·
     ⏳ 11 Wa…" — the numbers the organiser came for were the part cut off.
     app.css uses !important, and this inline block loads after it, so an
     equally-specific !important rule scoped to Harusi wins without touching
     any other module's KPI cards. */
  .h-page .kpi-pro .kpi-meta>span{min-width:0}
  /* Waalikwa counters reuse Nyumbani's kpi() cards untouched — same grid, same
     140px card, same tinted icon and % pill — so the tab reads as one system.
     Only the two cards sit in the row, filling two of the four columns. */
  .h-page .h-guest-kpis{margin-bottom:.5rem}
  @media(max-width:768px){
    body.nzura-app-shell[data-module="harusi"] .kpi-pro .kpi-meta,
    body.nzura-app-shell[data-module="harusi"] .kpi-card .kpi-meta{
      flex-wrap:wrap !important}
    body.nzura-app-shell[data-module="harusi"] .kpi-pro .kpi-meta>span:last-child,
    body.nzura-app-shell[data-module="harusi"] .kpi-card .kpi-meta>span:last-child{
      overflow:visible !important;text-overflow:clip !important;white-space:normal !important;
      overflow-wrap:anywhere;line-height:1.35}
  }
  .h-progress{height:5px;background:var(--surface-muted,rgba(27,46,90,.07));border-radius:999px;overflow:hidden}
  .h-progress>i{display:block;height:100%;background:var(--h-primary);border-radius:999px;transition:width .35s ease}
  /* ── Dashboard: event strip, goal bar, quick grid, recent feed ────────── */
  .h-ev-strip{display:flex;flex-wrap:wrap;gap:.4rem;padding:.85rem 1rem;border-bottom:1px solid var(--panel-border)}
  .h-ev-chip{display:inline-flex;align-items:center;font-size:.75rem;font-weight:650;
    padding:.32rem .6rem;border-radius:999px;background:var(--page-bg);color:var(--text-muted);
    border:1px solid var(--panel-border);max-width:100%;overflow-wrap:anywhere}
  .h-ev-chip.urgent{background:var(--h-primary-soft);color:var(--h-primary);
    border-color:color-mix(in srgb,var(--h-primary) 30%,transparent)}
  .h-ev-goal{padding:.8rem 1rem;border-bottom:1px solid var(--panel-border)}
  .h-ev-goal-top{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.45rem}
  .h-ev-goal-top span{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
    color:var(--text-muted);font-weight:700}
  .h-ev-goal-top strong{font-size:.84rem;font-weight:700;color:var(--text-primary);
    font-variant-numeric:tabular-nums;text-align:right}
  .h-ev-goal-pct{margin-top:.35rem;font-size:.7rem;font-weight:700;color:var(--h-primary)}
  .h-dash-body{padding:1rem;display:grid;gap:.65rem}
  /* Equal-width tiles. A flex-wrap row gave 2+2+1 pills at three widths. */
  .h-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
  .h-quick-grid .btn{min-height:48px;justify-content:center;font-size:.82rem;font-weight:650;
    white-space:normal;line-height:1.25;padding:.5rem .6rem}
  .h-quick-grid .h-quick-wide{grid-column:1/-1}
  @media(min-width:761px){.h-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
  .h-dash-feed{border-top:1px solid var(--panel-border)}
  .h-dash-feed-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
    padding:.8rem 1rem .5rem}
  .h-dash-feed-head>span{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;
    color:var(--text-muted);font-weight:700}
  .h-link-btn{border:0;background:none;color:var(--h-primary);font:inherit;font-size:.78rem;
    font-weight:700;cursor:pointer;padding:.5rem .6rem;min-height:40px}
  .h-feed-row{display:flex;align-items:center;gap:.65rem;width:100%;box-sizing:border-box;
    padding:.6rem 1rem;border:0;border-top:1px solid var(--panel-border);background:none;
    font:inherit;text-align:left;cursor:pointer;min-height:52px}
  .h-feed-row:hover{background:var(--page-bg)}
  .h-feed-ico{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;border-radius:9px;
    background:var(--h-primary-soft);color:var(--h-primary)}
  .h-feed-main{min-width:0;flex:1;display:block}
  .h-feed-title{display:block;font-size:.85rem;font-weight:650;color:var(--text-primary);
    line-height:1.3;overflow-wrap:anywhere}
  .h-feed-meta{display:block;font-size:.72rem;color:var(--text-muted);margin-top:.1rem}
  .h-feed-amt{flex:0 0 auto;font-size:.85rem;font-weight:700;color:var(--text-primary);
    font-variant-numeric:tabular-nums}
  /* Accounting-style underline tabs */
  .h-tabs{display:flex;gap:0;border-bottom:2px solid var(--panel-border,var(--border,#e5e7eb));margin:0 0 1.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:sticky;top:0;z-index:15;background:var(--page-bg);padding-top:.15rem}
  .h-tabs::-webkit-scrollbar{display:none}
  .h-tab{flex:0 0 auto;padding:.65rem 1.05rem;font-size:.86rem;font-weight:600;color:var(--text-muted);border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-2px;cursor:pointer;white-space:nowrap;transition:color .15s,border-color .15s}
  .h-tab:hover{color:var(--text-primary)}
  .h-tab.active{color:var(--h-primary);border-bottom-color:var(--h-primary);font-weight:700}
  .h-tab{display:inline-flex;align-items:center;gap:.4rem}
  .h-tab .h-tab-ico{display:inline-flex;align-items:center;opacity:.75}
  .h-tab.active .h-tab-ico{opacity:1}
  .h-tab svg,.h-bottom-nav svg,.h-kpi-icon svg{display:block}
  /* Settings UX */
  .h-set-nav{display:flex;gap:.35rem;flex-wrap:wrap;margin:0 0 1rem;padding:.35rem;background:var(--page-bg);border:1px solid var(--panel-border);border-radius:12px}
  .h-set-nav button{border:0;background:transparent;color:var(--text-muted);font-size:.78rem;font-weight:700;padding:.55rem .85rem;border-radius:9px;cursor:pointer;min-height:44px}
  .h-set-nav button.active{background:var(--panel-bg);color:var(--h-primary);box-shadow:var(--panel-shadow);border:1px solid var(--panel-border)}
  .h-set-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.1rem;background:var(--h-primary-softer);border:1px solid var(--panel-border);border-radius:12px;margin-bottom:1rem}
  .h-set-hero h2{margin:0;font-size:1.05rem;font-weight:750;color:var(--text-primary);display:flex;align-items:center;gap:.45rem}
  .h-set-hero h2 svg{color:var(--h-primary);flex:0 0 auto}
  .h-set-hero p{margin:.35rem 0 0;font-size:.82rem;color:var(--text-muted);line-height:1.45;max-width:34rem}
  .h-set-status{display:flex;flex-wrap:wrap;gap:.45rem}
  .h-set-status .h-badge{font-size:.72rem;padding:.28rem .55rem}
  .h-set-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;overflow:hidden;margin-bottom:1rem;box-shadow:var(--panel-shadow)}
  .h-set-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:1rem 1.1rem;border-bottom:1px solid var(--panel-border)}
  .h-set-card-head h3{margin:0;font-size:.95rem;font-weight:700;color:var(--text-primary)}
  .h-set-card-head p{margin:.3rem 0 0;font-size:.78rem;color:var(--text-muted);line-height:1.4;max-width:32rem}
  .h-set-card-body{padding:1rem 1.1rem 1.15rem}
  .h-set-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .h-set-grid .full{grid-column:1/-1}
  .h-set-field label{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:700;margin-bottom:.28rem}
  .h-set-field input,.h-set-field select,.h-set-field textarea{width:100%;box-sizing:border-box;border:1px solid var(--panel-border);border-radius:9px;padding:.58rem .72rem;background:var(--input-bg,var(--panel-bg));color:var(--text-primary);font:inherit;font-size:.86rem}
  .h-set-field input:focus,.h-set-field select:focus,.h-set-field textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 40%,transparent);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  .h-set-hint{display:block;font-size:.76rem;color:var(--text-muted);line-height:1.4;margin-top:.35rem;text-transform:none;letter-spacing:0;font-weight:400}
  .h-set-help{font-size:.74rem;color:var(--text-muted);margin-top:.3rem;line-height:1.4}
  .h-set-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--panel-border)}
  .h-set-row:last-child{border-bottom:0}
  .h-set-row strong{display:block;font-size:.86rem;color:var(--text-primary)}
  .h-set-row span{display:block;font-size:.76rem;color:var(--text-muted);margin-top:.2rem;line-height:1.35}
  .h-switch{position:relative;width:44px;height:26px;flex-shrink:0}
  .h-switch input{opacity:0;width:0;height:0}
  .h-switch i{position:absolute;inset:0;background:var(--surface-hover,#cbd5e1);border-radius:999px;cursor:pointer;transition:background .15s}
  .h-switch i:before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
  .h-switch input:checked+i{background:var(--h-primary)}
  .h-switch input:checked+i:before{transform:translateX(18px)}
  .h-set-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--panel-border)}
  .h-set-locked{padding:1rem;border-radius:10px;background:var(--h-primary-softer);border:1px dashed color-mix(in srgb,var(--h-primary) 35%,transparent);font-size:.84rem;color:var(--text-muted);line-height:1.45}
  .h-set-locked strong{color:var(--text-primary)}
  .h-set-link-box{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.75rem;background:var(--page-bg);border-radius:10px;border:1px solid var(--panel-border)}
  .h-set-link-box code{flex:1;min-width:0;font-size:.76rem;word-break:break-all;color:var(--text-primary)}
  .h-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;overflow:hidden;margin-bottom:1rem;box-shadow:var(--panel-shadow)}
  .h-card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem 1rem;border-bottom:1px solid var(--panel-border);flex-wrap:wrap}
  .h-card-title{font-size:.88rem;font-weight:650;color:var(--text-primary)}
  .h-card-sub{font-size:.7rem;color:var(--text-muted);margin-top:.15rem}
  /* Collapsible SMS template / jobs panels — collapsed by default */
  .h-collapse{border-top:1px solid var(--panel-border)}
  .h-collapse>summary.h-card-head{
    list-style:none;cursor:pointer;user-select:none;margin:0;border-bottom:0
  }
  .h-collapse>summary.h-card-head::-webkit-details-marker{display:none}
  .h-collapse>summary.h-card-head::after{
    content:'';display:inline-block;width:1em;height:1em;flex:none;background-color:currentColor;-webkit-mask:var(--nz-chev-mask) center/contain no-repeat;mask:var(--nz-chev-mask) center/contain no-repeat;font-size:1rem;color:var(--text-muted);margin-left:auto;transform:rotate(-90deg);transition:transform .15s
  }
  .h-collapse[open]>summary.h-card-head::after{transform:none}
  .h-collapse>summary.h-card-head .h-card-title{pointer-events:none}
  .h-collapse .h-table-wrap{border-top:1px solid var(--panel-border)}
  .h-sms-compose{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;
    overflow:hidden;margin-bottom:1rem;box-shadow:var(--panel-shadow)}
  .h-sms-compose .h-form{padding:1rem 1.1rem 1.1rem}
  /* Mobile “More” sheet — same idea as Nzura Business Apps launcher */
  .h-more-backdrop{position:fixed;inset:0;z-index:1390;background:rgba(9,18,36,.42);
    backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s}
  .h-more-backdrop.open{opacity:1;pointer-events:auto}
  .h-more-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1400;max-height:78vh;
    overflow:auto;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px));
    background:var(--panel-bg);border-radius:22px 22px 0 0;
    box-shadow:0 -16px 48px rgba(0,0,0,.22);transform:translateY(108%);
    transition:transform .28s cubic-bezier(.34,0,.2,1)}
  .h-more-sheet.open{transform:translateY(0)}
  .h-more-grip{width:40px;height:4px;border-radius:999px;background:var(--panel-border);
    margin:4px auto 12px}
  .h-more-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;
    margin-bottom:.85rem}
  .h-more-head .eyebrow{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
    color:var(--text-muted);font-weight:700}
  .h-more-head .title{font-size:1.05rem;font-weight:750;color:var(--text-primary);margin-top:.15rem}
  .h-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem}
  .h-more-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.35rem;min-height:86px;padding:.65rem .4rem;border:1px solid var(--panel-border);
    border-radius:14px;background:var(--page-bg);color:var(--text-primary);font:inherit;
    font-size:.72rem;font-weight:700;cursor:pointer;text-align:center;line-height:1.2}
  .h-more-tile .ico{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
    background:var(--h-primary-soft);color:var(--h-primary)}
  .h-more-tile.active{border-color:var(--h-primary);background:var(--h-primary-soft);color:var(--h-primary)}
  .h-more-tile:active{transform:scale(.98)}
  /* Quick actions inside the sheet — these are the topbar buttons that do not
     fit a phone header (new event / AI / install), kept one tap away. */
  .h-more-quick{display:grid;gap:.5rem;margin:0 0 .85rem}
  .h-more-quick a,.h-more-quick button{display:flex;align-items:center;gap:.6rem;width:100%;
    box-sizing:border-box;min-height:52px;padding:.6rem .85rem;border-radius:12px;
    border:1px solid var(--panel-border);background:var(--page-bg);color:var(--text-primary);
    font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;text-align:left;text-decoration:none}
  .h-more-quick .h-mq-primary{background:var(--h-primary);border-color:var(--h-primary);color:#fff}
  .h-more-quick .ico{display:grid;place-items:center;width:30px;height:30px;flex:0 0 auto;
    border-radius:9px;background:var(--h-primary-soft);color:var(--h-primary)}
  .h-more-quick .h-mq-primary .ico{background:transparent;color:#fff}
  .h-more-quick small{display:block;font-size:.7rem;font-weight:500;color:var(--text-muted);margin-top:.1rem}
  .h-more-quick .h-mq-primary small{color:rgba(255,255,255,.85)}
  .h-more-sub{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
    color:var(--text-muted);font-weight:700;margin:.15rem 0 .5rem}
  /* Merge-variable chips under the SMS body */
  .h-var-chips{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin:.45rem 0 0}
  .h-var-lead{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
    color:var(--text-muted);font-weight:700;margin-right:.15rem}
  .h-var-chips button{border:1px solid var(--panel-border);background:var(--page-bg);
    color:var(--h-primary);border-radius:999px;padding:.34rem .6rem;font:inherit;
    font-size:.72rem;font-weight:650;cursor:pointer;min-height:40px}
  .h-var-chips button:hover{background:var(--h-primary-soft);border-color:var(--h-primary)}
  .h-var-chips button:active{transform:scale(.97)}
  .h-group-pick{display:flex;flex-wrap:wrap;gap:.4rem}
  .h-group-pick button{border:1px solid var(--panel-border);background:var(--panel-bg);
    border-radius:999px;padding:.45rem .75rem;font-size:.78rem;font-weight:700;
    color:var(--text-muted);cursor:pointer;font:inherit}
  /* Same dark brand primary as .btn-primary (var(--ink)) — using --h-primary
     here resolved to the saturated accent hue and drifted magenta, so one
     modal showed two different "primary" colours. */
  .h-group-pick button.active{background:var(--ink,var(--h-primary));border-color:var(--ink,var(--h-primary));color:var(--paper,#fff)}
  .h-table-wrap{overflow:auto}
  .h-table{width:100%;border-collapse:collapse;min-width:720px}
  .h-table th{padding:.7rem .85rem;text-align:left;font-size:.67rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--panel-border);background:var(--page-bg)}
  .h-table td{padding:.75rem .85rem;font-size:.78rem;color:var(--text-primary);border-bottom:1px solid var(--panel-border);vertical-align:top}
  .h-table tr:last-child td{border-bottom:0}
  /* app.css sets table-layout:fixed on every <table> and nowrap on thead th,
     so a 7-column table (Malipo: … Anayeshika pesa · Alirekodi · Maelezo)
     got equal narrow strips and the long headers painted over each other,
     with the last column cut off. Size columns by content, let headers wrap
     at spaces, and fit the card — no sideways scroll (owner's rule). Phones
     (≤760px) use the stacked-card layout below and are unaffected. */
  @media(min-width:761px){
    .h-page .h-table{table-layout:auto;min-width:0}
    .h-page .h-table th{white-space:normal;overflow-wrap:normal;word-break:normal;vertical-align:bottom;line-height:1.35}
    .h-page .h-table td{overflow-wrap:break-word}
  }
  .h-table tbody tr.h-row-clickable{cursor:pointer;transition:background .12s}
  .h-table tbody tr.h-row-clickable:hover{background:var(--h-primary-softer)}
  .h-table tbody tr.h-row-clickable:active{background:var(--h-primary-soft)}
  /* Bulk selection */
  .h-td-pick{width:34px;text-align:center}
  /* 20px is the visual box; the padding grows the actual hit area to ~44px so
     selecting a guest on a phone doesn't need a precise tap. */
  /* 20px is the visual box; content-box + padding grows the real hit area to
     44px. (app.css sets a global border-box, which would otherwise swallow the
     padding and leave the tap target at 20px.) */
  .h-pick{box-sizing:content-box;width:20px;height:20px;accent-color:var(--h-primary);cursor:pointer;
    margin:0;padding:12px;background-clip:content-box}
  .h-table tbody tr.h-row-picked{background:var(--h-primary-soft)}
  .h-bulk-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.7rem 1rem;
    background:var(--h-primary-soft);border-bottom:1px solid var(--panel-border)}
  .h-bulk-bar strong{font-size:.82rem;color:var(--text-primary)}
  .h-bulk-bar label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:700}
  .h-bulk-bar select{min-width:150px;border:1px solid var(--panel-border);border-radius:9px;
    padding:.42rem .68rem;background:var(--panel-bg);color:var(--text-primary);font:inherit;font-size:.8rem;
    color-scheme:light}
  .h-bulk-bar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
  @media(max-width:760px){
    .h-bulk-bar{position:sticky;top:0;z-index:12}
    .h-bulk-bar select{flex:1}
    /* The checkbox is its own line in card mode, above the name header. */
    .h-table td.h-td-pick{display:flex;justify-content:flex-start;padding:0 0 .4rem;border:0}
    .h-table td.h-td-pick::before{display:none}
  }
  /* Activity drawer — slide-over audit trail, same shape as the farming
     module's record drawer so the two products feel related. */
  .h-drawer-overlay{position:fixed;inset:0;z-index:10150;background:rgba(9,18,36,.5);
    backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .24s}
  .h-drawer-overlay.open{opacity:1;pointer-events:auto}
  .h-drawer{position:fixed;top:14px;right:14px;bottom:14px;z-index:10160;
    width:min(460px,calc(100vw - 28px));display:flex;flex-direction:column;
    background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:14px;
    box-shadow:var(--panel-shadow-lg,0 18px 50px rgba(0,0,0,.25));
    transform:translateX(118%);transition:transform .32s cubic-bezier(.34,0,.2,1);overflow:hidden}
  .h-drawer.open{transform:translateX(0)}
  .h-drawer-top{display:flex;align-items:flex-start;gap:.7rem;padding:1rem 1rem .85rem;
    border-bottom:1px solid var(--panel-border)}
  .h-drawer-top .eyebrow{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
    color:var(--text-muted);font-weight:700}
  .h-drawer-top .title{font-size:1rem;font-weight:750;color:var(--text-primary);margin-top:.15rem}
  .h-drawer-body{flex:1;overflow:auto;padding:.5rem 1rem 1rem}
  .h-act{display:flex;gap:.65rem;padding:.75rem 0;border-bottom:1px solid var(--panel-border)}
  .h-act:last-child{border-bottom:0}
  .h-act-dot{width:26px;height:26px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;
    background:var(--h-primary-soft);color:var(--h-primary)}
  .h-act-dot.add{background:var(--success-soft,rgba(21,153,107,.13));color:var(--h-green)}
  .h-act-dot.edit{background:var(--warning-soft,rgba(217,119,6,.13));color:var(--h-amber)}
  .h-act-dot.del{background:var(--danger-soft,rgba(239,79,95,.13));color:var(--h-red)}
  .h-act-main{min-width:0;flex:1}
  .h-act-title{font-size:.84rem;font-weight:650;color:var(--text-primary);line-height:1.35}
  .h-act-meta{font-size:.7rem;color:var(--text-muted);margin-top:.15rem}
  .h-act-diff{margin-top:.35rem;font-size:.72rem;color:var(--text-muted);line-height:1.5}
  .h-act-diff b{color:var(--text-primary);font-weight:650}
  .h-act-diff .from{text-decoration:line-through;opacity:.7}
  .h-act-diff .to{color:var(--h-primary);font-weight:650}
  @media(max-width:760px){.h-drawer{top:0;right:0;bottom:0;width:100vw;border-radius:0;border:0}}
  /* Maandalizi — collapsible activity groups + flexible list */
  .h-maand-filters{display:flex;flex-wrap:wrap;gap:.45rem;align-items:flex-end;margin:0 0 .75rem}
  .h-maand-filters label{display:block;font-size:.68rem;font-weight:700;color:var(--text-muted);margin-bottom:.2rem}
  .h-maand-filters .fld{min-width:0}
  /* These only set height+font before, so they fell back to raw browser inputs:
     no padding, no radius, text jammed against the edge. Match the rest of the
     module's fields. */
  .h-maand-filters input,.h-maand-filters select{width:100%;box-sizing:border-box;min-height:44px;
    font:inherit;font-size:.86rem;line-height:1.25;padding:.55rem .75rem;
    border:1px solid var(--panel-border);border-radius:10px;
    background:var(--input-bg,var(--panel-bg));color:var(--text-primary)}
  .h-maand-filters select{padding-right:2rem;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
    background-position:calc(100% - 1rem) 50%,calc(100% - .7rem) 50%;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat}
  .h-maand-filters input:focus,.h-maand-filters select:focus{outline:2px solid color-mix(in srgb,var(--h-primary) 40%,transparent);
    outline-offset:0;border-color:var(--h-primary)}
  /* Same reasoning as .h-pick — keep the 18px box, grow the tap area to ~44px. */
  .h-maand-filters input[type=checkbox]{box-sizing:content-box;width:18px;min-height:18px;height:18px;
    accent-color:var(--h-primary);padding:13px;background-clip:content-box;flex:0 0 auto}
  .h-maand-group{border:1px solid var(--panel-border);border-radius:12px;margin-bottom:.65rem;background:var(--panel-bg);overflow:hidden}
  .h-maand-group-hd{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;padding:.7rem .85rem;border:0;background:var(--page-bg);cursor:pointer;font:inherit;color:var(--text-primary);min-height:48px}
  .h-maand-group-hd:hover{background:color-mix(in srgb,var(--h-primary) 6%,var(--page-bg))}
  .h-maand-group-hd .chev{flex:0 0 auto;transition:transform .18s;color:var(--text-muted);font-size:.95rem}
  .h-maand-group.open .h-maand-group-hd .chev{transform:rotate(0deg)}
  .h-maand-group-hd .meta{flex:1;min-width:0}
  .h-maand-group-hd strong{display:block;font-size:.9rem;font-weight:750}
  .h-maand-group-hd span{font-size:.72rem;color:var(--text-muted)}
  .h-maand-group-body{display:none;padding:.15rem .55rem .55rem;border-top:1px solid var(--panel-border)}
  .h-maand-group.open .h-maand-group-body{display:block}
  .h-maand-row{display:flex;align-items:flex-start;gap:.55rem;padding:.65rem .5rem;border-bottom:1px solid var(--panel-border);cursor:pointer;border-radius:8px}
  .h-maand-row:last-child{border-bottom:0}
  .h-maand-row:hover{background:color-mix(in srgb,var(--h-primary) 5%,transparent)}
  .h-maand-row .main{flex:1;min-width:0}
  .h-maand-row .main strong{display:block;font-size:.88rem;font-weight:700;color:var(--text-primary)}
  .h-maand-row .main .sub{font-size:.74rem;color:var(--text-muted);margin-top:.15rem;line-height:1.35}
  .h-maand-row .cost{flex:0 0 auto;text-align:right;font-size:.78rem;font-weight:750;color:var(--h-primary);white-space:nowrap}
  /* A reversed kikao must be unmistakable in a list of live ones — the row
     dims, and the pill says which way it was reversed. */
  .h-maand-row.reversed .main strong{color:var(--text-muted);text-decoration:line-through}
  .h-meet-pill{display:inline-block;margin-left:.4rem;padding:.05rem .4rem;border-radius:999px;
    font-size:.64rem;font-weight:800;letter-spacing:.02em;vertical-align:middle;text-decoration:none}
  .h-meet-pill.postponed{background:color-mix(in srgb,#b45309 16%,transparent);color:#b45309}
  .h-meet-pill.cancelled{background:color-mix(in srgb,#b91c1c 16%,transparent);color:#b91c1c}
  .h-meet-pill.untold{background:color-mix(in srgb,#b91c1c 22%,transparent);color:#b91c1c}
  .h-meet-pill.series{background:color-mix(in srgb,var(--h-primary) 14%,transparent);color:var(--h-primary)}
  .h-meet-pill.paused{background:var(--page-bg);color:var(--text-muted);border:1px solid var(--panel-border)}
  .h-series-list{display:flex;flex-direction:column;gap:.45rem;margin:0 0 .75rem}
  .h-series-card{display:flex;align-items:flex-start;gap:.55rem;padding:.75rem .7rem;border:1px solid var(--panel-border);
    border-radius:12px;background:var(--page-bg);cursor:pointer}
  .h-series-card:hover{background:color-mix(in srgb,var(--h-primary) 5%,transparent)}
  .h-series-card.paused{opacity:.78}
  .h-series-card .main{flex:1;min-width:0}
  .h-series-card .main strong{display:block;font-size:.88rem;font-weight:700;color:var(--text-primary)}
  .h-series-card .main .sub{font-size:.74rem;color:var(--text-muted);margin-top:.15rem;line-height:1.35}
  @media (prefers-color-scheme:dark){
    .h-meet-pill.postponed{color:#fbbf24}
    .h-meet-pill.cancelled,.h-meet-pill.untold{color:#fca5a5}
  }
  .h-meet-act{flex:0 0 auto;align-self:center;border:1px solid var(--panel-border);background:transparent;
    color:var(--text-muted);border-radius:8px;padding:.25rem .5rem;font-size:.7rem;font-weight:700;cursor:pointer}
  .h-meet-act:hover{border-color:#b45309;color:#b45309}
  .h-rev-modes{display:grid;gap:.4rem}
  .h-rev-modes label{display:flex;gap:.5rem;align-items:flex-start;padding:.5rem .6rem;border:1px solid var(--panel-border);
    border-radius:10px;cursor:pointer;font-size:.8rem;line-height:1.35}
  .h-rev-modes label.on{border-color:var(--h-primary);background:color-mix(in srgb,var(--h-primary) 7%,transparent)}
  .h-rev-modes label input{margin-top:.15rem}
  .h-drawer-foot{padding:.75rem 1rem;border-top:1px solid var(--panel-border);display:flex;flex-wrap:wrap;gap:.4rem;justify-content:flex-end;background:var(--panel-bg)}
  .h-drawer .h-form{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .65rem;padding:.25rem 0}
  .h-drawer .h-form .full{grid-column:1/-1}
  .h-drawer .h-form label{display:block;font-size:.68rem;font-weight:700;color:var(--text-muted);margin-bottom:.2rem}
  .h-drawer .h-form input,.h-drawer .h-form select,.h-drawer .h-form textarea{width:100%;min-height:40px;font:inherit;font-size:.86rem;padding:.45rem .55rem;border:1px solid var(--panel-border);border-radius:10px;background:var(--page-bg);color:var(--text-primary)}
  .h-drawer .h-form textarea{min-height:72px;resize:vertical}
  .h-drawer-sec{margin-top:.85rem;padding-top:.65rem;border-top:1px solid var(--panel-border)}
  .h-drawer-sec h4{margin:0 0 .45rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:800}
  .h-badge{display:inline-flex;align-items:center;gap:.28rem;padding:.24rem .52rem;border-radius:999px;font-size:.67rem;font-weight:800;white-space:nowrap}
  .h-badge .h-ticks{font-size:.8rem;letter-spacing:-.08em;color:currentColor}
  .h-badge.paid{background:var(--success-soft,color-mix(in srgb,var(--h-green) 13%,transparent));color:var(--h-green)}
  .h-badge.partial{background:var(--warning-soft,color-mix(in srgb,var(--h-amber) 13%,transparent));color:var(--h-amber)}
  .h-badge.unpaid{background:var(--danger-soft,color-mix(in srgb,var(--h-red) 13%,transparent));color:var(--h-red)}
  .h-badge.pending{background:var(--info-soft,color-mix(in srgb,var(--h-blue) 13%,transparent));color:var(--h-blue)}
  .h-ticks{font-size:1.05rem;letter-spacing:-.08em;line-height:1;font-weight:800}
  .h-ticks.paid{color:var(--h-green)}
  .h-ticks.partial{color:var(--h-amber)}
  .h-ticks.unpaid{color:#94a3b8}
  .h-status-cell{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
  /* Report action bar — primary actions use suite .btn-primary (not WA green) */
  /* "You are looking at a slice" bar — shown whenever the registration window
     hides rows, with the way out on the same line. Without it a filtered list
     reads as missing data. */
  .h-range-notice{
    display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
    padding:.6rem 1rem;border-bottom:1px solid var(--panel-border);
    background:color-mix(in srgb,var(--h-primary) 7%,var(--panel-bg));
    font-size:.78rem;color:var(--text-primary)}
  .h-range-notice>span{flex:1;min-width:0}
  .h-range-notice .btn{flex:0 0 auto;min-height:36px;padding:.32rem .7rem;font-size:.74rem}
  .h-wa-bar{display:flex;flex-wrap:wrap;gap:.5rem;padding:.85rem 1rem;border-bottom:1px solid var(--panel-border);background:var(--page-bg)}
  .h-wa-bar .btn{display:inline-flex;align-items:center;gap:.4rem}
  .h-wa-bar .btn svg{display:block;flex:0 0 auto}
  /* "+ Ongeza mwalikwa" took this bar over when the two report buttons moved
     up to the action row. One button, so it spans the bar — it is the thing
     you reach for while looking at the list right below it. Must sit after
     .h-wa-bar .btn: same specificity, source order decides. */
  .h-add-guest-bar .btn{flex:1 1 100%;justify-content:center;min-height:46px;
    gap:.45rem;font-weight:700}
  /* Report share dialog: group + filter on ONE row, two columns. Two wrapping
     chip rows pushed the message preview off a phone screen once an event had
     several custom guest groups. */
  .h-share-picks{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;align-items:start}
  .h-share-picks>div{min-width:0}
  .h-share-picks label{display:block;font-size:.68rem;text-transform:uppercase;
    letter-spacing:.05em;color:var(--text-muted);font-weight:700;margin-bottom:.32rem}
  @media(max-width:360px){.h-share-picks{grid-template-columns:1fr}}
  .h-group-chips{display:flex;flex-wrap:wrap;gap:.35rem;padding:.65rem 1rem;border-bottom:1px solid var(--panel-border)}
  .h-group-chips button{border:1px solid var(--panel-border);background:var(--panel-bg);border-radius:999px;padding:.5rem .8rem;font-size:.74rem;font-weight:700;color:var(--text-muted);cursor:pointer;min-height:40px}
  .h-group-chips button.active{background:var(--ink,var(--h-primary));border-color:var(--ink,var(--h-primary));color:var(--paper,#fff)}
  /* Period chips under the Waalikwa counters. A <select> in the KPI card head
     read as a stray form control where every other card carries an icon; chips
     are the control this module already uses for guest groups. Must sit AFTER
     .h-group-chips — same specificity, so source order decides. */
  .h-kpi-range-chips{padding:0 0 1rem;border-bottom:0;gap:.3rem;align-items:center;
    flex-wrap:nowrap}
  .h-kpi-range-chips .h-kpi-range-lbl{
    font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
    color:var(--text-muted);margin-right:.15rem;flex:0 0 auto;white-space:nowrap}
  .h-kpi-range-chips button{min-height:32px;padding:.3rem .68rem;font-size:.7rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Excel belongs to this row (it exports what the chips select) but is an
     action, not a filter — squarer, and it never shrinks below its icon. */
  .h-kpi-range-chips .h-range-export{
    margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;gap:.32rem;
    border:1px solid var(--panel-border);background:var(--panel-bg);color:var(--text-primary);
    border-radius:9px;font-weight:700;cursor:pointer}
  .h-kpi-range-chips .h-range-export:hover{border-color:var(--h-primary);color:var(--h-primary)}
  .h-kpi-range-chips .h-range-export svg{display:block;flex:0 0 auto}
  /* One row on a phone: the six chips share the space equally and fall back to
     their short labels. overflow-x is the safety valve on a very narrow screen
     so a chip is never clipped away entirely. */
  @media(max-width:760px){
    .h-kpi-range-chips{gap:.25rem;overflow-x:auto;-webkit-overflow-scrolling:touch;
      scrollbar-width:none}
    .h-kpi-range-chips::-webkit-scrollbar{display:none}
    .h-kpi-range-chips .h-kpi-range-lbl{display:none}
    .h-kpi-range-chips button[data-added-range]{
      flex:1 1 0;min-width:0;padding:.36rem .25rem;min-height:34px;
      font-size:clamp(.58rem,2.7vw,.72rem);text-align:center}
    .h-kpi-range-chips .h-range-export{margin-left:.15rem;padding:.36rem .5rem;min-height:34px}
  }
  /* Below ~400px six chips cannot share the row without truncating "Siku 30"
     to "Siku 3…". Stop shrinking them and let the row scroll a few pixels
     instead — a readable label beats a clipped one. */
  @media(max-width:400px){
    .h-kpi-range-chips button[data-added-range]{flex:0 0 auto;padding:.36rem .45rem}
  }
  /* Excel is a dropdown, so the .h-add-dd wrapper is what the row lays out —
     the button inside it must stop claiming the auto margin, and must not
     inherit the mobile full-width rule the module-wide +Ongeza menu uses. */
  .h-kpi-range-chips .h-export-dd{margin-left:auto;flex:0 0 auto}
  .h-kpi-range-chips .h-export-dd .h-range-export{margin-left:0}
  /* .wide lays its groups out on a two-column GRID, which is right for the
     module-wide menu (evenly sized groups) but leaves a hole here: the
     one-item "current view" group and the seven-item status group share a
     grid row, so the first column gets six rows of dead space. CSS columns
     flow instead, keeping each group whole. */
  .h-add-dd.open .h-add-dd-menu.h-export-menu.wide{
    display:block;column-count:2;column-gap:.6rem}
  .h-export-menu .h-mnew-group{break-inside:avoid}
  /* Inside each row the label takes the room and the count is pinned right, so
     the numbers read as a column you can scan rather than trailing text. */
  .h-export-menu button{justify-content:flex-start;text-align:left}
  .h-export-menu .h-exp-lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .h-export-menu .h-exp-note{flex:0 0 auto;font-size:.68rem;font-weight:700;color:var(--text-muted);
    font-variant-numeric:tabular-nums;max-width:52%;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  @media(max-width:760px){
    .h-kpi-range-chips .h-export-dd,
    .h-kpi-range-chips .h-export-dd .h-range-export{width:auto}
  }
  .h-filters{display:flex;gap:.55rem;flex-wrap:wrap;align-items:end;width:100%}
  .h-filters>div{min-width:0}
  .h-filters label{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:600;margin-bottom:.22rem}
  .h-filters input,.h-filters select,.h-form input,.h-form select,.h-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--panel-border);border-radius:11px;padding:.72rem .85rem;background:var(--input-bg,var(--panel-bg));color:var(--text-primary);font:inherit;font-size:.92rem;min-height:48px;line-height:1.25}
  /* Highlighted search field — used by EVERY search box in the module. They sat
     in the filter rows looking exactly like the greyed selects next to them, so
     organisers kept missing them. Accent frame + magnifier, and a stronger ring
     once a query is live so it is obvious *why* the list is short. */
  .h-search-field label{color:var(--h-primary) !important;font-weight:700}
  .h-search-wrap{position:relative;display:block;border-radius:11px;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--h-primary) 45%,transparent)}
  .h-search-wrap .h-search-ico{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
    display:grid;place-items:center;color:var(--h-primary);pointer-events:none}
  .h-search-wrap .h-search-ico svg{display:block}
  .h-search-wrap input{width:100%;box-sizing:border-box;padding-left:2.3rem !important;
    border-color:color-mix(in srgb,var(--h-primary) 55%,var(--panel-border)) !important;font-weight:600}
  .h-search-wrap input::placeholder{color:var(--text-muted);font-weight:500}
  .h-search-wrap:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--h-primary) 22%,transparent)}
  .h-search-wrap.active{box-shadow:0 0 0 2px color-mix(in srgb,var(--h-primary) 55%,transparent)}
  /* Sticky footer search (phone) and the module "+ Ongeza" form finder get the
     same treatment — same job, so they must read the same way. */
  .h-bottom-search input{border-color:color-mix(in srgb,var(--h-primary) 55%,var(--panel-border)) !important;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--h-primary) 45%,transparent);font-weight:600}
  .h-bottom-search input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--h-primary) 22%,transparent)}
  .h-bottom-search input.active{box-shadow:0 0 0 2px color-mix(in srgb,var(--h-primary) 55%,transparent)}
  .h-mnew-search input{border-color:color-mix(in srgb,var(--h-primary) 55%,var(--panel-border)) !important;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--h-primary) 40%,transparent)}
  .h-form textarea{min-height:92px;resize:vertical;padding-top:.8rem}
  .h-form{display:grid;gap:.85rem;padding:1.05rem 1.15rem 1.15rem;grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-form .full{grid-column:1/-1}
  .h-form label{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:700;margin-bottom:.32rem}
  .h-form .h-field-hint{font-size:.78rem;color:var(--text-muted);line-height:1.4;margin-top:.35rem}
  /* Segmented control (full vs partial payment, etc.) */
  .h-seg{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.3rem;background:var(--page-bg);border:1px solid var(--panel-border);border-radius:12px}
  .h-seg.h-seg-3{grid-template-columns:1fr 1fr 1fr}
  .h-seg button{border:0;background:transparent;border-radius:10px;padding:.72rem .55rem;font:inherit;font-weight:750;font-size:.84rem;color:var(--text-muted);cursor:pointer;min-height:48px;line-height:1.2}
  .h-seg.h-seg-3 button{font-size:.76rem;padding:.6rem .3rem}
  .h-seg button.active{background:var(--panel-bg);color:var(--h-primary);box-shadow:0 1px 6px rgba(15,23,42,.1);font-weight:800}
  .h-seg button:focus-visible{outline:2px solid var(--h-primary);outline-offset:1px}
  /* Payment summary strip */
  .h-pay-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem;padding:.9rem .8rem;border-radius:12px;background:var(--page-bg);border:1px solid var(--panel-border)}
  .h-pay-summary .cell span{display:block;color:var(--text-muted);font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;font-weight:700;margin-bottom:.2rem}
  .h-pay-summary .cell strong{display:block;font-size:1.02rem;font-weight:750;color:var(--text-primary);letter-spacing:-.01em;word-break:break-word}
  .h-pay-summary .cell.accent strong{color:var(--h-primary)}
  .h-dup-warn{margin:0 1.1rem .85rem;padding:.85rem .95rem;border-radius:12px;
    background:var(--warning-soft,color-mix(in srgb,var(--h-amber) 12%,transparent));
    border:1px solid color-mix(in srgb,var(--h-amber,#d97706) 32%,var(--panel-border));
    color:var(--text-primary);font-size:.84rem;line-height:1.45}
  .h-dup-warn strong{display:block;margin-bottom:.3rem;font-size:.9rem;font-weight:750}
  .h-dup-warn .h-dup-meta{margin-top:.35rem;color:var(--text-muted);font-size:.78rem}
  .h-guest-card{display:flex;align-items:center;gap:.75rem;padding:.85rem .9rem;border-radius:12px;background:var(--page-bg);border:1px solid var(--panel-border)}
  .h-guest-card .avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--h-primary) 14%,transparent);color:var(--h-primary);font-weight:800;font-size:1rem;flex:0 0 auto}
  .h-guest-card .meta{min-width:0;flex:1}
  .h-guest-card .meta strong{display:block;font-size:.98rem;color:var(--text-primary)}
  .h-guest-card .meta span{display:block;font-size:.8rem;color:var(--text-muted);margin-top:.12rem}
  .h-amt-field input{font-size:1.4rem !important;font-weight:750;letter-spacing:-.02em;min-height:56px !important;padding:.85rem 1rem !important}
  .h-chip-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
  .h-chip-row button{border:1px solid var(--panel-border);background:var(--panel-bg);border-radius:999px;padding:.42rem .8rem;font-size:.78rem;font-weight:700;color:var(--text-muted);cursor:pointer;min-height:36px;font:inherit}
  .h-chip-row button:hover,.h-chip-row button.active{border-color:var(--h-primary);color:var(--h-primary);background:color-mix(in srgb,var(--h-primary) 10%,transparent)}
  .h-check-row{display:flex;align-items:flex-start;gap:.65rem;padding:.75rem .85rem;border:1px solid var(--panel-border);border-radius:11px;background:var(--page-bg);cursor:pointer}
  .h-check-row input{width:auto;min-height:0;margin-top:.15rem;accent-color:var(--h-primary);transform:scale(1.15)}
  .h-check-row span{font-size:.88rem;font-weight:650;color:var(--text-primary);line-height:1.35;text-transform:none;letter-spacing:0}
  .h-theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
  .h-theme-card{position:relative;border:2px solid var(--panel-border);border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:9/13;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.4rem;transition:border-color .15s,transform .1s}
  .h-theme-card:hover{transform:translateY(-2px)}
  .h-theme-card.sel{border-color:var(--brand,#c45c4a);box-shadow:0 0 0 2px var(--brand,#c45c4a) inset}
  .h-theme-card .tt-script{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:1.15rem;line-height:1;margin-bottom:.15rem}
  .h-theme-card .tt-names{font-family:Georgia,serif;font-size:.5rem;letter-spacing:.06em}
  .h-theme-card .tt-rule{width:34%;height:2px;border-radius:2px;margin:.28rem 0}
  .h-theme-card .tt-label{position:absolute;bottom:.28rem;left:0;right:0;font-size:.52rem;font-weight:600;color:var(--text-muted)}
  .h-theme-card .tt-tick{position:absolute;top:.25rem;right:.3rem;width:14px;height:14px;border-radius:50%;background:var(--brand,#c45c4a);color:#fff;font-size:.6rem;line-height:14px;display:none}
  .h-theme-card.sel .tt-tick{display:block}
  @media(max-width:430px){.h-theme-grid{grid-template-columns:repeat(2,1fr)}}
  /* ── Selects ──────────────────────────────────────────────────────────────
     The native control drew a cramped, platform-specific arrow that sat right
     on top of long option text. One crisp chevron, and enough right padding
     that the value can never run under it. app.css resets every control with
     `select{background:… !important}`, so the chevron has to be !important
     too or the shorthand wipes it. */
  .h-page select,.h-modal select{
    appearance:none;-webkit-appearance:none;-moz-appearance:none;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238d9db6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;background-position:right .62rem center !important;
    background-size:15px 15px !important;
    padding-right:2.15rem;text-overflow:ellipsis;cursor:pointer;white-space:nowrap}
  .h-page select::-ms-expand,.h-modal select::-ms-expand{display:none}
  .h-page select:hover,.h-modal select:hover{border-color:color-mix(in srgb,var(--h-primary) 45%,var(--panel-border))}
  .h-modal select option{white-space:nowrap}

  /* ── Piga Simu ─────────────────────────────────────────────────────────
     A calling tab is used one-handed, standing up, with a phone against your
     ear — so the dial target is the single biggest thing in the row, and the
     call state reads as a coloured word rather than an icon to decode. */
  .h-call-lead{margin:0;padding:.15rem 1rem .85rem;font-size:.84rem;line-height:1.5;
    color:var(--text-muted)}
  .h-call-start-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
    padding:.2rem 1rem 1rem}
  .h-call-start-count{font-size:.82rem;font-weight:700;color:var(--text-primary)}
  .h-call-start-count.empty{color:var(--h-amber,#d97706)}
  .h-call-start-row .btn{margin-left:auto;min-height:48px;padding-left:1.4rem;padding-right:1.4rem}
  .h-call-session{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
    margin:0 0 .85rem;padding:.75rem 1rem;border:1px solid var(--panel-border);
    border-radius:14px;background:var(--panel-bg)}
  .h-call-session-id{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1 1 12rem}
  .h-call-eyebrow{font-size:.6rem;text-transform:uppercase;letter-spacing:.09em;
    font-weight:700;color:var(--h-primary)}
  .h-call-session-id strong{font-size:.95rem;font-weight:750;color:var(--text-primary);
    overflow-wrap:anywhere}
  .h-call-since{font-size:.7rem;color:var(--text-muted);font-variant-numeric:tabular-nums}
  .h-call-progress{display:flex;flex-direction:column;gap:.25rem;flex:1 1 9rem;min-width:8rem}
  .h-call-bar{height:7px;border-radius:99px;background:var(--page-bg);overflow:hidden;
    border:1px solid var(--panel-border)}
  .h-call-bar span{display:block;height:100%;background:var(--h-primary);transition:width .2s}
  .h-call-progress-txt{font-size:.7rem;font-weight:700;color:var(--text-muted);
    font-variant-numeric:tabular-nums}
  .h-call-day{display:flex;align-items:center;gap:.4rem}
  .h-call-day label{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
    font-weight:700;color:var(--text-muted)}
  /* The dial target. Sized as a primary action, not a link — this is the
     control the whole tab exists for. */
  .h-call-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
    padding:.42rem .8rem;border:1px solid var(--h-primary);border-radius:10px;
    background:var(--h-primary-soft);color:var(--h-primary);font-weight:750;
    font-size:.88rem;text-decoration:none;font-variant-numeric:tabular-nums;
    white-space:nowrap}
  .h-call-btn:hover{background:var(--h-primary);color:var(--paper,#fff)}
  .h-call-btn svg{flex:0 0 auto}
  .h-call-nonum{font-size:.76rem;color:var(--text-muted)}
  .h-call-sub{font-size:.7rem;color:var(--text-muted);margin-top:.12rem}
  .h-call-pill{display:inline-block;padding:.2rem .5rem;border-radius:999px;
    font-size:.68rem;font-weight:750;white-space:nowrap}
  .h-call-pill.ok{background:color-mix(in srgb,var(--h-green,#16a34a) 15%,transparent);
    color:var(--h-green,#16a34a)}
  .h-call-pill.warn{background:color-mix(in srgb,var(--h-amber,#d97706) 16%,transparent);
    color:var(--h-amber,#d97706)}
  .h-call-pill.bad{background:color-mix(in srgb,var(--h-red,#ef4f5f) 15%,transparent);
    color:var(--h-red,#ef4f5f)}
  .h-call-pill.todo{background:var(--page-bg);color:var(--text-muted);
    border:1px solid var(--panel-border)}
  .h-call-when{font-size:.66rem;color:var(--text-muted);margin-top:.18rem;
    font-variant-numeric:tabular-nums}
  .h-call-note{font-size:.7rem;color:var(--text-muted);margin-top:.18rem;
    line-height:1.4;overflow-wrap:anywhere}
  /* Covered rows stay visible (you may still want to re-dial) but recede. */
  .h-call-table tr.h-call-done .h-td-title strong{color:var(--text-muted)}
  @media(max-width:760px){
    .h-call-start-row .btn{margin-left:0;width:100%}
    .h-call-session{gap:.5rem;padding:.65rem .8rem}
    .h-call-session .btn{width:100%}
  }
  .h-empty{padding:2.4rem 1rem;text-align:center;color:var(--text-muted);font-size:.84rem}
  .h-empty-rich{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2.2rem 1.2rem}
  .h-empty-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--h-primary-soft);color:var(--h-primary)}
  .h-empty-rich strong{font-size:.95rem;color:var(--text-primary);font-weight:700}
  .h-empty-hint{font-size:.8rem;color:var(--text-muted);line-height:1.5;max-width:26rem}
  .h-empty strong{display:block;color:var(--text-primary);font-size:.92rem;margin-bottom:.25rem}
  /* Loading placeholders */
  .h-skel{display:block;background:var(--surface-muted,rgba(27,46,90,.08));border-radius:6px;animation:h-pulse 1.4s ease-in-out infinite}
  .h-skel-card .h-kpi-top{align-items:center}
  .h-skel-row{display:flex;align-items:center;gap:1rem;padding:.72rem 0;border-bottom:1px solid var(--panel-border)}
  .h-skel-row:last-child{border-bottom:0}
  @keyframes h-pulse{0%,100%{opacity:1}50%{opacity:.45}}
  @media(prefers-reduced-motion:reduce){.h-skel{animation:none}}
  .h-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(1rem + env(safe-area-inset-bottom,0px));background:var(--text-primary);color:var(--panel-bg);padding:.7rem 1.1rem;border-radius:999px;font-size:.82rem;z-index:120;opacity:0;pointer-events:none;transition:opacity .2s;max-width:min(92vw,420px);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .h-toast.show{opacity:1}
  .h-toast.ok{background:#13795b;color:#fff}
  .h-toast.err{background:#d92d3d;color:#fff}
  /* Full-screen SMS send/schedule progress */
  .h-sms-progress-ov{position:fixed;inset:0;z-index:13000;background:rgba(9,18,36,.55);backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;padding:1.25rem;opacity:0;pointer-events:none;transition:opacity .2s}
  .h-sms-progress-ov.open{opacity:1;pointer-events:auto}
  .h-sms-progress-card{width:min(380px,100%);background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:16px;
    padding:1.25rem 1.15rem 1.1rem;box-shadow:0 24px 60px rgba(0,0,0,.35);text-align:center}
  .h-sms-progress-card .spin{width:42px;height:42px;margin:0 auto .85rem;border:3px solid color-mix(in srgb,var(--h-primary) 22%,transparent);
    border-top-color:var(--h-primary);border-radius:50%;animation:h-spin .7s linear infinite}
  @keyframes h-spin{to{transform:rotate(360deg)}}
  .h-sms-progress-card h3{margin:0 0 .35rem;font-size:1.02rem;font-weight:750;color:var(--text-primary)}
  .h-sms-progress-card p{margin:0;font-size:.84rem;color:var(--text-muted);line-height:1.45}
  .h-sms-progress-card .bar{margin-top:.9rem;height:6px;background:var(--page-bg);border-radius:99px;overflow:hidden}
  .h-sms-progress-card .bar>i{display:block;height:100%;width:30%;border-radius:99px;background:var(--h-primary);
    animation:h-bar 1.1s ease-in-out infinite}
  @keyframes h-bar{0%{transform:translateX(-100%);width:30%}50%{width:55%}100%{transform:translateX(320%);width:30%}}
  .h-sms-progress-card.done .spin{display:none}
  .h-sms-progress-card.done .bar{display:none}
  .h-sms-progress-card .result{font-size:1.5rem;margin-bottom:.35rem}
  .h-btn-busy{opacity:.72;pointer-events:none;position:relative}
  .h-set-msg{display:none;margin:.65rem 0 0;padding:.65rem .8rem;border-radius:9px;font-size:.84rem;line-height:1.4}
  .h-set-msg.show{display:block}
  .h-set-msg.ok{background:rgba(19,121,91,.1);color:#13795b;border:1px solid rgba(19,121,91,.22)}
  .h-set-msg.err{background:rgba(217,45,61,.08);color:#d92d3d;border:1px solid rgba(217,45,61,.2)}
  .h-connected-box{padding:.85rem 1rem;border:1px solid var(--panel-border);border-radius:12px;background:var(--page-bg)}
  .h-connected-box .h-conn-title{font-weight:750;font-size:.95rem;color:var(--text-primary);margin:0 0 .25rem}
  .h-connected-box .h-conn-meta{font-size:.82rem;color:var(--text-muted);line-height:1.45}
  .h-modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:flex-end;justify-content:center;z-index:40;padding:0;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .h-modal-bg.open{display:flex}
  .h-modal{background:var(--panel-bg);border-radius:18px 18px 0 0;max-width:440px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 -16px 48px rgba(0,0,0,.22)}
  .h-modal h3{margin:0;padding:1.05rem 1.15rem .95rem;border-bottom:1px solid var(--panel-border);font-size:1.08rem;font-weight:750;position:sticky;top:0;background:var(--panel-bg);z-index:1;letter-spacing:-.01em;display:flex;align-items:center;gap:.5rem}
  /* Close affordance in the header of EVERY modal — people look for an X
     before they look for a Ghairi button. Injected by openModal() so all
     26 modals (and any future one) get it without per-modal markup. */
  .h-modal-x{margin-left:auto;flex:none;width:32px;height:32px;padding:0;border-radius:50%;
    border:1px solid var(--panel-border);background:var(--page-bg);color:var(--text-muted);
    font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
  .h-modal-x:hover{color:var(--text-primary);border-color:var(--text-muted)}
  /* Help / intro copy placed outside .h-form still needs horizontal padding */
  .h-modal > p,.h-modal-intro{margin:0;padding:.9rem 1.15rem 0;font-size:.86rem;color:var(--text-muted);line-height:1.5}
  .h-form .h-modal-intro{padding:0;margin:0}
  .h-modal-actions{display:flex;justify-content:stretch;gap:.55rem;padding:.85rem 1.15rem calc(1.15rem + env(safe-area-inset-bottom,0px));position:sticky;bottom:0;background:var(--panel-bg);border-top:1px solid var(--panel-border)}
  .h-modal-actions .btn{flex:1;min-height:48px;justify-content:center;font-weight:750;min-width:0;white-space:normal;line-height:1.2;text-align:center}
  /* app.css boxes every direct <div> of an element whose id ends in "modal"
     ([id$="modal" i] > div — meant for other pages' modal cards). Our #modal
     is the sheet itself: its blocks (form, actions, lists) must sit flat on it,
     not each in its own bordered card. */
  #modal.h-modal > div{border:0 !important;border-radius:0 !important;box-shadow:none !important;background:var(--panel-bg) !important}
  #modal.h-modal > div.h-modal-actions{border-top:1px solid var(--panel-border) !important}
  .h-modal-actions .btn-primary{flex:1.35}
  /* Meeting sheet: one-handed, first-screen fields only. Extra options sit
     behind “Zaidi”. Scroll the form, not the whole sheet, so the native
     type list is not clipped by overflow:auto on the panel. */
  .h-modal--compact{display:flex;flex-direction:column;overflow:hidden;max-height:min(92dvh,92vh)}
  .h-modal--compact h3{padding:.7rem 1rem .62rem;font-size:1rem}
  .h-modal--compact .h-form{
    flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
    gap:.48rem .5rem;padding:.65rem .9rem .7rem;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .h-modal--compact .h-form input,
  .h-modal--compact .h-form select,
  .h-modal--compact .h-form textarea{min-height:42px;padding:.42rem .65rem;font-size:.86rem}
  .h-modal--compact .h-seg{padding:.18rem;border-radius:10px}
  .h-modal--compact .h-seg button{min-height:40px;padding:.42rem .35rem;font-size:.8rem}
  .h-modal--compact .h-field-hint{margin:.15rem 0 0;font-size:.7rem;line-height:1.35}
  .h-modal--compact .h-modal-actions{padding:.5rem .9rem calc(.65rem + env(safe-area-inset-bottom,0px))}
  .h-modal--compact .h-modal-actions .btn{min-height:44px}
  .h-modal--compact .h-meet-more{border:1px solid var(--panel-border);border-radius:10px;padding:0}
  .h-modal--compact .h-meet-more>summary{
    list-style:none;cursor:pointer;font-size:.78rem;font-weight:750;padding:.55rem .65rem;
    color:var(--text-muted);text-transform:none;letter-spacing:0}
  .h-modal--compact .h-meet-more>summary::-webkit-details-marker{display:none}
  .h-modal--compact .h-meet-more>summary::after{content:'';display:inline-block;width:1em;height:1em;flex:none;background-color:currentColor;-webkit-mask:var(--nz-chev-mask) center/contain no-repeat;mask:var(--nz-chev-mask) center/contain no-repeat;float:right;color:var(--text-muted);transition:transform .15s}
  .h-modal--compact .h-meet-more[open]>summary{border-bottom:1px solid var(--panel-border)}
  .h-modal--compact .h-meet-more[open]>summary::after{transform:rotate(180deg)}
  .h-modal--compact .h-meet-more-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.48rem .5rem;padding:.55rem .65rem .7rem}
  .h-modal--compact .h-meet-more-body .full{grid-column:1/-1}
  .h-modal--compact .h-check-compact{display:flex;align-items:center;gap:.45rem;font-weight:700;
    text-transform:none;letter-spacing:0;margin:0;font-size:.84rem;color:var(--text-primary)}

  /* Checkbox-list rows for a multi-pick field (kikao guest groups/committees) —
     plain rows, not full chip buttons, so a long committee name never truncates. */
  .h-check-list{display:flex;flex-direction:column;gap:.4rem;margin-top:.3rem}
  .h-check-chip{display:flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:500;
    text-transform:none;letter-spacing:0;color:var(--text-primary)}
  .h-check-chip input{width:auto;flex:none}
  /* Collapsed-by-default dropdown wrapping a .h-check-list — keeps a
     multi-pick field to one line until the organiser actually opens it,
     instead of the checkbox rows always taking up the full modal height. */
  .h-msel-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    padding:.62rem .8rem;border:1px solid var(--panel-border);border-radius:10px;
    background:var(--page-bg);color:var(--text-primary);font-size:.86rem;font-weight:500;
    text-align:left;cursor:pointer;text-transform:none;letter-spacing:0}
  .h-msel-toggle span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .h-msel-toggle::after{content:'';display:inline-block;width:1em;height:1em;flex:none;background-color:currentColor;-webkit-mask:var(--nz-chev-mask) center/contain no-repeat;mask:var(--nz-chev-mask) center/contain no-repeat;color:var(--text-muted);margin-left:.4rem;transition:transform .15s}
  .h-msel-toggle.open::after{transform:rotate(180deg)}
  .h-msel-panel{margin-top:.4rem;padding:.6rem .7rem;border:1px solid var(--panel-border);
    border-radius:10px;background:var(--page-bg);max-height:220px;overflow:auto}
  .h-msel-panel[hidden]{display:none}
  .h-link{color:var(--h-primary);font-weight:650;text-decoration:none;word-break:break-all}
  .h-wa{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;padding:1rem;background:var(--page-bg);border-radius:10px;line-height:1.45}
  /* Compact row actions. They may wrap — forcing one line widened the invites
     and payments tables past their container — but the tighter buttons mean a
     three-action row still fits on a single line at normal widths. */
  .h-row-actions{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end;align-items:center}
  .h-row-actions .btn{font-size:.72rem;padding:.34rem .5rem;white-space:nowrap;line-height:1.2}
  .h-row-actions .btn-danger-ghost{color:var(--h-red);border-color:color-mix(in srgb,var(--h-red) 28%,transparent)}
  .h-row-actions .btn-danger-ghost:hover{background:var(--danger-soft,color-mix(in srgb,var(--h-red) 12%,transparent))}
  @media(max-width:760px){.h-row-actions{flex-wrap:wrap;justify-content:flex-start}.h-row-actions .btn{flex:1 1 auto;justify-content:center}}

  /* Keyboard focus — the module had no visible ring anywhere */
  .h-tab:focus-visible,.h-group-chips button:focus-visible,.h-bottom-nav button:focus-visible,
  .h-set-nav button:focus-visible,.h-theme-card:focus-visible,.h-lang:focus-visible{
    outline:2px solid var(--h-primary);outline-offset:2px;border-radius:8px}
  .h-filters input:focus,.h-filters select:focus,.h-form input:focus,.h-form select:focus,.h-form textarea:focus,
  .h-report-tools select:focus,.h-report-tools input:focus,.h-event-select:focus{
    outline:2px solid color-mix(in srgb,var(--accent) 40%,transparent);outline-offset:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

  @media(prefers-reduced-motion:reduce){
    .h-theme-card,.h-progress>i,.h-tab,.h-toast{transition:none !important}
    .h-theme-card:hover{transform:none}
  }
  /* POS-style report tools */
  .h-report-tools{display:grid;grid-template-columns:minmax(160px,1.2fr) minmax(120px,1fr) minmax(120px,1fr) auto auto auto;gap:.55rem;align-items:end;padding:.85rem 1rem;border-bottom:1px solid var(--panel-border)}
  .h-report-tools label{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:700;margin-bottom:.22rem}
  .h-report-tools select,.h-report-tools input{width:100%;box-sizing:border-box;border:1px solid var(--panel-border);border-radius:9px;padding:.52rem .68rem;background:var(--input-bg,var(--panel-bg));color:var(--text-primary);font:inherit;font-size:.8rem}
  .h-report-tools.custom-dates .h-rpt-custom{display:block}
  .h-rpt-custom{display:none}
  .h-report-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.65rem;padding:.85rem 1rem;border-bottom:1px solid var(--panel-border)}
  .h-report-metric{padding:.65rem .7rem;background:var(--page-bg);border-radius:9px}
  .h-report-metric span{display:block;color:var(--text-muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;font-weight:600}
  .h-report-metric strong{display:block;margin-top:.28rem;color:var(--text-primary);font-size:.95rem;font-weight:650}
  .h-report-note{padding:.7rem 1rem;background:var(--warning-soft,color-mix(in srgb,var(--h-amber) 10%,transparent));color:var(--text-primary);font-size:.72rem;line-height:1.45;border-bottom:1px solid var(--panel-border)}
  .h-report-filter-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.55rem;padding:.75rem 1rem;border-bottom:1px solid var(--panel-border);background:var(--page-bg)}
  .h-report-filter-row label{display:block;font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:600;margin-bottom:.2rem}
  .h-report-filter-row select,.h-report-filter-row input{width:100%;box-sizing:border-box;border:1px solid var(--panel-border);border-radius:9px;padding:.48rem .65rem;background:var(--panel-bg);color:var(--text-primary);font:inherit;font-size:.8rem}
  .h-report-actions{display:flex;flex-wrap:wrap;gap:.45rem;padding:.75rem 1rem;border-bottom:1px solid var(--panel-border)}
  /* Mobile bottom quick nav (primary surfaces) */
  /* Keep AI Harusi FAB above mobile bottom nav */
  body.nzura-app-shell .ai-mode-fab{bottom:calc(108px + env(safe-area-inset-bottom,0px));right:14px;z-index:10050}
  body.nzura-app-shell .ai-mode-panel{bottom:calc(164px + env(safe-area-inset-bottom,0px));right:10px;left:10px;width:auto;max-width:100%;z-index:10040}
  @media(min-width:761px){
    body.nzura-app-shell .ai-mode-fab{bottom:24px;right:24px}
    body.nzura-app-shell .ai-mode-panel{bottom:80px;right:24px;left:auto;width:420px}
  }
  /* Sticky mobile footer: search row (dynamic) + 5 tab buttons */
  /* NzuraPicker search-select-create fields — match harusi form inputs */
  .h-form .nz-picker-search,.nzp-mini-body .form-control{width:100%;box-sizing:border-box;
    border:1px solid var(--panel-border);border-radius:9px;padding:.6rem .7rem;font:inherit;
    font-size:.9rem;background:var(--input-bg,var(--panel-bg));color:var(--text-primary)}
  .h-form .nz-picker-search:focus,.nzp-mini-body .form-control:focus{outline:2px solid color-mix(in srgb,var(--h-primary) 40%,transparent);outline-offset:0;border-color:var(--h-primary)}
  .h-form .nz-picker{--brand-primary:var(--h-primary);--overlay-bg:var(--panel-bg);--border:var(--panel-border);--text-primary:var(--text-primary);--text-muted:var(--text-muted);--surface-muted:var(--page-bg)}
  .nzp-mini{--brand-primary:var(--h-primary);--overlay-bg:var(--panel-bg);--border:var(--panel-border);--text-primary:var(--text-primary);--text-muted:var(--text-muted)}
  .nzp-mini-foot .btn{min-height:44px}
  /* Consolidated "+ New" toolbar (Maandalizi) — like accounting's +New menu.
     On desktop the primary action sits on the RIGHT (suite convention); on
     mobile it goes full-width first so it stays thumb-reachable. */
  .h-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin:0 0 .65rem}
  @media(min-width:761px){
    .h-toolbar .h-add-dd{order:3;margin-left:auto}
    .h-toolbar .h-toolbar-view{order:2}
    .h-toolbar>span[style]{order:1}
  }
  .h-add-dd{position:relative;display:inline-block}
  .h-add-dd-btn{display:inline-flex;align-items:center;gap:.35rem}
  .h-add-dd-btn .caret{width:.5rem;height:.5rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);margin:-2px 0 0 .1rem;opacity:.9;transition:transform .15s}
  .h-add-dd.open .h-add-dd-btn .caret{transform:rotate(-135deg);margin-top:2px}
  /* The menu is FIXED, not absolute: its .h-card ancestor sets overflow:hidden
     (needed for the rounded corners), which clipped an absolutely-positioned
     menu right off the screen. Fixed escapes the clip; JS positions it under
     the button and keeps it inside the viewport. */
  .h-add-dd-menu{position:fixed;top:0;left:0;z-index:1200;min-width:210px;max-width:calc(100vw - 1.5rem);
    background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:12px;
    box-shadow:0 14px 40px rgba(0,0,0,.16);padding:.4rem;display:none}
  .h-add-dd.open .h-add-dd-menu{display:block}
  .h-add-dd-menu button{display:flex;align-items:center;gap:.55rem;width:100%;box-sizing:border-box;
    padding:.6rem .6rem;border:0;background:transparent;color:var(--text-primary);font:inherit;
    font-size:.86rem;font-weight:600;text-align:left;cursor:pointer;border-radius:8px;min-height:44px}
  .h-add-dd-menu button:hover{background:var(--page-bg)}
  .h-add-dd-menu .ddic{display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;
    border-radius:8px;background:var(--h-primary-soft);color:var(--h-primary)}
  /* Module-wide "+ Ongeza": every create-form in Harusi, grouped in two
     columns with a search box — the farming +New pattern. */
  .h-add-dd-menu.wide{min-width:min(430px,calc(100vw - 1.25rem));padding:.5rem;overflow:auto}
  .h-add-dd.open .h-add-dd-menu.wide{display:grid;grid-template-columns:1fr 1fr;gap:0 .6rem;align-content:start}
  .h-mnew-search{grid-column:1/-1;margin-bottom:.35rem}
  .h-mnew-search input{width:100%;box-sizing:border-box;min-height:36px;border:1px solid var(--panel-border);
    border-radius:10px;background:var(--input-bg,var(--panel-bg));color:var(--text-primary);font:inherit;
    font-size:.82rem;padding:.35rem .6rem;outline:none}
  .h-mnew-search input:focus{border-color:var(--h-primary)}
  .h-mnew-head{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
    color:var(--text-muted);padding:.25rem .45rem .22rem;border-bottom:1px solid var(--panel-border);
    margin-bottom:.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* Compact rows (the farming +New density) — the base .h-add-dd-menu button
     rule is sized for a 3-item menu; at 18 items that ran the list past the
     fold on a phone. min-height is dropped: padding still clears 34px. */
  .h-add-dd-menu.wide button{min-height:0;font-size:.8rem;padding:.34rem .45rem;
    gap:.45rem;font-weight:600;border-radius:7px}
  .h-add-dd-menu.wide .ddic{width:21px;height:21px;border-radius:6px}
  .h-mnew-empty{grid-column:1/-1;display:none;padding:.6rem;text-align:center;color:var(--text-muted);
    font-size:.78rem;border:1px dashed var(--panel-border);border-radius:10px}
  .h-toolbar-view{font-size:.78rem;padding:.4rem .7rem}
  @media(max-width:760px){
    .h-toolbar-view{flex:1;text-align:center;justify-content:center}
    .h-add-dd,.h-add-dd-btn{width:100%}
    .h-add-dd-btn{justify-content:center}
    .h-add-dd-menu{left:0;right:0;min-width:0}
    .h-add-dd-menu.wide{min-width:0;padding:.4rem}
    .h-add-dd.open .h-add-dd-menu.wide{gap:0 .25rem}
    .h-add-dd-menu.wide button{font-size:.75rem;padding:.3rem .25rem;gap:.3rem;min-height:0}
    .h-add-dd-menu.wide .ddic{width:19px;height:19px;border-radius:5px}
    .h-mnew-head{font-size:.55rem;padding:.22rem .3rem .2rem}
    .h-toolbar>span[style]{display:none}
  }
  /* Waalikwa action row — + Ongeza · + Mwalikwa · Excel · Rekodi malipo.
     Wraps rather than squeezing: four buttons at 390px used to clip
     "Rekodi malipo" mid-word. */
  .h-guest-actions{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;
    flex-wrap:wrap;border-bottom:1px solid var(--panel-border)}
  .h-guest-actions>.btn{flex:0 0 auto;min-height:46px;white-space:nowrap}
  .h-guest-actions>.h-add-dd{flex:0 0 auto}
  .h-guest-actions .h-add-dd-btn{min-height:46px;white-space:nowrap}
  .h-guest-actions .h-pay-btn{margin-left:auto}
  .lbl-narrow{display:none}
  @media(max-width:760px){
    .lbl-wide{display:none}
    .lbl-narrow{display:inline}
    .h-guest-actions{gap:.4rem}
    /* Two per row, not four across — everything stays legible and >=44px. */
    .h-guest-actions>.btn,.h-guest-actions>.h-add-dd{flex:1 1 calc(50% - .2rem);min-width:0}
    .h-guest-actions .h-pay-btn{margin-left:0}
    .h-guest-actions .btn{padding-left:.35rem;padding-right:.35rem;font-size:.82rem;
      justify-content:center;overflow:hidden;text-overflow:ellipsis}
    .h-guest-actions .h-add-dd-btn{width:100%;gap:.25rem}
  }
  /* Inline SMS template preview/editor (kikao reminders, automations) */
  .h-tpl-edit{margin-top:.5rem;border:1px solid var(--panel-border);border-radius:11px;
    background:var(--page-bg);padding:.5rem}
  .h-tpl-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
    flex-wrap:wrap;margin-bottom:.4rem}
  .h-tpl-meta{font-size:.7rem;font-weight:700;color:var(--text-muted);font-variant-numeric:tabular-nums}
  .h-tpl-meta.warn{color:var(--h-red,#ef4f5f)}
  .h-tpl-acts{display:flex;gap:.35rem}
  .h-tpl-btn{font-size:.72rem;padding:.28rem .55rem;min-height:32px}
  .h-tpl-edit textarea{width:100%;box-sizing:border-box;min-height:92px;resize:vertical;
    border:1px solid var(--panel-border);border-radius:9px;padding:.5rem .6rem;
    background:var(--input-bg,var(--panel-bg));color:var(--text-primary);font:inherit;
    font-size:.85rem;line-height:1.45}
  .h-tpl-edit textarea:focus{outline:2px solid color-mix(in srgb,var(--h-primary) 40%,transparent);
    border-color:var(--h-primary)}
  .h-tpl-hint{margin:.35rem 0 0;font-size:.72rem;color:var(--text-muted);line-height:1.4}
  .h-filter-bar{padding:.7rem 1rem;border-bottom:1px solid var(--panel-border)}
  /* Family pledge strip (Waalikwa) — one shared pot summarised on a single
     line so it never pushes the guest list off screen while searching; tap
     to reveal the actions. */
  .h-fam-card{margin:.6rem 1rem 0;border:1px solid var(--panel-border);border-radius:11px;
    background:var(--page-bg);overflow:hidden}
  .h-fam-sum{display:flex;align-items:center;gap:.45rem;width:100%;box-sizing:border-box;
    padding:.5rem .6rem;border:0;background:transparent;color:var(--text-primary);font:inherit;
    text-align:left;cursor:pointer;list-style:none;min-height:44px}
  .h-fam-sum::-webkit-details-marker{display:none}
  .h-fam-caret{flex:0 0 auto;width:.42rem;height:.42rem;border-right:2px solid var(--text-muted);
    border-bottom:2px solid var(--text-muted);transform:rotate(-45deg);margin-left:.15rem;
    transition:transform .15s}
  .h-fam-card[open] .h-fam-caret{transform:rotate(45deg)}
  /* Collapsed shows the one-line strip; open restores the full card header
     (eyebrow, name, status badge) so expanding gives back the original design
     rather than a stretched-out strip. */
  .h-fam-strip{flex:1 1 auto;display:flex;align-items:center;gap:.45rem;min-width:0}
  .h-fam-head{flex:1 1 auto;display:flex;align-items:flex-start;justify-content:space-between;
    gap:.6rem;min-width:0}
  .h-fam-card:not([open]) .h-fam-head{display:none}
  .h-fam-card[open] .h-fam-strip{display:none}
  .h-fam-card[open] .h-fam-sum{align-items:flex-start;padding:.75rem .9rem .55rem}
  .h-fam-card[open] .h-fam-caret{margin-top:.5rem}
  .h-fam-id{min-width:0}
  .h-fam-eyebrow{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;
    color:var(--text-muted);font-weight:700}
  .h-fam-title{display:block;font-size:1.02rem;font-weight:750;color:var(--text-primary);
    line-height:1.25;margin-top:.12rem;overflow-wrap:anywhere}
  .h-fam-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;padding:.7rem 0 .2rem}
  .h-fam-figs>div{min-width:0}
  .h-fam-figs span{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;
    color:var(--text-muted);font-weight:700}
  .h-fam-figs strong{display:block;margin-top:.15rem;font-size:.92rem;font-weight:300;letter-spacing:-.025em;
    color:var(--text-primary);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
  .h-fam-figs .owing strong{color:var(--h-red,#ef4f5f)}
  .h-fam-name{flex:0 1 auto;font-size:.86rem;font-weight:750;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .h-fam-line{flex:1 1 auto;display:flex;align-items:baseline;gap:.5rem;min-width:0;
    justify-content:flex-end;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
  .h-fam-line b{font-size:.78rem;font-weight:700}
  .h-fam-line i{font-style:normal;font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;
    color:var(--text-muted);font-weight:700;margin-right:.15rem}
  .h-fam-line .owing b{color:var(--h-red,#ef4f5f)}
  .h-fam-tick{flex:0 0 auto;font-size:.72rem;font-weight:700;color:var(--h-primary)}
  .h-fam-tick.done{color:var(--h-green,#1f9d55)}
  .h-fam-body{padding:0 .9rem .8rem}
  .h-fam-bar{height:6px;background:var(--panel-border);border-radius:999px;overflow:hidden}
  .h-fam-bar>i{display:block;height:100%;background:var(--h-primary);border-radius:999px;transition:width .35s ease}
  /* A finished pot in full-width brand rose reads as an alarm, not a win. */
  .h-fam-card.done .h-fam-bar>i{background:var(--h-green,#1f9d55)}
  .h-fam-actions{display:flex;flex-wrap:wrap;gap:.45rem;padding-top:.7rem}
  .h-fam-actions .btn{flex:1;justify-content:center;font-size:.78rem;min-height:42px}
  @media(max-width:760px){
    /* Still one line on a phone: money is abbreviated (4.0M) so the strip
       costs ~44px instead of a third of the screen above the guest list. */
    .h-fam-figs{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
    .h-fam-sum{padding:.45rem .5rem;gap:.35rem}
    .h-fam-card[open] .h-fam-sum{padding:.7rem .75rem .5rem}
    .h-fam-body{padding:0 .75rem .75rem}
    .h-fam-line{gap:.35rem}
    .h-fam-line b{font-size:.72rem}
    .h-fam-line i{font-size:.55rem;margin-right:.1rem}
    .h-fam-name{font-size:.78rem;max-width:34%}
  }
  /* Smallest phones: progress drops from the strip — the bar shows it once
     the strip is opened, and the money figures matter more. */
  @media(max-width:400px){ .h-fam-line .h-fam-pct{display:none} }
  /* Central setup checklist (Automation mode + Settings) */
  .h-setup-pct{font-size:1.05rem;font-weight:800;color:var(--h-primary)}
  .h-setup-bar{height:5px;background:var(--page-bg);overflow:hidden}
  .h-setup-bar>i{display:block;height:100%;background:var(--h-primary);transition:width .35s ease}
  .h-setup-list{display:flex;flex-direction:column}
  .h-setup-row{display:flex;align-items:center;gap:.7rem;width:100%;box-sizing:border-box;
    padding:.7rem 1rem;border:0;border-top:1px solid var(--panel-border);background:none;
    font:inherit;text-align:left;cursor:pointer;min-height:56px}
  .h-setup-row:hover{background:var(--page-bg)}
  .h-setup-tick{display:grid;place-items:center;width:24px;height:24px;flex:0 0 auto;border-radius:50%;
    border:2px solid var(--panel-border);color:#fff;font-size:.78rem;font-weight:800}
  .h-setup-row.done .h-setup-tick{background:var(--h-green,#15996b);border-color:var(--h-green,#15996b)}
  .h-setup-main{flex:1;min-width:0;display:block}
  .h-setup-title{display:block;font-size:.85rem;font-weight:650;color:var(--text-primary);line-height:1.3}
  .h-setup-row.done .h-setup-title{color:var(--text-muted)}
  .h-setup-hint{display:block;font-size:.72rem;color:var(--text-muted);margin-top:.1rem;overflow-wrap:anywhere}
  .h-setup-go{flex:0 0 auto;font-size:.76rem;font-weight:750;color:var(--h-primary)}
  /* SMS Automation cards */
  .h-auto-summary{display:flex;flex-wrap:wrap;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid var(--panel-border);
    font-size:.8rem;color:var(--text-muted)}
  .h-auto-summary strong{color:var(--text-primary);font-size:.95rem}
  .h-auto-list{display:grid;gap:.6rem;padding:.75rem 1rem}
  .h-auto-card{border:1px solid var(--panel-border);border-radius:12px;padding:.7rem .8rem;background:var(--page-bg)}
  .h-auto-card.is-active{border-color:color-mix(in srgb,var(--h-primary) 32%,var(--panel-border));background:var(--panel-bg)}
  .h-auto-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}
  .h-auto-title{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;min-width:0}
  .h-auto-title strong{font-size:.88rem;font-weight:700;color:var(--text-primary);line-height:1.3}
  .h-auto-body{margin-top:.45rem;font-size:.78rem;line-height:1.5;color:var(--text-muted);
    background:var(--panel-bg);border:1px dashed var(--panel-border);border-radius:9px;padding:.5rem .6rem;
    overflow-wrap:anywhere}
  .h-auto-len{display:block;margin-top:.3rem;font-size:.66rem;font-weight:700;color:var(--text-muted)}
  .h-auto-missing{display:flex;flex-direction:column;gap:.15rem;margin-top:.45rem;padding:.5rem .6rem;
    border-radius:9px;background:var(--warning-soft,color-mix(in srgb,var(--h-amber) 12%,transparent));
    font-size:.74rem;color:var(--text-primary);line-height:1.45}
  .h-auto-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.55rem;
    font-size:.72rem;color:var(--text-muted)}
  .h-auto-foot .btn{margin-left:auto;font-size:.74rem;padding:.34rem .6rem}
  /* iOS-style switch */
  .h-switch{position:relative;display:inline-flex;flex:0 0 auto;cursor:pointer}
  .h-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
  .h-switch-track{display:block;width:44px;height:26px;border-radius:999px;background:var(--panel-border);
    transition:background .18s;position:relative}
  .h-switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}
  .h-switch input:checked + .h-switch-track{background:var(--h-primary)}
  .h-switch input:checked + .h-switch-track .h-switch-knob{transform:translateX(18px)}
  .h-switch input:focus-visible + .h-switch-track{outline:2px solid var(--h-primary);outline-offset:2px}
  /* Mode switch (Madai: Ahadi / Uthibitisho) — same pill segmented control as
     the contract-farming module's farm-manage vs contract switch. */
  .h-mode-switch{display:inline-flex;gap:.25rem;padding:.2rem;border:1px solid var(--panel-border);
    border-radius:999px;background:var(--page-bg);box-shadow:0 2px 10px rgba(15,23,42,.04)}
  .h-mode-btn{border:0;background:transparent;color:var(--text-muted);font:inherit;font-weight:700;
    font-size:.82rem;min-height:38px;padding:0 .95rem;border-radius:999px;cursor:pointer;
    transition:background .15s,color .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:.35rem}
  .h-mode-btn.active{background:var(--h-primary);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--h-primary) 24%,transparent)}
  .h-mode-btn .h-mode-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;
    height:18px;padding:0 .3rem;border-radius:999px;background:var(--h-red,#ef4f5f);color:#fff;
    font-size:.64rem;font-weight:800;line-height:1}
  .h-mode-btn.active .h-mode-count{background:rgba(255,255,255,.28)}
  @media(max-width:760px){
    .h-mode-switch{display:flex;width:100%}
    .h-mode-btn{flex:1;justify-content:center;padding:0 .5rem}
  }
  /* Dashboard "needs your approval" banner */
  .h-pending-banner{display:flex;align-items:center;gap:.7rem;width:100%;box-sizing:border-box;
    padding:.8rem 1rem;border:0;border-bottom:1px solid var(--panel-border);
    background:var(--warning-soft,color-mix(in srgb,var(--h-amber) 12%,transparent));
    color:var(--text-primary);font:inherit;text-align:left;cursor:pointer;border-radius:14px 14px 0 0}
  .h-pending-banner:hover{filter:brightness(.98)}
  .h-pending-ico{display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:10px;
    background:var(--h-amber,#d97706);color:#fff}
  .h-pending-main{flex:1;min-width:0;display:block}
  .h-pending-main strong{display:block;font-size:.86rem;font-weight:750;line-height:1.3}
  .h-pending-main span{display:block;font-size:.72rem;color:var(--text-muted);margin-top:.1rem}
  .h-pending-go{flex:0 0 auto;font-size:.78rem;font-weight:750;color:var(--h-primary)}
  /* Pending-approval badges (public pledges / payment proofs awaiting review) */
  .h-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
    margin-left:.35rem;padding:0 .3rem;border-radius:999px;background:var(--h-red,#ef4f5f);color:#fff;
    font-size:.66rem;font-weight:800;line-height:1}
  .h-nav-dot{position:absolute;top:-5px;right:-8px;display:inline-flex;align-items:center;justify-content:center;
    min-width:16px;height:16px;padding:0 .25rem;border-radius:999px;background:var(--h-red,#ef4f5f);color:#fff;
    font-size:.6rem;font-weight:800;line-height:1;border:2px solid var(--panel-bg)}
  /* SMS composer: Send now is the primary action; scheduling is optional */
  .h-sms-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
  .h-sms-send{flex:1 1 auto;min-height:50px;justify-content:center;font-size:.95rem;font-weight:750}
  .h-sms-sched-toggle{white-space:nowrap}
  .h-sms-sched-toggle.active{border-color:var(--h-primary);color:var(--h-primary);background:var(--h-primary-soft)}
  .h-sms-sched{margin-top:.6rem;padding:.75rem;border:1px dashed var(--panel-border);border-radius:12px;background:var(--page-bg)}
  @media(max-width:760px){.h-sms-send{flex:1 1 100%}}
  /* Trash list */
  .h-trash-list{display:flex;flex-direction:column}
  .h-trash-row{display:flex;align-items:center;gap:.65rem;padding:.7rem 1rem;border-top:1px solid var(--panel-border)}
  .h-trash-row:first-child{border-top:0}
  .h-trash-main{flex:1;min-width:0;display:block}
  .h-trash-title{display:block;font-size:.86rem;font-weight:650;color:var(--text-primary);line-height:1.3;overflow-wrap:anywhere}
  .h-trash-row .h-row-actions{flex:0 0 auto}
  @media(max-width:760px){
    .h-trash-row{flex-wrap:wrap}
    .h-trash-row .h-row-actions{width:100%;margin-top:.4rem}
    .h-trash-row .h-row-actions .btn{flex:1}
  }
  /* Committees / viongozi */
  .h-count-pill{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:19px;
    padding:0 .35rem;border-radius:999px;background:var(--h-primary-soft);color:var(--h-primary);
    font-size:.68rem;font-weight:800;vertical-align:middle;margin-left:.3rem}
  .h-card-sub{font-size:.72rem;color:var(--text-muted);margin-top:.15rem;line-height:1.4}
  .h-card.h-viongozi{border-color:color-mix(in srgb,var(--h-primary) 35%,var(--panel-border))}
  .h-mem-meta{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.25rem}
  .h-pos-badge{display:inline-flex;align-items:center;font-size:.66rem;font-weight:700;padding:.14rem .45rem;
    border-radius:999px;background:var(--h-primary-soft);color:var(--h-primary)}
  .h-sub-role{display:inline-flex;align-items:center;font-size:.66rem;font-weight:600;padding:.14rem .45rem;
    border-radius:999px;background:var(--page-bg);color:var(--text-muted);border:1px solid var(--panel-border)}
  .h-bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:35;background:var(--panel-bg);border-top:1px solid var(--panel-border);padding:.4rem .45rem calc(.35rem + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 24px rgba(0,0,0,.08);flex-direction:column;gap:.3rem}
  .h-bottom-search{display:none;padding:0 .15rem .15rem}
  .h-bottom-search.visible{display:block}
  .h-bottom-search input{width:100%;border:1px solid var(--panel-border);border-radius:999px;padding:.55rem .95rem;font:inherit;font-size:.86rem;background:var(--page-bg);color:var(--text-primary);outline:none;min-height:42px}
  .h-bottom-search input:focus{border-color:var(--h-primary);box-shadow:0 0 0 3px var(--h-primary-soft)}
  .h-bottom-search input::placeholder{color:var(--text-muted)}
  .h-bottom-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:.15rem}
  /* 48px min height keeps every bottom-nav target within reach guidelines */
  .h-bottom-nav button{border:0;background:transparent;color:var(--text-muted);font-size:.62rem;font-weight:700;padding:.4rem .15rem;cursor:pointer;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:48px}
  .h-bottom-nav button .ico{display:flex;align-items:center;line-height:1}
  .h-bottom-nav button.active{color:var(--h-primary);background:var(--h-primary-soft)}
  /* WhatsApp footer tab — same branding as sibling nav buttons (no green) */
  .h-bottom-nav button.h-wa-nav{font-weight:700}
  /* KPIs only on dashboard — hide empty shell */

  @media(max-width:1100px){.h-kpis,.h-page .kpi-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:760px){
    /* Bottom nav is a search row + a 48px tab row + safe area. The old 7.75rem
       left the last table row and the SMS "Panga muda" block sitting underneath
       it, unreachable. Reserve the real height instead. */
    /* Reserve the real bottom-nav height plus a comfortable gap. At 11rem the
       last row of a long list (e.g. a committee's Futa button) still landed
       under the sticky nav and could not be tapped. The trailing spacer below
       guarantees clearance even when the last card ends flush with the page. */
    .page-content.h-page{padding:0.85rem 0.85rem calc(13rem + env(safe-area-inset-bottom,0px))}
    .page-content.h-page::after{content:'';display:block;height:2rem}
    /* Topbar on a 390px phone fits ~4 controls. Everything else was rendering
       past the right edge with no way to scroll or tap it, so keep only
       menu/title/language/theme/account here and surface the rest in the
       "Zaidi" sheet, which is a real full-width tap target. */
    .topbar-actions #btnAiHarusi,
    .topbar-actions .h-install,
    .topbar-actions #btnNewEvent{display:none}
    .topbar-actions{gap:.3rem}
    .h-hero{flex-direction:column}
    .h-actions{width:100%}
    .h-actions .btn,.h-actions .h-lang,.h-actions>details{flex:1 1 auto}
    .h-actions .btn{text-align:center}
    .h-kpis,.h-page .kpi-grid{grid-template-columns:1fr 1fr}
    .h-form{grid-template-columns:1fr}
    .h-modal--compact .h-form,
    .h-modal--compact .h-meet-more-body{grid-template-columns:repeat(2,minmax(0,1fr))}
    .h-event-bar{flex-direction:column;align-items:stretch}
    .h-event-select{max-width:none;width:100%}
    /* Toolbars used to stack every control full-width, so Waalikwa opened on a
       whole screen of chrome (status, search, Tafuta, Ongeza, Pakia, Pakua)
       before a single guest was visible. Selects stay full-width; the action
       buttons pair up two-per-row. */
    .h-filters{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:.45rem}
    .h-filters>div{flex:1 1 100%;min-width:0}
    /* Hali + Kundi are short selects — they belong side by side, not stacked. */
    .h-filters>.h-f-half{flex:1 1 calc(50% - .28rem)}
    .h-filters .btn{flex:1 1 calc(50% - .25rem);width:auto;min-height:44px;
      justify-content:center;text-align:center;white-space:normal;line-height:1.2}
    .h-filters .btn.btn-primary{flex:1 1 100%}
    /* The sticky footer already carries a search box for these tabs and mirrors
       its value into this field, so rendering both cost a full screen of list.
       Keep the DOM node (syncBottomSearchBar writes to it) — just don't show it. */
    .h-filters>div:has(#guestSearch),
    .h-filters>div:has(#dashSearch),
    .h-filters>div:has(#paySearch),
    .h-filters>div:has(#claimSearch){display:none}
    /* …and when the search box was the row's only content, drop the empty row. */
    .h-filters:has(>div:only-child #dashSearch),
    .h-filters:has(>div:only-child #paySearch),
    .h-filters:has(>div:only-child #claimSearch){display:none}
    .h-card-head{align-items:stretch}
    .h-card-head .h-filters{margin-top:.35rem}
    .h-tabs{margin-left:-.85rem;margin-right:-.85rem;padding-left:.85rem;padding-right:.85rem}
    .h-report-tools{grid-template-columns:1fr 1fr}
    .h-report-tools>div:first-child{grid-column:1/-1}
    /* Report type labels are long ("Muhtasari wa maendeleo") and a <select>
       clips rather than ellipsises, so give it the full row. */
    .h-report-filter-row>div:first-child{grid-column:1/-1}
    /* 6 export/share actions in a flex-wrap row came out 3+2+1 at three
       different widths. Even 2-up, primary full width. */
    .h-report-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
    .h-report-actions .btn{flex:none;width:auto;min-height:44px;text-align:center;
      justify-content:center;white-space:normal;line-height:1.2}
    .h-report-actions .btn.btn-primary{grid-column:1/-1}
    /* SMS / WhatsApp action rows had the same ragged-pill problem. */
    .h-wa-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
    .h-wa-bar .btn{width:auto;min-height:44px;justify-content:center;text-align:center;
      white-space:normal;line-height:1.2}
    .h-wa-bar .btn.btn-primary{grid-column:1/-1}
    /* A lone secondary under a full-width primary looked lopsided at half width. */
    .h-wa-bar .btn:nth-child(2):last-child{grid-column:1/-1}
    /* The add-guest bar holds one button, so it gets the whole width — the
       2-up grid above would otherwise leave it stranded in column 1. */
    .h-add-guest-bar{grid-template-columns:1fr}
    .h-report-metrics{gap:.5rem;padding:.75rem 1rem}
    .h-report-metric{padding:.55rem .6rem}
    .h-set-grid{grid-template-columns:1fr}
    /* Sub-nav strips: a wrapping flex row squeezed items until "Hariri tukio"
       broke onto two lines, and a nowrap scroller silently hid the last
       sections (Maandalizi has six — "Ratiba"/"Muhtasari" were off-screen with
       no affordance). An even 3-up grid shows every section at once. */
    .h-set-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem}
    .h-set-nav button{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
      padding:.5rem .35rem;font-size:.72rem;min-height:44px}
    /* Maandalizi filters: the inline min-width:140px flex bases plus selects
       that size to their own content pushed "Aina zote" past the right edge of
       the viewport. Force an even 2-up grid with controls that fit their box. */
    .h-maand-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.5rem;align-items:end}
    .h-maand-filters .fld{flex:none !important;min-width:0 !important}
    .h-maand-filters .fld:first-child{grid-column:1/-1}
    .h-maand-filters .fld:has(#maandAssigned){grid-column:1/-1}
    /* :not([type=checkbox]) — a blanket width:100% stretched the "Yenye mtu"
       checkbox into a 60px square and pushed its label onto two lines. */
    .h-maand-filters input:not([type=checkbox]),
    .h-maand-filters select{width:100%;box-sizing:border-box;max-width:100%}
    .h-maand-filters input[type=checkbox]{width:20px;height:20px;flex:0 0 auto}
    /* Action rows: 5 buttons at natural width made ragged 2+3 rows of unequal
       pills. Even 2-up, primary spanning the full width. */
    .h-set-actions{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.45rem}
    .h-set-actions .btn{width:auto;min-height:44px;justify-content:center;text-align:center;
      white-space:normal;line-height:1.2}
    .h-set-actions .btn.btn-primary{grid-column:1/-1}
    /* POS-style: tables become labelled cards, no horizontal scroll */
    .h-table-wrap{overflow:visible;padding:.65rem}
    .h-table{display:block;width:100%;min-width:0}
    .h-table thead{display:none}
    .h-table tbody{display:grid;gap:.65rem;width:100%}
    .h-table tr{display:block;padding:.7rem .75rem;border:1px solid var(--panel-border);border-radius:9px;background:var(--panel-bg)}
    .h-table td{display:flex;justify-content:space-between;align-items:flex-start;gap:.7rem;padding:.3rem 0;border:0;white-space:normal;text-align:right;overflow-wrap:break-word}
    .h-table td[data-label]::before{content:attr(data-label);font-size:.65rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;flex:0 0 38%;text-align:left}
    /* First cell is the card's title, not a label/value pair — right-aligning a
       full name against a "JINA" label broke it mid-word. */
    .h-table td:first-child{display:block;text-align:left;padding:0 0 .5rem;margin-bottom:.4rem;border-bottom:1px solid var(--panel-border)}
    .h-table td:first-child::before{display:none}
    .h-table td:first-child strong{font-size:.92rem;line-height:1.3}
    .h-table td.h-td-actions{display:block;text-align:left;padding-top:.55rem;border-top:1px solid var(--panel-border);margin-top:.35rem}
    .h-table td.h-td-actions::before{display:none}

    /* ── Compact record cards (.h-table.h-compact) ──────────────────────────
       The default transform above gives every field its own full-width row.
       For a 5-column table that is ~500px per record, so a phone showed 1.5
       payments per screen and Waalikwa ran to 16,000px. In compact mode the
       secondary fields flow inline as "LABEL value" pairs under the title, so
       a record is 2–3 lines instead of 5 rows — same information, ~1/3 the
       height. Applied to the list-style tables; the title cell and the action
       row keep their own full-width treatment. */
       app.css forces `padding: … !important` and a font-size on every `table td`
       shell-wide, so the per-cell overrides below must be !important too or the
       cells keep a 14px box each and the "compact" card is no shorter. */
    .h-table.h-compact tbody{gap:.5rem}
    .h-table.h-compact tr{padding:.6rem .7rem}
    .h-table.h-compact td{display:inline-flex;align-items:baseline;justify-content:flex-start;
      width:auto;gap:.28rem;padding:0 !important;margin:0 .6rem .1rem 0;
      border:0 !important;text-align:left;font-size:.78rem !important;line-height:1.45}
    .h-table.h-compact td[data-label]::before{
      content:attr(data-label);flex:0 0 auto;font-size:.62rem;font-weight:700;
      color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em}
    .h-table.h-compact td:empty{display:none}
    .h-table.h-compact td:first-child,
    .h-table.h-compact td.h-td-title{display:block;width:100%;margin:0 0 .3rem;
      padding:0 0 .3rem !important;border-bottom:1px solid var(--panel-border) !important}
    .h-table.h-compact td:first-child::before,
    .h-table.h-compact td.h-td-title::before{display:none}
    /* Bulk checkbox is pinned to the card corner rather than consuming a whole
       line of its own with an empty label column beside it. */
    .h-table.h-compact tr{position:relative}
    .h-table.h-compact td.h-td-pick{position:absolute;top:.5rem;right:.55rem;
      display:flex !important;width:auto !important;margin:0;border:0 !important;z-index:1}
    .h-table.h-compact td.h-td-pick .h-pick{width:20px;height:20px}
    /* Keep the pinned checkbox clear of the guest's name. */
    .h-table.h-compact td.h-td-title{padding-right:2rem !important}
    /* The money column is what the eye looks for — keep it prominent and on
       its own line rather than buried in the inline meta flow. */
    .h-table.h-compact td.h-td-amount{display:flex;width:100%;justify-content:space-between;
      align-items:baseline;margin:0 0 .15rem;font-size:.9rem !important;font-weight:700;
      color:var(--text-primary);font-variant-numeric:tabular-nums}
    .h-table.h-compact td.h-td-actions{display:flex;flex-wrap:wrap;width:100%;gap:.3rem;
      margin-top:.35rem;padding-top:.45rem !important;
      border-top:1px solid var(--panel-border) !important}
    /* Row actions as an even 2-up grid. flex-wrap gave 3+1 with a lone
       full-width "Hariri" stranded on its own line under three narrow pills. */
    .h-table.h-compact td.h-td-actions .h-row-actions{width:100%;display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}
    .h-table.h-compact td.h-td-actions .h-row-actions .btn{flex:none;width:auto;
      min-height:40px;justify-content:center;text-align:center;font-size:.75rem}
    .h-bottom-nav{display:flex}
    .h-modal-bg{align-items:flex-end}
    .h-pay-summary{grid-template-columns:1fr;gap:.5rem}
    .h-pay-summary .cell{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
    .h-pay-summary .cell span{margin-bottom:0}
  }
  @media(min-width:761px){
    .h-modal-bg{align-items:center;padding:1rem}
    .h-modal{border-radius:16px;max-height:90vh;max-width:440px}
    /* Deliberately NOT forcing the row actions onto one line here. Tried
       `width:1%; white-space:nowrap` on the actions column: auto-layout refused
       to widen it, so "Futa" overflowed past the table's right edge and the
       actions overlapped the HALI badge. Letting the three buttons wrap to a
       second line is the correct trade at this column count. */
  }
  @media(max-width:430px){.h-kpis,.h-page .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
  /* Couple photo on the cards (Mialiko): status line + photo window. */
  .h-card-photo-line{padding:.45rem 1rem 0;font-size:.78rem;color:var(--text-muted);display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
  .h-card-photo-line.on{color:var(--text)}
  .h-link-btn{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--h-primary);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
  .h-cphoto-prev{display:flex;align-items:center;justify-content:center;height:220px;margin:0 0 .8rem;border:1px solid var(--panel-border);border-radius:12px;
    background:#f3f4f6;overflow:hidden}
  .h-cphoto-prev img{max-height:100%;max-width:100%;object-fit:contain}
  .h-cphoto-prev span{font-size:.85rem;color:#6b7280}
  /* Card days schedule + SMS preview (Mialiko). */
  .h-season-toggle{display:flex;gap:.55rem;align-items:flex-start;padding:.7rem .8rem;border:1px solid var(--panel-border);border-radius:12px;margin:0 0 .6rem;font-size:.88rem}
  .h-season-steps{margin:0 0 .8rem;padding:0 .6rem 0 1.15rem;font-size:.8rem;line-height:1.45;color:var(--text);overflow-wrap:anywhere}
  .h-season-steps li{margin:.2rem 0}
  .h-sms-sample{border:1px solid var(--panel-border);border-radius:10px;margin:.5rem 0;overflow:hidden}
  .h-sms-sample .hd{display:flex;justify-content:space-between;gap:.5rem;padding:.4rem .65rem;font-size:.72rem;background:var(--page-bg);color:var(--text-muted)}
  .h-sms-sample .hd span.bad{color:#b91c1c;font-weight:700}
  .h-sms-sample .tx{padding:.55rem .65rem;font-size:.82rem;line-height:1.4;white-space:pre-wrap;word-break:break-word}
  /* Easy card numbers ("No 45"). */
  .hg-short{font-size:1.15rem;font-weight:800;margin-right:.35rem;color:#111}
  .h-short-no{display:inline-block;min-width:2.4rem;font-weight:800;font-variant-numeric:tabular-nums}
  .h-short-no.none{color:var(--text-muted);font-weight:500}
  .h-sn-table td{vertical-align:top}
  .h-sn-table select{max-width:100%}
  .h-sn-flag{font-size:.7rem;font-weight:700;padding:.1rem .4rem;border-radius:999px;white-space:nowrap}
  .h-sn-flag.ok{background:#dcfce7;color:#166534}
  .h-sn-flag.check{background:#fef3c7;color:#92400e}
  .h-sn-flag.bad{background:#fee2e2;color:#991b1b}