/* Vicin warm look ("Paper"): soft off-white, warm black buttons, serif titles, clean cards.
   Dark mode uses the matching warm "Espresso" colours. Loaded last so it sits on top of the older styles. */
:root{
  --bg:#F7F5F0;--card:#FFFFFF;--ink:#17140F;--mut:#5E5A50;--line:#E7E2D7;--chip:#EFEAE0;
  --g:#1F1A14;--gt:#FFFFFF;--acc:#A3461C;--soft:#F1EDE5;
  --vfd:"Crimson Pro","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --vfb:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1C1410;--card:#2A1F19;--ink:#F7EDE3;--mut:#C2AE9C;--line:#3D2F26;--chip:#33261F;
  --g:#C4743D;--gt:#FFFFFF;--acc:#E7B07A;--soft:#33261F;--redbg:#3a1f1c;--red:#ff8f86;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1C1410;--card:#2A1F19;--ink:#F7EDE3;--mut:#C2AE9C;--line:#3D2F26;--chip:#33261F;
  --g:#C4743D;--gt:#FFFFFF;--acc:#E7B07A;--soft:#33261F;--redbg:#3a1f1c;--red:#ff8f86;color-scheme:dark}

body{font-family:var(--vfb);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
h1{font-family:var(--vfd);font-weight:600;letter-spacing:-.01em;font-size:31px;line-height:1.1}
h2{font-family:var(--vfd);font-weight:600;font-size:21px;letter-spacing:-.005em}

/* text on the dark accent */
.chip.on,.big,.rider .go,.step.done i,.wbt.on,.sosc a,.cb.m,.cd.on,.sw,.hero{color:var(--gt)!important}

/* cards: white, hairline border, soft corners */
.card{border-radius:18px;border:1px solid var(--line);box-shadow:none}
.card.pc{padding:8px;align-items:center!important}
.card.pc .pic,.card.pc .pic.ph{border-radius:13px;overflow:hidden}

/* chips: soft pills, active = warm black */
.chips{gap:8px}
.chip{border:0;background:var(--chip);color:var(--ink);border-radius:17px;padding:8px 15px;font-weight:600;font-size:13.5px}
.chip.on{background:var(--g);border-color:var(--g);font-weight:700}

/* buttons */
.big{border-radius:16px;padding:15px;font-weight:700;letter-spacing:.005em}
.back{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:4px;background:var(--chip);border-radius:20px;padding:8px 14px 8px 10px;margin-bottom:12px}
.search{border:0;background:var(--chip);border-radius:16px;padding:13px 16px}

/* status badges */
.badge{font-size:12.5px;border-radius:12px;padding:4px 10px}
.b-open{background:rgba(16,140,70,.12);color:#0E6B37}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .b-open{background:rgba(123,224,160,.14);color:#8FE3AE}}
:root[data-theme="dark"] .b-open{background:rgba(123,224,160,.14);color:#8FE3AE}

/* ---------- new Home (design Home 01) ---------- */
.wh{display:flex;flex-direction:column;gap:20px;padding-top:4px}
.wh-top{display:flex;align-items:center;justify-content:space-between}
.wh-ib{width:46px;height:46px;border-radius:50%;border:0;background:var(--chip);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.wh-hi{font-family:var(--vfd);font-weight:600;font-size:33px;line-height:1.05;margin:0;letter-spacing:-.01em;color:var(--ink)}
.wh-loc{display:flex;align-items:center;gap:6px;color:var(--mut);font-weight:600;font-size:14.5px;margin-top:7px;flex-wrap:wrap}
.wh-loc svg{color:var(--acc)}
.wh-s{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border-radius:18px;background:var(--chip);color:var(--mut)}
.wh-s input{flex:1;min-width:0;border:0;background:none;font:500 15.5px var(--vfb);color:var(--ink);outline:none}
.wh-s input::placeholder{color:var(--mut)}
.wh-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:16px;column-gap:6px}
.wh-t{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;font:600 13px var(--vfb);color:var(--ink);cursor:pointer;text-align:center}
.wh-t i{width:60px;height:60px;border-radius:20px;background:var(--chip);display:flex;align-items:center;justify-content:center;color:var(--ink)}
.wh-t.sos i{background:var(--redbg);color:var(--red)}
.wh-h{display:flex;align-items:baseline;justify-content:space-between}
.wh-h h2{margin:0;font-size:23px;color:var(--ink)}
.wh-h button{border:0;background:none;font:700 14px var(--vfb);color:var(--acc);cursor:pointer;padding:6px 0}
.wh-near{display:flex;gap:12px;overflow-x:auto;margin:0;padding:0 0 4px;scrollbar-width:none;scroll-snap-type:x mandatory}
.wh-n{flex:none;width:160px;display:flex;flex-direction:column;gap:7px;background:none;border:0;padding:0;text-align:left;font:inherit;color:var(--ink);cursor:pointer;scroll-snap-align:start}
.wh-n .pic{border-radius:16px;overflow:hidden;height:112px;margin:0!important;width:100%!important}
.wh-n b{font-size:15px;line-height:1.25}
.wh-n small{font-size:13px;color:var(--mut);font-weight:500}
.wh-more{display:flex;flex-direction:column;gap:2px;margin-top:-6px}
.wh-r{display:flex;align-items:center;gap:14px;padding:13px 0;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;width:100%}
.wh-r i{width:44px;height:44px;border-radius:14px;background:var(--chip);display:flex;align-items:center;justify-content:center;flex:none;font-style:normal;font-size:21px}
.wh-r b{flex:1;font-size:15.5px;font-weight:600}
.wh-r span{color:var(--mut)}
.wh-sec{font:700 12px var(--vfb);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin:14px 0 2px}
.wh button:focus-visible,.wh input:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
@media(min-width:600px){.wh-n{width:190px}.wh-n .pic{height:130px}}

/* computer website mode: sidebar */
@media (display-mode: browser) and (min-width:1024px){
 :root body nav{border-radius:0!important;box-shadow:none!important;border:0!important;border-right:1px solid var(--line)!important}
 :root body nav button{font-size:15px!important;gap:12px!important;color:var(--ink)!important;flex:none!important;padding:11px 14px!important}
 :root body nav button.on{background:var(--chip)!important;color:var(--ink)!important;flex:none!important;font-size:15px!important}
}

/* Home: Community and Whisper cards */
.wh-cm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wh-c{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px;border-radius:18px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.wh-c i{width:44px;height:44px;border-radius:14px;background:var(--g);color:var(--gt);display:flex;align-items:center;justify-content:center}
.wh-c b{display:block;font-size:16px}
.wh-c small{display:block;font-size:12.5px;color:var(--mut);line-height:1.3;margin-top:2px}
.wh-c:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
@media (display-mode: browser) and (min-width:1024px){
 :root body nav{width:var(--side,232px)!important;max-width:none!important}
 :root body nav button,:root body nav button.on{flex:none!important;width:auto!important}
}

/* ---------- readability fixes ---------- */
.bgpg .back{color:var(--ink)!important}
.bgpg>.back:first-child,.bgpg .back[data-home]{background:rgba(20,14,8,.58)!important;color:#fff!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.act a[href*="wa.me"],a.scw{background:#117A43!important;border-color:#117A43!important;color:#fff!important}
.xav[style*="#d4a20f"]{color:#1a1200!important}
.fbk.full{color:#5f6878}

/* ---------- bottom bar: clean floating bar, every tab named, the open tab has a soft highlight ---------- */
nav{width:calc(100% - 24px)!important;max-width:calc(var(--aw,430px) - 24px)!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
 padding:6px 4px!important;gap:0!important;border-radius:26px!important;border:1px solid var(--line)!important;background:var(--card)!important;
 box-shadow:0 10px 30px rgba(28,20,10,.12),0 1px 2px rgba(28,20,10,.06)!important}
nav button{flex:1 1 0!important;width:auto!important;min-width:0!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
 gap:3px!important;padding:6px 0 5px!important;border-radius:18px!important;background:none!important;color:var(--mut)!important;
 font:600 11.5px var(--vfb)!important;letter-spacing:.01em;white-space:nowrap;position:relative}
nav button span{display:flex!important;align-items:center;justify-content:center;width:56px;height:30px;border-radius:15px;transition:background .2s}
nav button span svg{width:22px!important;height:22px!important;min-width:0;flex:none}
nav button.on{color:var(--ink)!important;font-weight:800!important;background:none!important}
nav button.on span{background:var(--chip)}
nav button.on span svg{stroke-width:2.3}
nav button .xnb{top:2px!important;left:calc(50% + 8px)!important;font-size:10.5px!important}
nav button:focus-visible{outline:3px solid var(--acc);outline-offset:-2px}
@media (prefers-reduced-motion:reduce){nav button span{transition:none}}
.back.onimg{background:rgba(20,14,8,.58)!important;color:#fff!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* computer website mode: sidebar list */
@media (display-mode: browser) and (min-width:1024px){
 :root body nav{width:var(--side,232px)!important;max-width:none!important;border-radius:0!important;box-shadow:none!important;border:0!important;border-right:1px solid var(--line)!important;bottom:0!important}
 :root body nav button,:root body nav button.on{flex:none!important;width:auto!important;flex-direction:row!important;justify-content:flex-start!important;gap:12px!important;padding:11px 14px!important;font-size:15px!important;color:var(--ink)!important;border-radius:14px!important}
 :root body nav button span{width:auto;height:auto;background:none!important}
 :root body nav button.on{background:var(--chip)!important;font-weight:700!important}
}

/* dark mode: category pages set their own dark text colours, which vanish on dark cards. Use the warm dark text instead. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bgpg{--ink:#F7EDE3!important;--mut:#C2AE9C!important;--bgh:#E7B07A!important;color:#F7EDE3}}
:root[data-theme="dark"] .bgpg{--ink:#F7EDE3!important;--mut:#C2AE9C!important;--bgh:#E7B07A!important;color:#F7EDE3}
/* back buttons drawn with a dark text colour (on light banners): light see-through pill */
.back[style*="color:#1d"]{background:rgba(255,255,255,.7)!important}
/* dark mode: a few hard-coded dark texts */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .card [style*="color:#1e445b"]{color:#F2C08F!important}:root:not([data-theme="light"]) .sxl{color:#F7EDE3!important}}
:root[data-theme="dark"] .card [style*="color:#1e445b"]{color:#F2C08F!important}:root[data-theme="dark"] .sxl{color:#F7EDE3!important}
.lv.br{background:#B42318!important;color:#fff!important}

/* ================= phone-style touch ================= */
html,body{overscroll-behavior-y:contain}               /* our own pull-to-refresh instead of the browser reloading */
body{-webkit-tap-highlight-color:transparent}
button,a,.card,.wh-t,.wh-c,.wh-n,.wh-r,.chip{touch-action:manipulation}
@media (hover:none){
 button:active,.card:active,.wh-c:active,.wh-n:active,.wh-r:active,.chip:active{transform:scale(.97);transition:transform .08s}
 .wh-t:active i{transform:scale(.92);transition:transform .08s}
 nav button:active span{transform:scale(.9)}
}
#v .cp img.cv,#v .jc img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* pull to refresh */
#vptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) - 46px);transform:translate(-50%,0);z-index:60;width:42px;height:42px;border-radius:50%;
 background:var(--card);color:var(--ink);box-shadow:0 6px 20px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none}
#vptr.ready{color:var(--acc)}
#vptr.spin svg{animation:vspin .8s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}

/* full-screen viewer */
body.vvopen{overflow:hidden}
#vview{position:fixed;inset:0;z-index:200;background:#000;color:#fff;animation:vvin .18s ease-out}
#vview.out{opacity:0;transition:opacity .18s}
@keyframes vvin{from{opacity:0;transform:scale(.98)}}
.vvl{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.vvl.zoomed{overflow:hidden;scroll-snap-type:none}
.vvl::-webkit-scrollbar{display:none}
.vvs{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center;overflow:hidden}
.vvm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 56px) 0 calc(env(safe-area-inset-bottom,0px) + 120px)}
.vvm img,.vvm video{max-width:100%;max-height:100%;object-fit:contain;display:block;transform-origin:center;touch-action:none;will-change:transform}
.vvq{max-width:560px;margin:0 22px;padding:32px 26px;border-radius:26px;background:#2a2018}
.vvq p{margin:0;font:600 24px/1.35 var(--vfb,Inter,sans-serif);color:#fff;white-space:pre-wrap;overflow-wrap:anywhere}
.vvx{position:absolute;z-index:3;top:calc(env(safe-area-inset-top,0px) + 12px);left:max(14px,env(safe-area-inset-left,0px));width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center}
.vvk{position:absolute;z-index:3;top:calc(env(safe-area-inset-top,0px) + 22px);right:max(18px,env(safe-area-inset-right,0px));font:700 13px var(--vfb,Inter,sans-serif);color:rgba(255,255,255,.85)}
.vvc{position:absolute;left:max(18px,env(safe-area-inset-left,0px));right:84px;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.vvc b{display:block;font:700 15.5px var(--vfb,Inter,sans-serif)}
.vvc small{display:block;font:500 12.5px var(--vfb,Inter,sans-serif);opacity:.85;margin-top:2px}
.vvc p{margin:8px 0 0;font:500 15px/1.4 var(--vfb,Inter,sans-serif);max-height:7.2em;overflow:auto}
.vva{position:absolute;right:max(12px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 24px);display:flex;flex-direction:column;align-items:center;gap:14px}
.vva button{width:50px;border:0;background:none;color:#fff;display:flex;flex-direction:column;align-items:center;gap:3px;font:700 12.5px var(--vfb,Inter,sans-serif);filter:drop-shadow(0 1px 6px rgba(0,0,0,.5))}
.vva button svg{width:30px;height:30px}
.vva button.on{color:#FF5A5F}
.vva button.on svg{fill:currentColor}
.vvn{font:800 15px var(--vfb,Inter,sans-serif);text-shadow:0 1px 6px rgba(0,0,0,.6)}
#vview button:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* press-and-hold menu */
.vhold{position:fixed;inset:0;z-index:210;background:rgba(0,0,0,0);display:flex;align-items:flex-end;justify-content:center;transition:background .18s}
.vhold.in{background:rgba(0,0,0,.35)}
.vhb{width:min(100%,460px);margin:0 10px calc(env(safe-area-inset-bottom,0px) + 10px);background:var(--card);color:var(--ink);border-radius:22px;padding:8px;transform:translateY(110%);transition:transform .2s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px rgba(0,0,0,.25)}
.vhold.in .vhb{transform:none}
.vhp{margin:8px 12px 6px;font:500 13.5px/1.4 var(--vfb,Inter,sans-serif);color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vhb button{width:100%;display:flex;align-items:center;gap:14px;padding:14px 14px;border:0;background:none;border-radius:14px;font:600 16px var(--vfb,Inter,sans-serif);color:var(--ink);text-align:left}
.vhb button:active{background:var(--chip)}
.vhb .vhc{justify-content:center;margin-top:4px;background:var(--chip);font-weight:700}
.vtoast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 100px);transform:translateX(-50%);z-index:220;background:var(--g);color:var(--gt);padding:10px 18px;border-radius:20px;font:700 14px var(--vfb,Inter,sans-serif)}
@media (prefers-reduced-motion:reduce){#vview,.vhb,.vhold{animation:none;transition:none}}