/* ===========================================================================
   arc-app-skin.css - Task 131 (15 Oct 2026). Darren: "lets see if we can make the app look more like an app, add some style to it".
   The shared look of the ARC Members app and the Fac Stack, loaded after each page's own styles. Layout only: no ids, labels or
   behaviour change. Tabs become an app-style bottom bar with icons; the action buttons become a grid of icon tiles; the member total
   becomes a stats card; cards are rounded and lifted. Icons are inline SVG masks (no network).
   =========================================================================== */
:root{--app-shadow:0 2px 14px rgba(26,39,68,.08);--app-radius:18px;}
html,body{background:#f2f0ec;}
body{padding-bottom:calc(92px + env(safe-area-inset-bottom)) !important;}
.fs-top{background:linear-gradient(135deg,#1a2744 0%,#26396a 60%,#2d4580 100%);padding:14px 16px 18px;border-radius:0 0 22px 22px;box-shadow:0 8px 24px rgba(26,39,68,.22);}
.fs-top h1{font-size:21px;letter-spacing:.01em;}
.fs-top .who{font-size:12.5px;opacity:.85;margin-top:2px;}
main{padding-top:18px;}
.card{border:0;border-radius:var(--app-radius);box-shadow:var(--app-shadow);padding:18px;}
.card h2{font-size:17px;}
input,select,textarea{border-radius:12px;border-color:rgba(26,39,68,.18);background:#fbfbfa;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--fs-gold);outline-offset:1px;background:#fff;}
.btn{border-radius:14px;box-shadow:0 3px 10px rgba(26,39,68,.18);}
.btn.alt{box-shadow:none;}
/* the member total: a stats card */
#fsCounts{border:0;border-radius:var(--app-radius);background:linear-gradient(135deg,#fff 0%,#f7f1e1 100%);box-shadow:var(--app-shadow);padding:14px 16px;font-size:14px;color:#3a4458;}
#fsCounts b{font-size:22px;color:var(--fs-navy);margin-right:2px;}
/* the bottom tab bar */
#fsTabs{position:fixed;left:0;right:0;bottom:0;z-index:20;margin:0;gap:0;display:flex;background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(26,39,68,.10);
  padding:6px max(4px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-right));box-shadow:0 -6px 20px rgba(26,39,68,.08);}
#fsTabs[hidden]{display:none;}
#fsTabs button{flex:1 1 0;min-width:0;min-height:56px;border:0;border-radius:12px;background:transparent;color:#7b8496;font:inherit;font-size:11px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 1px;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#fsTabs button::before{content:'';display:block;width:24px;height:24px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;}
#fsTabs button[aria-pressed="true"]{background:transparent;color:var(--fs-navy);}
#fsTabs button[aria-pressed="true"]::after{content:'';position:absolute;top:2px;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:3px;background:var(--fs-gold);}
@media (min-width:700px){#fsTabs{left:50%;right:auto;width:640px;margin-left:-320px;border-radius:18px 18px 0 0;}}
/* the action tiles */
.qa-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 16px;}
.qa-grid .wa{width:auto !important;margin:0;min-height:88px;flex-direction:column;justify-content:center;gap:6px;border-radius:16px;
  font-size:12.5px;line-height:1.2;text-align:center;padding:10px 6px;box-shadow:0 3px 10px rgba(26,39,68,.12);overflow-wrap:anywhere;}
.qa-grid .wa::before{content:'';display:block;width:26px;height:26px;flex:0 0 auto;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;}
.qa-grid .wa[hidden]{display:none !important;}
/* Task 150 follow-up (17 Oct 2026): icons + colours for the tiles added by Tasks 145-148 - they showed a plain white square */
#fsCoffee{background:linear-gradient(135deg,#7c4a2d 0%,#a86b43 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h12v5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16 11h1.5a2.5 2.5 0 0 1 0 5H16'/%3E%3Cpath d='M8 3.5v2.5M12 3.5v2.5'/%3E%3C/svg%3E");}
#fsRegJob{background:linear-gradient(135deg,#0e7490 0%,#22a3c4 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 4V3h6v1'/%3E%3Cpath d='M12 10v6M9 13h6'/%3E%3C/svg%3E");}
#fsMonthly{background:linear-gradient(135deg,#166534 0%,#2f9a5a 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3Cpath d='M9 15l2 2 4-4'/%3E%3C/svg%3E");}
#fsGInv{background:linear-gradient(135deg,#9d174d 0%,#d0457f 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");}
/* Task 151 (17 Oct 2026): App not downloaded - a phone with a download arrow */
#fsNoApp{background:linear-gradient(135deg,#1d4ed8 0%,#3b82f6 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.5'/%3E%3Cpath d='M12 7v7M9 11l3 3 3-3'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E");}
/* Task 154 (Darren 17 Oct 2026): the tiles in titled sections, each a different light background */
.qa-secs{display:block;margin:0 0 16px;}
.qa-sec{border-radius:18px;padding:12px 12px 14px;margin:0 0 12px;}
.qa-sec .qa-grid{margin:0;}
.qa-sec-h{margin:0 0 10px 2px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#0B1F3B;}
.qa-sec--inviting{background:#fff1e6;}
.qa-sec--members{background:#e8f0ff;}
.qa-sec--meetings{background:#e6f6ec;}
.qa-sec--tools{background:#f1ebff;}
.qa-sec--actions{background:#fff7d6;}
.qa-sec--office{background:#eef2f6;}
.qa-sec--admin{background:#fdecec;}   /* Task 173: ARC admin section (admin only) */
.qa-sec:not(:has(.wa:not([hidden]))){display:none;}
#fsMyFac{background:linear-gradient(135deg,#0f766e 0%,#14b8a6 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H8l-4 4z'/%3E%3Cpath d='M8 9h8M8 12h5'/%3E%3C/svg%3E");}
#fsLounge{background:linear-gradient(135deg,#7c2d12 0%,#c2410c 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 18v-5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5'/%3E%3Cpath d='M6 11V8a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v3'/%3E%3Cpath d='M4 18h16M6 18v2M18 18v2'/%3E%3C/svg%3E");}
#fsProjects{background:linear-gradient(135deg,#365314 0%,#4d7c0f 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M12 10v6M9 13h6'/%3E%3C/svg%3E");}   /* Task 159 */
#fsMyHub{background:linear-gradient(135deg,#0f766e 0%,#14b8a6 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.5'/%3E%3Ccircle cx='5' cy='19' r='2.5'/%3E%3Ccircle cx='19' cy='19' r='2.5'/%3E%3Cpath d='M12 7.5v4M12 11.5 6.5 17M12 11.5l5.5 5.5'/%3E%3C/svg%3E")}   /* Task 167 */
#fsNoHub{background:linear-gradient(135deg,#7c2d12 0%,#c2410c 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.6 3.4-5.5 6.5-5.5s5.7 1.9 6.5 5.5'/%3E%3Cpath d='M17 7h5M19.5 4.5v5'/%3E%3C/svg%3E")}   /* Task 167 */
#fsHubReq{background:linear-gradient(135deg,#1e3a8a 0%,#3b5bdb 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Ccircle cx='5' cy='5' r='2'/%3E%3Ccircle cx='19' cy='5' r='2'/%3E%3Ccircle cx='5' cy='19' r='2'/%3E%3Ccircle cx='19' cy='19' r='2'/%3E%3Cpath d='M7 7l3 3M17 7l-3 3M7 17l3-3M17 17l-3-3'/%3E%3C/svg%3E");}   /* Task 159 */
#fsNotify{background:linear-gradient(135deg,#7c2d92 0%,#a855f7 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E");}   /* Task 160 */
#pnBox .pn-kinds{display:grid;gap:10px;margin:10px 0}#pnBox .pn-kind{display:flex;gap:10px;align-items:flex-start;font-weight:400}#pnBox .pn-kind input{width:22px;height:22px;margin:2px 0 0;flex:none}#pnBox .pn-kind b{display:block}#pnBox .pn-kind small{display:block;color:#667085;font-size:.85rem}#pnBox .pn-acts{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}#pnBox .pn-acts .btn{width:auto;flex:1 1 auto}   /* Task 160 */
#fsFacInbox{background:linear-gradient(135deg,#334155 0%,#56677f 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8v6H3z'/%3E%3Cpath d='M3 13h5l1 3h6l1-3h5'/%3E%3C/svg%3E");}
#fsChapters{background:linear-gradient(135deg,#6d28d9 0%,#8b5cf6 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3 19a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 8h5M16 12h5M17 16h4'/%3E%3C/svg%3E");}
/* Task 150 (Darren 17 Oct 2026): ARC Travel - the ARC Travel Club image (the Lounge card's) filling a tile the same size as the others, label on a dark band */
.qa-grid .wa.travel{position:relative;justify-content:flex-end;padding:0;background:#0b1f3b url(/img/arc/lounge/LOUNGE_ARC_TRAVEL.webp) center/cover no-repeat;color:#fff;overflow:hidden;}
.qa-grid .wa.travel::before{content:none;}
.qa-grid .wa.travel::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,31,59,.85) 0,rgba(11,31,59,.15) 55%,rgba(11,31,59,0) 100%);}
.qa-grid .wa.travel span{position:relative;z-index:1;padding:0 6px 10px;text-shadow:0 1px 2px rgba(0,0,0,.6);}

/* Task 132 (Darren 15 Oct 2026): "add a coloured box tab for welcome new memebrs" */
.wa.wlb{background:linear-gradient(135deg,#e2704f 0%,#cf4f5f 100%);color:#fff;position:relative;}
.wa.wlb .wl-badge{position:absolute;top:5px;right:5px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#fff;color:#c2413f;font-size:11px;font-weight:800;line-height:20px;}
.wa.wlb .wl-badge[hidden]{display:none;}
/* Task 133 (Darren 15 Oct 2026): "I want to start a chapter networking meeting in my area" */
.fs-chapter{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:14px 16px;border:0;border-radius:var(--app-radius);background:linear-gradient(135deg,#c8a24a 0%,#e0bf6a 100%);color:#1a2744;font:inherit;font-size:15px;font-weight:800;text-align:left;cursor:pointer;box-shadow:0 3px 12px rgba(200,162,74,.35);}
.fs-chapter[hidden]{display:none;}
.fs-chapter small{display:block;font-weight:600;font-size:12.5px;opacity:.85;margin-top:2px;}
.fs-chapter .go{margin-left:auto;font-size:20px;}
.ch-book{display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;margin-top:12px;min-height:48px;border-radius:14px;background:#fff;border:2px solid var(--fs-navy);color:var(--fs-navy);font-weight:800;text-decoration:none;}
/* Task 136 (Darren 15 Oct 2026): "need to add the offers available in the apps" */
.of-total{margin:0 0 6px;font-size:14px;color:#3a4458;}
.of-total b{font-size:20px;color:var(--fs-navy);}
#oList li{display:block;}
#oList .of-ben{font-weight:700;color:#8a6a1e;margin:2px 0;overflow-wrap:anywhere;}
#oList .of-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
#oList .of-acts button,#oList .of-acts a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;font:inherit;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;}
#oList .of-get{background:var(--fs-navy);color:#fff;border:0;}
#oList .of-ask{background:#fff;color:var(--fs-navy);border:1px solid var(--fs-navy);}
#oList .of-askbox{margin-top:8px;}
#oList .of-consent{font-size:12.5px;color:var(--fs-muted);margin:6px 0;}
/* Task 137 (Darren 15 Oct 2026): "add a colour box as the other options for find a service and memebrs offers" - 8 tiles, 4 a row */
.qa-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.qa-grid .wa{min-height:84px;padding:8px 4px;}
.qa-grid .wa,.qa-grid button.wa{font-size:11.5px !important;}
.qa-grid .wa::before{width:24px;height:24px;}
@media (max-width:340px){.qa-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
.wa.fdb{background:linear-gradient(135deg,#2563c9 0%,#3b82f6 100%);color:#fff;}
.wa.ofb{background:linear-gradient(135deg,#0e7f86 0%,#14a3a8 100%);color:#fff;}
#fsFindTile{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");}
#fsOffersTile{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4l-7.2 7.2a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E");}
/* Task 137 (Darren 15 Oct 2026): "in fact id do all the features with tiles, including the ones you have along the bottom make it nice
   and easy to find what they want to do". Every feature is a colour box; the bottom bar is gone. The home screen shows the boxes only
   (body.home-mode hides every card except "Put it on your phone"); a box opens its feature below the boxes; Home goes back. */
#fsTabs{display:none !important;}
body{padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important;}
body.home-mode main > section.card:not(#cInstall){display:none !important;}
#fsTileConnect{background:linear-gradient(135deg,#7c3aed 0%,#9f67ff 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");}
#fsTileInvite{background:linear-gradient(135deg,#c2410c 0%,#ea7a3c 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E");}
#fsTileInbox{background:linear-gradient(135deg,#334155 0%,#56677f 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E");}
#fsTileEvents{background:linear-gradient(135deg,#b4235a 0%,#df4f86 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");}
#fsTileMeet{background:linear-gradient(135deg,#1f6f3f 0%,#2f9a5a 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E");}
#fsTileMsg{background:linear-gradient(135deg,#4338ca 0%,#6366f1 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");}
#fsWelcomeTile{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E");}
.qa-grid .wa,.qa-grid button.wa{font-size:12.5px !important;line-height:1.2 !important;font-weight:700 !important;}
/* Task 142 (Darren 15 Oct 2026): the profile tile shows "64% done"; the credits tile shows the total and opens how to earn more */
.qa-grid .wa .tile-n{display:block;font-size:11px;font-weight:800;line-height:1;padding:3px 8px;margin-top:2px;border-radius:999px;background:rgba(255,255,255,.22);}
.qa-grid .wa .tile-n[hidden]{display:none;}
#fsCredits{background:linear-gradient(135deg,#0f766e 0%,#22a38f 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.1 6.3 6.9 1-5 4.9 1.2 6.8L12 17.8 5.8 21l1.2-6.8-5-4.9 6.9-1z'/%3E%3C/svg%3E");}
.cr-total{font-size:15px;color:var(--fs-navy,#1a2744);margin:4px 0 6px;}
.cr-total b{font-size:34px;font-weight:800;margin-right:4px;}
.cr-h{font-size:15px;margin:14px 0 2px;}
#crWays li.cr-li{display:block;}
.cr-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.cr-pts{font-weight:800;color:#0f766e;white-space:nowrap;}
/* Task 142: "Send a welcome" on the Welcome list */
.wl-li .wl-acts{display:flex;flex-wrap:wrap;gap:8px;}
.wl-li button.wl-send{min-height:40px;padding:0 14px;border-radius:999px;border:0;background:#e2704f;color:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;}
.wl-li button.wl-send[disabled]{background:#e7e2da;color:#6b7280;cursor:default;}
/* Task 144b: "Finish setting up your business" / "Set your referral fee" banner above the tiles */
.fs-setup{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:14px 16px;border-radius:16px;background:#fffaf0;border:1px solid #f1d9a6;border-left:6px solid #d4a537;color:var(--fs-navy,#1a2744);text-decoration:none}
.fs-setup[hidden]{display:none !important;}
.fs-setup b{display:block;font-size:15px;font-weight:800}
.fs-setup small{display:block;font-size:12.5px;color:#4b5565;margin-top:2px;line-height:1.35}
.fs-setup .go{font-size:26px;font-weight:700;color:#b45309}
/* Task 143 (Darren 15 Oct 2026): Fac Stack "Not activated yet" - amber, a clock; the badge is how many */
#fsUnact{background:linear-gradient(135deg,#b45309 0%,#e08a2c 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");}
#fsUnact .wl-badge{color:#b45309;}
/* Task 113 (Darren 15 Oct 2026): Find partners & clients - indigo, a handshake-ish people search icon */
#fsPartners{background:linear-gradient(135deg,#1e40af 0%,#4f6fd8 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21v-1a6 6 0 0 1 9.5-4.9'/%3E%3Ccircle cx='17' cy='16' r='3'/%3E%3Cpath d='M22 21l-2.8-2.8'/%3E%3C/svg%3E");}
/* Task 141 (Darren 15 Oct 2026): "need a pay arc referral fee on member app tile added" - gold, a dollar sign */
#fsPayRef{background:linear-gradient(135deg,#a8741a 0%,#d4a537 100%);color:#fff;--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 1v22'/%3E%3Cpath d='M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E");}
@media (max-width:360px){.qa-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
/* lists */
.att li{padding:12px 0;}
#evList li,#wList li,.att li.wl-li,.att li.ev-li{display:block;}
#evList .nm{font-size:16px;margin:2px 0;}
/* events */
.ev-chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px 0 4px;margin:0 0 6px;}
.ev-chips button{flex:0 1 auto;max-width:100%;min-height:36px;white-space:normal;padding:0 14px;border-radius:999px;border:1px solid rgba(26,39,68,.2);background:#fff;color:var(--fs-navy);font:inherit;font-size:13px;font-weight:700;cursor:pointer;}
.ev-chips button[aria-pressed="true"]{background:var(--fs-navy);color:#fff;border-color:var(--fs-navy);}
.ev-li .ev-when{font-size:12px;font-weight:700;color:#8a6a1e;text-transform:uppercase;letter-spacing:.04em;}
.ev-li .ev-acts{margin-top:8px;}
.ev-li a.ev-book{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--fs-navy);color:#fff;font-weight:700;font-size:14px;text-decoration:none;}
#tabFind{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");}
#tabConnect{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7'/%3E%3C/svg%3E");}
#tabInvite{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2L11 13'/%3E%3Cpath d='M22 2l-7 20-4-9-9-4 20-7z'/%3E%3C/svg%3E");}
#tabInbox{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.5 5.1L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.5-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1z'/%3E%3C/svg%3E");}
#tabWelcome{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M22 11h-6'/%3E%3C/svg%3E");}
#tabEvents{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");}
#tabMeet{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M9 14l2 2 4-4'/%3E%3C/svg%3E");}
#tabMsg{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");}
#fsWhatsApp{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-12.4 7.4L3 21l2.1-5.5A8.4 8.4 0 1 1 21 11.5z'/%3E%3C/svg%3E");}
#fsQR{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Cpath d='M14 14h3v3M21 14v7h-4M14 21h.01'/%3E%3C/svg%3E");}
#fsFollow{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E");}
#fsBook{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Cpath d='M12 14v3l2 1'/%3E%3C/svg%3E");}
#fsProfile{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E");}