/* 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}