/* Homepoint web UI. One stylesheet for login, admin, the portal and the marketplace. */
:root{
  /* Brand tokens. --green* are the PRIMARY brand colour (the name is historical); all brand colours are set in
     Admin → Branding and printed over these defaults by Theme::css(). Never hardcode brand hexes elsewhere. */
  --green:#1F4A9C;--green-2:#183A7A;--green-soft:#E4EBF6;--mint:#8EC1FF;
  --ink:#0F1E3D;--ink-2:#1D2B48;--muted:#5A6476;--faint:#8A93A3;
  --line:#E3E7EF;--line-2:#EEF1F6;--bg:#F5F7FB;--card:#FFFFFF;
  --on-dark:rgba(255,255,255,.9);--on-dark-2:rgba(255,255,255,.66);--on-dark-line:rgba(255,255,255,.16);
  --tint-blue:#E4EEFC;--tint-amber:#FDF0DC;--tint-red:#FCE8E6;--tint-green:#E3F3EA;--tint-violet:#EFE9FB;--tint-teal:#E0F4F3;--tint-pink:#FCE7F1;--tint-grey:#EEF1F6;
  --radius-sm:10px;--radius-lg:20px;--shadow-sm:0 2px 8px rgba(15,30,61,.06);
  --amber:#7A4700;--amber-bg:#FBEFD9;--red:#A8322A;--red-2:#8C2A23;--red-bg:#FBE7E4;--blue:#1D4E89;--blue-bg:#E3ECF7;
  --radius:16px;--shadow:0 10px 30px rgba(15,30,61,.07);
  --serif:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--sans:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--green)}a:hover{color:var(--green-2)}
img{max-width:100%}
h1,h2,h3,h4{margin:0;line-height:1.2}
.serif{font-family:var(--serif);font-weight:600}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:13px}.tiny{font-size:12px}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.nowrap{white-space:nowrap}.right{text-align:right}.center{text-align:center}
.hidden{display:none!important}
.stack{display:flex;flex-direction:column;gap:16px}.stack-sm{display:flex;flex-direction:column;gap:8px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.row-between{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.grow{flex:1 1 auto;min-width:0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.grid-2 > *,.grid-3 > *,.grid-4 > *,.grid-auto > *,.split > *{min-width:0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 16px;border-radius:11px;border:1.5px solid transparent;background:var(--green);color:#fff;font:inherit;font-weight:500;font-size:14px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:hover{background:var(--green-2);color:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.sm{height:34px;padding:0 12px;font-size:13px;border-radius:9px}
.btn.lg{height:50px;padding:0 22px;font-size:15px;border-radius:13px}
.btn.block{width:100%}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}.btn.ghost:hover{border-color:var(--ink);background:#fff;color:var(--ink)}
.btn.danger{background:#fff;color:var(--red);border-color:var(--red)}.btn.danger:hover{background:var(--red-bg);color:var(--red-2)}
.btn.danger-solid{background:var(--red)}.btn.danger-solid:hover{background:var(--red-2)}
.btn.link{background:none;border:0;color:var(--green);padding:0;height:auto}
.btn.link:hover{background:none;color:var(--green-2);text-decoration:underline}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)}

/* Forms */
label.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}
label.field .hint{font-weight:500;color:var(--muted);font-size:12px}
.input,input.input,select.input,textarea.input{width:100%;height:44px;padding:0 12px;border:1px solid #CDD4E0;border-radius:10px;background:#fff;font:inherit;font-size:15px;color:var(--ink)}
textarea.input{height:auto;min-height:96px;padding:10px 12px;resize:vertical}
.input:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:500;cursor:pointer}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--green);flex:0 0 auto}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full{grid-column:1/-1}
.err{background:var(--red-bg);color:var(--red-2);border-radius:12px;padding:12px 14px;font-size:14px}
.ok-box{background:var(--green-soft);color:var(--green-2);border-radius:12px;padding:12px 14px;font-size:14px}
.warn-box{background:var(--amber-bg);color:var(--amber);border-radius:12px;padding:12px 14px;font-size:14px}
.field-err{color:var(--red);font-size:12px;font-weight:600}

