/* App for Apps - ONE shared look for every app (DARK by default since Job U2 + light).
   Job U3 (Nov 8, his rule): Pinyon Script ONLY for the letter inside each app
   tile (KOH.markHTML) and real logos (UBraid). App NAMES are bold Inter 800
   (class .nm, header .name b) so they're easy to read. Everything else is Inter.
   Matches the approved UBraid mock-up (Nov 7): colored header with the app
   name/logo, gold "App for Apps" pill top left, Light/Dark button top right,
   white page, white cards with soft borders, black text, main buttons in the
   app color, bottom nav.
   Each app only sets its own color (shared/koh.js -> KOH.applyColors):
     --c (header + main buttons), --c-h (hover), --acc-l / --acc-d (accent
     text in light / dark), --tile-* (style tiles), --on-c2 (sub text on header).
   Everything else below is the same for every app. */

/* ---------- theme: LIGHT (when picked with the Light/Dark button) ---------- */
:root{
  color-scheme:light;
  --c:#18212C; --c-h:#0E141B; --acc-l:#18212C; --acc-d:#F4C430;
  --tile-l:#E8EAEE; --tile-ink-l:#18212C; --tile-d:#2A2E36; --tile-ink-d:#E8EAEE; --on-c2:#FFFFFF;
  --gold:#F4C430; --on-gold:#111111; --gold-t:#FFF6D6;
  --bg:#FFFFFF; --card:#FFFFFF; --line:#EFE3EA; --soft:#F7F1F4;
  --ink:#111111; --mute:#5A5157; --star:#8F6500;
  --ok:#1B7A3E; --warn:#7A4B00; --warn-t:#FFF3D6;
  --off-bg:#F7F1F4; --off-ink:#8A8086;
  --outside:#F1EDEF; --toast:#111111; --toast-ink:#FFFFFF; --shade:rgba(17,17,17,.45);
  --acc:var(--acc-l); --tile:var(--tile-l); --tile-ink:var(--tile-ink-l);
  --r:16px;
}
/* ---------- theme: DARK (the default for first-time visitors; the inline
   script in each page's <head> sets data-theme before anything paints) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121014; --card:#1E1A21; --line:#33293A; --soft:#28222C;
  --ink:#F5F0F3; --mute:#B9AEB6; --star:#F4C430;
  --gold-t:#3A3218; --ok:#7FD9A0; --warn:#FFD27A; --warn-t:#3A2C00;
  --off-bg:#211C25; --off-ink:#8E8390;
  --outside:#0A090B; --toast:#F5F0F3; --toast-ink:#111111; --shade:rgba(0,0,0,.6);
  --acc:var(--acc-d); --tile:var(--tile-d); --tile-ink:var(--tile-ink-d);
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--outside);color:var(--ink)}
body{font:400 15px/1.45 Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--acc)}
.sr{position:absolute;left:-9999px}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.phone{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;position:relative}
main{flex:1;padding:14px 16px 96px}
.sample{background:var(--gold-t);color:var(--ink);font-size:11px;font-weight:600;text-align:center;padding:5px 12px;letter-spacing:.02em}

/* ---------- top bar: gold App for Apps pill + Light/Dark (every app, same spot) ---------- */
.afabar{position:fixed;top:0;left:0;right:0;z-index:45;max-width:480px;margin:0 auto;background:var(--c);padding:10px 16px 6px;padding-top:max(10px,env(safe-area-inset-top))}
.afabar .in{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px}
.vback{position:relative;display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:17px;border:0;background:var(--gold);color:var(--on-gold);font-weight:700;font-size:12px;text-decoration:none;cursor:pointer;white-space:nowrap}
.vback:hover{background:#FFD45A}
.themebtn{position:relative;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:17px;border:1.5px solid var(--gold);background:rgba(0,0,0,.18);color:#FFFFFF;font-weight:600;font-size:12px;white-space:nowrap}
.themebtn:hover{background:rgba(0,0,0,.3)}
/* bigger finger target than it looks (44px) */
.vback:after,.themebtn:after{content:'';position:absolute;left:-4px;right:-4px;top:-5px;bottom:-5px}
.hubbrand{display:flex;align-items:center}
.hubmark{width:34px;height:34px;border-radius:10px;background:var(--gold);color:#18212C;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------- app names: BOLD plain Inter (Job U3). Script lives only in the tile letter + UBraid logo ---------- */
.nm{font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--ink)}
html.hasbar .phone{padding-top:calc(56px + env(safe-area-inset-top))}

/* ---------- colored app header (Find screen): logo or name + tagline ---------- */
.apphead{background:var(--c);color:#FFFFFF;padding:2px 16px 14px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.apphead .logo{width:300px;max-width:100%;height:auto;display:block}
.apphead .name{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 0 0}
.apphead .name b{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:30px;font-weight:800;line-height:1.15;letter-spacing:-.02em;color:#FFFFFF;padding:0 2px}
.apphead .name b.gold{color:var(--gold)}
.apphead .name small{font-size:11px;color:var(--on-c2);font-weight:500}
.apphead p{margin:0;color:#FFFFFF;font-weight:600;font-size:14px}

/* ---------- sub-screen header (provider page, book, trip, chat): same color ---------- */
.sub{display:flex;align-items:center;gap:10px;padding:4px 16px 16px;position:sticky;top:calc(56px + env(safe-area-inset-top));background:var(--c);color:#FFFFFF;z-index:5}
.sub .t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sub .t b{font-size:20px;font-weight:700;letter-spacing:-.01em;color:#FFFFFF}
.sub .t span{font-size:13px;color:var(--on-c2)}
.hback{width:36px;height:36px;border-radius:18px;border:0;background:rgba(255,255,255,.18);color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.hback:after{content:'';position:absolute;inset:-4px}
.hback:hover{background:rgba(255,255,255,.3)}

/* ---------- Messages / Me page header ---------- */
.pagehead{padding:4px 16px 16px;background:var(--c);color:#FFFFFF}
.pagehead h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-.02em;color:#FFFFFF}
.pagehead p{margin:2px 0 0;font-size:13px;color:var(--on-c2)}

/* ---------- where you are + search ---------- */
.findtop{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.loc{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.loc .ic{color:var(--acc);display:flex}
.loc span.txt{flex:1;display:flex;flex-direction:column;line-height:1.3}
.loc span.txt small{font-size:11px;color:var(--mute)}
.loc span.txt b{font-size:15px;font-weight:700}
.loc.trip{background:var(--c);border-color:var(--c);color:#FFFFFF}
.loc.trip .ic{color:#FFFFFF}
.loc.trip small{color:var(--on-c2) !important}

.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 12px;min-height:46px}
.search:focus-within{border-color:var(--acc)}
.search .ic{color:var(--mute);display:flex}
.search input{flex:1;border:0;outline:0;background:transparent;font-size:16px;min-height:44px;color:var(--ink)}
.search input::placeholder{color:var(--mute);opacity:1}
.search .clear{border:0;background:transparent;color:var(--acc);font-size:13px;font-weight:700;min-height:44px;padding:0 4px}

/* ---------- buttons ---------- */
.btn{min-height:46px;border-radius:23px;border:0;background:var(--c);color:#FFFFFF;font-weight:700;font-size:14px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:hover{background:var(--c-h)}
.btn.ghost{background:var(--card);color:var(--acc);border:2px solid var(--c)}
.btn.ghost:hover{background:var(--soft)}
:root[data-theme="dark"] .btn.ghost{border-color:var(--acc)}
.btn.soft{background:var(--tile);color:var(--tile-ink)}
.btn.gold{background:var(--gold);color:var(--on-gold)}
.btn.gold:hover{background:#FFD45A}
.btn.sm{min-height:44px;font-size:13px;padding:0 14px}
.btn.wide{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.loc .btn.sm{min-height:36px;border-radius:18px;position:relative}
.loc .btn.sm:after{content:'';position:absolute;inset:-4px 0}
.iconbtn{width:44px;height:44px;border-radius:12px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.linkbtn{border:0;background:transparent;color:var(--acc);font-weight:700;font-size:12px;min-height:36px;padding:0 4px}
.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;border-radius:10px;padding:3px 8px;white-space:nowrap}
.pill.ok,.pill.gold{color:var(--on-gold);background:var(--gold)}
.pill.warn{color:var(--warn);background:var(--warn-t)}
.pill.c{color:var(--tile-ink);background:var(--tile)}
.appcol{color:var(--al)}
:root[data-theme="dark"] .appcol{color:var(--ad)}

/* ---------- list ---------- */
.band{background:var(--c);color:#FFFFFF;border-radius:16px;border-bottom:4px solid var(--gold);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px}
.band small{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--on-c2);text-transform:uppercase}
.band b{font-size:22px;font-weight:800}
.band span.note{font-size:12px;color:var(--on-c2);text-align:right;max-width:120px}
.listhead{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 12px;font-size:13px;color:var(--mute)}
.listhead b{color:var(--ink)}
.listhead select{min-height:36px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:0 8px;font-size:12px;font-weight:600}
.cards{display:flex;flex-direction:column;gap:12px}
.card{display:block;width:100%;text-align:left;padding:0;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink)}
.card:hover{border-color:var(--acc)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;height:64px}
.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:600;color:var(--tile-ink);background:var(--tile);text-align:center;padding:4px;line-height:1.2}
.card-body{display:flex;justify-content:space-between;gap:8px;padding:12px 14px}
.card-body .l{display:flex;flex-direction:column;gap:3px;min-width:0}
.card-body .l b{font-size:16px;font-weight:700}
.card-body .meta{font-size:12px;color:var(--mute)}
.card-body .where{font-size:12px;font-weight:600;color:var(--acc)}
.card-body .row{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;font-weight:600}
.card-body .r{display:flex;flex-direction:column;align-items:flex-end;flex-shrink:0}
.card-body .r small{font-size:11px;color:var(--mute)}
.card-body .r b{font-size:22px;font-weight:800;color:var(--acc)}
.card-body .r span{font-size:11px;color:var(--mute);max-width:110px;text-align:right}
.green{color:var(--ok)}
.star{color:var(--star)}
.empty{color:var(--mute);font-size:14px;text-align:center;padding:24px 12px}
.fine{font-size:11px;color:var(--mute);text-align:center;line-height:1.5;padding:12px 8px}

/* ---------- provider page ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin:-14px -16px 12px}
.gallery .tile{height:64px}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:12px}
.box h3{margin:0 0 6px;font-size:13px;font-weight:700}
.box h3 span,.menu .mh span{font-weight:400;color:var(--mute);font-size:13px}
.box.tint{background:var(--soft);border-color:var(--soft)}
.how{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:13px}
.how li{display:flex;gap:8px}
.how li:before{content:'';width:5px;height:5px;border-radius:3px;background:var(--ink);margin-top:7px;flex-shrink:0}
.bio{margin:0 0 12px;font-size:14px;color:var(--ink)}
.facts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.facts>span{font-size:12px;font-weight:600;padding:4px 10px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.facts>span.pill{border:0;padding:4px 10px;border-radius:12px;font-size:12px}
.menu{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:12px}
.menu .mh{padding:10px 14px;font-size:13px;font-weight:700}
.svc{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;min-height:56px;border:0;border-top:1px solid var(--line);background:var(--card);text-align:left;color:var(--ink)}
.menu .svc:first-child{border-top:0}
.svc.on{background:var(--gold-t);box-shadow:inset 0 0 0 2px var(--gold)}
.svc .n{display:flex;flex-direction:column}
.svc .n b{font-size:14px;font-weight:600}
.svc .n span{font-size:12px;color:var(--mute)}
.svc .p{font-weight:800;font-size:16px}
.rev{padding-top:10px;margin-top:10px;border-top:1px solid var(--line);font-size:13px}
.rev:first-of-type{border-top:0;margin-top:0;padding-top:0}
.rev .who{display:flex;justify-content:space-between;color:var(--mute);font-size:12px}
.rev .who b{color:var(--ink)}
.stars{color:var(--star);letter-spacing:1px}
.actionbar{position:fixed;left:0;right:0;bottom:66px;z-index:20;max-width:480px;margin:0 auto;background:var(--card);border-top:1px solid var(--line);padding:10px 16px}
.actionbar .in{display:flex;gap:10px}
.actionbar .btn.ghost{flex:0 0 auto}
.actionbar .btn:not(.ghost){flex:1}
.actionbar .btn.big{min-height:48px;border-radius:24px;font-size:15px}
.withbar{padding-bottom:170px}

/* ---------- book ---------- */
.lbl{font-size:13px;font-weight:700;margin:0 0 8px;display:block}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px}
.chip{flex-shrink:0;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:500;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;white-space:nowrap}
.chip small{font-size:11px;font-weight:600;color:var(--mute)}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--on-gold);font-weight:700}
.chip.on small{color:var(--on-gold)}
.times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.times .chip{min-height:44px}
.times .chip.on{background:var(--c);border-color:var(--c);color:#FFFFFF}
.chip:disabled{background:var(--off-bg);color:var(--off-ink);text-decoration:line-through;cursor:default}
.field{width:100%;min-height:48px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:0 12px;font-size:16px;margin-bottom:12px}
.field::placeholder{color:var(--mute);opacity:1}
.field:focus{outline:0;border-color:var(--acc)}
.sum{display:flex;justify-content:space-between;font-size:13px;color:var(--mute);padding:3px 0}
.sum.tot{border-top:1px solid var(--line);margin-top:4px;padding-top:8px;font-weight:700;font-size:13px;color:var(--ink)}
.sum.now{color:var(--acc);font-weight:700}
.note2{font-size:12px;color:var(--mute);margin-top:6px}
.wb{font-size:12px;color:var(--mute)}

/* ---------- done ---------- */
.done{padding:22px 0 0;display:flex;flex-direction:column;gap:14px}
.done .ck{width:64px;height:64px;border-radius:32px;background:var(--gold);color:var(--on-gold);display:flex;align-items:center;justify-content:center}
.done h2{margin:0;font-size:26px;letter-spacing:-.02em}
.done p{margin:0}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;font-size:14px;font-weight:600;border-top:1px solid var(--line)}
.toggle:first-of-type{border-top:0}
.toggle input{width:24px;height:24px;accent-color:var(--c)}

/* ---------- trip picker ---------- */
.cities{display:flex;flex-direction:column;gap:8px}
.city{display:flex;justify-content:space-between;align-items:center;min-height:60px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:700;font-size:16px;text-align:left}
.city:hover{border-color:var(--acc)}
.city span{font-size:12px;color:var(--mute);font-weight:600}
.nearme{width:100%;margin-bottom:14px}

/* ---------- messages ---------- */
.inbox{display:flex;flex-direction:column;background:var(--card);margin:-14px -16px 0}
.thr{display:flex;align-items:center;gap:12px;padding:12px 16px;border:0;border-bottom:1px solid var(--line);background:var(--card);color:var(--ink);text-align:left;min-height:68px}
.av{position:relative;width:44px;height:44px;border-radius:22px;background:var(--soft);color:var(--ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0}
.badge{position:absolute;right:-4px;bottom:-4px;min-width:22px;height:20px;border-radius:6px;border:2px solid var(--card);color:#FFFFFF;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 2px}
.thr-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.thr-top{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.thr-app{font-size:11px;font-weight:700;white-space:nowrap}
.thr-last{font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thr-last.unread{color:var(--ink);font-weight:700}
.thr-time{font-size:11px;color:var(--mute);display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.dot{width:9px;height:9px;border-radius:5px}
.th-head{display:flex;align-items:center;gap:10px;padding:4px 16px 16px;background:var(--c);color:#FFFFFF;margin:-14px -16px 0;position:sticky;top:calc(56px + env(safe-area-inset-top));z-index:5}
.th-head .iconbtn{width:36px;height:36px;border-radius:18px;background:rgba(255,255,255,.18);color:#FFFFFF}
.th-who{flex:1;display:flex;flex-direction:column;line-height:1.25;font-size:16px;color:#FFFFFF}
.th-who span{font-size:12px;font-weight:600;color:var(--on-c2)}
.th-lock{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mute);background:var(--soft);border-radius:10px;padding:2px 4px 2px 10px;margin:12px 0}
.th-lock span{flex:1}
.th-other{display:block;font-size:12px;font-weight:700;margin:0 0 8px;text-decoration:none}
.th-body{display:flex;flex-direction:column;gap:8px;padding-bottom:140px}
.bub{max-width:80%;padding:9px 13px;border-radius:18px;font-size:14px;line-height:1.45}
.bub.them{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px}
.bub.me{align-self:flex-end;color:#FFFFFF;border-bottom-right-radius:6px}
.th-send{position:fixed;left:0;right:0;bottom:66px;z-index:20;background:var(--card);border-top:1px solid var(--line);padding:8px 12px;display:flex;gap:8px;max-width:480px;margin:0 auto}
.th-send input{flex:1;min-height:46px;border-radius:23px;border:1px solid var(--line);background:var(--soft);color:var(--ink);padding:0 16px;font-size:16px;outline:0}
.th-send input::placeholder{color:var(--mute);opacity:1}
.sendbtn{width:46px;height:46px;border-radius:23px;border:0;color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------- me ---------- */
.mecard{display:flex;align-items:center;gap:12px}
.mecard .av{background:var(--tile);color:var(--tile-ink)}
.meta2{font-size:12px;color:var(--mute)}
.bk{padding:10px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.bk:first-of-type{border-top:0;padding-top:0}
.bk .row{display:flex;gap:8px}
.mute{color:var(--mute)}
.applist{display:flex;flex-direction:column}
.appl{display:flex;align-items:center;gap:12px;min-height:56px;text-decoration:none;color:var(--ink);border-top:1px solid var(--line)}
.appl:first-child{border-top:0}
.mk{width:36px;height:36px;border-radius:10px;color:#FFFFFF;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.mksvg{flex-shrink:0;display:block}
.appl span.t{flex:1;display:flex;flex-direction:column;line-height:1.3;font-size:14px;font-weight:700}
.appl span.t .nm{font-size:17px;line-height:1.25}
.appl span.t small{font-weight:400;color:var(--mute);font-size:12px}

/* ---------- bottom nav + toast ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);max-width:480px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom)}
.tabs .in{height:66px;display:grid;grid-template-columns:repeat(3,1fr)}
.tab{border:0;background:transparent;color:var(--mute);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:500;position:relative;padding:4px 0 6px}
.tab.on{color:var(--acc);font-weight:700}
.tab .n{position:absolute;top:6px;left:calc(50% + 4px);min-width:18px;height:18px;border-radius:9px;background:var(--gold);color:var(--on-gold);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px}
.toast{position:fixed;left:16px;right:16px;bottom:150px;z-index:50;max-width:448px;margin:0 auto;background:var(--toast);color:var(--toast-ink);font-size:13px;font-weight:600;padding:12px 14px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.25)}

@media (prefers-reduced-motion:no-preference){
  .btn,.card,.chip,.themebtn,.vback,.city{transition:background-color .15s,border-color .15s,color .15s}
}

/* sample note sits flush under the colored header */
main>.sample:first-child{margin:-14px -16px 12px}
main>.sample:first-child+.gallery,main>.sample:first-child+.inbox{margin-top:-12px}

/* ---------- Job V (Nov 8, his call): App for Apps' own pages = BLACK on YELLOW.
   The yellow header/top bar stays the same in light and dark; only the page under
   it switches. (KOH.hub.gold -> <html class="hubgold">) ---------- */
.hubgold .afabar,.hubgold .apphead,.hubgold .pagehead,.hubgold .sub,.hubgold .th-head,.hubgold .vbar{color:#111111}
.hubgold .apphead .name b,.hubgold .apphead .name b.gold,.hubgold .apphead p,.hubgold .pagehead .nm{color:#111111}
.hubgold .apphead .name b{letter-spacing:-.03em}
.hubgold .hubmark{background:#111111;color:#F4C430}
.hubgold .themebtn{border-color:#111111;background:rgba(255,255,255,.28);color:#111111}
.hubgold .themebtn:hover{background:rgba(255,255,255,.5)}
.hubgold .themebtn svg{stroke:#111111}
.hubgold .vbar .vback{background:#111111;color:#F4C430}
.hubgold .vbar .vback:hover{background:#000000}
.hubgold .vnew{color:#111111}
.hubgold .btn:not([style]):not(.ghost):not(.gold):not(.soft){color:#111111}
.hubgold .btn.ghost{border-color:#F4C430}
.hubgold .tab.on{color:var(--ink)}
:root.hubgold[data-theme="dark"] .tab.on{color:#F4C430}

/* ---------- "Tell us what you think" button (every app page) ---------- */
.fbbtn{position:fixed;left:max(12px,calc(50% - 228px));bottom:calc(78px + env(safe-area-inset-bottom));z-index:25;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:18px;background:var(--gold);color:var(--on-gold);font-size:12px;font-weight:800;text-decoration:none;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.fbbtn:hover{background:#FFD45A}
.fbbtn:after{content:'';position:absolute;inset:-5px -2px}
html.hasfb main{padding-bottom:136px}
body:has(.actionbar) .fbbtn,body:has(.th-send) .fbbtn,body:has(.sheetbg) .fbbtn,body:has(.pbsheet) .fbbtn{display:none}
/* booking done screen: link to the Pocket Buddy calendar (Job V) */
.pbcal{display:flex;flex-direction:column;gap:2px;border-radius:14px;padding:12px 14px;background:#187A4F;color:#FFFFFF;text-decoration:none}
.pbcal b{font-size:14px}
.pbcal span{font-size:12px;color:#E3F5EA}
.hubgold .pagehead h1{color:#111111}
.hubgold .afabar .vback{background:#111111;color:#F4C430}
.hubgold .afabar .vback:hover{background:#000000}