/* Cards & badges */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.card.flush{padding:0;overflow:hidden}
.card h3{font-size:16px;font-weight:600}
.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--line-2);color:var(--muted);white-space:nowrap}
.badge.green{background:var(--green-soft);color:var(--green)}
.badge.amber{background:var(--amber-bg);color:var(--amber)}
.badge.red{background:var(--red-bg);color:var(--red-2)}
.badge.blue{background:var(--blue-bg);color:var(--blue)}
.badge.dark{background:var(--ink);color:#fff}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px}
.stat .k{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.stat .v{font-size:28px;font-weight:700;margin-top:4px;letter-spacing:-.01em}
.stat .s{font-size:13px;color:var(--muted)}
.stat.link{text-decoration:none;color:inherit;display:block;transition:border-color .15s}
.stat.link:hover{border-color:var(--green)}
.stat.alert .v{color:var(--amber)}

/* Tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:collapse;font-size:14px}
table.t th{text-align:left;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:12px 16px;border-bottom:1px solid var(--line);background:#F8FAFD;white-space:nowrap}
table.t td{padding:12px 16px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t.compact th,table.t.compact td{padding:10px 8px}
table.t.compact th:first-child,table.t.compact td:first-child{padding-left:0}
table.t tr.clickable{cursor:pointer}table.t tr.clickable:hover td{background:#F8FAFD}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
.empty .big{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px}
.pager{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);gap:10px;flex-wrap:wrap}

/* App shell (admin + portal) */
.shell{display:flex;min-height:100vh}
.side{width:248px;flex:0 0 248px;background:var(--ink);color:#fff;padding:22px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.side .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:19px;padding:0 10px 4px;color:#fff;text-decoration:none}
.side .brand .logo{background:var(--mint);color:var(--ink)}
.side .role{padding:0 10px 16px;font-size:11px;font-weight:600;color:var(--on-dark-2);letter-spacing:.08em;text-transform:uppercase}
.side .sec{padding:16px 12px 6px;font-size:11px;font-weight:600;color:var(--on-dark-2);letter-spacing:.08em;text-transform:uppercase}
.side a.nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:10px;color:var(--on-dark);font-size:14px;font-weight:600;text-decoration:none}
.side a.nav:hover{background:var(--on-dark-line);color:#fff}
.side a.nav.on{background:var(--ink-2);color:#fff;font-weight:600}
.side a.nav .nav-l{display:flex;align-items:center;gap:11px;min-width:0}
.side a.nav .nav-l svg{flex:0 0 auto;opacity:.75}
.side a.nav.on .nav-l svg,.side a.nav:hover .nav-l svg{opacity:1;color:var(--mint)}
.side a.nav .count{padding:0 8px;border-radius:999px;background:var(--amber-bg);color:var(--amber);font-size:11px;font-weight:600;line-height:20px}
.side a.nav .count.red{background:var(--red-bg);color:var(--red-2)}
.side .spacer{flex:1}
.side .me{border-top:1px solid var(--on-dark-line);margin-top:12px;padding:14px 10px 0;font-size:13px;color:var(--on-dark)}
.side .me b{display:block;color:#fff;font-size:14px}
.main{flex:1 1 auto;min-width:0;padding:28px 32px 56px;max-width:1280px}
.topbar{display:none}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-family:var(--serif);font-weight:600;font-size:34px;letter-spacing:-.01em}
.page-head .sub{color:var(--muted);font-size:14px;margin-top:4px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:6px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--ink)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a,.tabs button{padding:10px 14px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;border:0;background:none;border-bottom:2.5px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;font-family:inherit}
.tabs a.on,.tabs button.on{color:var(--ink);border-bottom-color:var(--green)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.filters .input{width:auto;min-width:160px;height:40px;font-size:14px}
.filters input.input{min-width:240px}

/* Split view (queue + detail) */
.split{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
.queue{display:flex;flex-direction:column;gap:8px}
.queue .item{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.queue .item:hover{border-color:#B8C2D3}
.queue .item.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.queue .item .t1{display:flex;justify-content:space-between;gap:8px;font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.queue .item .t2{font-weight:600;font-size:15px;margin-top:3px}
.queue .item .t3{font-size:13px;color:var(--muted)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kv > div{background:var(--bg);border-radius:12px;padding:12px 14px}
.kv .k{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.kv .v{font-weight:600;margin-top:3px;word-break:break-word}
.file{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--line);border-radius:12px}
.file .name{font-weight:600;font-size:14px}
dl.list{display:grid;grid-template-columns:180px 1fr;gap:8px 16px;margin:0;font-size:14px}
dl.list dt{color:var(--muted);font-weight:600}dl.list dd{margin:0;word-break:break-word}

/* Modal & toast */
.modal-bg{position:fixed;inset:0;background:rgba(15,30,61,.45);display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;z-index:50;overflow-y:auto}
.modal{background:#fff;border-radius:20px;width:100%;max-width:560px;padding:24px;box-shadow:0 30px 60px rgba(0,0,0,.2)}
.modal.wide{max-width:760px}
.modal h2{font-size:20px;font-weight:600;margin-bottom:6px}
.modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}
.toasts{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:60;max-width:calc(100vw - 40px)}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;box-shadow:var(--shadow);max-width:380px}
.toast.err{background:var(--red)}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.loading{padding:48px;display:flex;justify-content:center}

/* Brand mark */
.logo{width:32px;height:32px;border-radius:9px;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}

/* Auth pages */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth .art{background:var(--green);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.auth .art h2{font-family:var(--serif);font-weight:600;font-size:44px;line-height:1.05;max-width:440px}
.auth .art p{color:var(--on-dark-2);max-width:420px}
.auth .form{display:flex;align-items:center;justify-content:center;padding:40px 20px}
.auth .box{width:100%;max-width:400px}
.auth h1{font-family:var(--serif);font-weight:600;font-size:34px;margin:18px 0 6px}
.role-pick{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.role-pick label{border:1.5px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;background:#fff}
.role-pick input{position:absolute;opacity:0;pointer-events:none}
.role-pick label.on{border-color:var(--green);background:var(--green-soft);color:var(--green-2)}
.demo-box{margin-top:22px;background:#fff;border:1px dashed #C9D1DE;border-radius:12px;padding:12px 14px;font-size:13px;color:var(--muted)}
.demo-box button{background:none;border:0;color:var(--green);font:inherit;font-weight:600;cursor:pointer;padding:2px 0}

/* Public site header */
.site-head{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .in{max-width:1200px;margin:0 auto;padding:0 20px;height:66px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.site-head .brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:20px;color:var(--ink);text-decoration:none}
.site-head nav{display:flex;gap:22px;font-weight:500;font-size:14px}
.site-head nav a{color:var(--muted);text-decoration:none}.site-head nav a:hover,.site-head nav a.on{color:var(--ink)}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}

/* Listing cards */
.lcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s}
.lcard:hover{box-shadow:var(--shadow);color:inherit}
.lcard .ph{aspect-ratio:4/3;background:var(--line-2);position:relative;display:flex;align-items:center;justify-content:center;color:var(--faint)}
.lcard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lcard .tag{position:absolute;top:10px;left:10px;background:#fff;border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}
.lcard .vb{position:absolute;top:10px;right:10px;background:var(--green);color:#fff;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:600}
.lcard .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px}
.lcard .price{font-weight:700;font-size:18px}
.lcard .ttl{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lcard .loc{font-size:13px;color:var(--muted)}
.lcard .meta{display:flex;gap:10px;font-size:13px;color:var(--muted);font-weight:600;margin-top:4px}

/* Chat */
.chat{display:grid;grid-template-columns:320px minmax(0,1fr);height:calc(100vh - 170px);min-height:460px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.chat .list{border-right:1px solid var(--line);overflow-y:auto}
.chat .conv{display:block;width:100%;text-align:left;border:0;background:none;padding:14px 16px;border-bottom:1px solid var(--line-2);cursor:pointer;font:inherit;color:inherit}
.chat .conv.on{background:var(--green-soft)}
.chat .conv:hover{background:#F8FAFD}
.chat .thread{display:flex;flex-direction:column;min-height:0}
.chat .msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:8px;background:#F8FAFD}
.chat .msg{max-width:72%;padding:9px 13px;border-radius:14px;background:#fff;border:1px solid var(--line);font-size:14px;align-self:flex-start;white-space:pre-wrap;word-break:break-word}
.chat .msg.me{align-self:flex-end;background:var(--green);color:#fff;border-color:var(--green)}
.chat .msg .when{display:block;font-size:11px;opacity:.7;margin-top:3px}
.chat .compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}

/* Progress */
.progress{height:8px;border-radius:4px;background:var(--line-2);overflow:hidden}
.progress > div{height:100%;background:var(--green)}
.countdown{display:flex;gap:10px}
.countdown div{background:var(--bg);border-radius:12px;padding:10px 12px;text-align:center;min-width:64px}
.countdown b{display:block;font-size:24px}
.countdown span{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase}

/* Tenant home */
.rent-card{background:var(--green);color:#fff;border-color:var(--green);display:flex;gap:16px;align-items:stretch;flex-wrap:nowrap}
.rent-card .rent-main{flex:1 1 auto;min-width:0}
.rent-card .rent-amt{font-size:38px;line-height:1.1}
.rent-card .rent-paid{font-size:30px;line-height:1.15}
.rent-card .wallet-mini{flex:0 0 auto;max-width:46%;border-left:1px solid rgba(255,255,255,.18);padding-left:16px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px}
.rent-card .wallet-mini .k{font-size:12px;font-weight:600;color:var(--on-dark-2);display:flex;align-items:center;gap:6px;white-space:nowrap}
.rent-card .wallet-mini .v{font-size:22px;font-weight:600;word-break:break-word}
.rent-card .wallet-mini a{color:var(--mint);font-weight:600;font-size:14px;text-decoration:none;margin-top:4px;white-space:nowrap}
.rent-card .wallet-mini a:hover{text-decoration:underline}
@media (max-width:640px){
  .rent-card{padding:18px;gap:12px}
  .rent-card .rent-amt{font-size:28px}
  .rent-card .rent-paid{font-size:23px}
  .rent-card .rent-main .btn.lg{height:44px;padding:0 16px;font-size:14px}
  .rent-card .wallet-mini{padding-left:12px}
  .rent-card .wallet-mini .v{font-size:19px}
}
.bill-line{display:flex;align-items:center;gap:12px;padding:6px 0}
.bill-line .grow{min-width:0}

/* Bills & wallet */
.bill-circles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bill-circle{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:600;text-align:center;padding:6px 2px;border-radius:14px}
.bill-circle:hover{background:var(--bg);color:var(--ink)}
.bill-circle > span{width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .15s}
.bill-circle:hover > span{transform:scale(1.06)}
.mini-ico{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.acct{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--bg);border-radius:14px;padding:14px 16px}
.acct-no{font-size:26px;font-weight:600;letter-spacing:.08em;font-family:ui-monospace,Menlo,Consolas,monospace}
.biller-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.biller{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font:inherit;font-size:12px;font-weight:600;color:var(--ink);text-align:center;min-width:0}
.biller span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.biller img,.biller .biller-ini{width:40px;height:40px;border-radius:50%;object-fit:contain;background:#fff}
.biller .biller-ini{display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}
.biller:hover{border-color:#B8C2D3}
.biller.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green);background:var(--green-soft)}
input.pin{letter-spacing:.4em;font-size:20px;text-align:center}

/* Bottom tab bar (phones only) */
.bottom-nav{display:none}
@media (max-width:860px){
  .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(15,30,61,.06)}
  .bottom-nav a,.bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border:0;background:none;color:var(--muted);font:inherit;font-size:11px;font-weight:500;text-decoration:none;position:relative;cursor:pointer;min-width:0}
  .bottom-nav a span,.bottom-nav button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .bottom-nav a.on{color:var(--green)}
  .bottom-nav a.on svg{stroke-width:2.4}
  .bottom-nav .dot{position:absolute;top:2px;left:calc(50% + 6px);background:var(--red);color:#fff;font-size:10px;line-height:16px;min-width:16px;padding:0 4px;border-radius:8px;text-align:center}
  .main.has-bottom{padding-bottom:96px}
  .has-bottom ~ .toasts,.toasts{bottom:84px}
}

/* Responsive */
@media (max-width:1024px){
  .split{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .shell{display:block}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .2s;height:auto}
  .side.open{transform:none;box-shadow:0 0 0 100vmax rgba(15,30,61,.45)}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--ink);color:#fff;position:sticky;top:0;z-index:30}
  .topbar .brand{display:flex;gap:8px;align-items:center;font-weight:600;color:#fff;text-decoration:none}
  .topbar .brand .logo{background:var(--mint);color:var(--ink)}
  .topbar button{background:none;border:0;color:#fff;padding:6px;cursor:pointer}
  .main{padding:20px 16px 48px}
  .page-head h1{font-size:28px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr}
  .auth .art{display:none}
  .chat{grid-template-columns:1fr;height:auto}
  .chat .list{max-height:240px;border-right:0;border-bottom:1px solid var(--line)}
  .chat .msgs{min-height:320px}
  dl.list{grid-template-columns:1fr}
  .site-head nav{display:none}
  .filters .input,.filters input.input{min-width:0;flex:1 1 140px}
}
/* Lists become stacked cards on phones */
@media (max-width:640px){
  table.t.cards,table.t.cards tbody,table.t.cards tr,table.t.cards td{display:block;width:100%}
  table.t.cards thead{display:none}
  table.t.cards tr{padding:12px 16px;border-bottom:1px solid var(--line-2)}
  table.t.cards tr:last-child{border-bottom:0}
  table.t.cards td{padding:3px 0;border:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:right}
  table.t.cards td::before{content:attr(data-label);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;text-align:left;flex:0 0 auto;padding-top:2px}
  table.t.cards td[data-label=""]::before{display:none}
  table.t.cards td:first-child{display:block;text-align:left;padding-bottom:6px}
  table.t.cards td:first-child::before{display:none}
  table.t.cards td[data-label=""]{justify-content:flex-end}
  table.t.cards td > *{max-width:72%}
  table.t.cards td:first-child > *{max-width:none}
  table.t.cards td.right{text-align:right}
  .bill-circle > span{width:54px;height:54px}
  .acct-no{font-size:22px}
}
@media (max-width:520px){
  .grid-4{grid-template-columns:1fr 1fr}
  .stat .v{font-size:22px}
  .role-pick{grid-template-columns:1fr}
}

/* Icon label/value boxes, property specs and amenities */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kv-ic{flex:none;width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--green-soft);color:var(--green)}
.kv > div.has-ic{display:flex;align-items:center;gap:12px}
.kv > div.has-ic.red .kv-ic{background:var(--red-bg);color:var(--red-2)}
.kv > div.has-ic.red .v{color:var(--red-2)}
.kv > div.has-ic.amber .kv-ic{background:var(--amber-bg);color:var(--amber)}
.loc-line{display:flex;align-items:flex-start;gap:6px;margin-top:6px}
.loc-line svg{flex:none;margin-top:3px;color:var(--green)}
.badge svg{flex:none}
.specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin-top:14px}
.spec{display:flex;align-items:center;gap:12px;background:var(--bg);border-radius:14px;padding:12px}
.spec .v{font-weight:600;font-size:17px;line-height:1.2}
.spec .k{font-size:12px;color:var(--muted);font-weight:600}
.amen{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:600}
.amen.on{background:var(--green-soft);color:var(--green)}
.amen.off{background:var(--line-2);color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px;opacity:.75}
@media (max-width:640px){
  .specs{grid-template-columns:1fr 1fr;gap:8px}
  .spec{padding:10px;gap:10px}
  .spec .kv-ic{width:34px;height:34px}
  .spec .v{font-size:16px}
}
dl.list dt{display:flex;align-items:flex-start;gap:7px}
.dt-ic{flex:none;display:inline-flex;color:var(--green);margin-top:2px}

/* Typing fields: 16px text stops phones zooming in (and shifting the page) when a box is tapped. */
@media (max-width:900px), (pointer:coarse){
  input, select, textarea, .input, input.input, select.input, textarea.input, .filters .input{font-size:16px !important}
  input.pin{font-size:20px !important}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* On/off switch rows (admin test switches) */
.switch-row{display:flex;align-items:center;gap:14px;cursor:pointer;padding:12px 14px;border-radius:14px;background:var(--bg)}
.switch-row.is-on{background:var(--amber-bg)}
input.switch{appearance:none;-webkit-appearance:none;flex:none;width:48px;height:28px;border-radius:999px;background:#CDD4E0;position:relative;cursor:pointer;transition:background .15s;margin:0}
input.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
input.switch:checked{background:var(--amber)}
input.switch:checked::after{transform:translateX(20px)}
input.switch:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.test-banner{background:var(--amber-bg);color:var(--amber);font-size:13px;font-weight:600;text-align:center;padding:6px 12px}
input.switch.on-green:checked{background:var(--green)}

/* Hidden wallet balance with eye toggle */
.masked-money{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mm-eye{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:0;background:rgba(127,127,127,.16);color:inherit;cursor:pointer;padding:0;flex:none}
.mm-eye:hover{background:rgba(127,127,127,.28)}
.mm-eye:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.serif .mm-eye{width:36px;height:36px;vertical-align:middle}

/* Back button at the top of inner pages */
.back-btn{display:inline-flex;align-items:center;gap:4px;margin:0 0 10px -6px;padding:6px 12px 6px 6px;border-radius:999px;color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;background:transparent}
.back-btn:hover{background:var(--line-2)}
.back-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media (max-width:640px){ .page-head .crumbs{display:none} .back-btn{background:#fff;border:1px solid var(--line);margin-left:0} }

/* Busy buttons: spinner while the server is working (e.g. "Checking…" a meter or smartcard number) */
.btn.is-busy{cursor:progress;opacity:1}
.btn-spin{display:inline-block;width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:btnspin .7s linear infinite;flex:none;vertical-align:-3px}
@keyframes btnspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn-spin{animation-duration:2s}}

/* Auto icons on stat cards and label lists, verification steps, option icons */
.auto-ic{display:inline-flex;vertical-align:-2px;margin-right:6px;color:var(--green)}
.stat .k .auto-ic{color:var(--green)}
.stat.alert .k .auto-ic{color:var(--red)}
dl.list dt{display:flex;align-items:flex-start;gap:0}
.step-ic{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--green-soft);color:var(--green)}
.step-ic.done{background:var(--green);color:#fff}
.opt-ic{display:inline-flex;color:var(--green);margin-right:2px}
.h-ic{display:flex;align-items:center;gap:10px}
.head-ic{display:inline-flex;align-items:center;color:var(--green);flex:none}
.card > h3.h-ic, .card-head > h3.h-ic{display:flex;align-items:center;gap:8px}

/* Admin: bill provider logos */
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.logo-cell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 10px;border:1px solid var(--line);border-radius:14px;text-align:center}
.logo-cell img,.logo-cell .biller-ini{width:56px;height:56px;border-radius:50%;object-fit:contain;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.bills-card{margin-bottom:16px}
.shortcuts{margin-bottom:16px}.stack>.shortcuts{margin-bottom:0}
/* @username box: the @ sits before the input; users type only the name */
.at-input{display:flex;align-items:stretch;border:1px solid #CDD4E0;border-radius:10px;background:#fff;overflow:hidden}
.at-input>span{display:flex;align-items:center;padding:0 4px 0 12px;font-weight:600;font-size:18px;color:var(--green);user-select:none}
.at-input>.input{border:0;border-radius:0;padding-left:2px;flex:1;min-width:0}
.at-input>.input:focus{outline:0}
.at-input:focus-within{outline:2px solid var(--green);border-color:var(--green)}
/* Send money + @username, under the bill circles */
.send-strip{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2)}
.send-strip .send-user{display:flex;align-items:center;gap:6px;min-width:0}
.send-strip .send-user b{color:var(--green);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}
.wallet-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wallet-actions .btn{padding:0 8px;font-size:13.5px}
@media (max-width:380px){.wallet-actions{grid-template-columns:1fr 1fr}.wallet-actions .btn:last-child{grid-column:1/-1}}
.receipt-card{max-width:560px}
.receipt-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
/* Admin → Branding & colours */
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.preset{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font:inherit;font-weight:600;font-size:13px;color:var(--ink);text-align:left}
.preset.on,.preset:hover{border-color:var(--green)}
.swatches{display:flex;gap:4px}.swatches i{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.08);display:block}
.color-row{display:flex;gap:8px;align-items:center}
.color-row input[type=color]{width:46px;height:44px;padding:2px;border:1px solid #CDD4E0;border-radius:10px;background:#fff;cursor:pointer;flex:0 0 auto}
.color-row .input{flex:1;min-width:0;text-transform:uppercase}
.theme-preview{--p:#1F4A9C;--d:#0F1E3D;--a:#8EC1FF;--b:#F5F7FB;--ps:#E4EBF6;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--b)}
.tp-top{background:var(--d);color:#fff;display:flex;align-items:center;gap:8px;padding:12px 14px}
.tp-logo{width:26px;height:26px;border-radius:8px;background:var(--a);color:var(--d);display:inline-flex;align-items:center;justify-content:center;font-weight:600}
.tp-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.tp-rent{background:var(--p);color:#fff;border-radius:12px;padding:14px}
.tp-wallet{background:var(--d);color:#fff;border-radius:12px;padding:14px}
.tp-k{font-size:12px;opacity:.75;font-weight:600}.tp-v{font-size:24px;font-weight:600;margin:2px 0 8px}
.tp-btn-accent{display:inline-block;background:var(--a);color:var(--d);border-radius:9px;padding:6px 12px;font-weight:600;font-size:13px}
.tp-user{color:var(--a);font-weight:600}
.tp-btn{background:var(--p);color:#fff;border-radius:9px;padding:8px 14px;font-weight:600;font-size:13px}
.tp-link{color:var(--p);font-weight:600;text-decoration:underline;font-size:13px}
.tp-chip{align-self:flex-start;background:var(--ps);color:var(--p);border:1.5px solid var(--p);border-radius:10px;padding:6px 12px;font-weight:600;font-size:13px}
/* Admin → Verification → ID documents */
.id-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.id-photos figure{margin:0}
.id-photos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:var(--line-2);cursor:zoom-in;display:block}
.id-photos figcaption{font-size:12px;color:var(--muted);margin-top:4px;font-weight:600}
/* Manual ID upload */
.id-uploads{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.id-up{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;aspect-ratio:16/10;border:1.5px dashed #B8C2D3;border-radius:12px;background:var(--bg);cursor:pointer;overflow:hidden;font-size:13px;font-weight:600;padding:8px}
.id-up img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.id-up.has img{display:block}.id-up.has span{display:none}
.id-up small{display:block;font-weight:500;color:var(--muted)}
.reverify-banner{display:block;text-decoration:none;margin:-6px 0 16px}
.reverify-banner span{display:block;font-size:13px;margin-top:2px}
/* Admin: choose users */
.pick{width:18px;height:18px;accent-color:var(--green);cursor:pointer}
.pick-results{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow:auto}
.pick-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;border:0;border-radius:10px;background:var(--bg);font:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.pick-row:hover{background:var(--green-soft)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--green-soft);color:var(--green);border-radius:999px;padding:4px 6px 4px 12px;font-size:13px;font-weight:500}
.chip button{border:0;background:none;color:inherit;font-size:16px;line-height:1;cursor:pointer;padding:0 4px}
/* Show / hide password */
.pw-wrap{position:relative;display:block;width:100%}
.pw-wrap>input{padding-right:46px !important;width:100%}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px}
.pw-eye:hover{color:var(--ink);background:var(--line-2)}
.otp-input{font-size:28px !important;letter-spacing:.5em;text-align:center;font-weight:600;height:58px}

/* ---- Maps (Google Maps / OSM fallback) ---- */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--card);padding:3px}
.seg button{border:0;background:none;padding:7px 14px;border-radius:999px;font:inherit;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--green);color:#fff}
.search-map{height:min(72vh,680px);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:#E7EBF2}
.map-pill{background:var(--green);color:#fff;font-weight:600;font-size:12px;padding:5px 9px;border-radius:999px;box-shadow:0 3px 10px rgba(0,0,0,.25);white-space:nowrap;border:2px solid #fff;transform:translateY(-4px)}
.map-pill.approx{background:var(--ink-2)}
.map-card{display:flex;flex-direction:column;gap:3px;width:210px;color:var(--ink);text-decoration:none;font-family:var(--sans)}
.map-card img{width:100%;height:110px;object-fit:cover;border-radius:10px;margin-bottom:4px}
.map-card b{font-size:15px}.map-card span{font-size:13px;color:var(--muted)}.map-card em{font-size:12px;color:var(--amber);font-style:normal}
qh-location{display:block}
.loc-pick{display:flex;flex-direction:column;gap:10px;grid-column:1/-1}
.loc-search{position:relative}
.loc-sug{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:60;overflow:hidden;max-height:320px;overflow-y:auto}
.loc-opt{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;text-align:left;border:0;background:none;padding:10px 14px;font:inherit;cursor:pointer;border-bottom:1px solid var(--line-2)}
.loc-opt b{font-size:14px;font-weight:600;color:var(--ink)}.loc-opt span{font-size:12.5px;color:var(--muted)}
.loc-opt:hover,.loc-opt.on{background:var(--green-soft)}
.loc-by{font-size:11px;color:var(--faint);padding:6px 14px;text-align:right}
.loc-map{height:280px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#E7EBF2}
.loc-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.loc-bar .btn.link{padding:4px 6px}
@media (max-width:640px){.loc-map{height:230px}.search-map{height:64vh}}
.near-chip{display:inline-flex;align-items:center;gap:6px;margin-top:8px;background:var(--green-soft);color:var(--green);font-weight:600;font-size:13px;padding:5px 6px 5px 12px;border-radius:999px}
.near-chip select{border:0;background:#fff;border-radius:999px;padding:3px 8px;font:inherit;font-weight:600;color:var(--green);cursor:pointer}
.near-chip button{border:0;background:none;color:var(--green);font-size:15px;cursor:pointer;width:26px;height:26px;border-radius:50%}
.near-chip button:hover{background:#fff}
.loc .dist{color:var(--green);font-weight:600}
/* Land */
.lcard .vb.nv{background:rgba(15,30,61,.72)}
.card.land-ok{background:var(--green-soft);border-color:#D3DEF0}.card.land-ok h3{color:var(--green)}
.card.land-warn{background:var(--amber-bg);border-color:#F2DDB5}.card.land-warn h3{color:var(--amber)}.card.land-warn p{color:#5C3A06}
/* Homes search on phones: tabs + Where + results first, other filters behind "More filters" */
.m-only,.m-only-i{display:none}
@media (max-width:860px){
  .m-only{display:inline-flex}.m-only-i{display:inline}.d-only{display:none}
  #filters .more-f{display:none}
  #filters.open .more-f{display:flex}
  #filters{padding:14px;gap:10px}
  #filters .ptabs{overflow-x:auto;flex-wrap:nowrap}
  .search-layout + *{margin-top:0}
  .page-head h1{font-size:26px}
  .page-head .row{gap:8px;flex-wrap:wrap}
  .page-head .row .btn{height:38px;padding:0 12px;font-size:13px}
  .seg button{padding:6px 12px}
}
/* iPhone zooms into any box with text under 16px when tapped; keep boxes at 16px on phones */
@media (max-width:860px){.input,input.input,select.input,textarea.input,.filters .input,.otp-input{font-size:16px}}
/* Who listed it + when, on listing cards */
.lcard .by{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2);font-size:13px}
.lcard .by-av{width:26px;height:26px;border-radius:50%;background:var(--green-soft);color:var(--green);font-weight:600;font-size:11px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.lcard .by-n{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.lcard .by-t{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:var(--blue-bg);color:var(--blue);flex:none}
.lcard .by-t.landlord{background:var(--amber-bg);color:var(--amber)}
.lcard .when{font-size:12px;color:var(--faint);margin-top:6px}
.owner-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:var(--blue-bg);color:var(--blue);border-radius:14px;padding:12px 14px;margin-bottom:14px;font-size:14px}
.by-tag{display:inline-block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:var(--blue-bg);color:var(--blue);vertical-align:1px}
.by-tag.landlord{background:var(--amber-bg);color:var(--amber)}
/* ---- Artisan Marketplace ---- */
.a-cats{display:flex;gap:4px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:thin;scroll-snap-type:x proximity}
.a-cats a{flex:none;width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;border-radius:16px;color:var(--ink);font-weight:600;font-size:12.5px;line-height:1.2;text-align:center;text-decoration:none;scroll-snap-align:start}
.a-cats a img,.a-cats a .all{width:60px;height:60px;border-radius:18px;display:block;object-fit:cover;border:2px solid transparent;transition:transform .15s,border-color .15s}
.a-cats a .all{background:var(--card);border-color:var(--line);display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:13px;box-sizing:border-box}
.a-cats a .all i{background:var(--green);border-radius:4px;opacity:.85}
.a-cats a:hover img{transform:translateY(-2px)}
.a-cats a.on{color:var(--green)}
.a-cats a.on img,.a-cats a.on .all{border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.a-cimg{width:20px;height:20px;border-radius:6px;object-fit:cover;vertical-align:-5px;margin-right:4px}
.a-av.pic{background:none;border-radius:18px}
.a-sample{background:#EEE8FC;color:#4B2F9E}
.a-where-card{text-align:center;padding:28px 20px}
.a-where-card .pics{display:flex;justify-content:center;margin-bottom:14px}
.a-where-card .pics img{width:56px;height:56px;object-fit:cover;border-radius:16px;margin:0 -6px;border:3px solid var(--card);box-shadow:var(--shadow)}
.a-where-card .towns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.a-home{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-radius:12px;background:var(--green-soft);color:var(--green);font-weight:600;font-size:14px;margin-bottom:12px}
.a-search{display:grid;gap:12px;margin-bottom:16px}
.a-search .a-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.a-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr));gap:14px}.a-card{min-width:0}
.a-card{display:flex;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink);text-decoration:none;box-shadow:var(--shadow)}
.a-card:hover{border-color:var(--green)}
.a-av{width:64px;height:64px;border-radius:50%;background:var(--green-soft);color:var(--green);font-weight:600;font-size:20px;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden}
.a-av img{width:100%;height:100%;object-fit:cover}
.a-av.lg{width:96px;height:96px;font-size:30px}
.a-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:4px}
.a-top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.a-name{font-size:16px;overflow:hidden;text-overflow:ellipsis}
.a-dist{flex:none;font-size:12px;font-weight:600;color:var(--green);background:var(--green-soft);padding:2px 8px;border-radius:999px}
.a-cat{font-size:13px;font-weight:600;color:var(--ink-2)}
.a-head{font-size:13.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-badges{display:flex;gap:6px;flex-wrap:wrap}
.a-meta{font-size:13px;color:var(--ink-2)}
.a-stars{color:#B7791F;font-weight:600}
.a-areas{font-size:12.5px;color:var(--muted)}
.a-pro{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.a-hero{display:flex;gap:18px;align-items:center}
.a-side{position:sticky;top:84px}
.a-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.a-gal a{position:relative;display:block;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#E7EBF2}
.a-gal img{width:100%;height:100%;object-fit:cover}
.a-gal span{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.6));color:#fff;font-size:12px;padding:16px 8px 6px}
.chip-link{padding:7px 12px;border-radius:999px;background:var(--green-soft);color:var(--green);font-weight:500;font-size:14px;text-decoration:none}
@media (max-width:860px){.a-pro{grid-template-columns:1fr}.a-side{position:static}.a-hero{align-items:flex-start}.a-list{grid-template-columns:minmax(0,1fr)}}
.a-hrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 14px;font-size:14px}
@media (max-width:600px){.a-join{display:none}}
@media (max-width:860px){
  .a-pro{display:flex;flex-direction:column}
  .a-side{position:sticky;bottom:0;z-index:20;order:3;margin:0 -4px}
  .a-side .card{box-shadow:0 -6px 24px rgba(15,30,61,.14);padding:12px}
  .a-side .card .btn.block{height:40px}
}
@media (max-width:860px){
  .a-side .card.stack{flex-direction:row;flex-wrap:wrap;gap:8px}
  .a-side .card.stack > b{flex-basis:100%;font-size:14px}
  .a-side .card.stack > p,.a-side .card.stack > .tiny,.a-side > .small{display:none}
  .a-side .card.stack > .btn.block{flex:1 1 30%;width:auto;min-width:0;padding:0 8px;font-size:13.5px}
}

/* Artisan jobs: quote builder lines */
.qb-line,.qb-head{display:grid;grid-template-columns:130px 1fr 70px 110px 32px;gap:6px;align-items:center}
@media (max-width:640px){
  .qb-head{display:none}
  .qb-line{grid-template-columns:1fr 1fr 32px;grid-template-areas:"desc desc desc" "kind kind kind" "qty price del";padding:10px;border:1px solid var(--line);border-radius:12px}
  .qb-line [name=it_desc]{grid-area:desc}.qb-line [name=it_kind]{grid-area:kind}.qb-line [name=it_qty]{grid-area:qty}.qb-line [name=it_price]{grid-area:price}.qb-line [data-qb-del]{grid-area:del}
}

/* Artisan reviews */
.a-rv{border-top:1px solid var(--line);padding-top:12px}.a-rv:first-child{border-top:0;padding-top:0}
.a-rv-stars{color:#E8A317;letter-spacing:1px;white-space:nowrap}
.a-rv-reply{margin-top:8px;padding:8px 12px;border-radius:10px;background:var(--green-soft);font-size:14px}
.a-rv-sum{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.a-rv-bars{flex:1;min-width:180px;display:grid;gap:4px;font-size:12px}
.a-rv-bars div{display:grid;grid-template-columns:28px 1fr 24px;gap:6px;align-items:center}
.a-rv-bars i{height:8px;border-radius:4px;background:var(--line-2);overflow:hidden;display:block}.a-rv-bars b{display:block;height:100%;background:#E8A317}

/* ---------------------------------------------------------------- Phase 1: everyday services
   Service tints are fixed category colours (not brand colours); brand colours stay in the tokens above. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.t-blue{--tf:#1F4A9C;--tb:var(--tint-blue)}.t-amber{--tf:#A05A00;--tb:var(--tint-amber)}.t-red{--tf:#B4361F;--tb:var(--tint-red)}.t-green{--tf:#15803D;--tb:var(--tint-green)}
.t-violet{--tf:#6D28D9;--tb:var(--tint-violet)}.t-teal{--tf:#0F766E;--tb:var(--tint-teal)}.t-pink{--tf:#BE185D;--tb:var(--tint-pink)}.t-grey{--tf:var(--muted);--tb:var(--tint-grey)}
.svc-ic{width:48px;height:48px;border-radius:14px;background:var(--tb,var(--green-soft));color:var(--tf,var(--green));display:flex;align-items:center;justify-content:center;flex:none}
.svc-ic.lg{width:64px;height:64px;border-radius:18px}
.svc-soon{position:absolute;top:10px;right:10px;font-size:10.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--line-2);padding:3px 8px;border-radius:999px}
.svc-soon.static{position:static;display:inline-block;flex:none}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.svc-tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:8px;min-height:128px;transition:box-shadow .15s,transform .15s}
.svc-tile:hover{box-shadow:var(--shadow);transform:translateY(-1px);color:var(--ink)}
.svc-tile b{font-size:16px}.svc-tile small{color:var(--muted);font-size:13px;line-height:1.35}
.svc-row{display:flex;align-items:center;gap:14px;padding:14px 16px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-2)}
.svc-row:last-child{border-bottom:0}
a.svc-row:hover{background:#F8FAFD;color:var(--ink)}
.svc-row b{display:block;font-size:15px}.svc-row small{display:block;color:var(--muted);font-size:13px}
.svc-row .chev{color:var(--faint);flex:none}
.svc-row.muted-row{color:var(--muted)}
.svc-list{overflow:hidden}
.svc-rows{display:flex;flex-direction:column;gap:10px}
.svc-rows .svc-row{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.svc-page{padding-top:22px;padding-bottom:40px}
.svc-h2{font-size:20px;margin:26px 0 12px}
.svc-search{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 14px;margin-bottom:18px;color:var(--green);box-shadow:var(--shadow-sm)}
.svc-search input{flex:1;height:50px;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);min-width:0}
.svc-search input:focus{outline:none}.svc-search:focus-within{border-color:var(--green)}
.svc-hero{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;margin:12px 0 4px}
.svc-hero h1{margin:8px 0 6px;font-size:28px}
.svc-hero p{margin:0;color:var(--muted);max-width:640px}
.svc-chips{display:flex;flex-wrap:wrap;gap:8px}
.svc-chips span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:14px;font-weight:600}
.svc-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:30px 20px;margin-top:20px;border-style:dashed}
.svc-empty b{font-size:18px}
.svc-notify{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;max-width:440px;margin-top:8px}
.svc-notify .input{flex:1 1 220px}
.svc-how{margin-top:16px}
.svc-how .card{display:flex;gap:12px;align-items:flex-start;font-size:14.5px}
.svc-num{width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.svc-join{margin-top:20px}
.svc-join h2{margin:0 0 4px;font-size:20px}
.svc-join p{margin:0 0 14px}
.back-link{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:14px;text-decoration:none}
.loc-chip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--green-soft);color:var(--green);font:inherit;font-weight:600;font-size:13px;cursor:pointer;max-width:200px;margin-right:auto}
.loc-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.site-head .in{justify-content:flex-start}
.site-head nav{margin-left:auto}
/* Dashboard shortcuts (Find an Artisan, Order Food, Groceries & Drinks) */
.shortcuts{display:flex;flex-direction:column;gap:10px}
.shortcuts .svc-row{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.shortcuts .svc-ic{width:44px;height:44px;border-radius:13px}
@media (max-width:860px){
  .svc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .svc-tile{padding:12px 6px;min-height:0;align-items:center;text-align:center;gap:6px;border-radius:14px}
  .svc-tile small{display:none}
  .svc-tile b{font-size:12.5px;line-height:1.2}
  .svc-tile .svc-ic{width:44px;height:44px}
  .svc-tile .svc-soon{top:4px;right:4px;font-size:8.5px;padding:1px 5px}
  .site-head nav{display:none}
  .svc-hero{flex-direction:column}
}
@media (max-width:560px){.hide-sm{display:none!important}.loc-chip{max-width:112px;padding:0 9px;font-size:12px}.site-head .in{gap:8px;padding:0 14px}.site-head .brand{font-size:18px;gap:7px}.site-head .btn.sm{padding:0 10px}}
/* Artisans directory restyle (reference design): square photos, Book button, softer cards */
.a-card{box-shadow:var(--shadow-sm);align-items:center}
.a-card:hover{box-shadow:var(--shadow);border-color:var(--line)}
.a-av{border-radius:16px}
.a-card .a-book{flex:none;align-self:center;pointer-events:none}
.a-search{box-shadow:var(--shadow-sm)}
@media (max-width:420px){.a-card{flex-wrap:wrap}.a-card .a-book{margin-left:auto}}

/* Phone bottom bar on public pages (homepage has its own copy) */
.site-tabbar{display:none}
@media (max-width:760px){
  body:has(.site-tabbar){padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .site-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(15,30,61,.06)}
  .site-tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none;padding:4px 0}
  .site-tabbar a.on{color:var(--green)}
}
.orders-links{display:grid;gap:10px;margin-top:16px}

/* Service tiles match the homepage: tinted tile, white icon square */
.svc-tile{background:var(--tb,var(--card));border-color:transparent;align-items:center;text-align:center}
.svc-tile .svc-ic{background:#fff;box-shadow:0 2px 6px rgba(15,30,61,.06)}
.svc-tile .svc-soon{background:#fff;color:var(--tf,var(--muted))}

/* ---------------------------------------------------------------- Phase 2: artisan screens in the navy design
   Profile, job requests, job pages, request form and the artisan dashboard. Every colour comes from the
   brand tokens above (Admin → Branding); --star is the fixed rating gold, not a brand colour. */
:root{--star:#E8A317;--star-off:#D5DBE5}
/* Navy banner, same family as the homepage's "Good food" banner */
.hero-band{position:relative;overflow:hidden;background:var(--green);background:linear-gradient(115deg,var(--green-2) 0%,var(--green) 62%,color-mix(in srgb,var(--green) 72%,#fff) 100%);color:#fff;border-radius:var(--radius-lg);padding:24px}
.hero-band::before{content:"";position:absolute;right:-90px;top:-110px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.hero-band::after{content:"";position:absolute;right:90px;bottom:-140px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.05);pointer-events:none}
.hero-band > *{position:relative;z-index:1}
.hero-band h1,.hero-band h2{color:#fff;font-family:var(--sans);font-weight:600;letter-spacing:-.01em;margin:0}
.hero-band h1{font-size:clamp(24px,3.4vw,34px);line-height:1.12}
.hero-band h2{font-size:clamp(20px,2.6vw,26px);line-height:1.15}
.hero-band .lead{color:var(--on-dark);margin:6px 0 0;font-size:15px;max-width:620px}
.hero-band a:not(.btn){color:#fff}
.chips-d{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip-d{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:500;white-space:nowrap}
.chip-d svg{color:var(--mint);flex:none}
.chip-d.warn{background:rgba(255,196,92,.22);border-color:rgba(255,196,92,.35)}
.chip-d.bad{background:rgba(255,120,110,.24);border-color:rgba(255,120,110,.4)}
.chip-d.soft svg{color:#fff}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin-top:18px}
.hero-stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px 12px;min-width:0}
.hero-stat .k{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--on-dark-2)}
.hero-stat .k svg{color:var(--mint);flex:none}
.hero-stat .v{font-size:19px;font-weight:700;color:#fff;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;align-items:center}
.btn.light{background:#fff;color:var(--green);border-color:#fff}.btn.light:hover{background:var(--green-soft);border-color:var(--green-soft);color:var(--green-2)}
.btn.on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}.btn.on-dark:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}
.btn svg{flex:none}
.hero-note{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:10px 12px;font-size:13.5px;margin-top:12px;color:#fff}
.hero-band input.switch{background:rgba(255,255,255,.28)}
.hero-band input.switch:checked{background:var(--mint)}
.switch-d{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:14px;cursor:pointer;color:#fff;margin-left:auto}
/* Section heading with a soft icon square */
.sh{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16px;font-weight:600}
.sh-ic{width:34px;height:34px;border-radius:10px;background:var(--green-soft);color:var(--green);display:inline-flex;align-items:center;justify-content:center;flex:none}
.sh .grow{min-width:0}
.sh .sub{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:1px}
.card.soft{box-shadow:var(--shadow-sm)}
/* Artisan profile */
.ap-head{display:flex;gap:18px;align-items:center}
.ap-head .a-av{background:#fff;border:3px solid rgba(255,255,255,.92);box-shadow:0 12px 26px rgba(0,0,0,.2)}
.ap-head .grow{min-width:0}
.ap-crumbs{font-size:13px;color:var(--on-dark-2);margin-bottom:14px}
.ap-crumbs a{color:var(--on-dark)!important;text-decoration:none}.ap-crumbs a:hover{text-decoration:underline}
.ap-stars{color:var(--star)}
.ap-tags{display:flex;flex-wrap:wrap;gap:8px}
.ap-tags .badge{background:var(--bg);color:var(--ink-2);padding:6px 12px;font-size:13px;font-weight:600}
.ap-tags .badge svg{color:var(--green)}
.ap-fee{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--bg);border-radius:12px;padding:10px 12px;font-size:14px}
.ap-fee b{font-size:16px}
.ah-hours{display:grid;gap:2px}
.ah-hours div{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:10px;font-size:14px}
.ah-hours .d{font-weight:600}
.ah-hours .off{color:var(--faint)}
.ah-hours .today{background:var(--green-soft);color:var(--green-2)}
.ah-hours .today .d::after{content:" · today";font-weight:600;font-size:12px}
.safe{background:var(--amber-bg);border-color:transparent}
.safe .sh{color:var(--amber)}.safe .sh-ic{background:#fff;color:var(--amber)}
.safe ul{margin:0;padding-left:18px;color:var(--amber);font-size:14px;display:grid;gap:4px}
.owner-bar.sample{background:var(--tint-violet);color:#4B2F9E}
.a-home.repair{background:var(--amber-bg);color:var(--amber)}
.a-home svg{flex:none}
.ap-side-meta{padding:0 6px;display:flex;flex-direction:column;gap:6px}
.ap-contact .btn.block{gap:10px}
@media (max-width:860px){
  .a-side .card.stack > .ap-fee{display:none}
  .ap-head .a-av.lg{width:76px;height:76px;font-size:24px}
}
/* Pill filters (job lists) */
.pill-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:4px;scrollbar-width:none}
.pill-tabs::-webkit-scrollbar{display:none}
.pill-tabs a{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-weight:500;font-size:13.5px;text-decoration:none;white-space:nowrap}
.pill-tabs a:hover{border-color:var(--ink);color:var(--ink)}
.pill-tabs a.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pill-tabs .n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--line-2);color:var(--muted);font-size:11px;font-weight:500;display:inline-flex;align-items:center;justify-content:center}
.pill-tabs .n.hot{background:var(--amber-bg);color:var(--amber)}
.pill-tabs a.on .n{background:rgba(255,255,255,.2);color:#fff}
.seg-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--line-2);margin-bottom:14px;max-width:100%;overflow-x:auto}
.seg-tabs a{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;font-weight:600;font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap}
.seg-tabs a.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.seg-tabs .badge{padding:1px 7px}
/* Artisan inbox summary */
.inbox-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
.inbox-stat{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);min-width:0;transition:border-color .15s,box-shadow .15s}
.inbox-stat:hover{color:var(--ink);box-shadow:var(--shadow)}
.inbox-stat.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.inbox-stat .svc-ic{width:42px;height:42px;border-radius:12px}
.inbox-stat .v{font-size:22px;font-weight:700;line-height:1.1}
.inbox-stat .k{font-size:12.5px;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-stat > span:last-child{min-width:0}
@media (max-width:860px){.inbox-stats{grid-template-columns:1fr 1fr;gap:8px}.inbox-stat{padding:12px;gap:10px}.inbox-stat .svc-ic{width:36px;height:36px}}
/* Job rows */
.jlist{display:flex;flex-direction:column;gap:10px}
.jrow{position:relative;overflow:hidden;display:flex;gap:14px;align-items:center;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}
.jrow:hover{box-shadow:var(--shadow);color:inherit;border-color:#CDD4E0}
.jrow.hot::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--amber)}
.j-av{width:48px;height:48px;border-radius:14px;flex:none;object-fit:cover;background:var(--green-soft);color:var(--green);font-weight:600;font-size:17px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.j-av.round{border-radius:50%}
.j-av.lg{width:56px;height:56px;font-size:20px}
.jrow .grow{min-width:0}
.j-t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.j-t b{font-size:15.5px;font-weight:600}
.j-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--muted);margin-top:5px}
.j-meta span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.j-meta svg{flex:none;color:var(--faint)}
.j-side{flex:none;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.j-price{font-weight:700;font-size:16px;white-space:nowrap}
.j-price-k{font-size:11.5px;color:var(--muted);font-weight:700}
.j-chev{color:var(--faint);flex:none}
.j-prog{display:flex;gap:3px;margin-top:10px;max-width:300px}
.j-prog i{flex:1;height:4px;border-radius:2px;background:var(--line-2)}
.j-prog i.on{background:var(--green)}
.j-price-m{display:none!important;color:var(--ink)!important;font-weight:700}
@media (max-width:560px){.jrow{padding:12px 14px;gap:12px;align-items:flex-start}.j-side{display:none}.j-price-m{display:inline-flex!important}.j-av{width:42px;height:42px;font-size:15px}.j-chev{align-self:center}}
/* Job page: status band with the step tracker */
.jd-status{padding:0;overflow:hidden}
.jd-status .hero-band{border-radius:0;padding:18px 20px 20px}
.jd-band.ended{background:var(--red);background:linear-gradient(115deg,var(--red-2),var(--red))}
.jd-now{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.jd-now .k{font-size:12px;font-weight:600;color:var(--on-dark-2);text-transform:uppercase;letter-spacing:.06em}
.jd-now .v{font-size:20px;font-weight:600;color:#fff;line-height:1.2}
.trk{display:flex;align-items:flex-start}
.trk-s{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;min-width:0;text-align:center}
.trk-s::before{content:"";position:absolute;top:13px;right:50%;width:100%;height:2px;background:rgba(255,255,255,.22)}
.trk-s:first-child::before{display:none}
.trk-s.done::before,.trk-s.now::before{background:var(--mint)}
.trk-d{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.3);color:var(--on-dark-2);font-size:12px;font-weight:600}
.trk-s.done .trk-d{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.trk-s.now .trk-d{background:#fff;border-color:#fff;color:var(--green);box-shadow:0 0 0 5px rgba(255,255,255,.18)}
.trk-l{font-size:11.5px;font-weight:600;color:var(--on-dark-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;padding:0 2px}
.trk-s.done .trk-l,.trk-s.now .trk-l{color:#fff}
.jd-body{padding:18px 20px 20px}
.jd-hint{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin:0}
.jd-hint svg{flex:none;color:var(--green);margin-top:2px}
.jd-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
@media (max-width:560px){.trk-l{font-size:10px}.trk-d{width:24px;height:24px;font-size:11px}.trk-s::before{top:11px}.jd-status .hero-band{padding:16px 14px 18px}.jd-body{padding:16px}.jd-acts .btn{flex:1 1 auto}}
/* Quotes */
.q-pending{border-color:var(--amber)!important;box-shadow:0 0 0 3px var(--amber-bg)}
.q-tbl{width:100%;border-collapse:collapse;font-size:14px}
.q-tbl td,.q-tbl th{padding:9px 4px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.q-tbl th{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.q-tbl .r{text-align:right;white-space:nowrap}
.q-total{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--green-soft);color:var(--green-2);border-radius:12px;padding:12px 14px;margin-top:10px;font-weight:700}
.q-total b{font-size:20px;color:var(--ink)}
.kind{display:inline-block;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:var(--tb,var(--line-2));color:var(--tf,var(--muted));margin-top:4px}
.q-note{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--bg);font-size:14px;white-space:pre-wrap}
/* People and actions */
.person{display:flex;gap:12px;align-items:center}
.person .p-name{font-weight:600;font-size:15.5px}
.act-list{display:grid;gap:8px;margin-top:14px}
.act-list .btn{gap:10px}
/* Updates timeline */
.tl{display:flex;flex-direction:column;gap:16px}
.tl-i{position:relative;padding-left:24px;min-width:0}
.tl-i::before{content:"";position:absolute;left:3px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft);z-index:1}
.tl-i.customer::before{background:var(--mint);box-shadow:0 0 0 3px var(--blue-bg)}
.tl-i.hp::before{background:var(--amber);box-shadow:0 0 0 3px var(--amber-bg)}
.tl-i::after{content:"";position:absolute;left:7px;top:18px;bottom:-16px;width:2px;background:var(--line-2)}
.tl-i:last-child::after{display:none}
.tl-who{font-size:13px}
.tl-line{font-size:13.5px;margin-top:2px}
.tl-body{white-space:pre-wrap;margin-top:4px;background:var(--bg);border-radius:12px;padding:9px 12px;font-size:14px}
/* Payments */
.pay-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pay-sum > div{background:var(--bg);border-radius:12px;padding:10px 12px;min-width:0}
.pay-sum .k{font-size:11.5px;font-weight:700;color:var(--muted)}
.pay-sum .v{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pay-sum .v.owe{color:var(--amber)}.pay-sum .v.clear{color:var(--green)}
.pay-bar{margin-top:10px}
/* Ratings and photos */
.j-stars{display:flex;gap:4px}
.j-stars button{border:0;background:none;font-size:28px;line-height:1;color:var(--star-off);cursor:pointer;padding:0 2px}
.j-stars button.on{color:var(--star)}
.rv-stars{font-size:20px;color:var(--star);letter-spacing:2px}
.rv-reply{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--green-soft)}
.j-ph{border:0;padding:0;background:none;cursor:zoom-in;position:relative;display:block}
.j-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--line-2);display:block}
.j-ph span{position:absolute;left:6px;bottom:6px;background:rgba(15,30,61,.78);color:#fff;font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.j-ph.sm img{width:72px;height:56px;aspect-ratio:auto}
.problem-link{display:inline-flex;align-items:center;gap:6px;color:var(--red)!important}
/* Request a job */
.req-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.req-aside{position:sticky;top:20px}
.step-h{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16px;font-weight:600}
.step-h .svc-num{width:26px;height:26px}
.choice{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;font-size:14px;font-weight:500}
.choice + .choice{margin-top:8px}
.choice input{margin-top:3px;accent-color:var(--green);flex:none}
.choice:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.how{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.how li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.how .svc-num{width:24px;height:24px;font-size:12px}
.req-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
@media (max-width:860px){.req-grid{grid-template-columns:1fr}.req-aside{order:-1;position:static}.req-aside .how,.req-aside .tiny{display:none}.req-foot .btn{flex:1 1 auto}}
/* Artisan dashboard */
.tabs a svg,.tabs button svg{vertical-align:-4px;margin-right:6px}
.wh-grid{display:grid;gap:8px;max-width:480px}
.wh-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.wh-row b{font-size:14px}
.ben-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ben{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm)}
.ben b{font-size:15px}.ben small{color:var(--muted);font-size:13.5px;line-height:1.4}
.todo{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}
.todo li{display:flex;gap:8px;align-items:center;font-size:13.5px}
.todo svg{flex:none;color:var(--mint)}
@media (max-width:860px){.ben-grid{grid-template-columns:1fr}.switch-d{margin-left:0}.hero-band{padding:18px;border-radius:18px}.ap-head{gap:14px;align-items:flex-start}}
@media (max-width:420px){.wh-row{grid-template-columns:40px minmax(0,1fr) auto minmax(0,1fr);gap:6px}}
.ap-contact .m-lbl{display:none}
@media (max-width:860px){
  .a-side .card.stack > .btn.ap-main{flex-basis:100%}
  .ap-contact .d-lbl{display:none}.ap-contact .m-lbl{display:inline}
  .ap-contact .btn.block{gap:6px}
}
@media (max-width:520px){.wh-row .input{padding:0 6px;font-size:15px!important}.wh-row input[type=time]::-webkit-calendar-picker-indicator{margin-left:0;width:14px}}
/* Artisans directory: extra filters fold away on phones (moved from artisans.js) */
@media (max-width:860px){#af .a-more{display:none}#af.open .a-more{display:grid}}

/* ---------------------------------------------------------------- Phase 3a: restaurant dashboard and admin review */
.cz-chip{display:inline-flex;cursor:pointer}
.cz-chip input{position:absolute;opacity:0;pointer-events:none}
.cz-chip span{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:13px;font-weight:600;color:var(--ink)}
.cz-chip input:checked + span{border-color:var(--green);background:var(--green-soft);color:var(--green-2)}
.cz-chip input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px}
.zone-row{display:grid;grid-template-columns:1.1fr 1fr 1fr .8fr .8fr 1.3fr auto;gap:8px;align-items:end;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
.zone-row .field{min-width:0}
.zone-row [data-delzone]{margin-bottom:4px}
@media (max-width:1100px){.zone-row{grid-template-columns:1fr 1fr 1fr}.zone-row [data-delzone]{justify-self:start}}
@media (max-width:560px){.zone-row{grid-template-columns:1fr 1fr}}
.dish-list{display:flex;flex-direction:column}
.dish{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line-2)}
.dish:first-child{border-top:0;padding-top:0}
.dish.off b,.dish.off .dish-price{opacity:.6}
.dish .grow{min-width:0}
.dish .grow b{display:block}
.dish-ph{width:60px;height:60px;border-radius:12px;flex:none;overflow:hidden;background:var(--line-2);color:var(--faint);display:flex;align-items:center;justify-content:center;cursor:pointer}
.dish-ph img{width:100%;height:100%;object-fit:cover}
.dish-ph:hover{outline:2px solid var(--green)}
.dish-price{font-weight:700;margin-top:2px}
.dish-avail{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;cursor:pointer;min-width:64px}
.dish-acts{display:flex;gap:6px;align-items:center;flex:none}
@media (max-width:560px){.dish{flex-wrap:wrap}.dish .grow{flex:1 1 calc(100% - 72px)}.dish-avail{flex-direction:row;margin-left:72px}.dish-acts{margin-left:auto}}
.menu-preview .dish-ph{cursor:default}

/* ---------------------------------------------------------------- Phase 3b: food ordering (restaurants, menu, basket, checkout, tracking, inboxes) */
.fd-hero{margin-bottom:16px}
.fd-search{margin-bottom:12px}
.fd-cuisines{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.fd-cuisines::-webkit-scrollbar{display:none}
.fd-cz{flex:none;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.fd-cz.on{background:var(--ink);border-color:var(--ink);color:#fff}
.fd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.fd-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .15s}
.fd-card:hover{box-shadow:var(--shadow);transform:translateY(-1px);color:var(--ink)}
.fd-card.closed .fd-cover img{filter:grayscale(.6);opacity:.8}
.fd-cover{position:relative;aspect-ratio:16/8;background:var(--tint-red);color:#B4361F;display:flex;align-items:center;justify-content:center}
.fd-cover img{width:100%;height:100%;object-fit:cover}
.fd-closed{position:absolute;left:10px;bottom:10px;background:rgba(15,30,61,.82);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.fd-body{position:relative;padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px}
.fd-body b{font-size:16px}
.fd-logo{position:absolute;right:12px;top:-24px;width:48px;height:48px;border-radius:12px;object-fit:cover;border:3px solid #fff;background:#fff;box-shadow:var(--shadow-sm)}
.fd-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:13px;color:var(--muted);margin-top:4px}
.fd-meta span{display:inline-flex;align-items:center;gap:4px}
.fd-meta .ok{color:var(--green);font-weight:600}.fd-meta .off{color:var(--red);font-weight:600}
.fd-head{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-top:10px}
.fd-head-cover{height:150px;background:linear-gradient(115deg,var(--green-2),var(--green))}
.fd-head-cover img{width:100%;height:100%;object-fit:cover}
.fd-head-in{display:flex;gap:16px;align-items:flex-start;padding:0 20px 18px}
.fd-head-logo{width:84px;height:84px;border-radius:18px;object-fit:cover;border:4px solid #fff;background:#fff;margin-top:-36px;box-shadow:var(--shadow-sm);flex:none}
.fd-head-logo.ph{display:flex;align-items:center;justify-content:center;color:#B4361F;background:var(--tint-red)}
.fd-head h1{font-size:26px;margin-top:12px}
.fd-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;margin-top:16px}
.fd-side{position:sticky;top:84px}
.fd-sections{display:flex;gap:6px;overflow-x:auto;position:sticky;top:64px;z-index:5;background:var(--bg);padding:8px 0;scrollbar-width:none}
.fd-sections::-webkit-scrollbar{display:none}
.fd-sections a{flex:none;padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:600;text-decoration:none;color:var(--ink)}
.fd-sec{margin-top:14px;scroll-margin-top:120px}
.fd-sec h2{font-size:19px;margin:0 0 10px}
.fd-sec .card.flush{padding:0 16px}
.fd-dish{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line-2)}
.fd-dish:first-child{border-top:0}
.fd-dish b{display:block;font-size:15px}
.fd-dish small{display:block;font-size:13px;line-height:1.4;margin-top:2px}
.fd-dish.off{opacity:.6}
.fd-price{font-weight:700;margin-top:4px}
.fd-dish-ph{width:76px;height:76px;border-radius:12px;object-fit:cover;flex:none}
.fd-add{width:40px;height:40px;border-radius:12px;border:1.5px solid var(--green);background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.fd-add:hover{background:var(--green);color:#fff}
.fd-qty{display:flex;align-items:center;gap:4px;background:var(--green);color:#fff;border-radius:12px;padding:3px;flex:none}
.fd-qty button{width:32px;height:32px;border:0;border-radius:9px;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.fd-qty b{min-width:22px;text-align:center}
.fd-basket h3{font-size:17px}
.fd-blines{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-bottom:10px;border-bottom:1px solid var(--line-2)}
.fd-hours{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px}
.fd-mbar{display:none}
.fd-fs{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.fd-fs legend{font-weight:600;font-size:15px;margin-bottom:8px;padding:0}
.fd-pay{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer}
.fd-pay:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.fd-pay input{margin-top:3px;accent-color:var(--green)}
.fd-pay b{display:block;font-size:14.5px}.fd-pay small{display:block;color:var(--muted);font-size:12.5px}
.fd-quote{background:var(--bg);border-radius:12px;padding:12px 14px}
.fd-sum{display:flex;flex-direction:column;gap:6px}
.fd-total{border-top:1px solid var(--line);padding-top:8px;margin-top:2px;font-size:16px}
.fd-tabs{margin-bottom:12px}

.fd-olist{display:flex;flex-direction:column;gap:10px}
.fd-orow{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.fd-orow:hover{color:var(--ink);box-shadow:var(--shadow)}
.fd-orow img,.fd-orow .ph{width:48px;height:48px;border-radius:12px;object-fit:cover;flex:none}
.fd-orow .ph{display:flex;align-items:center;justify-content:center;background:var(--tint-red);color:#B4361F}
.fd-orow small{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-orow small.faint{color:var(--faint);font-size:12px}
.fd-oright{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.fd-pill{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--blue-bg);color:var(--blue);white-space:nowrap}
.fd-pill.ok{background:var(--green-soft);color:var(--green)}.fd-pill.bad{background:var(--red-bg);color:var(--red-2)}.fd-pill.warn{background:var(--amber-bg);color:var(--amber)}
.fd-track{max-width:880px}
.fd-status h1{font-size:24px;margin-top:2px}
.fd-steps{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:0;margin:16px 0 0;counter-reset:s}
.fd-steps li{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--faint);text-align:center;position:relative}
.fd-steps li::before{content:"";position:absolute;top:11px;right:50%;width:100%;height:3px;background:var(--line);z-index:0}
.fd-steps li:first-child::before{display:none}
.fd-steps li span{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:var(--line);color:#fff;display:flex;align-items:center;justify-content:center}
.fd-steps li.done,.fd-steps li.now{color:var(--ink)}
.fd-steps li.done span,.fd-steps li.now span{background:var(--green)}
.fd-steps li.done::before,.fd-steps li.now::before{background:var(--green)}
.fd-steps li.now span{box-shadow:0 0 0 5px var(--green-soft)}
.fd-track-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.fd-track-grid > .card:first-child{grid-row:span 2}
.fd-hist{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:10px}
.fd-hist li{border-left:3px solid var(--green-soft);padding-left:10px;font-size:14px}
.fd-hist small{display:block;color:var(--muted);font-size:12.5px}
.fd-cd{font-variant-numeric:tabular-nums}
.fd-cd.late{background:var(--red-bg);color:var(--red-2)}
.jrow.fd-hot{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-bg)}
.fd-acts .btn.lg{min-width:170px}
@media (max-width:900px){
  .fd-layout{grid-template-columns:minmax(0,1fr)}
  .fd-side{display:none}
  .fd-mbar{display:block;position:fixed;left:0;right:0;bottom:calc(68px + env(safe-area-inset-bottom));z-index:29;padding:8px 16px;background:linear-gradient(to top,var(--bg) 70%,transparent)}
  .fd-page{padding-bottom:90px}
  .fd-track-grid{grid-template-columns:1fr}
  .fd-track-grid > .card:first-child{grid-row:auto}
}
@media (min-width:761px) and (max-width:900px){.fd-mbar{bottom:0}}
@media (max-width:560px){
  .fd-head-in{flex-direction:column;gap:6px;padding:0 16px 16px}
  .fd-head h1{font-size:22px;margin-top:4px}
  .fd-head-cover{height:110px}
  .fd-dish-ph{width:64px;height:64px}
  .fd-steps li{font-size:10.5px}
  .fd-co .form-grid{grid-template-columns:1fr}
  .fd-orow .fd-oright b{font-size:14px}
}
.fd-sum .row-between,.fd-blines .row-between{flex-wrap:nowrap;align-items:flex-start}
.fd-sum .row-between > span:first-child,.fd-blines .row-between > span:first-child{flex:1 1 auto;min-width:0}
.fd-sum .row-between > :last-child,.fd-blines .row-between > :last-child{flex:none;white-space:nowrap}
.fd-orow .grow b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.fd-orow{align-items:flex-start}.fd-oright .fd-pill{font-size:10.5px;padding:2px 7px;max-width:120px;white-space:normal;text-align:right}}

/* ---------------------------------------------------------------- Phase 4a: grocery stores (slots, products) */
.slot-row{max-width:420px}
.slot-row .input{flex:1 1 0;min-width:0}
.dish .grow b .muted{font-size:13px}
.dish-price .tiny{font-weight:600;margin-left:4px}
@media (max-width:560px){.slot-row{gap:6px!important}.slot-row .input{padding:0 6px;font-size:14px!important}.slot-row input[type=time]::-webkit-calendar-picker-indicator{margin-left:0;width:14px}}

/* ---- Groceries (Phase 4b) ---- */
.fd-size{font-weight:600;font-size:12.5px;color:var(--muted);background:var(--tint-grey);border-radius:6px;padding:1px 6px;margin-left:4px;white-space:nowrap}
.fd-psearch{margin:0 0 12px}
.fd-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.fd-slot{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer}
.fd-slot:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.fd-slot input{margin-top:3px;accent-color:var(--green)}
.fd-slot b{display:block;font-size:14px}.fd-slot small{display:block;color:var(--muted);font-size:12px}
.fd-slot.full{opacity:.5;cursor:not-allowed}
.fd-line{padding:2px 0}
.fd-line.gone>.row-between:first-child span{text-decoration:line-through;color:var(--muted)}
.fd-lstat{display:inline-block;margin-top:2px;color:var(--muted)}
.fd-lstat.unavailable{color:var(--red)}.fd-lstat.swap_offered{color:var(--amber);font-weight:600}.fd-lstat.swapped{color:var(--green)}
.fd-swap{border:1.5px solid var(--amber-bg);background:var(--tint-amber);margin-bottom:14px}
.fd-card.is-store .fd-cover{background:var(--tint-green);color:var(--green)}
.fd-head-logo.ph.store,.fd-orow .ph.store{color:var(--green);background:var(--tint-green)}
.fd-line .row-between{align-items:flex-start}
.fd-line .fd-lstat{flex:1;min-width:0;overflow-wrap:anywhere}

/* ---- Pharmacy ---- */
.fd-card.is-pharmacy .fd-cover,.fd-head-logo.ph.pharmacy,.fd-orow .ph.pharmacy{background:var(--tint-pink);color:#B0306A}
.fd-rx{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:3px 0 1px}
.badge.rx{background:var(--tint-pink);color:#9D2B5E;display:inline-flex;align-items:center;gap:4px}
.rx-box{border:1.5px solid var(--tint-pink);background:#FFF7FA;border-radius:14px;padding:12px 14px}

/* ---- Laundry ---- */
.fd-card.is-laundry .fd-cover,.fd-head-logo.ph.laundry,.fd-orow .ph.laundry{background:var(--tint-teal);color:#0F766E}

/* ===== Header: location pill and bell at the end; no account buttons on phones (Oct 2026) ===== */
.site-head nav{margin-left:28px}
.site-head .hd-end{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
.loc-chip{margin:0;background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.loc-chip svg:first-child{color:var(--green);flex:none}
.loc-chip svg:last-child{flex:none;opacity:.8}
.hd-bell{position:relative;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none;flex:none}
.hd-bell:hover{background:var(--line-2,#f1f4f9);color:var(--ink)}
.hd-dot{position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:#E5484D;border:2px solid #fff}
.hd-dot.hidden{display:none}
.m-only{display:none!important}
.hd-back{width:36px;height:36px;margin-left:-8px;align-items:center;justify-content:center;color:var(--ink);flex:none}
.hd-title{font-size:18px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;letter-spacing:-.01em}
@media (max-width:1100px){.hide-md{display:none!important}}
@media (max-width:760px){
  .hide-m{display:none!important}
  .m-only{display:flex!important}
  .hd-title.m-only{display:block!important}
  .site-head .in{gap:8px;padding:0 14px;height:60px}
  .site-head .hd-end{gap:4px}
  .loc-chip{max-width:120px;height:36px;padding:0 10px;font-size:13px}
}

/* ===== Category lists: search, round category icons or chips, banner, cards with the photo on the left ===== */
.fd-search{background:#fff;box-shadow:var(--shadow-sm)}
.fd-rcats{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;margin-bottom:4px}
.fd-rcats::-webkit-scrollbar{display:none}
.fd-rcat{flex:none;width:76px;display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:none;font:inherit;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;text-align:center;line-height:1.2;padding:0}
.fd-rcat span{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--tb,var(--tint-blue,#E4EEFC));color:var(--tc,var(--green));border:2px solid transparent;transition:border-color .15s}
.fd-rcat.on span{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 14%,transparent)}
.fd-rcat.on{color:var(--green)}
.fd-rcat span.t-green{--tb:#E3F3EA;--tc:#1E7A46}.fd-rcat span.t-red{--tb:#FCE8E6;--tc:#C0392B}.fd-rcat span.t-amber{--tb:#FDF0DC;--tc:#B9650A}
.fd-rcat span.t-blue{--tb:#E4EEFC;--tc:#1D4E89}.fd-rcat span.t-violet{--tb:#EFE9FB;--tc:#6B3FCF}.fd-rcat span.t-pink{--tb:#FCE7F1;--tc:#B0306A}.fd-rcat span.t-teal{--tb:#E0F4F3;--tc:#0F7F75}
.fd-pills .fd-cz{border-radius:12px;background:var(--line-2,#EEF2F8);border-color:transparent;height:38px}
.fd-pills .fd-cz.on{background:var(--green);border-color:var(--green);color:#fff}
.fd-promo{display:flex;align-items:stretch;min-height:clamp(150px,17vw,230px);border-radius:18px;overflow:hidden;margin:2px 0 16px;color:#fff;background:linear-gradient(115deg,var(--green-2,#183A7A),var(--green))}
/* "Good food delivered": large and bold, sized to the banner on phones and desktops */
.fd-promo .tx{flex:1 1 54%;padding:clamp(18px,3vw,40px) 0 clamp(18px,3vw,40px) clamp(20px,3.4vw,48px);display:flex;flex-direction:column;justify-content:center;gap:clamp(6px,1vw,12px);min-width:0}
.fd-promo b{font-size:clamp(26px,3.6vw,46px);line-height:1.05;font-weight:600;letter-spacing:-.02em;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.fd-promo span{font-size:clamp(15px,1.7vw,21px);line-height:1.35;font-weight:600;opacity:.95;max-width:34ch}
.fd-promo{position:relative}
.fd-promo .tx{position:relative;z-index:1;max-width:58%}
.fd-promo img{position:absolute;right:0;top:0;height:100%;width:46%;max-width:560px;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
.fd-lhead{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin:6px 0 10px}
.fd-lhead h2{margin:0;font-size:18px;font-weight:600}
.fd-lhead small{color:var(--muted);font-size:12.5px}
.fd-opentg{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;white-space:nowrap}
.fd-opentg input{accent-color:var(--green);margin:0}
.fd-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px}
.fd-hcard{display:flex;gap:12px;padding:10px;background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .15s;min-width:0}
.fd-hcard:hover{box-shadow:var(--shadow);transform:translateY(-1px);color:var(--ink)}
.fd-hph{width:100px;height:96px;border-radius:12px;overflow:hidden;flex:none;background:var(--tint-red,#FCE8E6);color:#B4361F;display:flex;align-items:center;justify-content:center}
.fd-hph img{width:100%;height:100%;object-fit:cover}
.fd-hcard.is-store .fd-hph{background:var(--tint-green,#E3F3EA);color:var(--green)}
.fd-hcard.is-pharmacy .fd-hph{background:var(--tint-pink,#FCE7F1);color:#B0306A}
.fd-hcard.is-laundry .fd-hph{background:#E0F4F3;color:#0F7F75}
.fd-hcard.closed .fd-hph img{filter:grayscale(.6);opacity:.8}
.fd-hbody{min-width:0;display:flex;flex-direction:column;gap:3px;padding-top:2px}
.fd-hbody b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-hline{font-size:12.5px;color:var(--muted)}
.fd-hline .ok{color:#1E7A46;font-weight:600}.fd-hline .off{color:var(--red-2,#B42318);font-weight:600}
.fd-hbody small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-htags{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.fd-fee,.fd-tag{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;border-radius:8px;padding:3px 8px;background:var(--line-2,#F1F4F9);color:var(--ink)}
.fd-tag{color:var(--muted);font-weight:600}
@media (max-width:760px){
  .fd-page{padding-top:12px}
  .fd-list{grid-template-columns:1fr;gap:10px}
  .fd-hph{width:92px;height:88px}
}
@media (max-width:420px){.fd-lhead{flex-wrap:wrap;align-items:center}}

/* ===== Orders: kind tabs, Active/Past, cards with the photo ===== */
.fd-ktabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 10px}
.fd-ktabs::-webkit-scrollbar{display:none}
.fd-ktabs button{flex:none;height:40px;padding:0 18px;border-radius:14px;border:0;background:var(--line-2,#EEF2F8);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.fd-ktabs button.on{background:var(--green);color:#fff}
.fd-ftabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 0 14px;align-items:center}
.fd-ftabs::-webkit-scrollbar{display:none}
.fd-ftabs button,.fd-ftabs a{flex:none;height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.fd-ftabs button.on{border-color:var(--ink);background:var(--ink);color:#fff}
.fd-ftabs button i{font-style:normal;font-size:11px;background:#E5484D;color:#fff;border-radius:999px;padding:0 6px;line-height:16px}
.fd-ftabs a{margin-left:auto;color:var(--green)}
.fd-ocard{display:flex;gap:12px;padding:10px;background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm)}
.fd-ocard:hover{color:var(--ink);box-shadow:var(--shadow)}
.fd-ocard > img,.fd-ocard > .ph{width:84px;height:84px;border-radius:12px;object-fit:cover;flex:none}
.fd-ocard > .ph{display:flex;align-items:center;justify-content:center;background:var(--tint-red,#FCE8E6);color:#B4361F}
.fd-ocard > .ph.store{background:var(--tint-green,#E3F3EA);color:var(--green)}
.fd-ocard > .ph.pharmacy{background:var(--tint-pink,#FCE7F1);color:#B0306A}
.fd-ocard > .ph.laundry{background:#E0F4F3;color:#0F7F75}
.fd-ocard .grow{min-width:0;display:flex;flex-direction:column;gap:2px}
.fd-otop{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.fd-otop b{font-size:14.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fd-otop .fd-pill{flex:none;display:inline-flex;align-items:center;gap:3px}
.fd-ocard small{display:block;font-size:12.5px;color:var(--muted)}
.fd-ocard small.faint{color:var(--faint);font-size:12px}
.fd-oitems{color:var(--ink-2,#3b4660)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-obot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:2px}
.fd-obot b{font-size:13.5px}

/* ===== Notifications ===== */
.nt-head{margin-bottom:12px;align-items:flex-end}
.nt-head h1{margin:0 0 2px;font-size:28px}
.nt-list{display:flex;flex-direction:column;background:var(--card,#fff);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.nt-item{display:flex;gap:12px;align-items:flex-start;padding:14px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.nt-item:last-child{border-bottom:0}
.nt-item:hover{background:var(--line-2,#F7F9FC);color:var(--ink)}
.nt-item.unread{background:color-mix(in srgb,var(--green) 5%,#fff)}
.nt-item .svc-ic{width:42px;height:42px;border-radius:12px;flex:none}
.nt-item .grow{min-width:0}
.nt-item b{display:block;font-size:14.5px}
.nt-item small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.nt-item small.faint{color:var(--faint);font-size:12px}
.nt-dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex:none;margin-top:6px}
@media (max-width:760px){.fd-page > .back-link{display:none}}
.fd-otop b{flex:1 1 auto}
.fd-otop .fd-pill{max-width:48%;white-space:normal;text-align:center;line-height:1.25}
/* Category pictures (Admin → Services → Shop categories) */
.fd-rcat span img{width:38px;height:38px;display:block}
.fd-rcat.none{opacity:.55}
.fd-rcat.none.on{opacity:1}
.cat-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.cat-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border:1.5px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;text-align:center}
.cat-opt input{position:absolute;opacity:0;pointer-events:none}
.cat-opt .cat-ic{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--line-2,#EEF2F8)}
.cat-opt b{font-size:12.5px;line-height:1.2;color:var(--ink)}
.cat-opt.on{border-color:var(--green);background:color-mix(in srgb,var(--green) 6%,#fff)}
.cat-opt.on::after{content:"✓";position:absolute;top:6px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--green);color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.cat-opt:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.cat-edit{display:flex;flex-direction:column;gap:8px}
.cat-erow{display:flex;align-items:center;gap:8px}
.cat-erow .input{flex:1 1 auto;min-width:0}
.cat-erow .cat-ic,.cat-iopt span{width:46px;height:46px;border-radius:50%;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.cat-erow .btn.sm{padding:0 10px}
.cat-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;max-height:60vh;overflow:auto;margin:8px 0}
.cat-iopt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:11.5px;font-weight:600;color:var(--ink);cursor:pointer;text-align:center}
.cat-iopt.on{border-color:var(--green);background:color-mix(in srgb,var(--green) 6%,#fff)}
@media (max-width:560px){.cat-erow{flex-wrap:wrap}.cat-erow .input{flex:1 1 calc(100% - 60px)}}
/* Artisans: round trade pictures like the shop categories */
.a-cats{gap:10px;scrollbar-width:none;padding:4px 2px 12px}
.a-cats::-webkit-scrollbar{display:none}
.a-cats a{width:76px;padding:0;gap:7px;font-size:12px}
.a-cats a .a-ci{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--line-2,#EEF2F8);border:2px solid transparent;overflow:hidden;transition:transform .15s,border-color .15s}
.a-cats a .a-ci img{width:38px;height:38px;border:0;border-radius:0;object-fit:contain}
.a-cats a .a-ci.photo img{width:100%;height:100%;object-fit:cover}
.a-cats a:hover .a-ci{transform:translateY(-2px)}
.a-cats a.on .a-ci{border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 14%,transparent)}
.a-av.pic.tint{border-radius:16px}
.a-av.pic.tint img{width:62%;height:62%;object-fit:contain}
@media (max-width:760px){.a-page{padding-top:12px!important}.a-page .page-head .sub{font-size:13px}}
img.j-av:not(.round){object-fit:contain;padding:7px;box-sizing:border-box}
/* Artisans on phones: a short search (more filters on tap) and cards like the shop lists */
@media (max-width:760px){
  #af:not(.open) .a-row2{display:none}
  .a-card{position:relative;flex-wrap:nowrap!important;align-items:flex-start;padding:12px;gap:12px}
  .a-card .a-body{flex:1 1 auto;min-width:0}
  .a-card .a-book{display:none}
  .a-card .a-av{width:72px;height:72px}
}

.a-cats a .a-ci img,.a-cats a.on .a-ci img{box-shadow:none;border:0;background:none;transform:none}
.a-cats a .a-ci.a-all{background:var(--green-soft)}
/* Sample data (php artisan samples:all) */
.fd-sample{display:inline-block;vertical-align:middle;font-size:10.5px;font-weight:600;color:#4B2F9E;background:#EEE8FC;border-radius:999px;padding:1px 7px;margin-left:4px}
.lcard .ph .tag.sample{left:auto;right:10px;top:auto;bottom:10px;background:#4B2F9E;color:#fff}
/* Phones: 16px text in every box, so iPhones don't zoom in and slide the page sideways when you type; and no sideways scrolling */
html,body{overflow-x:clip;max-width:100%}
@media (max-width:760px){input,select,textarea{font-size:16px!important}}
/* SEO text under city, shop and artisan pages */
.seo-block{padding:28px 0 24px;margin-top:20px;border-top:1px solid var(--line);color:var(--ink-2,#3b4660);font-size:14.5px;line-height:1.65}
.seo-block .wrap{max-width:1000px}
.seo-block h2{font-size:20px;margin:0 0 10px;color:var(--ink)}
.seo-block h3{font-size:16px;margin:20px 0 8px;color:var(--ink)}
.seo-block p{margin:0 0 10px}
.seo-crumbs{font-size:13px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:6px;color:var(--muted)}
.seo-crumbs a{color:var(--muted);text-decoration:none}.seo-crumbs a:hover{color:var(--green)}
.seo-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px 18px}
.seo-items li{padding:4px 0}.seo-items a{font-weight:600}.seo-items span{display:block;font-size:12.5px;color:var(--muted)}
.seo-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.seo-links a{display:inline-block;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;text-decoration:none;color:var(--ink)}
.seo-faq details{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 14px;margin-bottom:8px}
.seo-faq summary{font-weight:700;cursor:pointer;color:var(--ink)}
.seo-faq details p{margin:8px 0 2px}
@media (max-width:760px){.seo-block{padding-bottom:12px}}
/* Admin → SEO: Google-style preview */
.seo-snip{margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-family:Arial,sans-serif;max-width:640px}
.seo-snip-url{font-size:12.5px;color:#202124;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seo-snip-title{font-size:18px;color:#1a0dab;line-height:1.3;margin:2px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.seo-snip-desc{font-size:13.5px;color:#4d5156;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seo-over{color:var(--red-2,#B42318);font-weight:600}
/* Admin → Locations */
.loc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.loc-town.is-off{opacity:.78;background:var(--bg)}
.loc-town .switch-row{padding:6px 10px}
.loc-pick-list{display:flex;flex-wrap:wrap;gap:6px}
.loc-miss{margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--amber-bg,#FEF6E7);font-size:14px}
/* Location picker: tap a state, then a town */
.loc-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;max-height:46vh;overflow:auto}
.loc-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;font:inherit;color:inherit}
.loc-row:hover{background:var(--bg)}
.loc-row.on{border-color:var(--green,#1E7A4C);background:var(--bg)}
.loc-row b{display:block;font-size:15px}
.loc-row small{display:block;color:var(--muted);font-size:12.5px}
.loc-row .grow{flex:1;min-width:0}
/* Artisans: one search box like the other services; filters open under it */
.a-search1 .a-filt-btn{display:inline-flex;align-items:center;gap:4px;border:0;background:none;color:var(--green);font:inherit;font-weight:600;cursor:pointer;padding:8px 4px;flex:none}
.a-more[hidden]{display:none!important}
.card.a-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:-6px 0 18px}

/* Location sheet (the pill): search, current location, state → towns. Bottom sheet on phones, panel on desktop. */
.lsheet{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center}
.lsheet-box{background:#fff;width:100%;max-width:560px;height:min(88vh,760px);border-radius:22px 22px 0 0;display:flex;flex-direction:column;box-shadow:0 -10px 40px rgba(15,23,42,.18);animation:lsheetUp .18s ease-out}
@keyframes lsheetUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (min-width:700px){.lsheet{align-items:center}.lsheet-box{height:min(80vh,680px);border-radius:18px}}
.lsheet-head{display:flex;align-items:center;gap:12px;padding:18px 20px 16px;border-bottom:1px solid var(--line)}
.lsheet-head h2{flex:1;margin:0;font-family:var(--sans);font-size:21px;font-weight:600;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsheet-back,.lsheet-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:0;border-radius:10px;cursor:pointer;color:var(--ink)}
.lsheet-back{background:var(--bg)}
.lsheet-back[hidden]{display:none}
.lsheet-x{background:none;color:var(--muted)}
.lsheet-search{padding:16px 20px 4px}
.lsheet-search input{width:100%;height:50px;padding:0 16px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.lsheet-search input:focus{outline:none;border-color:var(--green)}
.lsheet-list{flex:1;overflow:auto;padding:4px 20px 24px;-webkit-overflow-scrolling:touch}
.lsheet-row{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:17px 14px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-size:16.5px;color:var(--ink);cursor:pointer}
.lsheet-row:hover{background:var(--bg)}
.lsheet-row .grow{flex:1;min-width:0}
.lsheet-row small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.lsheet-row.on{background:#EAF0FB;color:var(--green)}
.lsheet-row.cur{font-weight:600}
.lsheet-row.blue{color:var(--green);font-weight:600}
.lsheet-row:disabled{opacity:.6}
.lsheet-chev{color:var(--muted);flex:none}
.lsheet-gps{display:flex;flex-direction:column;gap:6px;margin:10px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px}
.lsheet-gps small{color:var(--muted)}
.lsheet-gps .btn{align-self:flex-start}
.lsheet-miss{margin:12px 0;padding:14px;border-radius:12px;background:var(--bg)}
.lsheet-miss p{margin:4px 0 10px;font-size:14px}
body.lsheet-open{overflow:hidden}

/* =====================================================================================================================
   DESIGN SYSTEM 2026 (premium redesign). One layer over everything above: tokens, type, controls, cards, header,
   service row, account shell and tab bars. Brand colours still come from Admin → Branding (--green* = primary).
   ===================================================================================================================== */
:root{
  --accent:#FBBF24;--accent-2:#F59E0B;--accent-ink:#3A2600;--accent-soft:#FEF3C7;
  --success:#10B981;--success-ink:#047857;--success-soft:#E7F8F1;
  --warning:#F59E0B;--warning-ink:#92400E;--warning-soft:#FEF3C7;
  --error:#EF4444;--error-ink:#B91C1C;--error-soft:#FDECEC;
  --info:#3B82F6;--info-ink:#1D4ED8;--info-soft:#E8F0FE;
  --radius:18px;--radius-sm:12px;--radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(15,30,61,.05),0 2px 8px rgba(15,30,61,.04);
  --shadow:0 2px 6px rgba(15,30,61,.05),0 12px 28px rgba(15,30,61,.07);
  --shadow-lg:0 20px 50px rgba(15,30,61,.14);
  --line:#E6EAF1;--line-2:#F0F3F8;
}
body{font-size:15px;letter-spacing:-.003em}
/* One type family everywhere: bold sans headings (the serif display face is retired). */
.page-head h1,.auth h1,.auth .art h2,.serif{font-family:var(--sans);font-weight:600;letter-spacing:-.02em}
.page-head h1{font-size:30px}
.page-head .sub{font-size:14.5px}
h2{letter-spacing:-.015em}
:focus-visible{outline:3px solid color-mix(in srgb,var(--green) 45%,transparent);outline-offset:2px;border-radius:8px}

/* Buttons */
.btn{height:46px;padding:0 20px;border-radius:12px;font-weight:500;letter-spacing:-.005em;box-shadow:0 1px 2px rgba(15,30,61,.08)}
.btn.sm{height:38px;padding:0 14px;border-radius:10px}
.btn.lg{height:54px;padding:0 26px;border-radius:14px;font-size:16px}
.btn.ghost{border-color:var(--line);box-shadow:none}
.btn.ghost:hover{border-color:#C7D0DD;background:var(--bg)}
.btn.link{box-shadow:none}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.accent:hover{background:var(--accent-2);color:var(--accent-ink)}
.btn.light{background:#fff;color:var(--ink)}
.icon-btn{width:42px;height:42px;border-radius:12px;border-color:var(--line)}

/* Fields */
.input,input.input,select.input,textarea.input{height:48px;border-radius:12px;border:1.5px solid #DCE2EB;padding:0 14px;transition:border-color .15s,box-shadow .15s}
textarea.input{padding:12px 14px}
.input:hover{border-color:#C7D0DD}
.input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 14%,transparent)}
label.field{font-size:13.5px;gap:7px}

/* Cards, stats, badges */
.card{border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px}
.card h3{font-size:17px}
.stat{border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px 20px}
.stat .k{text-transform:none;letter-spacing:0;font-size:13px;font-weight:700}
.stat .v{font-size:30px;letter-spacing:-.02em}
.badge{padding:4px 10px;font-size:12px;font-weight:600;letter-spacing:0}
.badge.green{background:var(--success-soft);color:var(--success-ink)}
.badge.amber{background:var(--warning-soft);color:var(--warning-ink)}
.badge.red{background:var(--error-soft);color:var(--error-ink)}
.badge.blue{background:var(--info-soft);color:var(--info-ink)}
.badge.brand{background:var(--green-soft);color:var(--green)}
.ok-box{background:var(--success-soft);color:var(--success-ink)}
.warn-box{background:var(--warning-soft);color:var(--warning-ink)}
.err{background:var(--error-soft);color:var(--error-ink)}
.tabs{gap:6px}
.tabs a,.tabs button{padding:11px 14px;font-size:14.5px}
.tabs a.on,.tabs button.on{border-bottom-width:3px}
table.t th{text-transform:none;letter-spacing:0;font-size:13px;background:#F7F9FC}
table.t td{padding:14px 16px}
.modal{border-radius:22px;padding:26px;box-shadow:var(--shadow-lg)}
.modal-bg{background:rgba(10,22,44,.5);backdrop-filter:blur(2px)}
.toast{border-radius:14px;padding:13px 18px}
.empty{padding:44px 20px}
.empty .big{font-size:17px}
/* Loading placeholders */
.skel{position:relative;overflow:hidden;background:var(--line-2);border-radius:12px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation:skel 1.3s infinite}
@keyframes skel{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skel::after{animation:none}}

/* ---- Public header: logo · location · search · bell · Orders · Account, then the service row (desktop) ---- */
.site-head{background:rgba(255,255,255,.97)}
.site-head .in{max-width:1240px;height:72px;gap:14px;justify-content:flex-start}
.site-head .brand{font-size:21px;letter-spacing:-.02em}
.site-head .brand .logo{width:36px;height:36px;border-radius:10px}
.site-head nav:not(.svc-strip){display:none}
.hd-search{position:relative;flex:1 1 auto;max-width:560px;display:flex;align-items:center;gap:10px;height:46px;padding:0 16px;border:1.5px solid var(--line);border-radius:14px;background:var(--bg);color:var(--muted);transition:border-color .15s,background .15s,box-shadow .15s}
.hd-search:focus-within{background:#fff;border-color:var(--green);box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 12%,transparent)}
.hd-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:14.5px;color:var(--ink);height:100%;outline:none}
.hd-sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:6px;z-index:40}
.hd-sugg a{display:block;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14px}
.hd-sugg a:hover,.hd-sugg a:focus{background:var(--bg)}
.hd-sugg small{display:block;color:var(--muted);font-size:12.5px}
.hd-link{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 12px;border-radius:12px;color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.hd-link:hover{background:var(--bg);color:var(--ink)}
.site-head .hd-end{gap:6px}
.loc-chip{height:40px;padding:0 14px;border:1.5px solid var(--line);box-shadow:none;max-width:210px}
.loc-chip:hover{border-color:#C7D0DD}
.svc-strip{max-width:1240px;margin:0 auto;padding:0 20px;height:50px;display:flex;align-items:center;gap:4px;border-top:1px solid var(--line-2)}
.svc-strip > a,.ss-more summary{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:12px;color:var(--ink-2);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;cursor:pointer;list-style:none}
.ss-more summary::-webkit-details-marker{display:none}
.svc-strip > a:hover,.ss-more summary:hover{background:var(--bg);color:var(--ink)}
.svc-strip > a.on{background:var(--green-soft);color:var(--green)}
.ss-ic{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.ss-ic.t-red{background:var(--tint-red);color:#C2410C}.ss-ic.t-green{background:var(--tint-green);color:#15803D}.ss-ic.t-blue{background:var(--tint-blue);color:#1D4ED8}
.ss-ic.t-amber{background:var(--tint-amber);color:#B45309}.ss-ic.t-violet{background:var(--tint-violet);color:#6D28D9}.ss-ic.t-teal{background:var(--tint-teal);color:#0F766E}
.ss-ic.t-pink{background:var(--tint-pink);color:#BE185D}.ss-ic.t-grey{background:var(--tint-grey);color:var(--muted)}
.ss-more{position:relative;margin-left:auto}
.ss-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:260px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:6px;z-index:40}
.ss-menu a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;font-size:14px}
.ss-menu a:hover{background:var(--bg)}
.ss-menu .ss-all{justify-content:center;color:var(--green);font-weight:600;border-top:1px solid var(--line-2);border-radius:0 0 10px 10px;margin-top:4px}
@media (max-width:1100px){.hd-link{padding:0 8px}.hd-search{max-width:none}}
@media (max-width:980px){.hd-link svg{display:none}.svc-strip{overflow-x:auto;scrollbar-width:none}.svc-strip::-webkit-scrollbar{display:none}.ss-more{position:static}.ss-menu{right:20px}}
@media (max-width:760px){.site-head .in{height:62px}.site-head .brand{font-size:19px}.site-head .brand .logo{width:32px;height:32px}.loc-chip{height:38px}}

/* ---- Phone tab bars (public pages and the account area share one look) ---- */
@media (max-width:860px){
  .site-tabbar,.bottom-nav{background:rgba(255,255,255,.98);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(15,30,61,.07);padding-top:7px}
  .site-tabbar a,.bottom-nav a,.bottom-nav button{font-size:11.5px;font-weight:500;gap:3px;min-height:48px;justify-content:center}
  .site-tabbar a.on,.bottom-nav a.on{color:var(--green)}
  .site-tabbar a.on svg,.bottom-nav a.on svg{stroke-width:2.5}
}

/* ---- Account shell: white phone header, refined navy sidebar, slim desktop bar ---- */
.main-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.main-top{display:flex;align-items:center;justify-content:flex-end;gap:6px;padding:14px 32px 0;max-width:1280px}
.side{padding:22px 14px;background:var(--ink)}
.side .brand{font-size:20px;letter-spacing:-.02em;padding:0 10px 6px}
.side .role{padding:2px 10px 18px}
.side a.nav{padding:11px 12px;border-radius:12px;font-size:14.5px}
.side a.nav.on{background:rgba(255,255,255,.12);box-shadow:inset 3px 0 0 var(--accent)}
.side .me{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.side .me .grow{display:flex;flex-direction:column;min-width:0;overflow:hidden;text-overflow:ellipsis}
.me-av{width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.me-links{width:100%;gap:14px!important;margin-top:2px}
.me-links a{color:var(--on-dark-2);font-size:13px}
.me-links a:hover{color:#fff}
.main{padding:22px 32px 56px}
@media (max-width:860px){
  .main-top{display:none}
  .topbar{background:rgba(255,255,255,.97);color:var(--ink);border-bottom:1px solid var(--line);padding:0 10px 0 14px;height:62px;backdrop-filter:blur(8px)}
  .topbar .brand{color:var(--ink);font-size:19px;letter-spacing:-.02em}
  .topbar .brand .logo{background:var(--green);color:#fff}
  .topbar .tb-end{display:flex;align-items:center;gap:2px;min-width:0}
  .topbar .tb-end .loc-chip{max-width:130px;margin-right:4px;flex:0 1 auto;min-width:72px;color:var(--ink);border:1.5px solid var(--line);padding:0 12px;background:#fff}
  .topbar .brand{flex:none}
  .topbar button.tb-menu{color:var(--ink);width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center}
  .main{padding:18px 16px 48px}
  .page-head h1{font-size:25px}
}
@media (max-width:420px){.topbar .brand{font-size:0!important;gap:0}}
/* Pill tabs (Rent · Buy · Shortlet · Land, and other "pick one" rows): always fully visible, scroll sideways if ever needed */
.pill-tabs{display:flex;gap:8px;margin:0 0 18px;overflow-x:auto;scrollbar-width:none;padding:2px}
.pill-tabs::-webkit-scrollbar{display:none}
.pill-tabs button{flex:none;height:42px;padding:0 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);font:inherit;font-weight:500;font-size:14.5px;cursor:pointer}
.pill-tabs button:hover{border-color:#C7D0DD}
.pill-tabs button.on{background:var(--green);border-color:var(--green);color:#fff}

/* ---- Design system 2026: Food, Groceries, Pharmacy, Laundry ---- */
/* The page title is a light header, not a second navy banner (Food keeps its photo banner below the categories). */
.fd-hero.hero-band{background:none;color:var(--ink);padding:6px 0 0;margin-bottom:18px;box-shadow:none;border-radius:0}
.fd-hero.hero-band::before,.fd-hero.hero-band::after{display:none}
.fd-hero.hero-band h1{color:var(--ink);font-size:30px;letter-spacing:-.02em}
.fd-hero.hero-band .lead{color:var(--muted);font-size:15px}
.fd-hero .chip-d{background:var(--success-soft);border-color:transparent;color:var(--success-ink);font-weight:500}
.fd-hero .chip-d svg{color:var(--success)}
.svc-search{height:54px;border:1.5px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
.svc-search input{height:100%}
.svc-search:focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--green) 12%,transparent)}
.fd-rcat span{width:66px;height:66px;box-shadow:var(--shadow-sm)}
.fd-promo{border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.fd-lhead h2{font-size:21px;letter-spacing:-.02em}
/* Shop cards: photo on top */
.fd-list{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.fd-pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-sm);transition:box-shadow .15s,transform .15s}
.fd-pcard:hover{box-shadow:var(--shadow);transform:translateY(-2px);color:var(--ink)}
.fd-pph{position:relative;aspect-ratio:16/9;background:var(--tint-red);color:#C2410C;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fd-pcard.is-store .fd-pph{background:var(--tint-green);color:#15803D}
.fd-pcard.is-pharmacy .fd-pph{background:var(--tint-pink);color:#BE185D}
.fd-pcard.is-laundry .fd-pph{background:var(--tint-teal);color:#0F766E}
.fd-pph > img:first-child{width:100%;height:100%;object-fit:cover}
.fd-pph-ic{width:76px;height:76px;border-radius:22px;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center}
.fd-pcard.closed .fd-pph > img:first-child{filter:grayscale(.55);opacity:.85}
.fd-pclosed{position:absolute;left:10px;bottom:10px;background:rgba(10,22,44,.82);color:#fff;font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.fd-plogo{position:absolute;left:12px;bottom:-1px;width:46px;height:46px;border-radius:12px;object-fit:cover;border:3px solid #fff;background:#fff;transform:translateY(40%);box-shadow:var(--shadow-sm)}
.fd-pcard:has(.fd-plogo) .fd-pbody{padding-top:24px}
.fd-sample.on-ph{position:absolute;top:10px;right:10px}
.fd-pbody{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px;min-width:0}
.fd-pbody b{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-pbody small{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-hline{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted)}
.fd-hline .ok{color:var(--success-ink);font-weight:600}.fd-hline .off{color:var(--error-ink);font-weight:600}
.fd-hline .dot{margin:0 2px}
.fd-fee.free{background:var(--success-soft);color:var(--success-ink)}
/* Shop page */
.fd-head{border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.fd-head-cover{height:200px;position:relative;background:linear-gradient(120deg,var(--ink),var(--green-2) 60%,var(--green))}
.fd-head-cover:empty::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 20%,rgba(255,255,255,.10) 0 110px,transparent 111px),radial-gradient(circle at 72% 120%,rgba(255,255,255,.07) 0 140px,transparent 141px)}
.fd-head-in{position:relative;z-index:1}
.fd-head-logo{width:92px;height:92px;border-radius:22px;margin-top:-46px}
.fd-head h1{font-size:28px;letter-spacing:-.02em}
.fd-sections{top:122px;padding:10px 0}
.fd-side{top:138px}
@media (max-width:760px){.fd-sections{top:62px}}
.fd-sections a{padding:8px 14px;font-size:13.5px}
.fd-sec h2{font-size:20px}
.fd-sec .card.flush{padding:0 18px;border-radius:var(--radius)}
.fd-dish{gap:14px;padding:16px 0}
.fd-dish-ph{width:88px;height:88px;border-radius:14px}
.fd-dish b{font-size:15.5px}
.fd-price{font-size:15.5px}
.fd-add{width:42px;height:42px;border-radius:50%;background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 6px 14px -6px var(--green)}
.fd-add:hover{background:var(--green-2)}
.fd-qty{border-radius:999px}
.fd-qty button{border-radius:50%}
.fd-qty.sm button{width:28px;height:28px}
.fd-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.fd-ptile{position:relative;display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px 10px 12px;box-shadow:var(--shadow-sm);min-width:0}
.fd-ptile.off{opacity:.65}
.fd-ptile-ph{position:relative;aspect-ratio:4/3;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--faint);overflow:hidden;margin-bottom:6px}
.fd-ptile-ph img{width:100%;height:100%;object-fit:contain;padding:6px}
.fd-ptile b{font-size:14.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fd-ptile small{font-size:12px;min-height:16px}
.fd-ptile-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:auto;padding-top:6px}
.fd-ptile .badge{align-self:flex-start;margin-top:4px}
.badge.rx.on-ph{position:absolute;left:6px;top:6px}
.fd-basket{border-radius:var(--radius);box-shadow:var(--shadow)}
.fd-mbar .btn{background:var(--ink);height:56px;border-radius:16px;justify-content:space-between;box-shadow:var(--shadow-lg)}
.fd-mbar .btn:hover{background:var(--ink-2)}
@media (max-width:760px){
  .fd-list{grid-template-columns:1fr;gap:14px}
  .fd-pph{aspect-ratio:16/8}
  .fd-head-cover{height:150px}
  .fd-head h1{font-size:23px}
  .fd-pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .fd-dish-ph{width:76px;height:76px}
}

/* ---- Design system 2026: Homes and Artisans ---- */
.lcard{border-radius:var(--radius);box-shadow:var(--shadow-sm);border-color:var(--line)}
.lcard:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.lcard .ph{aspect-ratio:16/11}
.lcard .tag{background:rgba(255,255,255,.95);box-shadow:var(--shadow-sm);text-transform:none;letter-spacing:0;font-size:12px}
.lcard .vb{background:var(--success);box-shadow:var(--shadow-sm)}
.lcard .body{padding:14px 16px 16px;gap:4px}
.lcard .price{font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.lcard .ttl{font-size:15px}
.search-layout #filters{border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.near-chip{border-radius:999px}
.a-card{border-radius:var(--radius);padding:16px;gap:16px}
.a-av{width:76px;height:76px;border-radius:20px}
.a-av.pic.tint,.a-av.pic{border-radius:20px}
.a-name{font-size:16.5px;font-weight:600}
.a-dist{background:var(--bg);color:var(--ink-2)}
.a-search1{margin-top:4px}

/* ---- Design system 2026: account pages and dashboards ---- */
.fold-chev{display:none;color:var(--muted);transition:transform .15s}
@media (max-width:760px){
  .card.fold > .sh{cursor:pointer;margin-bottom:0}
  .card.fold > .fold-body{margin-top:14px}
  .fold-chev{display:inline-flex;transform:rotate(90deg)}
  .card.fold.folded > .fold-body{display:none}
  .card.fold.folded .fold-chev{transform:none}
  .card.fold.folded{padding-top:16px;padding-bottom:16px}
}
/* Save stays in reach on long forms (above the phone tab bar, never covering it) */
.sticky-save{position:sticky;bottom:12px;z-index:6;padding:10px 0;background:linear-gradient(to top,var(--bg) 65%,transparent)}
@media (max-width:860px){.sticky-save{bottom:calc(72px + env(safe-area-inset-bottom))}.sticky-save .btn{width:100%}}
/* Wallet card buttons: no squeezing on small phones */
.wallet-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wallet-actions .btn{width:100%;padding:0 10px;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (max-width:400px){.wallet-actions .btn{flex-direction:column;height:auto;padding:10px 4px;gap:2px;font-size:12.5px;white-space:normal;line-height:1.2}}
/* Dashboard hero cards and stats */
.hero-band{border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.stat.link:hover{border-color:var(--line);box-shadow:var(--shadow);transform:translateY(-1px)}
.stat.link{transition:box-shadow .15s,transform .15s}

/* =====================================================================================================================
   SOFT PREMIUM LAYER (Oct 2026, from the approved samples): pastel pages tinted per service, white rounded cards
   without borders, dark pill buttons, pill search with a filter button, picture chips, swipeable banners and a
   floating rounded tab bar. Sits on top of everything above.
   ===================================================================================================================== */
:root{
  --cta:#111827;--cta-2:#000;
  --page-a:#F3F7FB;--page-b:#F7F8FC;
  --soft-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  --soft-shadow-lg:0 12px 36px rgba(16,24,40,.12);
  --radius:22px;--radius-sm:14px;--radius-lg:28px;
  /* service tints: page wash, banner, accent */
  --food-a:#FFF1E6;--food-b:#FFE3CF;--food-c:#E8590C;
  --groc-a:#E6F7F2;--groc-b:#CDEFE5;--groc-c:#0F9D74;
  --phar-a:#F3ECFE;--phar-b:#E4D6FC;--phar-c:#7C3AED;
  --laun-a:#E8F3FD;--laun-b:#D3E7FA;--laun-c:#1D74C9;
  --home-a:#EAF0FB;--home-b:#D9E4F7;--home-c:#1F4A9C;
  --arti-a:#FFF6E0;--arti-b:#FDE9B8;--arti-c:#C27A06;
}
body{background:linear-gradient(180deg,var(--page-a) 0,var(--page-b) 420px) fixed;background-color:var(--page-b)}
body[data-svc="food"]{--page-a:var(--food-a)}
body[data-svc="groceries"]{--page-a:var(--groc-a)}
body[data-svc="pharmacy"]{--page-a:var(--phar-a)}
body[data-svc="laundry"]{--page-a:var(--laun-a)}
body[data-svc="homes"]{--page-a:var(--home-a)}
body[data-svc="artisans"]{--page-a:var(--arti-a)}
body[data-svc="home"]{--page-a:#E3F4F1}
/* Buttons: dark pills */
.btn{border-radius:999px;background:var(--cta);box-shadow:none}
.btn:hover{background:var(--cta-2)}
.btn.sm{border-radius:999px}.btn.lg{border-radius:999px}
.btn.ghost{background:#fff;color:var(--ink);border-color:#E5E7EB}
.btn.link{background:none;color:var(--green)}
.btn.danger{background:#fff}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
/* Cards: white, rounded, no border */
.card,.stat,.fd-pcard,.lcard,.a-card,.fd-head,.fd-basket,.fd-ptile,.fd-orow{border-color:transparent;box-shadow:var(--soft-shadow)}
.card{border-radius:var(--radius)}
.input,input.input,select.input,textarea.input{border-radius:16px;border-color:#E5E7EB;background:#fff}
.badge{border-radius:999px}
/* Pill search with a round filter button */
.svc-search,.hd-search{border-radius:999px;border:1.5px solid #E5E7EB;background:#fff;box-shadow:none}
.svc-search{height:54px;padding:0 8px 0 18px}
.srch-row{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.srch-row .svc-search{flex:1;margin:0}
.circ{flex:none;width:54px;height:54px;border-radius:50%;border:1.5px solid #E5E7EB;background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;position:relative}
.circ:hover{background:#F9FAFB;color:var(--ink)}
.circ.on{background:var(--cta);border-color:var(--cta);color:#fff}
.circ.sm{width:46px;height:46px}
.circ .hd-dot{top:10px;right:11px}
/* Section heads: "Categories · View all" */
.sh2{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 12px}
.sh2 h2{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:0}
.sh2 a,.sh2 button{font-size:15px;color:var(--muted);font-weight:500;text-decoration:none;background:none;border:0;cursor:pointer;font-family:inherit}
/* Picture chips (categories) */
.chips{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin:0 -2px}
.chips::-webkit-scrollbar{display:none}
.pchip{flex:none;display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 18px 0 7px;border-radius:999px;background:#fff;border:1.5px solid transparent;box-shadow:var(--soft-shadow);color:var(--ink);font:inherit;font-weight:600;font-size:15px;cursor:pointer;text-decoration:none;white-space:nowrap}
.pchip .pic{width:44px;height:44px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--page-a);font-size:24px;line-height:1;flex:none}
.pchip .pic img{width:100%;height:100%;object-fit:cover}
.pchip .pic img.ico{width:70%;height:70%;object-fit:contain}
.pchip.on{border-color:var(--cta)}
.pchip.none{opacity:.6}
.pchip:hover{color:var(--ink)}
/* Swipeable banners with dots */
.bnr{position:relative;margin:0 0 6px}
.bnr-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius-lg)}
.bnr-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;position:relative;overflow:hidden;min-height:190px;border-radius:var(--radius-lg);padding:26px 24px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;background:linear-gradient(120deg,var(--sa,#fff),var(--sb,#eee));color:var(--ink)}
.slide h3{margin:0;font-size:clamp(22px,2.6vw,32px);line-height:1.18;font-weight:600;letter-spacing:-.02em;max-width:58%;position:relative;z-index:1}
.slide p{margin:-6px 0 0;color:var(--ink-2);opacity:.8;font-size:15px;max-width:52%;position:relative;z-index:1}
.slide .btn{position:relative;z-index:1;height:48px;padding:0 24px;font-size:15.5px}
.slide .art{position:absolute;right:4%;top:50%;transform:translateY(-50%);font-size:clamp(84px,11vw,140px);line-height:1;filter:drop-shadow(0 14px 18px rgba(0,0,0,.18))}
.slide .art.photo{right:0;top:0;bottom:0;transform:none;width:48%;background-size:cover;background-position:center;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);mask-image:linear-gradient(90deg,transparent 0,#000 34%);filter:none}
.slide .art.cut{width:42%;height:88%;background-size:contain;background-repeat:no-repeat;background-position:center;font-size:0}
.slide.t-food{--sa:#FBE3CF;--sb:#F6C9A5}.slide.t-groc{--sa:#DDF3EC;--sb:#BFE8DA}.slide.t-phar{--sa:#EADFFC;--sb:#D3BEF8}
.slide.t-laun{--sa:#DDEEFC;--sb:#BFDDF8}.slide.t-home{--sa:#DCE6F8;--sb:#BCD0F2}.slide.t-arti{--sa:#FDEFC8;--sb:#F9DD95}
.slide.t-navy{--sa:#13284A;--sb:#1F4A9C;color:#fff}.slide.t-navy p{color:#fff}.slide.t-navy .btn{background:#fff;color:var(--ink)}
.dots{display:flex;justify-content:center;gap:6px;margin:10px 0 0}
.dots i{width:7px;height:7px;border-radius:999px;background:#D1D5DB;transition:width .2s,background .2s}
.dots i.on{width:22px;background:var(--cta)}
/* Product / shop cards: photo inset in a white card, name, price, round cart button */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.pcard{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);padding:10px 10px 14px;box-shadow:var(--soft-shadow);text-decoration:none;color:var(--ink);min-width:0;transition:transform .15s,box-shadow .15s}
a.pcard:hover{transform:translateY(-2px);box-shadow:var(--soft-shadow-lg);color:var(--ink)}
.pcard .ph{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--page-a);display:flex;align-items:center;justify-content:center;font-size:56px;line-height:1}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .ph img.contain{object-fit:contain;padding:8px}
.pcard .tagl{position:absolute;left:10px;top:10px;background:rgba(17,24,39,.55);color:#fff;backdrop-filter:blur(4px);font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px}
.pcard .tagl.ok{background:rgba(4,120,87,.85)}.pcard .tagl.rx{background:rgba(185,28,28,.88)}
.pcard .logo-dot{position:absolute;right:10px;top:10px;width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff;background:#fff}
.pcard .nm{margin:12px 4px 0;font-size:16.5px;font-weight:600;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .sub{margin:2px 4px 0;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 4px 0}
.pcard .pr{font-size:17px;color:var(--ink-2);font-weight:500}
.pcard .pr b{font-weight:600;color:var(--ink)}
.pcard .meta{display:flex;flex-wrap:wrap;gap:6px 10px;margin:6px 4px 0;font-size:13px;color:var(--muted)}
.pcard .meta .ok{color:#047857;font-weight:600}.pcard .meta .off{color:#B91C1C;font-weight:600}
.cartbtn{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--cta);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.cartbtn:hover{background:#000}
.qtyp{display:inline-flex;align-items:center;gap:6px;background:var(--cta);color:#fff;border-radius:999px;padding:4px}
.qtyp button{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.qtyp b{min-width:18px;text-align:center}
.pcard.off{opacity:.6}
/* Rail = horizontal list of cards */
.rail2{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:14px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:2px 2px 10px;margin:0 -2px}
.rail2::-webkit-scrollbar{display:none}
.rail2 > *{scroll-snap-align:start}
/* Floating rounded tab bar on phones */
@media (max-width:860px){
  .site-tabbar,.bottom-nav{left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));border:1px solid rgba(17,24,39,.06);border-radius:999px;padding:7px;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);box-shadow:var(--soft-shadow-lg);display:flex;justify-content:space-between;gap:4px}
  .site-tabbar a,.bottom-nav a,.bottom-nav button{flex:1;min-height:0;height:52px;border-radius:999px;font-size:11px;font-weight:500;gap:2px;color:#4B5563}
  .site-tabbar a.on,.bottom-nav a.on{background:var(--cta);color:#fff}
  .site-tabbar a svg,.bottom-nav a svg,.bottom-nav button svg{width:21px;height:21px}
  body:has(.site-tabbar){padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .main.has-bottom{padding-bottom:110px}
  .bottom-nav .dot{top:4px}
  .fd-mbar{bottom:calc(84px + env(safe-area-inset-bottom))}
  .sticky-save{bottom:calc(88px + env(safe-area-inset-bottom))}
  .toasts,.has-bottom ~ .toasts{bottom:96px}
}
/* Phone header: location block (pin square, "Your location", town) or back · title · actions, all in circles */
.locblk{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:0;font:inherit;color:var(--ink);cursor:pointer;min-width:0;text-align:left}
.locblk .sq{width:46px;height:46px;border-radius:16px;background:#fff;box-shadow:var(--soft-shadow);display:flex;align-items:center;justify-content:center;color:var(--ink);flex:none}
.locblk small{display:block;font-size:12.5px;color:var(--muted);line-height:1.2}
.locblk b{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
@media (max-width:760px){
  .site-head{background:transparent;border-bottom:0;backdrop-filter:none;position:static}
  .site-head .in{height:auto;padding:14px 16px 6px;gap:10px}
  .site-head .hd-bell{width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:var(--soft-shadow)}
  .site-head .hd-back{width:46px;height:46px;margin-left:0;border-radius:50%;background:#fff;box-shadow:var(--soft-shadow)}
  .site-head .hd-title{flex:1;text-align:center;font-size:19px;font-weight:600}
  .site-head.has-title .loc-chip{display:none!important}
  .wrap.svc-page,.wrap.fd-page{padding-top:8px!important}
}
/* Shop page in the soft style */
.fd-head{border-radius:var(--radius-lg)}
.fd-head-cover{height:220px}
.fd-sections.chips{position:sticky;top:122px;z-index:5;background:linear-gradient(var(--page-b) 80%,transparent);padding:10px 2px;margin:4px -2px 0}
.fd-sections .pchip{height:48px;font-size:14px;padding-right:16px}
.fd-sections .pchip .pic{width:34px;height:34px;font-size:18px}
.pgrid.items{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.fd-sec h2{font-size:21px;font-weight:600}
.fd-mbar .mbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border-radius:999px;padding:8px 8px 8px 22px;box-shadow:var(--soft-shadow-lg)}
.fd-mbar .mbar-in small{display:block;font-size:12.5px;color:var(--muted)}
.fd-mbar .mbar-in b{font-size:18px}
.fd-mbar .btn{height:50px;background:var(--cta);border-radius:999px;box-shadow:none}
@media (max-width:760px){
  .fd-page .back-link{display:none}
  .fd-head{margin:0 -16px;border-radius:0 0 28px 28px;box-shadow:none;background:transparent}
  .fd-head-cover{height:210px;border-radius:0 0 28px 28px}
  .fd-head-in{background:#fff;margin:-40px 12px 0;border-radius:24px;padding:0 16px 16px;box-shadow:var(--soft-shadow)}
  .fd-head-logo{width:72px;height:72px;margin-top:-30px;border-radius:20px}
  .fd-head h1{font-size:22px}
  .fd-sections.chips{top:0}
  .pgrid,.pgrid.items{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .pcard{padding:8px 8px 12px;border-radius:20px}
  .pcard .ph{border-radius:14px}
  .pcard .nm{font-size:15px;margin-top:10px}
  .pcard .pr{font-size:15px}
  .cartbtn{width:42px;height:42px}
  .qtyp button{width:30px;height:30px}
  .fd-list.pgrid{grid-template-columns:1fr}
  .fd-list .pcard .ph{aspect-ratio:16/8}
  .slide{min-height:170px;padding:22px 18px}
  .slide h3{font-size:21px;max-width:62%}
  .slide p{font-size:13px;max-width:58%}
  .slide .btn{height:42px;padding:0 18px;font-size:14px}
  .slide .art{font-size:78px;right:3%}
  .sh2 h2{font-size:19px}
}
/* Picture chips win over the older round category buttons */
.pchip.fd-rcat{width:auto;flex-direction:row;gap:10px;font-size:15px;font-weight:600;color:var(--ink)}
.pchip.fd-rcat span.pic{width:44px;height:44px;border:0;box-shadow:none;background:var(--page-a)}
.pchip.fd-rcat.on span.pic{border:0;box-shadow:none}
.pchip.fd-rcat.on{color:var(--ink)}
.fd-rcats.chips{padding:2px 2px 8px;margin-bottom:0}
/* Shop cover without a photo: the service's soft colours, not a navy block */
body[data-svc="food"]{--sa:#FBE3CF;--sb:#F6C9A5}body[data-svc="groceries"]{--sa:#DDF3EC;--sb:#BFE8DA}body[data-svc="pharmacy"]{--sa:#EADFFC;--sb:#D3BEF8}body[data-svc="laundry"]{--sa:#DDEEFC;--sb:#BFDDF8}
.fd-head-cover{background:linear-gradient(120deg,var(--sa,#DCE6F8),var(--sb,#BCD0F2))}
.fd-head-cover:empty::after{background:radial-gradient(circle at 86% 30%,rgba(255,255,255,.45) 0 80px,transparent 81px),radial-gradient(circle at 70% 120%,rgba(255,255,255,.3) 0 130px,transparent 131px)}
/* Wallet (sample style): soft balance card, colourful action tiles, rounded transaction rows */
.wl-card{background:#fff;border-radius:var(--radius-lg);padding:18px;box-shadow:var(--soft-shadow)}
.wl-bal{background:linear-gradient(135deg,#FFE9DC,#FFD9C2);border-radius:22px;padding:22px 18px;text-align:center}
.wl-bal small{display:block;color:#7C5A48;font-size:14px}
.wl-amt{font-size:clamp(30px,4vw,40px);font-weight:700;color:#E8590C;letter-spacing:-.02em;margin:4px 0 6px}
.wl-bal .btn.link{color:#9A3412}
.wl-acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.wl-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;height:84px;border-radius:18px;border:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;cursor:pointer}
.wl-act span{display:flex;color:inherit}
.wl-act.t1{background:#FCE7F6;color:#A21CAF}.wl-act.t2{background:#E0F2FE;color:#0369A1}.wl-act.t3{background:#FFEDE5;color:#C2410C}.wl-act.t4{background:#FEF9C3;color:#854D0E}
.wl-act:hover{filter:brightness(.97)}
.wl-h{font-size:19px}
.tx-list{display:flex;flex-direction:column;gap:10px}
.tx-row{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:18px;background:#fff;box-shadow:var(--soft-shadow);color:var(--ink);text-decoration:none}
.tx-row:hover{color:var(--ink);box-shadow:var(--soft-shadow-lg)}
.tx-row b{display:block;font-size:15.5px;font-weight:600}
.tx-row small{display:block;color:var(--muted);font-size:13px;margin-top:4px}
.tx-r{text-align:right;flex:none}
.tx-r b{font-size:17px;font-weight:600}.tx-r b.in{color:#047857}
/* Notifications: soft tinted rows with a picture */
.nt-list{display:flex;flex-direction:column;gap:12px}
.nt-item{display:flex;align-items:center;gap:16px;padding:18px;border-radius:20px;background:#F3F4F6;border:0;box-shadow:none;color:var(--ink);text-decoration:none}
.nt-item.unread{background:#FFEDE3}
.nt-item b{font-size:16px;font-weight:600}
.nt-item small{display:block;color:var(--muted);font-size:13.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-emo{flex:none;width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-size:34px;line-height:1}
/* Phone menu (the More sheet): white, with pastel icon squares like the profile sample */
@media (max-width:860px){
  .side{background:#fff;color:var(--ink);width:min(320px,86vw);border-radius:0 28px 28px 0;padding:20px 14px}
  .side .brand{color:var(--ink)}.side .brand .logo{background:var(--green);color:#fff}
  .side .role,.side .sec{color:var(--muted)}
  .side a.nav{color:var(--ink);font-size:15.5px;font-weight:500;padding:8px 8px}
  .side a.nav .nav-l{gap:14px}
  .side a.nav .nav-l svg{width:44px;height:44px;padding:12px;border-radius:14px;background:#EEF2FF;color:#4338CA;opacity:1;box-sizing:border-box}
  .side a.nav:nth-child(6n+2) .nav-l svg{background:#FCE7F3;color:#BE185D}
  .side a.nav:nth-child(6n+3) .nav-l svg{background:#ECFCCB;color:#4D7C0F}
  .side a.nav:nth-child(6n+4) .nav-l svg{background:#FFEDD5;color:#C2410C}
  .side a.nav:nth-child(6n+5) .nav-l svg{background:#E0F2FE;color:#0369A1}
  .side a.nav:nth-child(6n+6) .nav-l svg{background:#F3E8FF;color:#7E22CE}
  .side a.nav:hover,.side a.nav.on{background:#F9FAFB;box-shadow:none;color:var(--ink)}
  .side a.nav.on{font-weight:600}
  .side .me{border-top:1px solid var(--line);color:var(--muted)}.side .me b{color:var(--ink)}
  .me-links a{color:var(--muted)}
}
.chips.fd-rcats,.fd-sections.chips{flex-wrap:nowrap!important;overflow-x:auto;display:flex!important}
.chips > *{flex:none}
/* Account area on phones: the same airy header as the public pages (round buttons, no white bar) */
@media (max-width:860px){
  .topbar{background:transparent;border-bottom:0;backdrop-filter:none;position:static;height:auto;padding:14px 14px 4px}
  .topbar .tb-end{gap:8px}
  .topbar .hd-bell,.topbar button.tb-menu{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--soft-shadow)}
  .topbar .tb-end .loc-chip{height:44px;box-shadow:var(--soft-shadow);border:0}
  .topbar .brand .logo{width:44px;height:44px;border-radius:14px}
}
/* Item detail sheet */
.pcard{position:relative}
.pc-open{position:absolute;inset:0 0 64px 0;z-index:1;border:0;background:none;cursor:pointer;border-radius:var(--radius)}
.pcard .foot{position:relative;z-index:2}
.isheet .lsheet-box{height:auto;max-height:92vh;overflow:hidden}
.is-ph{position:relative;aspect-ratio:16/10;background:var(--page-a);display:flex;align-items:center;justify-content:center;font-size:110px;flex:none}
.is-ph img{width:100%;height:100%;object-fit:cover}
.is-x{position:absolute;top:14px;right:14px;border:0;box-shadow:var(--soft-shadow)}
.is-body{padding:20px 22px 8px;overflow:auto}
.is-body h2{font-size:23px;font-weight:600;margin:0 0 4px}
.is-price{font-size:21px;font-weight:700;color:var(--food-c);margin:8px 0}
body[data-svc="groceries"] .is-price{color:var(--groc-c)}body[data-svc="pharmacy"] .is-price{color:var(--phar-c)}body[data-svc="laundry"] .is-price{color:var(--laun-c)}
.is-foot{display:flex;gap:12px;align-items:center;padding:14px 18px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.qtyp.light{background:#F3F4F6;color:var(--ink)}
.qtyp.light button{background:#fff;color:var(--ink);box-shadow:var(--soft-shadow)}
/* Homes and Artisans in the soft style */
.lcard{border:0;border-radius:var(--radius);padding:10px 10px 4px;box-shadow:var(--soft-shadow)}
.lcard .ph{border-radius:16px;overflow:hidden}
.lcard .body{padding:12px 6px 12px}
.lcard .price{font-size:19px;font-weight:700}
.lcard .tag{border-radius:999px}
.pill-tabs button{border:0;background:#fff;box-shadow:var(--soft-shadow);height:46px;padding:0 22px;font-weight:500}
.pill-tabs button.on{background:var(--cta);color:#fff}
.search-layout #filters{border:0;border-radius:var(--radius)}
.seg{border-radius:999px!important;overflow:hidden}
.a-card{border:0;border-radius:var(--radius)}
.a-av{border-radius:18px}
.a-cats a .a-ci{box-shadow:var(--soft-shadow);background:#fff}
.page-head h1{font-weight:600}
@media (max-width:760px){
  .search-layout{gap:12px!important}
  .grid-auto:has(> .lcard){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .lcard .price{font-size:16px}
  .lcard .ttl{font-size:13.5px}
  .lcard .by,.lcard .when{display:none}
}
.slide.mini{min-height:150px;padding:20px 22px;gap:10px;border-radius:var(--radius)}
.slide.mini h3{font-size:21px}.slide.mini p{font-size:14px;margin:0}
.slide.mini .art{font-size:76px}

/* =====================================================================================================================
   FINAL LAYER (Oct 2026): white pages, wider layouts, one sans font, and the account sidebar in the new light style on
   every screen size. Nothing from the earlier look should show through.
   ===================================================================================================================== */
:root{--serif:var(--sans);--page-b:#FFFFFF}
body{background:linear-gradient(180deg,var(--page-a) 0,#fff 360px) no-repeat;background-color:#fff}
.wrap{max-width:1360px;padding:0 32px}
.site-head .in{max-width:1360px;padding:0 32px}
.svc-strip{max-width:1360px;padding:0 32px}
.main{max-width:1440px;padding:24px 40px 64px}
.main-top{max-width:1440px;padding:16px 40px 0}
@media (max-width:760px){.wrap{padding:0 16px}.site-head .in{padding:14px 16px 6px}.main{padding:16px 16px 48px}}
h1,h2,h3,.page-head h1,.auth h1,.auth .art h2{font-family:var(--sans)}
.page-head h1{font-size:32px;font-weight:600;letter-spacing:-.03em}
/* Account sidebar: white with pastel icon squares (desktop too) */
.side{background:#fff;color:var(--ink);border-right:1px solid var(--line);width:268px;flex-basis:268px;padding:22px 14px}
.side .brand{color:var(--ink)}
.side .brand .logo{background:var(--ink);color:var(--accent);border-radius:50%}
.side .role,.side .sec{color:var(--muted)}
.side a.nav{color:var(--ink);font-weight:500;font-size:14.5px;padding:7px 8px;border-radius:14px}
.side a.nav .nav-l{gap:12px}
.side a.nav .nav-l svg{width:38px;height:38px;padding:10px;border-radius:12px;background:#EEF2FF;color:#4338CA;opacity:1;box-sizing:border-box;flex:none}
.side a.nav:nth-child(6n+2) .nav-l svg{background:#FCE7F3;color:#BE185D}
.side a.nav:nth-child(6n+3) .nav-l svg{background:#ECFCCB;color:#4D7C0F}
.side a.nav:nth-child(6n+4) .nav-l svg{background:#FFEDD5;color:#C2410C}
.side a.nav:nth-child(6n+5) .nav-l svg{background:#E0F2FE;color:#0369A1}
.side a.nav:nth-child(6n+6) .nav-l svg{background:#F3E8FF;color:#7E22CE}
.side a.nav:hover{background:#F7F8FA;color:var(--ink)}
.side a.nav.on{background:#F3F4F6;box-shadow:none;color:var(--ink);font-weight:600}
.side a.nav.on .nav-l svg,.side a.nav:hover .nav-l svg{color:inherit}
.side a.nav.on .nav-l svg{background:var(--cta);color:#fff}
.side a.nav .nav-l > span:first-child:not(:only-child){width:38px;height:38px;border-radius:12px;background:#F3F4F6;display:inline-flex;align-items:center;justify-content:center;flex:none}
.side .me{border-top:1px solid var(--line);color:var(--muted)}
.side .me b{color:var(--ink)}
.me-links a{color:var(--muted)}.me-links a:hover{color:var(--ink)}
.main-top .hd-bell{width:44px;height:44px;border-radius:50%;background:#fff;box-shadow:var(--soft-shadow)}
.main-top .loc-chip{height:44px;border:0;box-shadow:var(--soft-shadow)}
/* Dashboard banners: the dark card style used across the new design */
.hero-band{background:linear-gradient(120deg,#111827 0%,#1F2937 55%,color-mix(in srgb,var(--green) 70%,#111827) 100%);border-radius:var(--radius-lg);box-shadow:var(--soft-shadow-lg)}
.hero-band::before,.hero-band::after{background:rgba(255,255,255,.05)}
/* Tables, tabs and filters: lighter, rounder */
.tabs{border-bottom:0;gap:8px}
.tabs a,.tabs button{border:0;border-radius:999px;padding:10px 18px;background:#fff;box-shadow:var(--soft-shadow);margin:0 0 4px;font-weight:500}
.tabs a.on,.tabs button.on{background:var(--cta);color:#fff;border:0}
table.t th{background:#F9FAFB;color:var(--muted);font-weight:600}
.card.flush{border-radius:var(--radius)}
.filters .input{border-radius:999px}
.back-btn{background:#fff;box-shadow:var(--soft-shadow);border-radius:999px;padding:8px 14px 8px 10px}
.svc-tile{border-radius:var(--radius);border:0;box-shadow:var(--soft-shadow)}
.svc-row{border-radius:var(--radius)}
/* All services: the same friendly cards as the homepage */
.svc-tile{padding:18px 16px;min-height:150px;align-items:flex-start;text-align:left;background:var(--tb,#F3F4F6)}
.svc-tile .svc-ic.emo{width:auto;height:auto;background:none;box-shadow:none;font-size:44px;line-height:1;margin-bottom:auto;filter:drop-shadow(0 6px 8px rgba(0,0,0,.12))}
.svc-tile b{font-size:17px;margin-top:12px}
.svc-tile.t-blue{--tb:#E8F0FC}.svc-tile.t-amber{--tb:#FFF4DC}.svc-tile.t-red{--tb:#FFEDE3}.svc-tile.t-green{--tb:#E3F6EE}.svc-tile.t-violet{--tb:#F1EAFE}.svc-tile.t-teal{--tb:#E0F5F3}.svc-tile.t-pink{--tb:#FDEAF3}
@media (max-width:760px){.svc-tile{min-height:104px;padding:12px 6px;align-items:center;text-align:center}.svc-tile .svc-ic.emo{font-size:34px;margin:4px 0 auto}.svc-tile b{font-size:13.5px;margin-top:8px}}

/* =====================================================================================================================
   FIXED BOTTOM BAR (phones). Root cause of the bar moving with the page: `body{overflow-x:hidden}` (top of this file)
   can turn the body into its own scroll box on iOS Safari, and the floating bar was placed `12px + safe area` above
   the bottom, so it rode up and down with Safari's collapsing toolbar. Fix: clip sideways overflow without making a
   scroll box, pin the bar to the very bottom edge with the safe area inside it, give it its own layer, and pad pages.
   ===================================================================================================================== */
@supports (overflow:clip){html,body{overflow-x:clip}}
:root{--tabbar-h:64px}
@media (max-width:860px){
  .site-tabbar,.bottom-nav{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;display:flex;justify-content:space-around;gap:0;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));margin:0;border:0;border-top:1px solid rgba(17,24,39,.06);border-radius:20px 20px 0 0;
    background:#fff;backdrop-filter:none;box-shadow:0 -6px 24px rgba(16,24,40,.08);transform:translateZ(0);-webkit-transform:translateZ(0)}
  .site-tabbar a,.bottom-nav a,.bottom-nav button{flex:1 1 0;height:52px;min-width:0;max-width:110px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:11.5px;font-weight:500;color:#6B7280;background:none;position:relative}
  .site-tabbar a svg,.bottom-nav a svg,.bottom-nav button svg{width:22px;height:22px}
  .site-tabbar a.on,.bottom-nav a.on{background:none;color:var(--green)}
  .site-tabbar a.on::before,.bottom-nav a.on::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--green)}
  .site-tabbar a.on svg,.bottom-nav a.on svg{stroke-width:2.4}
  .bottom-nav .dot{top:2px;left:calc(50% + 6px)}
  /* room for the bar under every page, and inputs scroll clear of it */
  body:has(.site-tabbar),body:has(.bottom-nav){padding-bottom:calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom))}
  .main.has-bottom{padding-bottom:24px}
  html{scroll-padding-bottom:calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom))}
  .fd-mbar{bottom:calc(var(--tabbar-h) + 6px + env(safe-area-inset-bottom))}
  .sticky-save{bottom:calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom))}
  .toasts,.has-bottom ~ .toasts{bottom:calc(var(--tabbar-h) + 20px + env(safe-area-inset-bottom))}
  /* on-screen keyboard open: the bar steps aside so fields and buttons stay visible */
  body.kb-open .site-tabbar,body.kb-open .bottom-nav{display:none}
  body.kb-open .fd-mbar,body.kb-open .sticky-save{bottom:8px}
  /* logged-in phone header: the house icon only, more room for location, messages, bell and menu */
  .topbar .brand .brand-t{display:none}
  .topbar{gap:8px}
  .topbar .tb-end{min-width:0;flex:1;justify-content:flex-end}
}
/* Signed-in phone header: logo · location block (as on the homepage) · messages · bell · menu */
.locblk.tb-loc{display:none}
@media (max-width:860px){
  .topbar{justify-content:flex-start}
  .locblk.tb-loc{display:inline-flex;min-width:0;flex:0 1 auto;margin-left:4px}
  .locblk.tb-loc .sq{width:44px;height:44px;border-radius:14px}
  .locblk.tb-loc b{max-width:30vw;font-size:15.5px}
  .topbar .tb-end{margin-left:auto;flex:none}
}
@media (max-width:380px){
  .topbar .brand .logo{width:38px;height:38px}
  .locblk.tb-loc .sq{display:none}
  .topbar .hd-bell,.topbar button.tb-menu{width:40px;height:40px}
  .topbar .tb-end{gap:6px}
}
@media (max-width:860px){
  .topbar button.locblk{color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
  .topbar .locblk small{color:var(--muted)}
}
@media (max-width:360px){.site-tabbar a,.bottom-nav a,.bottom-nav button{font-size:10.5px;letter-spacing:-.01em}}

/* ============ CHAT: tap and send, ticks, delivered and read times ============ */
.chat .msg.me{cursor:pointer;-webkit-tap-highlight-color:transparent}
.chat .msg .when{display:flex;align-items:center;justify-content:flex-end;gap:4px}
.chat .msg:not(.me) .when{justify-content:flex-start}
.chat .msg .tks{display:inline-flex;align-items:center}
.chat .msg .tk{display:inline-flex;line-height:0}
.chat .msg.me .tk-sent,.chat .msg.me .tk-delivered{color:rgba(255,255,255,.6)}
.chat .msg.me .tk-read{color:#4FC3F7}
.chat .msg.me .tk-wait{color:rgba(255,255,255,.8)}
.chat .msg .tk-fail{width:14px;height:14px;border-radius:50%;background:#fff;color:#B91C1C;font:700 10px/14px var(--sans);justify-content:center}
.chat .msg.me.st-sending{opacity:.85}
.chat .msg.me.st-failed{background:#FEF2F2;color:#7F1D1D;border-color:#FCA5A5}
.chat .msg.me.st-failed .when{opacity:1;color:#B91C1C;font-weight:600}
.chat .msg .rcpt{display:none;font-size:11px;margin-top:4px;padding-top:4px;border-top:1px solid rgba(255,255,255,.25);opacity:.9;text-align:right}
.chat .msg.me.show-rcpt .rcpt{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 10px}
.chat .msg .rcpt span{white-space:nowrap}
.chat .msg.me:focus-visible{outline:2px solid #7DD3FC;outline-offset:2px}

/* ============ LOCATION SELECTOR: pick a town, then Confirm ============ */
.lsheet-row.town{min-height:56px}
.lsheet-row.town.on{background:#EEF2FB;color:var(--green);font-weight:600;border-radius:14px;border-bottom-color:transparent}
.lsheet-ring{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #CBD2DD}
.lsheet-tick{flex:none;color:var(--green)}
.lsheet-row.town:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:14px}
.lsheet-foot{padding:12px 20px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff;border-radius:0 0 22px 22px}
.lsheet-foot .btn{width:100%;height:52px;font-size:16px;border-radius:999px}
.lsheet-foot .btn:disabled{opacity:.5;cursor:not-allowed}
@media (min-width:700px){.lsheet-foot{border-radius:0 0 18px 18px}}
/* Homes search: nothing found */
.no-res{text-align:center;padding:32px 22px}
.no-res-ic{font-size:44px;line-height:1;margin-bottom:8px}
.no-res h3{margin:0 0 6px;font-size:20px;letter-spacing:-.01em}
.no-res p{margin:0 auto 14px;max-width:460px}
.no-res-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:10px}
.no-res .pchip{height:40px;padding:0 16px;font-size:14px}
/* The location sheet sits above everything: hide the bottom bar while it's open so Confirm is never covered. */
body.lsheet-open .site-tabbar,body.lsheet-open .bottom-nav,body.lsheet-open .tabbar{display:none!important}

/* ============ RENT BY BANK TRANSFER ============ */
.paychoice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.paychoice-opt{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1.5px solid var(--line);border-radius:16px;cursor:pointer;background:#fff}
.paychoice-opt input{margin-top:3px;accent-color:var(--green)}
.paychoice-opt b{display:block;font-size:15px}
.paychoice-opt small{display:block;color:var(--muted);font-size:12.5px;line-height:1.35;margin-top:2px}
.paychoice-opt:has(input:checked){border-color:var(--green);background:var(--green-soft)}
.acct-box{border-radius:16px;background:#F7F8FA;border:1px solid var(--line);padding:14px 16px}
.acct-k{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.acct-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.acct-row:last-of-type{border-bottom:0}
.acct-row small{display:block;font-size:12px;color:var(--muted)}
.acct-row b{font-size:16px}
.acct-no{font-size:20px!important;letter-spacing:.06em}
.tr-set{padding:12px 14px;border-radius:14px;background:#F7F8FA}
.tr-row{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:14px}
.tr-row.is-wait{border-color:#F5C26B;background:#FFFBF0}
.tr-row .grow{min-width:0}
.tr-acts{display:flex;flex-direction:column;gap:6px;flex:none}
@media (max-width:640px){.paychoice{grid-template-columns:1fr}.tr-row{flex-direction:column}.tr-acts{flex-direction:row;flex-wrap:wrap}}
/* Pop-up windows sit above the fixed bottom bar on phones (the bar used to cover their buttons). */
.modal-bg{z-index:1100}
[data-sec][hidden]{display:none!important}
.toasts{z-index:1300}
/* Homepoint rent account card */
.ra-acct{border-radius:16px;background:#F7F8FA;border:1px solid var(--line);padding:6px 16px;margin:4px 0 14px}
.ra-acct > div{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.ra-acct > div:last-child{border-bottom:0}
.ra-acct small{flex:0 0 130px;color:var(--muted);font-size:12.5px}
.ra-acct b{font-size:16px}
.ra-no{font-size:20px!important;letter-spacing:.06em}
.ra-stats{margin-bottom:12px}
.ra-stats .v{font-size:22px;overflow-wrap:anywhere}
@media (max-width:640px){.ra-stats{grid-template-columns:1fr 1fr!important;gap:10px}.ra-stats .v{font-size:18px}.ra-acct small{flex-basis:100%}}
.ra-tenants{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.ra-t{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px}
.ra-t .grow{min-width:0}.ra-t .right{text-align:right}
@media (max-width:640px){.ra-t{flex-wrap:wrap}.ra-t .right{text-align:left}}
/* "Send money" + @username · Copy · Change: one tidy row on phones (wraps only on very narrow screens). */
.send-strip{flex-wrap:nowrap;gap:8px}
.send-strip > .btn{flex:none;height:44px;padding:0 16px;font-size:14.5px}
.send-strip .send-user{flex:1 1 auto;justify-content:flex-end;gap:2px;font-size:13.5px;min-width:0}
.send-strip .send-user b{font-size:14px;max-width:34vw}
.send-strip .send-user .btn.link{height:auto;min-height:0;padding:6px 6px;font-size:13px;font-weight:500;border-radius:8px;line-height:1.1}
.send-strip .send-user .faint{font-size:12px}
/* Small phones: Send money, @username, Copy and Change stay on ONE line; a long username shortens with "…" */
@media (max-width:480px){
  .send-strip{flex-wrap:nowrap;gap:6px}
  .send-strip > .btn{height:42px;padding:0 13px;font-size:14px}
  .send-strip .send-user{justify-content:flex-end;gap:0;white-space:nowrap}
  .send-strip .send-user b{font-size:13.5px;max-width:30vw;min-width:3.2em;flex:0 1 auto}
  .send-strip .send-user .btn.link,.send-strip .send-user .faint{flex:none}
  .send-strip .send-user .btn.link{padding:6px 4px;font-size:12.5px}
  .send-strip .send-user .faint{font-size:11px}
}
@media (max-width:350px){
  .send-strip > .btn{padding:0 11px;font-size:13px}
  .send-strip .send-user b{max-width:24vw;font-size:12.5px}
  .send-strip .send-user .btn.link{padding:6px 3px;font-size:12px}
}

/* Tenants page: homes first (landlords with more than 2 homes) */
.home-list{display:flex;flex-direction:column;gap:8px}
.home-row{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--card,#fff);border:1px solid var(--line);border-radius:14px;color:inherit;text-decoration:none}
.home-row:hover{border-color:var(--brand,#0b2a5b)}
.home-row .grow{min-width:0;flex:1}.home-row .right{text-align:right}
.home-row .chev{font-size:22px;color:var(--muted,#888);line-height:1}
/* Rent account: tenants' numbers grouped by home, closed numbers */
.ra-homes{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.ra-home{border:1px solid var(--line);border-radius:12px;padding:0 10px}
.ra-home>summary{display:flex;align-items:center;gap:10px;padding:12px 2px;cursor:pointer;list-style:none}
.ra-home>summary::-webkit-details-marker{display:none}
.ra-home>summary::after{content:'›';font-size:20px;color:var(--muted,#888);transition:transform .2s}
.ra-home[open]>summary::after{transform:rotate(90deg)}
.ra-home .grow{flex:1;min-width:0}
.ra-home[open]{padding-bottom:8px}
.ra-t-acts{display:flex;gap:6px}
.ra-closed{margin:4px 0 14px}.ra-closed>summary{cursor:pointer;font-weight:700;font-size:14px;padding:6px 0}
.ra-t.is-closed{opacity:.75;background:var(--bg,#f6f7f9)}
@media (max-width:640px){.ra-t-acts{width:100%;justify-content:flex-end}}

/* Account → Your bank accounts */
.bank-list{display:flex;flex-direction:column;gap:8px}
.bank-row{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;flex-wrap:wrap}
.bank-row.is-main{border-color:#9bd3b0;background:#f3fbf6}
.bank-row .grow{flex:1;min-width:0}.bank-row .badge{margin-top:6px}
.bank-acts{display:flex;gap:6px;flex-wrap:wrap}
@media (max-width:480px){.bank-acts{width:100%;justify-content:flex-end}}

/* Phones: the account menu opens above the bottom bar (the bar sits at z-index 60), so the name, email and
   Sign out at the foot of the menu are never hidden. Room is left for the iPhone home bar. */
@media (max-width:860px){
  .side{z-index:80;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .side.open{box-shadow:0 0 0 100vmax rgba(15,30,61,.45)}
}

/* Bank picker with search (Add a bank account) */
.bankpick{display:flex;flex-direction:column;gap:6px}
.bankpick .bp-list{max-height:240px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:4px;background:#fff;-webkit-overflow-scrolling:touch}
.bankpick .bp-list[hidden]{display:none}
.bankpick .bp-row{display:block;width:100%;text-align:left;padding:11px 12px;border:0;background:none;border-radius:9px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
.bankpick .bp-row:hover,.bankpick .bp-row:focus{background:#F3F4F6;outline:none}
.bankpick .bp-hint{padding:8px 12px;font-size:12.5px;color:var(--muted)}
.bankpick.picked [data-bp-q]{border-color:var(--green);background:#f3fbf6;font-weight:700}

/* Error messages that pop up (toasts): light red box with dark red text, readable on every screen.
   (They used to inherit red text from .err on top of a dark red background.) */
.toast.bad,.toast.err{background:#FDECEC;color:#7F1D1D;border:1px solid #F4B8B2;font-weight:600;box-shadow:0 8px 24px rgba(127,29,29,.14)}
.toast.bad::before,.toast.err::before{content:"!";display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:8px;border-radius:50%;background:#B91C1C;color:#fff;font-size:12px;font-weight:600;vertical-align:-3px}
/* Add a bank account: the name found on the account, shown as soon as 10 digits are typed */
.acct-check{font-size:14px;line-height:1.4;margin-top:-4px;min-height:0}
.acct-check:empty{display:none}
.acct-check.wait{color:var(--muted)}
.acct-check.ok{background:#EAF7EF;color:#14532D;border:1px solid #BFE5CC;border-radius:10px;padding:10px 12px;font-weight:600}
.acct-check.warn{background:#FFF7E6;color:#7A4700;border:1px solid #F3D9A4;border-radius:10px;padding:10px 12px}
.acct-check.bad{background:#FDECEC;color:#7F1D1D;border:1px solid #F4B8B2;border-radius:10px;padding:10px 12px}
.modal .actions .btn[disabled]{opacity:.45;cursor:not-allowed}
/* Payments: "Waiting for your transfer" card (updates by itself) */
.wait-card{display:flex;align-items:center;gap:14px;margin-bottom:14px;border:1px solid #F3D9A4;background:#FFF9EC}
.wait-card .grow{flex:1;min-width:0}
.wait-card .wait-ic{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-weight:600;font-size:18px}
.wait-card.is-done{border-color:#BFE5CC;background:#EAF7EF}.wait-card.is-done .wait-ic{background:#16A34A;color:#fff}
.wait-card.is-bad{border-color:#F4B8B2;background:#FDECEC}.wait-card.is-bad .wait-ic{background:#B91C1C;color:#fff}
@media (max-width:480px){.wait-card{flex-wrap:wrap}}

/* Team & areas: place picker */
.place-pick .town-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 12px;margin-top:8px}
.place-pick .whole-state{border:1px dashed var(--line);border-radius:12px;padding:10px 12px;margin-top:8px;align-items:flex-start}
.place-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.place-list li{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:14px}
.place-list li.muted{opacity:.6}

/* Team dashboard (/staff) */
.sec-title{margin:18px 0 10px;font-size:16px}
.count-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.count-list li{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:6px 0;border-bottom:1px solid var(--line-2,#eef0f3)}
.count-list li:last-child{border-bottom:0}
.appr{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.appr .grow{flex:1;min-width:220px}
.appr-acts{display:flex;gap:8px;align-items:center;max-width:260px}
/* Artisan sub-services */
.file.cat-sub{margin-left:28px;border-left:3px solid var(--line)}
.check.cat-sub-pick{padding-left:14px}
/* Account & verification: one section at a time (tabs) */
.acct-panel{max-width:860px}
.acct-panel[hidden]{display:none!important}
.acct-tabs{margin-top:4px}
.acct-tabs .badge{margin-left:4px;vertical-align:1px}
.warn-box + .acct-tabs,.warn-box + .warn-box{margin-top:12px}

/* Shop pages: a long row of category chips (or a long search placeholder) must never make the product list wider than
   the screen; the chips scroll sideways instead and the products stay two to a row on phones. */
.fd-layout > *,.fd-menu,.fd-sec,.fd-sections,.fd-psearch{min-width:0;max-width:100%}
.fd-menu .pgrid{width:100%}
.fd-psearch input{min-width:0;width:100%;text-overflow:ellipsis}

/* Shop closed: add buttons stay in place, greyed, and explain why when tapped */
.pcard .cartbtn.off{opacity:.32;filter:grayscale(1)}
/* Closed shops: when they open next, under the "Closed" line */
.pcard .fd-opens{display:flex;align-items:center;gap:5px;margin:4px 4px 0;font-size:13px;font-weight:600;color:var(--green)}

/* Beauty (salons, barbers, spas): violet like its service tile */
.fd-head-logo.ph.salon,.fd-orow .ph.salon,.fd-ocard > .ph.salon,.fd-pcard.is-salon .fd-pph,.fd-hcard.is-salon .fd-hph{background:var(--tint-violet);color:#6D28D9}
.slide.t-beau{--sa:#F1E6FC;--sb:#DCC6F6}

/* Support desk (support.js) */
.sup-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-bottom:12px}
.sup-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:14px;align-items:start}
@media (max-width:900px){.sup-grid{grid-template-columns:minmax(0,1fr)}}
.sup-thread{display:flex;flex-direction:column;gap:10px}
.sup-msg{border-radius:14px;padding:10px 12px;background:var(--bg);max-width:92%}
.sup-msg.agent{background:var(--green-soft,#E4EBF6);align-self:flex-end}
.sup-msg.note{background:#FFF6DD;border:1px dashed #E8B64B;align-self:flex-end}
.sup-meta{font-size:12px;color:var(--muted);margin-bottom:4px}
.sup-body{white-space:pre-wrap;word-break:break-word}
.sup-event{font-size:12px;color:var(--muted);text-align:center;padding:2px 8px}
.sup-reason{font-style:italic;margin-top:2px}
form.is-note textarea{background:#FFFBEF;border-color:#E8B64B}

/* Account → Profile overview (rebuilt): bigger type, clear groups */
.acct-hero{padding:20px}
.acct-hero-top{display:flex;gap:16px;align-items:center;margin-bottom:6px}
.acct-hero .acct-row:first-of-type{margin-top:10px}
.acct-back{display:inline-block;font-weight:600;font-size:16px;color:var(--ink,#0f172a);text-decoration:none;padding:4px 0}
.acct-avatar{width:64px;height:64px;border-radius:50%;background:var(--ink,#0f172a);color:#fff;display:grid;place-items:center;font-weight:600;font-size:22px;flex:none;letter-spacing:.5px}
.acct-hero h2{margin:0;font-size:22px;line-height:1.25}
.acct-hero-sub{font-size:16px;color:var(--muted,#64748b);margin-top:2px}
.acct-hero-badges{margin-top:8px;display:flex;gap:6px;flex-wrap:wrap}
.acct-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.acct-tile{display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);text-decoration:none;color:inherit;min-height:72px}
.acct-tile:hover{border-color:var(--ink,#0f172a)}
.acct-tile b{display:block;font-size:16px;color:var(--ink,#0f172a)}
.acct-tile .grow span{display:block;font-size:14px;color:var(--muted,#64748b);margin-top:2px;line-height:1.35}
.acct-tile-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--soft,#f1f5f9);color:var(--ink,#0f172a);flex:none}
.acct-tile-ic.green{background:#e7f7ee;color:#137a43}
.acct-tile-ic.amber{background:#fff4d6;color:#94570a}
.acct-tile-go{font-size:22px;color:var(--muted,#94a3b8)}
.acct-details{padding:8px 20px 12px}
.acct-details h3{font-size:18px;margin:14px 0 4px}
.acct-row{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-top:1px solid var(--line,#eef0f3)}
.acct-details h3+.acct-row{border-top:0}
.acct-row-ic{width:36px;height:36px;border-radius:10px;background:var(--soft,#f1f5f9);display:grid;place-items:center;flex:none;color:var(--ink,#0f172a)}
.acct-row-label{font-size:14px;color:var(--muted,#64748b);font-weight:600}
.acct-row-value{font-size:17px;color:var(--ink,#0f172a);margin-top:2px;word-break:break-word;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.acct-row-note{font-size:14px;color:var(--muted,#64748b);margin-top:6px;line-height:1.45}
.acct-row .actions{margin-top:10px;justify-content:flex-start}
@media (max-width:560px){.acct-tiles{grid-template-columns:1fr}.acct-hero{padding:16px}.acct-details{padding:4px 16px 8px}}
/* Account: Profile / Settings tabs */
.acct-seg{display:flex;background:var(--soft,#e9edf2);border-radius:999px;padding:4px;margin:4px 0 14px;max-width:860px}
.acct-seg a{flex:1;text-align:center;padding:10px;border-radius:999px;font-weight:600;font-size:15px;color:var(--muted,#475569);text-decoration:none}
.acct-seg a.on{background:var(--ink,#0f172a);color:#fff}
.acct-avatar-wrap{position:relative;flex:none}
img.acct-avatar{object-fit:cover;display:block;width:72px;height:72px}
.acct-avatar-lock{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;background:#137a43;color:#fff;display:grid;place-items:center;border:2px solid #fff}
.acct-photo-note{font-size:13.5px;color:var(--muted,#64748b);background:var(--soft,#f8fafc);border-radius:12px;padding:10px 12px;margin-top:12px;line-height:1.45}
.acct-row .actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.acct-list{background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:20px;overflow:hidden}
.acct-item{display:flex;gap:12px;align-items:center;padding:15px 16px;border-top:1px solid var(--line,#eef0f3);text-decoration:none;color:inherit}
.acct-item:first-child{border-top:0}
.acct-item[hidden]{display:none}
.acct-item:hover{background:var(--soft,#f8fafc)}
.acct-item b{display:block;font-size:16px;color:var(--ink,#0f172a)}
.acct-item .grow span{display:block;font-size:14px;color:var(--muted,#64748b);margin-top:2px;line-height:1.35}
.acct-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:6px;vertical-align:middle}
.acct-cap{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#475569);margin:6px 4px 0}
.acct-faq details{border-top:1px solid var(--line,#eef0f3);padding:12px 0}
.acct-faq details:first-child{border-top:0}
.acct-faq summary{font-size:15.5px;font-weight:700;color:var(--ink,#0f172a);cursor:pointer;list-style:none}
.acct-faq summary::after{content:'+';float:right;color:var(--muted,#94a3b8);font-weight:400}
.acct-faq details[open] summary::after{content:'–'}
.acct-faq details div{font-size:15px;color:var(--muted,#475569);margin-top:8px;line-height:1.5;white-space:pre-line}
/* Dashboard slideshow: notice + advert banners, all 32:9 (banner image 1280 × 360 px) */
.dslides{position:relative;margin-bottom:16px}
.dslides[hidden]{display:none}
.dslides-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:20px}
.dslides-track::-webkit-scrollbar{display:none}
.dslide{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:32/9;border-radius:20px;overflow:hidden}
.dslide img{width:100%;height:100%;object-fit:cover;display:block}
.dslide>a{display:block;height:100%}
.dslide .dnotice{display:flex;flex-direction:column;justify-content:center;height:100%;padding:12px 20px;border:1.5px solid var(--amber);background:var(--amber-bg);border-radius:20px;text-decoration:none;color:inherit;box-sizing:border-box}
.dslide .dnotice.critical{border-color:var(--red);background:var(--red-bg)}
.dslide .dnotice b{font-size:17px}.dslide .dnotice span{font-size:15px;margin-top:6px}
.dslides-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.dslides-dots button{width:7px;height:7px;border-radius:999px;border:0;padding:0;background:var(--line,#cbd5e1);cursor:pointer}
.dslides-dots button.on{width:18px;background:var(--ink,#0f172a)}
.acct-tickets{display:flex;flex-direction:column}
.acct-ticket{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line,#eef0f3);text-decoration:none;color:inherit}
.acct-ticket:first-child{border-top:0;padding-top:0}
.acct-ticket b{display:block;font-size:15.5px;color:var(--ink,#0f172a)}
.acct-ticket .grow span{display:block;font-size:13.5px;color:var(--muted,#64748b);margin-top:2px}
.acct-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.acct-chips a{flex:none;padding:8px 14px;border-radius:999px;border:1px solid var(--line,#e5e7eb);background:var(--card,#fff);font-weight:600;font-size:14px;color:var(--muted,#475569);text-decoration:none}
.acct-chips a span{font-weight:600;opacity:.7;margin-left:2px}
.acct-chips a.on{background:var(--ink,#0f172a);color:#fff;border-color:var(--ink,#0f172a)}
/* Help & account sub-pages: the normal pill back button, with room below it */
.back-btn.acct-back{align-self:flex-start;margin:0 0 14px;font-size:15px;padding:9px 16px 9px 10px;background:#fff;border:1px solid var(--line);box-shadow:var(--soft-shadow)}
/* Referral & rewards page */
.rw-hero{display:grid;grid-template-columns:1fr 1.3fr;gap:18px;padding:20px}
@media (max-width:720px){.rw-hero{grid-template-columns:1fr}}
.rw-bal{display:flex;flex-direction:column;gap:4px;background:var(--ink,#0f172a);color:#fff;border-radius:16px;padding:18px}
.rw-bal span{font-size:14px;opacity:.8}.rw-bal b{font-size:32px;line-height:1.1}.rw-bal small{font-size:13px;opacity:.8;line-height:1.4}
.rw-bal .rw-exp{opacity:1;color:#fde68a}
.rw-bal .btn{background:#fff;color:var(--ink,#0f172a)}
.rw-share{display:flex;flex-direction:column;gap:10px;justify-content:center}
.rw-code{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rw-code b{font-size:26px;letter-spacing:.12em;font-family:ui-monospace,Menlo,monospace}
.rw-link{display:flex;gap:8px}.rw-link .input{flex:1;min-width:0;font-size:14px}
.rw-btns{display:flex;gap:8px;flex-wrap:wrap}
.rw-wa{background:#25d366!important;border-color:#25d366!important;color:#fff!important;display:inline-flex;gap:8px;align-items:center}
.rw-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
@media (max-width:560px){.rw-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rw-stat{background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.rw-stat span{font-size:13px;color:var(--muted,#64748b)}.rw-stat b{font-size:20px;color:var(--ink,#0f172a)}
.rw-how summary{cursor:pointer;font-size:16px}.rw-how ol{margin:10px 0 6px 18px;padding:0;line-height:1.6;font-size:15px}
.rw-chart{display:flex;align-items:flex-end;gap:2px;height:140px;margin:10px 0 6px}
.rw-chart>div{flex:1;height:100%;position:relative;display:flex;align-items:flex-end}
.rw-chart i,.rw-chart b{position:absolute;bottom:0;left:0;right:0;border-radius:3px 3px 0 0;min-height:1px}
.rw-chart i{background:#cbd5e1}.rw-chart b{background:#16a34a;left:20%;right:20%}
.rw-key{display:inline-block;width:10px;height:10px;border-radius:2px;background:#cbd5e1;vertical-align:middle;margin:0 3px 0 8px}.rw-key.q{background:#16a34a}
/* Bills: Beneficiaries link, sheet, and the summary above the Pay button */
.ben-link{display:inline-flex;gap:5px;align-items:center;border:0;background:#eff6ff;color:#1d4ed8;font-weight:700;font-size:13px;border-radius:999px;padding:5px 11px;cursor:pointer;white-space:nowrap}
.ben-link:hover{background:#dbeafe}
.bill-sum{background:var(--soft,#f8fafc);border:1px solid var(--line,#e5e7eb);border-radius:16px;padding:14px 16px}
.bill-sum .list{margin:0}
.bsheet{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:1000;display:flex;align-items:flex-end;justify-content:center}
.bsheet-box{background:var(--card,#fff);width:100%;max-width:560px;max-height:86vh;border-radius:24px 24px 0 0;padding:12px 18px 18px;display:flex;flex-direction:column}
@media (min-width:700px){.bsheet{align-items:center}.bsheet-box{border-radius:24px;max-height:80vh}}
.bsheet-grab{width:40px;height:5px;border-radius:9px;background:#d1d5db;margin:0 auto 12px}
.bsheet-x{border:0;background:none;font-size:20px;color:var(--muted,#64748b);cursor:pointer;padding:4px 8px}
.bsheet-list{overflow:auto;flex:1;margin-top:4px}
.bsheet-it{display:flex;align-items:center;border-top:1px solid var(--line,#eef0f3)}
.bsheet-pick{flex:1;display:flex;gap:12px;align-items:center;text-align:left;border:0;background:none;padding:12px 0;cursor:pointer;color:inherit;font:inherit;min-width:0}
.bsheet-pick b{display:block;font-size:15.5px;color:var(--ink,#0f172a)}.bsheet-pick small{display:block;color:var(--muted,#64748b);font-size:13px;margin-top:2px;overflow-wrap:anywhere}
.bsheet-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;flex:none}
.bsheet-more{border:0;background:none;font-size:20px;color:var(--muted,#94a3b8);padding:8px;cursor:pointer}
.bsheet-menu{display:flex;gap:8px;padding:0 0 12px 54px;flex-wrap:wrap}
.bsheet-menu button{border:1px solid var(--line,#e5e7eb);background:#fff;border-radius:999px;padding:7px 14px;font-weight:600;font-size:13.5px;cursor:pointer}
.bsheet-menu .red{color:#b91c1c}
.bill-sum .list{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
.bill-sum .list dt{margin:0;color:var(--muted,#64748b);font-size:14px;font-weight:600}
.bill-sum .list dd{margin:0;text-align:right;font-weight:700;font-size:15px}
.bill-sum .list dt::before,.bill-sum .list dd::before{display:none}
/* Data plans: Daily / Weekly / Monthly / Others tabs and plan cards */
.dp-tabs{display:flex;background:var(--soft,#eef1f5);border-radius:999px;padding:4px;margin:6px 0 10px}
.dp-tabs button{flex:1;border:0;background:none;padding:9px 0;border-radius:999px;font-weight:600;font-size:13.5px;color:var(--muted,#475569);cursor:pointer}
.dp-tabs button.on{background:var(--ink,#0f172a);color:#fff}
.dp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (min-width:900px){.dp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dp-card{border:1.5px solid var(--line,#e5e7eb);background:var(--card,#fff);border-radius:14px;padding:10px 6px;text-align:center;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;color:inherit;min-width:0}
.dp-card b{font-size:16px;line-height:1.2;overflow-wrap:anywhere}.dp-card .pr{font-weight:600;font-size:14px;color:var(--ink,#0f172a)}.dp-card small{font-size:11.5px;color:var(--muted,#64748b)}
.dp-card:hover{border-color:#94a3b8}
.dp-card.on{border-color:var(--ink,#0f172a);box-shadow:0 0 0 2px var(--ink,#0f172a) inset;background:var(--soft,#f8fafc)}
.dp-tag{font-size:10px;font-weight:600;color:#137a43;background:#e7f7ee;border-radius:6px;padding:1px 6px;margin-top:2px}