/* The Network — website. Blues: #0077B6 (deep) and #00B4D8 (bright). */
:root {
  --brand: #0077B6;
  --brand-2: #00B4D8;
  --brand-grad: linear-gradient(135deg, #00B4D8, #0077B6);
  --brand-text: #0077B6;
  --brand-soft: #D7F3FA;
  --on-brand: #fff;
  --bg: #F2FAFD;
  --bg-wash: radial-gradient(1200px 600px at 10% -10%, rgba(0, 180, 216, 0.16), transparent 60%),
             radial-gradient(900px 500px at 100% 0%, rgba(0, 119, 182, 0.10), transparent 60%);
  --surface: #FFFFFF;
  --surface-muted: #E4F3F9;
  --text: #06192B;
  --logo: #000;   /* the logo: black in light mode, white in dark mode */
  --text-2: #4F6475;
  --line: rgba(6, 25, 43, 0.09);
  --glass: rgba(255, 255, 255, 0.62);
  --glass-line: rgba(255, 255, 255, 0.75);
  --shadow: 0 8px 28px rgba(0, 60, 100, 0.09);
  --star: var(--brand-text);   /* rating stars use the brand colour, like the drawn icons */
  --radius: 22px;
  --nav-h: 72px;
  color-scheme: light;
}
/* Dark palette, used when the device is in dark mode (unless Light is chosen in Settings) or when Dark is chosen. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #0077B6; --brand-2: #00B4D8; --brand-text: #48CAE4; --brand-soft: #04304A;
    --bg: #03111F; --surface: #08223A; --surface-muted: #0C2D48;
    --bg-wash: radial-gradient(1200px 600px at 10% -10%, rgba(0, 180, 216, 0.18), transparent 60%),
               radial-gradient(900px 500px at 100% 0%, rgba(0, 119, 182, 0.25), transparent 60%);
    --text: #EAF7FC; --text-2: #93B2C6; --line: rgba(255, 255, 255, 0.09); --logo: #fff;
    --glass: rgba(8, 40, 66, 0.55); --glass-line: rgba(255, 255, 255, 0.12); --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #0077B6; --brand-2: #00B4D8; --brand-text: #48CAE4; --brand-soft: #04304A;
  --bg: #03111F; --surface: #08223A; --surface-muted: #0C2D48;
  --bg-wash: radial-gradient(1200px 600px at 10% -10%, rgba(0, 180, 216, 0.18), transparent 60%),
             radial-gradient(900px 500px at 100% 0%, rgba(0, 119, 182, 0.25), transparent 60%);
  --text: #EAF7FC; --text-2: #93B2C6; --line: rgba(255, 255, 255, 0.09); --logo: #fff;
  --glass: rgba(8, 40, 66, 0.55); --glass-line: rgba(255, 255, 255, 0.12); --shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  background: var(--bg-wash) fixed, var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
.muted { color: var(--text-2); font-weight: 500; }
.link { color: var(--brand-text); }
.hidden { display: none !important; }

/* ---------- Glass ---------- */
.glass {
  background: var(--glass);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: 999px;
  font-size: 16px; white-space: nowrap;
  transition: transform .2s cubic-bezier(.3,1.6,.5,1), filter .2s, background .2s;
}
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--brand-grad); color: var(--on-brand); box-shadow: 0 8px 20px color-mix(in srgb, var(--brand) 35%, transparent); }
.btn.primary:hover { filter: brightness(1.06); }
.btn.secondary { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--brand-text); box-shadow: var(--shadow); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-grid; place-items: center;
  transition: transform .2s cubic-bezier(.3,1.6,.5,1);
}
.icon-btn:active { transform: scale(.9); }
.icon { width: 22px; height: 22px; display: inline-block; flex: none; }
.icon.sm { width: 16px; height: 16px; }

/* ---------- Layout ---------- */
.page { max-width: 1120px; margin: 0 auto; padding: 24px 20px calc(var(--nav-h) + 40px); animation: pageIn .45s cubic-bezier(.2,.9,.3,1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 14px; gap: 12px; }
.section-head h2, h2.title { font-size: 20px; margin: 0; }
h1 { font-size: 34px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.5px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }

/* ---------- Top nav (desktop) / bottom tab bar (mobile) ---------- */
.topnav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 12px max(20px, calc((100vw - 1120px) / 2 + 20px));
  border-width: 0 0 1px; border-radius: 0;
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; }
.tabs { display: flex; gap: 4px; margin-left: 12px; }
.tab {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; color: var(--text-2);
  transition: background .25s, color .25s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--brand-text); background: var(--brand-soft); }
.badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #E5484D; color: #fff; font-size: 11px; display: grid; place-items: center;
}
.tab .badge { position: absolute; top: 2px; right: 4px; }
.msg-bubble { width: 64px; height: 44px; border-radius: 999px; display: grid; place-items: center; position: relative; }
.msg-bubble .dot { position: absolute; top: -2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid var(--bg); }

@media (max-width: 760px) {
  .topnav { display: none; }
  .tabbar {
    position: fixed; z-index: 40; left: 16px; right: 16px; bottom: 16px;
    display: flex; justify-content: space-around; padding: 6px; border-radius: 999px;
  }
  .tabbar .tab { flex-direction: column; gap: 2px; font-size: 11px; padding: 8px 14px; }
  .tabbar .tab .badge { top: 0; right: 8px; }
  .grid { grid-template-columns: 1fr; }
  h1 { font-size: 30px; }
}
@media (min-width: 761px) { .tabbar { display: none; } .mobile-only { display: none !important; } }

/* ---------- Home header ---------- */
.home-top { display: flex; align-items: center; gap: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; font-size: 17px; }
.pill select { appearance: none; background: transparent; border: 0; font-weight: 700; font-size: 17px; cursor: pointer; padding-right: 2px; outline: none; }
/* Area pill: shows the chosen area's name (so it's only as wide as that name); the real dropdown sits invisibly on top. */
.home-top { min-width: 0; }
.home-top .pill { position: relative; min-width: 0; flex: 0 1 auto; overflow: hidden; }
.home-top .pill .area-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-weight: 700; }
.home-top .pill select { position: absolute; inset: 0; width: 100%; opacity: 0; }
.home-top .pill:focus-within { outline: 2px solid var(--brand); }
.home-top > .msg-bubble { flex: none; margin-right: 0; }
.msg-bubble .icon { width: 24px; height: 24px; }
@media (max-width: 420px) { .home-top { gap: 8px; } .home-top .msg-bubble { width: 48px; } .home-top .pill { padding: 10px 12px; font-size: 15px; } }
.segmented {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 999px; margin-top: 22px;
}
.segmented .slider {
  position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px;
  background: var(--brand-grad);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent);
  transition: transform .45s cubic-bezier(.3,1.35,.5,1);
}
.segmented[data-side="requests"] .slider { transform: translateX(100%); }
.segmented button { position: relative; z-index: 1; height: 54px; font-size: 19px; display: flex; align-items: center; justify-content: center; gap: 6px; transition: color .3s; }
.segmented button.on { color: var(--on-brand); }
.segmented button.locked { color: var(--text-2); }
.shake { animation: shake .4s linear; }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }

.searchbar { display: flex; align-items: center; gap: 10px; padding: 0 18px; height: 54px; border-radius: 16px; margin-top: 18px; }
.searchbar input { flex: 1; border: 0; background: transparent; outline: none; font-size: 16px; font-weight: 600; }
.searchbar input::placeholder { color: var(--text-2); }
.chips { display: flex; gap: 10px; overflow-x: auto; padding: 16px 2px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: 10px 18px; border-radius: 999px; font-size: 15px; transition: background .25s, color .25s, transform .2s; }
.chip.on { background: var(--brand); color: var(--on-brand); border-color: transparent; }
.chip:active { transform: scale(.95); }

/* ---------- Cards ---------- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.tilecard {
  position: relative; overflow: hidden; height: 168px; padding: 18px; border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px;
  transition: transform .3s cubic-bezier(.3,1.4,.5,1), box-shadow .3s; text-align: left;
}
.tilecard:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(15,40,80,.14); }
.tilecard:active { transform: scale(.98); }
.tilecard .wash { position: absolute; inset: 0; z-index: 0; }
.tilecard .art { position: absolute; right: 22px; top: 18px; font-size: 76px; opacity: .45; transform: rotate(-6deg); z-index: 0; filter: saturate(.8); }
.tilecard > :not(.wash):not(.art) { position: relative; z-index: 1; }
.tilecard .t { font-size: 19px; line-height: 1.2; max-width: 72%; }
.tilecard .price { color: var(--brand-text); font-size: 15px; }
.tilecard .meta { font-size: 11px; color: var(--text-2); display: flex; gap: 12px; flex-wrap: wrap; }
.rating-badge { position: absolute !important; right: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; font-size: 13px; display: flex; gap: 4px; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11px; width: fit-content; }
.avatar { border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.stars { color: var(--star); letter-spacing: 1px; white-space: nowrap; }
.verified { color: var(--brand-text); }

/* ---------- Business rows / search ---------- */
.brow { display: flex; gap: 14px; padding: 12px; align-items: center; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); text-align: left; width: 100%; transition: transform .25s; }
.brow:hover { transform: translateY(-2px); }
.brow .thumb { width: 84px; height: 84px; border-radius: 14px; display: grid; place-items: center; font-size: 38px; flex: none; }
.brow .metrics { display: flex; gap: 12px; font-size: 11px; color: var(--text-2); flex-wrap: wrap; }
.bubbles { display: flex; gap: 16px; overflow-x: auto; padding: 18px 2px 6px; scrollbar-width: none; }
.bubble { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; font-size: 13px; }
.bubble .circle { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; transition: transform .3s cubic-bezier(.3,1.6,.5,1), background .3s; }
.bubble.on .circle { background: var(--brand); transform: scale(1.06); }
.bubble.on span { color: var(--brand-text); }
.check { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--text-2); flex: none; display: grid; place-items: center; transition: background .2s; }
.check.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Discover posts ---------- */
.feed { columns: 2 340px; column-gap: 20px; }
.post { break-inside: avoid; margin-bottom: 20px; padding: 14px; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); }
.post .media { position: relative; height: 240px; border-radius: 22px; display: grid; place-items: center; font-size: 84px; margin: 12px 0; cursor: pointer; overflow: hidden; user-select: none; }
.post .media .play { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #fff; }
.post .media .burst { position: absolute; font-size: 90px; opacity: 0; transform: scale(.2); pointer-events: none; }
.post .media .burst.go { animation: burst .8s ease-out; }
@keyframes burst { 30% { opacity: 1; transform: scale(1.1); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.like.on { color: #E5484D; }
.pop { animation: pop .35s cubic-bezier(.3,1.8,.5,1); }
@keyframes pop { 50% { transform: scale(1.35); } }

/* ---------- Profile ---------- */
.banner { position: relative; height: 250px; border-radius: 0 0 28px 28px; overflow: hidden; }
.banner .big { position: absolute; right: 8%; top: 40px; font-size: 130px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.back { position: absolute; top: 16px; left: 16px; z-index: 2; }
.profile-head { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: -64px; position: relative; }
.profile-head .big-avatar { width: 128px; height: 128px; font-size: 56px; border: 6px solid var(--bg); }
.profile-head .bio { margin-top: 76px; }
.contact a { display: block; color: var(--brand-text); font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; }
.review-snip { font-size: 12px; font-weight: 600; margin: 6px 0 0; }
.seg2 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 14px; background: var(--surface-muted); margin: 22px 0 18px; }
.seg2 button { height: 38px; border-radius: 10px; font-size: 14px; transition: background .25s, box-shadow .25s; }
.seg2 button.on { background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; border-radius: 18px; overflow: hidden; }
.work-grid .w { aspect-ratio: .8; display: grid; place-items: center; font-size: 46px; position: relative; color: #fff; }
.work-grid .w span { position: absolute; left: 8px; bottom: 6px; font-size: 11px; }
.listing-row { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.listing-row.focus { outline: 2px solid var(--brand); }
.listing-row .ic { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; font-size: 28px; flex: none; }
.acc { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.acc .ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; flex: none; }
.bar { height: 8px; border-radius: 4px; background: var(--surface-muted); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.bar.star > i { background: var(--star); }

@media (max-width: 760px) {
  .profile-head { grid-template-columns: 1fr; }
  .profile-head .bio { margin-top: 0; }
  .banner { height: 210px; }
  .banner .big { font-size: 100px; }
}

/* Listing hero shown before fading into the business profile */
.hero {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: grid; place-items: center; padding: 24px; cursor: pointer;
  transition: opacity .7s ease, transform .7s ease;
}
.hero.out { opacity: 0; transform: scale(1.03); pointer-events: none; }
.hero .inner { width: min(560px, 100%); display: flex; flex-direction: column; gap: 12px; animation: zoomIn .5s cubic-bezier(.2,1,.3,1); }
@keyframes zoomIn { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.hero .art { height: 300px; border-radius: 32px; display: grid; place-items: center; font-size: 130px; }

/* ---------- Requests ---------- */
.req-hero { height: 200px; border-radius: 26px; display: grid; place-items: center; font-size: 80px; }

/* ---------- Analytics ---------- */
.stat { padding: 16px; border-radius: 20px; }
.stat .v { font-size: 30px; font-weight: 800; margin: 4px 0; font-variant-numeric: tabular-nums; }
.chart { padding: 16px; }
.chart svg { width: 100%; height: 220px; display: block; }

/* ---------- Cart ---------- */
.stepper { display: inline-flex; align-items: center; border-radius: 999px; background: var(--surface-muted); }
.stepper button { width: 36px; height: 36px; font-size: 18px; }
.stepper span { min-width: 22px; text-align: center; }

/* ---------- Chat ---------- */
.chat { display: flex; flex-direction: column; gap: 8px; padding-bottom: 90px; }
.msg { max-width: 75%; padding: 10px 14px; border-radius: 20px; font-weight: 500; font-size: 15px; animation: msgIn .35s cubic-bezier(.3,1.5,.5,1); }
.msg.me { align-self: flex-end; background: var(--brand); color: #fff; transform-origin: bottom right; }
.msg.them { align-self: flex-start; background: var(--surface-muted); transform-origin: bottom left; }
@keyframes msgIn { from { transform: scale(.6); opacity: 0; } }
.composer { position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; width: min(1080px, calc(100% - 32px)); display: flex; gap: 10px; padding: 8px; border-radius: 26px; z-index: 45; }
.composer input { flex: 1; border: 0; background: transparent; outline: none; padding: 0 12px; font-weight: 500; }
@media (max-width: 760px) { .composer { bottom: 96px; } }

/* ---------- Modal / sheet ---------- */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(5,10,25,.35); display: grid; place-items: end center; animation: fade .25s; }
@media (min-width: 761px) { .scrim { place-items: center; } }
@keyframes fade { from { opacity: 0; } }
.sheet { width: min(560px, 100%); max-height: 88vh; overflow: auto; background: var(--bg); border-radius: 28px 28px 0 0; padding: 22px; animation: sheetUp .4s cubic-bezier(.2,1,.3,1); }
@media (min-width: 761px) { .sheet { border-radius: 28px; } }
@keyframes sheetUp { from { transform: translateY(60px); opacity: 0; } }
.sheet h3 { margin: 0; font-size: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); }
.row > .field { min-width: 0; }
.field input, .field textarea, .field select { min-width: 0; max-width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; color: var(--text); outline: none; }
.field input:focus, .field textarea:focus { border-color: var(--brand); }
.star-pick button { font-size: 34px; color: var(--text-2); transition: transform .25s cubic-bezier(.3,1.8,.5,1); }
.star-pick button.on { color: var(--star); }
.star-pick button:active { transform: scale(1.3); }
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 80; padding: 12px 18px; border-radius: 999px; animation: toastIn .4s cubic-bezier(.3,1.5,.5,1); }
@keyframes toastIn { from { transform: translate(-50%, -30px); opacity: 0; } }
.compare th, .compare td { padding: 10px 8px; text-align: center; font-size: 13px; }
.compare td.best span { background: var(--brand); color: #fff; padding: 6px 10px; border-radius: 999px; }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--text-2); }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; position: relative; overflow: hidden; }
.login .blob { position: absolute; border-radius: 50%; filter: blur(80px); background: var(--brand); z-index: 0; }
.login .panel { position: relative; z-index: 1; width: min(440px, 100%); display: flex; flex-direction: column; gap: 22px; }
.login .logo-wrap { width: 140px; height: 140px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; animation: zoomIn .6s cubic-bezier(.3,1.4,.5,1); }
.login .form { animation: pageIn .6s .05s cubic-bezier(.2,.9,.3,1) backwards; display: flex; flex-direction: column; gap: 14px; }
.input { display: flex; align-items: center; gap: 12px; padding: 0 18px; height: 56px; border-radius: 18px; }
.input input { flex: 1; border: 0; background: transparent; outline: none; font-size: 16px; font-weight: 600; }
.acct { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: var(--surface-muted); }
.acct button { height: 40px; border-radius: 10px; font-size: 14px; }
.acct button.on { background: var(--brand); color: var(--on-brand); box-shadow: 0 2px 8px rgba(0,0,0,.12); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Sign-in messages */
.auth-msg { margin: 0; padding: 12px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; background: var(--brand-soft); color: var(--brand-text); }
.auth-msg.error { background: color-mix(in srgb, #E5484D 14%, transparent); color: #E5484D; }

/* ---------- Additions: photos, viewer, bookings, settings ---------- */
.btn.sm { min-height: 38px; padding: 0 14px; font-size: 14px; }
.emoji-tile { width: 100%; height: 100%; display: grid; place-items: center; font-size: inherit; }
.tilecard .photo { position: absolute; right: 0; top: 0; bottom: 0; width: 42%; z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.post .media { width: 100%; padding: 0; color: inherit; }
.post .media .emoji-tile { font-size: 84px; }
.work-grid .w { padding: 0; overflow: hidden; cursor: zoom-in; }
.work-grid .w > span:not(.emoji-tile) { z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.work-grid .w .emoji-tile { font-size: 46px; }
.work-grid .w .vid { position: absolute; top: 8px; right: 8px; font-size: 14px; z-index: 1; }
.listing-row { width: 100%; text-align: left; color: inherit; }
button.listing-row { cursor: pointer; transition: transform .2s; }
button.listing-row:hover { transform: translateY(-2px); }
.listing-row .ic { overflow: hidden; }
.listing-row.wrap { flex-wrap: wrap; }
.listing-row.dim { opacity: .55; }
.sheet-art { height: 200px; border-radius: 22px; display: grid; place-items: center; font-size: 90px; overflow: hidden; }
.demo-tag { position: absolute; left: 70px; top: 20px; padding: 6px 12px; border-radius: 999px; font-size: 12px; color: #fff; }
.callout { display: flex; gap: 16px; align-items: center; padding: 18px; border-radius: 22px; flex-wrap: wrap; }
.profile-card { position: relative; text-align: center; padding: 28px 0 24px; border-radius: 28px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-2) 28%, transparent), transparent); }
.settings { padding: 18px; margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.settings .title { font-size: 17px; }
.status { padding: 4px 10px; border-radius: 999px; font-size: 11px; white-space: nowrap; background: var(--surface-muted); color: var(--text-2); }
.status.pending { background: #FFF1CC; color: #8A5A00; }
.status.confirmed, .status.completed { background: #D6F5E3; color: #157A3E; }
.status.declined, .status.cancelled { background: #FDE0E0; color: #B42318; }
.status.placed { background: var(--brand-soft); color: var(--brand-text); }
.slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot span { display: block; text-align: center; padding: 10px 0; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--text); cursor: pointer; transition: background .2s; }
.slot input:checked + span { background: var(--brand-grad); color: #fff; border-color: transparent; }
.slot input:focus-visible + span { outline: 2px solid var(--brand); }
.msg .time { display: block; font-size: 10px; opacity: .7; margin-top: 2px; text-align: right; }
.msg-card { max-width: 82%; padding: 14px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); animation: msgIn .35s cubic-bezier(.3,1.5,.5,1); }
.msg-card.me { align-self: flex-end; } .msg-card.them { align-self: flex-start; }
.msg-system { align-self: center; max-width: 85%; text-align: center; font-size: 12px; color: var(--text-2); background: var(--surface-muted); padding: 6px 12px; border-radius: 999px; }
.msg.me { background: var(--brand-grad); }
.brow.unread { outline: 2px solid color-mix(in srgb, var(--brand-2) 60%, transparent); }
.unread-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--brand-2); flex: none; }
.check { cursor: pointer; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(1, 10, 20, .94); color: #fff; display: grid; grid-template-rows: 1fr auto; animation: fade .25s; }
.lightbox .lb-media { display: grid; place-items: center; padding: 60px 70px 10px; min-height: 0; }
.lightbox .lb-media img, .lightbox .lb-media video { max-width: 100%; max-height: 100%; border-radius: 16px; animation: zoomIn .35s cubic-bezier(.2,1,.3,1); }
.lightbox .lb-media .emoji-tile { width: min(80vw, 520px); height: min(60vh, 520px); border-radius: 28px; font-size: 140px; animation: zoomIn .35s cubic-bezier(.2,1,.3,1); }
.lightbox .lb-info { padding: 16px 24px 28px; max-width: 720px; width: 100%; margin: 0 auto; }
.lightbox .icon-btn { position: absolute; background: rgba(255,255,255,.14); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lb-close { top: 16px; right: 16px; } .lb-prev { left: 16px; top: 50%; } .lb-next { right: 16px; top: 50%; }
.lightbox .like { color: #fff; } .lightbox .like.on { color: #ff6b81; }
@media (max-width: 760px) { .lightbox .lb-media { padding: 64px 12px 6px; } .lb-prev, .lb-next { top: auto !important; bottom: 120px; } .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Business pages take on the business's own colours */
.biz-theme .work-grid { background: var(--biz-accent); padding: 4px; gap: 4px; }
.biz-theme .work-grid .w { border-radius: 4px; overflow: hidden; }
.biz-theme .seg2 button.on { color: var(--brand-text); }

/* Business form: categories and colours */
.cat-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-picks .chip { font-size: 14px; padding: 9px 14px; color: var(--text); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.cat-picks input { position: absolute; opacity: 0; pointer-events: none; }
.cat-picks .chip:has(input:checked) { background: var(--brand); color: var(--on-brand); }
.cat-picks .chip:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.palettes { display: flex; flex-wrap: wrap; gap: 10px; }
.palette { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); transition: transform .2s; }
.palette.on { outline: 3px solid var(--text); outline-offset: 2px; transform: scale(1.06); }
.swatch { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.swatch input { width: 56px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.swatch input::-webkit-color-swatch-wrapper { padding: 0; }
.swatch input::-webkit-color-swatch { border: 0; border-radius: 10px; }
.swatch input::-moz-color-swatch { border: 0; border-radius: 10px; }
.colour-preview { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.cp-banner { height: 54px; }
.cp-body { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 13px; }
.cp-btn { color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 12px; }
.cp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; }
.cp-grid i { height: 34px; border-radius: 4px; background: color-mix(in srgb, var(--surface) 80%, transparent); }

/* Discover: businesses strip */
.biz-strip { display: flex; gap: 16px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: none; }
.biz-strip::-webkit-scrollbar { display: none; }
.biz-strip a { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; text-align: center; position: relative; }
.biz-strip a > span:not(.avatar) { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.biz-strip em { position: absolute; top: -4px; right: 0; font-style: normal; font-size: 10px; background: var(--brand); color: #fff; padding: 2px 6px; border-radius: 999px; }

/* ================= Business "website" ================= */
.banner .cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner .share { position: absolute; top: 16px; right: 16px; z-index: 2; }
.biz-head { display: flex; gap: 20px; align-items: flex-end; margin-top: -64px; position: relative; }
.biz-head .big-avatar { width: 128px; height: 128px; font-size: 56px; border: 6px solid var(--bg); flex: none; }
.biz-title { flex: 1; min-width: 0; padding-bottom: 4px; }
.biz-title h1 { font-size: 30px; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) { .biz-head { flex-direction: column; align-items: flex-start; gap: 10px; } .biz-title h1 { font-size: 26px; } }
.rating-line { display: inline-flex; gap: 6px; align-items: center; color: inherit; font-size: 13px; }
.open-now { color: #1F9D55; font-weight: 700; }
.badge-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 12px; background: var(--surface); border: 1px solid var(--line); }
.owner-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.owner-hint { border: 1.5px dashed var(--line); border-radius: 16px; padding: 14px; margin: 0; font-size: 13px; }
.sec-nav { position: sticky; top: calc(var(--nav-h, 64px) + 8px); z-index: 5; display: flex; gap: 4px; overflow-x: auto; padding: 6px; border-radius: 999px; margin: 24px 0 4px; scrollbar-width: none; }
.sec-nav::-webkit-scrollbar { display: none; }
.sec-nav button { flex: none; padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--text); }
.sec-nav button:hover { background: var(--brand-soft); color: var(--brand-text); }
.biz-sec { scroll-margin-top: 140px; }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.trust-item { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); font-size: 14px; }
.trust-item .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); font-size: 18px; flex: none; }
.featured { display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 160px; gap: 6px; border-radius: 20px; overflow: hidden; }
.featured .w { position: relative; display: grid; place-items: center; font-size: 46px; color: #fff; overflow: hidden; }
.featured .w:first-child { grid-row: span 2; }
.featured .w:only-child { grid-column: span 2; grid-row: span 2; }
.featured .w span { position: absolute; left: 10px; bottom: 8px; font-size: 12px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.work-grid .pin { position: absolute; top: 6px; right: 6px; font-size: 14px; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
table.hours { width: 100%; border-collapse: collapse; font-size: 14px; }
table.hours td { padding: 7px 0; border-bottom: 1px solid var(--line); }
table.hours td:last-child { text-align: right; }
table.hours tr.today td { color: var(--brand-text); font-weight: 800; }
details.faq { padding: 0 16px; }
details.faq summary { padding: 14px 0; cursor: pointer; font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
details.faq summary::after { content: "＋"; color: var(--brand-text); }
details.faq[open] summary::after { content: "－"; }
details.faq p { margin: 0 0 14px; font-weight: 500; line-height: 1.5; }
iframe.map { display: block; width: 100%; height: 260px; border: 0; }
.join-card { display: flex; gap: 14px; align-items: center; padding: 16px; margin-top: 28px; flex-wrap: wrap; }

/* Share sheet */
.share-link { display: flex; gap: 8px; }
.share-link input { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13px; }
.qr-box { display: flex; gap: 16px; align-items: center; padding: 14px; border-radius: 18px; background: var(--surface-muted); flex-wrap: wrap; }
#qr { width: 150px; height: 150px; flex: none; background: #fff; border-radius: 12px; padding: 6px; display: grid; place-items: center; }
#qr svg { width: 100%; height: 100%; }
.qr-box > div:last-child { flex: 1; min-width: 160px; }

/* Arrange, hours, FAQ editors */
.arrange-row { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.arrange-row.off span { opacity: .45; }
.arrange-row .icon-btn { width: 34px; height: 34px; font-size: 12px; }
.arrange-row .icon-btn:disabled { opacity: .25; }
.switch { width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; transition: background .2s; flex: none; }
.switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.switch.on { background: var(--brand); }
.switch.on i { transform: translateX(18px); }
.hours-row { display: flex; align-items: center; gap: 8px; }
.hours-day { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.hours-row input[type=time], #closedPick { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; }
.hours-row:has(input[type=checkbox]:not(:checked)) input[type=time] { opacity: .35; pointer-events: none; }
#closedList .tag button { margin-left: 4px; color: inherit; opacity: .7; }
.faq-edit { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.faq-edit .link { align-self: flex-end; font-size: 13px; }
.slug-field { display: flex; align-items: center; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); padding-left: 14px; overflow: hidden; }
.slug-field span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.field .slug-field input { border: 0; padding-left: 2px; flex: 1; min-width: 0; }
.slot.taken span { opacity: .35; text-decoration: line-through; cursor: not-allowed; }

/* Dashboard */
.setup-step { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-muted); font-size: 14px; color: var(--text); text-align: left; width: 100%; }
.setup-step.done { opacity: .6; text-decoration: line-through; }
.setup-step .tick { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--brand); display: grid; place-items: center; flex: none; }
.setup-step.done .tick { background: var(--brand); color: #fff; }
.dash-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 20px; }
.dash-tile { display: flex; gap: 12px; align-items: center; padding: 14px; text-align: left; color: var(--text); font-size: 14px; transition: transform .2s; }
.dash-tile:hover { transform: translateY(-2px); }
.dash-tile .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); display: grid; place-items: center; font-size: 20px; flex: none; }

/* Already-saved photo shown in edit forms */
.current-pic { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.current-pic img, .current-pic video { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
[data-person], [data-biz] { cursor: pointer; }

/* Navigation slides away while scrolling down and back when scrolling up */
.topnav, .tabbar { transition: transform .45s cubic-bezier(.22, .9, .24, 1), opacity .35s ease; will-change: transform; }
body.nav-hidden .topnav { transform: translateY(-110%); opacity: 0; pointer-events: none; }
body.nav-hidden .tabbar { transform: translateY(calc(100% + 28px)); opacity: 0; pointer-events: none; }
.sec-nav { transition: top .45s cubic-bezier(.22, .9, .24, 1); }
body.nav-hidden .sec-nav { top: 8px; }
@media (max-width: 760px) { .sec-nav { top: 8px; } }
@media (prefers-reduced-motion: reduce) { .topnav, .tabbar, .sec-nav { transition: none; } }

/* Business page tabs: Overview | Services & products */
.biz-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin: 22px 0 8px; border-radius: 14px; background: var(--surface-muted); }
.biz-tabs button { min-height: 44px; border-radius: 10px; font-size: 14px; color: var(--text-2); display: flex; align-items: center; justify-content: center; gap: 6px; transition: background .25s, color .25s, box-shadow .25s; }
.biz-tabs button.on { background: var(--surface); color: var(--brand-text); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.biz-tabs .count { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); }
.shop-tools { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 14px; }
.shop-tools > .row { flex-wrap: wrap; }
.shop-search { flex: 1; min-width: 180px; border-radius: 999px; padding: 6px 14px; }
.shop-search input { font-size: 14px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
@media (max-width: 760px) { .shop-grid { grid-template-columns: 1fr; } }

/* Section menu on business pages: square and solid, so content behind it doesn't show through */
.sec-nav { border-radius: 0; padding: 4px 0; margin: 20px -20px 4px; background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .35); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sec-nav button { border-radius: 0; padding: 10px 14px; position: relative; }
.sec-nav button:hover { background: none; color: var(--brand-text); }
.sec-nav button:first-child { margin-left: 12px; }

/* Search results grouped by kind */
.result-group + .result-group { margin-top: 20px; }
.result-head { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); margin-bottom: 10px; }

/* Profile counts are tappable */
.stat-btn { text-align: center; color: var(--text); transition: transform .2s; }
.stat-btn:hover { transform: translateY(-2px); }
.sheet .row > .row { flex: 1; min-width: 0; }
.biz-tabs button.on { color: var(--text); box-shadow: inset 0 -3px 0 var(--brand), 0 2px 8px rgba(0,0,0,.08); }
@media (max-width: 760px) { .biz-tabs button { font-size: 13px; line-height: 1.2; padding: 0 8px; } }

/* ================= Business approval ================= */
.tag.review-pending  { background: #FFF3CD; color: #7A5B00; }
.tag.review-changes  { background: #FFE5D0; color: #8A3D00; }
.tag.review-rejected { background: #FDE2E2; color: #9B1C1C; }
.tag.review-approved { background: #D9F5E5; color: #146C43; }
.review-banner { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 16px; border-radius: 18px; margin-top: 18px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.review-banner.review-pending  { border-left: 5px solid #E0A800; }
.review-banner.review-changes  { border-left: 5px solid #E8743B; }
.review-banner.review-rejected { border-left: 5px solid #E5484D; }
.review-note { margin: 8px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--surface-muted); font-weight: 500; font-size: 14px; }
.strength .bar i { background: linear-gradient(90deg, #E0A800, #2DAA7A); transition: width .5s ease; }
.doc-row { padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.doc-row.has { border-color: color-mix(in srgb, #2DAA7A 50%, var(--line)); }
.doc-head { display: flex; gap: 12px; align-items: center; }
.doc-head .tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; }
.doc-row.has .tick { background: #2DAA7A; border-color: #2DAA7A; color: #fff; }
.doc-head label.btn { flex: none; cursor: pointer; }
.doc-head label.busy { opacity: .6; pointer-events: none; }
.doc-file { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-muted); font-size: 13px; flex-wrap: wrap; }
.admin-card { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface-muted); }

/* Show password */
.pw-toggle { flex: none; font-size: 18px; line-height: 1; padding: 6px; border-radius: 10px; opacity: .75; }
.pw-toggle:hover { opacity: 1; }
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; padding-right: 48px; }
.pw-wrap .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* Suggested FAQ questions, social links */
.faq-ideas { display: flex; flex-wrap: wrap; gap: 6px; }
.faq-ideas .chip { font-size: 12px; padding: 7px 12px; }
.social-row { display: flex; gap: 8px; align-items: center; }
.social-row select { flex: 0 0 150px; min-width: 0; }
.social-row input { flex: 1; min-width: 0; }
@media (max-width: 420px) { .social-row select { flex-basis: 120px; } }

/* Document reviews, admin tabs, dashboard */
.doc-file.bad { background: color-mix(in srgb, #E5484D 10%, var(--surface-muted)); }
.biz-tabs.admin-tabs { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
@media (max-width: 760px) { .biz-tabs.admin-tabs { grid-template-columns: 1fr 1fr; } }
.stat-link { display: block; text-align: left; color: inherit; padding: 0; transition: transform .2s; }
.stat-link:hover { transform: translateY(-2px); }

/* Business page: each section is its own tab ("mini page") that slides in */
.page-tabs { position: sticky; top: calc(var(--nav-h, 64px) + 8px); z-index: 6; display: flex; gap: 4px; overflow-x: auto; padding: 5px; margin: 22px 0 8px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0,0,0,.08); scrollbar-width: none; transition: top .35s ease; }
.page-tabs::-webkit-scrollbar { display: none; }
.page-tabs button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 10px; font-size: 14px; color: var(--text-2); display: flex; align-items: center; gap: 6px; transition: background .25s, color .25s; }
.page-tabs button:hover { color: var(--text); }
.page-tabs button.on { background: var(--brand); color: #fff; }
.page-tabs .count { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); }
.page-tabs button.on .count { background: rgba(255,255,255,.25); color: #fff; }
body.nav-hidden .page-tabs { top: 8px; }
.page-panel { min-height: 50vh; overflow-x: clip; }
.page-panel.from-right { animation: panelRight .38s cubic-bezier(.2,.9,.3,1); }
.page-panel.from-left { animation: panelLeft .38s cubic-bezier(.2,.9,.3,1); }
@keyframes panelRight { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes panelLeft { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .page-panel.from-right, .page-panel.from-left { animation: none; } }

/* Gallery: 3-column grid, or scroll through posts */
.gal-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gal-toggle { display: flex; padding: 3px; border-radius: 10px; background: var(--surface-muted); }
.gal-toggle button { width: 38px; height: 32px; border-radius: 8px; font-size: 16px; color: var(--text-2); }
.gal-toggle button.on { background: var(--surface); color: var(--brand-text); box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.gal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.gal-tile { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 10px; padding: 0; display: grid; place-items: center; cursor: pointer; background: var(--surface-muted); }
.gal-tile:first-child { border-top-left-radius: 18px; } .gal-tile:nth-child(3) { border-top-right-radius: 18px; }
.gal-tile img, .gal-tile video { transition: transform .4s ease; }
.gal-tile:hover img, .gal-tile:hover video { transform: scale(1.05); }
.gal-tile .emoji-tile { font-size: 40px; width: 100%; height: 100%; display: grid; place-items: center; }
.gal-badge { position: absolute; top: 6px; right: 6px; font-size: 12px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.gal-hover { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 15px; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; }
.gal-tile:hover .gal-hover, .gal-tile:focus-visible .gal-hover { opacity: 1; }
.gal-posts { display: flex; flex-direction: column; gap: 18px; max-width: 560px; margin: 0 auto; }
.gpost { padding: 0; overflow: hidden; scroll-margin-top: calc(var(--nav-h, 64px) + 70px); }
.gpost-media { background: #000; display: grid; place-items: center; max-height: 75vh; }
.gpost-media img, .gpost-media video { width: 100%; max-height: 75vh; object-fit: contain; display: block; }
.gpost-media .emoji-tile { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 90px; }

/* Orders: rows open details */
.order-row { cursor: pointer; transition: transform .15s, box-shadow .2s; }
.order-row:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.status.preparing { background: #FFF1CC; color: #8A5A00; }
.status.ready { background: #DCEBFF; color: #1D4ED8; }
.order-steps { list-style: none; padding: 0; margin: 16px 0; display: flex; gap: 0; }
.order-steps li { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); position: relative; }
.order-steps li::before { content: ""; position: absolute; top: 6px; left: 14px; right: 0; height: 2px; background: var(--line); }
.order-steps li:last-child::before { display: none; }
.order-steps li.done::before { background: var(--brand); }
.order-steps .dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); position: relative; z-index: 1; }
.order-steps li.done .dot { background: var(--brand); border-color: var(--brand); }
.order-steps li.cur { color: var(--text); }
.order-steps li.cur .dot { box-shadow: 0 0 0 4px var(--brand-soft); }
.order-steps li.bad .dot { background: #E5484D; border-color: #E5484D; }
.od-block { padding: 14px; border-radius: 14px; background: var(--surface-muted); margin-top: 12px; }
.od-label { font-size: 12px; color: var(--text-2); margin-bottom: 8px; }
.od-item { gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; align-items: flex-start; }
.od-total { padding: 10px 0 6px; font-size: 17px; }

/* Checkout and location */
.seg-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg-choice label { cursor: pointer; }
.seg-choice input { position: absolute; opacity: 0; pointer-events: none; }
.seg-choice span { display: block; text-align: center; padding: 12px; border-radius: 14px; border: 2px solid var(--line); color: var(--text); font-size: 14px; }
.seg-choice input:checked + span { border-color: var(--brand); background: var(--brand-soft); }
.seg-choice input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer; }
.radio-card input { margin-top: 3px; accent-color: var(--brand); }
.radio-card:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.pick-map { height: 260px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); display: flex; z-index: 0; }
#placeQ { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; }
.place-hit { text-align: left; padding: 8px 10px; border-radius: 10px; background: var(--surface-muted); font-size: 12px; color: var(--text); }
.place-hit:hover { background: var(--brand-soft); }

/* Chat safety */
.chat-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.safety-tip { font-size: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-muted); color: var(--text-2); margin-bottom: 14px; line-height: 1.5; }
.msg-warn { align-self: flex-start; max-width: 80%; font-size: 12px; padding: 8px 10px; border-radius: 10px; background: #FFF1CC; color: #6B4600; margin: -2px 0 8px; }
.msg-official { align-self: stretch; padding: 12px 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--brand-soft); margin: 6px 0; }
.msg-official p { margin: 8px 0 0; white-space: pre-line; font-weight: 500; }
.report-chat { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--surface-muted); }
.rc-msg { padding: 8px 10px; border-radius: 10px; background: var(--surface); font-size: 13px; white-space: pre-line; }
.rc-msg.bad { border-left: 3px solid #E5484D; }

/* QR sign-in */
.qr-steps { margin: 0; padding-left: 20px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; color: var(--text-2); }
.qr-login-box { display: grid; place-items: center; min-height: 220px; }
#qrLogin { width: 220px; height: 220px; padding: 10px; background: #fff; border-radius: 18px; }
#qrLogin svg { width: 100%; height: 100%; }
.qr-number { text-align: center; font-size: 46px; font-weight: 800; letter-spacing: 4px; color: var(--brand-text); }
.qr-choices { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.qr-choices .btn { font-size: 30px; font-weight: 800; min-width: 92px; min-height: 72px; }
.captcha { display: flex; justify-content: center; min-height: 0; }

/* Request card buttons wrap on small screens */
.req-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.req-actions .spacer { flex: 1 1 0; min-width: 0; }

/* Privacy policy / Terms */
.legal h2 { font-size: 19px; margin: 28px 0 8px; scroll-margin-top: calc(var(--nav-h, 64px) + 16px); }
.legal p, .legal li { font-weight: 500; line-height: 1.65; font-size: 15px; }
.legal ul { padding-left: 22px; margin: 6px 0; }
.legal ul ul { margin-top: 4px; }
.legal-toc { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--surface-muted); margin: 14px 0 6px; font-size: 14px; }
.legal-toc a { color: var(--brand-text); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; color: var(--text-2); line-height: 1.5; text-align: left; }
.consent input { margin-top: 2px; accent-color: var(--brand); flex: none; width: 18px; height: 18px; }
@media (max-width: 520px) {
  .callout { flex-wrap: wrap; }
  .callout > div[style*="flex:1"] { flex: 1 1 calc(100% - 60px); min-width: 0; }
  .callout > .btn { flex: 1 1 100%; }
}

/* ===== Step 15: chat, orders, payments, notifications, timers, moderation ===== */
.day-divider { display: flex; justify-content: center; margin: 14px 0 6px; }
.day-divider span { font-size: 11px; padding: 4px 12px; border-radius: 999px; background: var(--surface-muted); color: var(--text-2); }
.seen { align-self: flex-end; font-size: 11px; color: var(--text-2); margin: -4px 4px 6px; }
.msg.photo { padding: 4px; max-width: 72%; }
.msg.photo .msg-text { display: block; padding: 6px 8px 0; }
.chat-photo { display: block; padding: 0; border-radius: 14px; overflow: hidden; background: var(--surface-muted); min-width: 160px; min-height: 120px; }
.chat-photo img { display: block; max-width: 100%; max-height: 340px; object-fit: cover; }
.composer label.icon-btn { cursor: pointer; font-size: 18px; flex: none; }
.composer label.busy { opacity: .5; pointer-events: none; }
.msg-order { align-self: stretch; padding: 10px 14px; border-radius: 14px; border: 1px dashed color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--surface); font-size: 14px; display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.timer { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-muted); color: var(--text-2); white-space: nowrap; }
.timer.soon { background: #FFF1CC; color: #8A5A00; }
.timer.done { background: #FDE0E0; color: #B42318; }
.order-card { padding: 14px 16px; }
.order-card summary { list-style: none; cursor: pointer; }
.order-card summary::-webkit-details-marker { display: none; }
table.bank { width: 100%; font-size: 14px; border-collapse: collapse; }
table.bank td { padding: 6px 0; border-bottom: 1px solid var(--line); }
table.bank td:first-child { color: var(--text-2); width: 42%; }
.review-reply { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-muted); border-left: 3px solid var(--brand); }
.review-reply p { margin: 6px 0 0; font-weight: 500; font-size: 14px; }
.bell { width: 52px; font-size: 18px; margin-right: 8px; }
.bell .count { position: absolute; top: -4px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #E5484D; color: #fff; font-size: 11px; display: grid; place-items: center; border: 2px solid var(--bg); }
.bell .count.hidden { display: none; }
.notif-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-muted); font-size: 18px; flex: none; }
.brow.notif.unread { background: var(--brand-soft); }
.suspended-banner { margin: 12px auto 0; max-width: 1120px; padding: 12px 16px; border-radius: 14px; background: #FDE0E0; color: #7A1B14; font-size: 14px; }
.visitor-tabbar { display: none; }
@media (max-width: 760px) { .visitor-tabbar { display: flex; } }
.visitor-tabbar button.tab { background: none; border: 0; color: inherit; font: inherit; }

/* "Save your changes?" prompt over a form */
.guard { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border-radius: inherit; }
.guard-box { width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 20px; background: var(--surface); box-shadow: 0 20px 50px rgba(0,0,0,.25); }

/* ===== Works the same everywhere: Windows, Mac, iPhone, Android ===== */
/* iPhone zooms the page into any text box smaller than 16px; keep form text at 16px on touch screens. */
@media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }
/* Keep the tab bar, chat box and sheets clear of the iPhone home bar and rounded corners. */
@media (max-width: 760px) { .tabbar { bottom: calc(16px + env(safe-area-inset-bottom)); } }
.composer { bottom: calc(20px + env(safe-area-inset-bottom)); }
.sheet { padding-bottom: calc(22px + env(safe-area-inset-bottom)); max-height: 88dvh; }
.login { min-height: 100dvh; }
@supports not (height: 1dvh) { .sheet { max-height: 88vh; } .login { min-height: 100vh; } }
/* Hide the side-scroll bars on older Chrome/Edge for Windows (newer browsers use scrollbar-width above). */
.chips::-webkit-scrollbar, .bubbles::-webkit-scrollbar, .biz-strip::-webkit-scrollbar, .page-tabs::-webkit-scrollbar { display: none; }
/* Phones and tablets have no mouse: don't leave cards "lifted" after a tap, and don't need hover-only extras. */
@media (hover: none) {
  .tilecard:hover, .brow:hover, button.listing-row:hover, .dash-tile:hover, .stat-btn:hover, .stat-link:hover, .order-row:hover { transform: none; box-shadow: var(--shadow); }
  .gal-tile:hover img, .gal-tile:hover video { transform: none; }
  .gal-tile:hover .gal-hover { opacity: 0; }
}
/* Star ratings drawn the same on every system (no special half-star character needed). */
.stars .st { color: var(--line); }
.stars .st.on { color: inherit; }
.stars .st.half { background: linear-gradient(90deg, var(--star) 50%, var(--line) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Copy buttons next to phone numbers, emails and addresses */
.copyable { display: inline-flex; align-items: center; gap: 6px; }
.copy-btn { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--surface-muted); color: var(--text-2); }
.copy-btn:hover { color: var(--text); }
/* Notification settings: one switch per kind */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-muted); font-size: 14px; cursor: pointer; }
.switch-row input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
/* Colours suggested from the logo */
.logo-colours { margin: 4px 0 8px; }

/* Orders & bookings list: what kind each row is */
.kind-tag { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-text); margin-right: 4px; vertical-align: 1px; }
.kind-tag.booking { background: #FFF1CC; color: #8A5A00; }

/* Money: balances, history, owed, confirming receipt */
.stat.owed { background: #FDE0E0; color: #7A1B14; }
.stat.owed .v { color: #B42318; }
.ledger-row strong.pos { color: #157A3E; }
.ledger-row strong.neg { color: #B42318; }
.ledger-row.pending { opacity: .7; }
.status.delivered { background: #DCEBFF; color: #1D4ED8; }
.count-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #E5484D; color: #fff; vertical-align: 3px; }
.confirm-block { border: 2px solid var(--brand); background: var(--brand-soft); }

/* Tabs that are links (Your orders & bookings) */
.biz-tabs a { min-height: 44px; border-radius: 10px; font-size: 14px; color: var(--text-2); display: flex; align-items: center; justify-content: center; gap: 6px; }
.biz-tabs a.on { background: var(--surface); color: var(--text); box-shadow: inset 0 -3px 0 var(--brand), 0 2px 8px rgba(0,0,0,.08); }

/* Checkout page */
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 860px) { .checkout-grid { grid-template-columns: minmax(0, 1fr); } }
.checkout-main { display: flex; flex-direction: column; gap: 14px; }
.co-step { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.co-step h2 { font-size: 17px; margin: 0 0 4px; display: flex; align-items: center; gap: 10px; }
.co-num { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-size: 13px; flex: none; }
.checkout-side { position: sticky; top: calc(var(--nav-h, 64px) + 16px); }
.co-summary { padding: 18px; }
.co-biz { padding: 10px 0; border-bottom: 1px solid var(--line); }
.co-line { gap: 8px; font-size: 14px; padding: 4px 0; align-items: flex-start; }
.co-qty { color: var(--text-2); min-width: 26px; }
.co-total { font-size: 19px; padding: 12px 0; }
.co-trust { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-2); }
.pay-channel { align-items: center; }
.pay-channel .pc-icon { font-size: 22px; width: 32px; text-align: center; }
.pay-channel.soon { opacity: .6; cursor: not-allowed; }
@media (max-width: 860px) { .checkout-side { position: static; } }

/* Anything marked hidden stays hidden, even inside flex layouts */
[hidden] { display: none !important; }

/* Checkout: saved addresses and fee messages */
.addr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.addr-chip { font-size: 13px; padding: 8px 12px; }
.addr-chip.on { background: var(--brand); color: #fff; }
.addr-chip.on .muted { color: rgba(255,255,255,.8); }
.fee-err { font-size: 12px; color: #B42318; }
.fee-err:empty { display: none; }

/* Small phones: stat tiles shrink instead of pushing the page sideways */
@media (max-width: 420px) {
  .stat { padding: 12px 8px; }
  .stat .v { font-size: 22px; }
  .stat .muted { overflow-wrap: anywhere; }
  .grid { gap: 10px; }
}
html, body { overflow-x: clip; }

/* Admin: reported listing preview, admin shortcuts on business pages, money waiting banner */
.report-preview { display: flex; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px; border-radius: 16px; background: var(--surface-muted); border: 1px solid var(--line); color: var(--text); transition: transform .2s; }
.report-preview:hover { transform: translateY(-2px); }
.report-preview .ic { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; font-size: 28px; overflow: hidden; flex: none; }
.report-preview .ic img, .report-preview .ic video { width: 100%; height: 100%; object-fit: cover; }
.admin-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; margin-top: 14px; }
.admin-alert { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-top: 16px; border-radius: 18px; background: #FFF4D6; color: #6B4A00; font-weight: 700; }
.admin-alert .count-badge { background: #E5484D; color: #fff; }
:root[data-theme="dark"] .admin-alert { background: #3A2C05; color: #FFD66B; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .admin-alert { background: #3A2C05; color: #FFD66B; } }

/* Top bar on tablets and small laptops: keep the bell and messages buttons on screen */
.topnav > .msg-bubble, .topnav > .brand, .topnav > .btn { flex: none; }
.topnav .tabs { min-width: 0; }
.topnav .brand-name { white-space: nowrap; }
@media (max-width: 1020px) {
  .topnav { gap: 10px; }
  .topnav .tabs { margin-left: 0; }
  .topnav .tab { padding: 10px 12px; }
  .topnav .msg-bubble { width: 48px; margin-right: 0; }
}
@media (max-width: 900px) { .topnav .brand-name { display: none; } }
@media (max-width: 360px) { .home-top > .mobile-only:first-child { display: none !important; } .home-top .msg-bubble { width: 44px; } }

/* The Network logo: white on the site's dark blue, black in light mode */
.nw-logo { color: var(--logo); flex: none; }
.splash-screen { position: fixed; inset: 0; z-index: 100; background: var(--bg-wash), var(--bg); display: grid; place-items: center; }
.splash-screen .nw-logo { animation: zoomIn .6s cubic-bezier(.3,1.4,.5,1); }

/* Posts with several photos/videos: swipe sideways */
.lightbox .lb-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 60px 0 10px; place-items: initial; scrollbar-width: none; overscroll-behavior-x: contain; }
.lightbox .lb-carousel::-webkit-scrollbar { display: none; }
.lightbox .lb-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: grid; place-items: center; padding: 0 70px; min-height: 0; height: 100%; box-sizing: border-box; }
.lightbox .lb-slide img, .lightbox .lb-slide video { max-width: 100%; max-height: 100%; border-radius: 16px; }
.lb-dots { display: flex; justify-content: center; gap: 6px; padding-top: 8px; }
.lb-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .2s, transform .2s; }
.lb-dots span.on { background: #fff; transform: scale(1.25); }
.lightbox:has(.lb-dots) { grid-template-rows: 1fr auto auto; }
@media (max-width: 760px) { .lightbox .lb-carousel { padding-top: 64px; } .lightbox .lb-slide { padding: 0 12px; } }
.post-preview { display: flex; gap: 8px; flex-wrap: wrap; }
.post-preview:empty { display: none; }
.pp-tile { position: relative; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--surface-muted); display: grid; place-items: center; font-size: 20px; color: var(--text-2); }
.pp-tile img { width: 100%; height: 100%; object-fit: cover; }
.pp-tile b { position: absolute; left: 4px; top: 4px; min-width: 18px; height: 18px; border-radius: 9px; background: rgba(0,0,0,.6); color: #fff; font-size: 11px; display: grid; place-items: center; }

/* Discover: people's posts with several photos swipe sideways inside the card */
.post .post-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; place-items: initial; cursor: default; }
.post .post-carousel::-webkit-scrollbar { display: none; }
.post .post-carousel .slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; padding: 0; display: grid; place-items: center; overflow: hidden; }
.post-dots { display: flex; justify-content: center; gap: 5px; margin-top: -4px; }
.post-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.post-dots span.on { background: var(--brand); transform: scale(1.25); }

/* iPhone Safari: keep checkout and settings inside the screen */
.checkout-grid > *, .co-step, .co-step > *, .settings, .settings > * { min-width: 0; max-width: 100%; }
.co-step .row { flex-wrap: wrap; }
.co-step .row > .field { flex: 1 1 140px; }
input[type="date"], input[type="time"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-height: 50px; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.field select { -webkit-appearance: none; appearance: none; width: 100%; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
@media (max-width: 520px) { .co-when > .field { flex-basis: 100%; } }

/* Drawn icons that replace every emoji on screen (app.js drawEmoji swaps them in). Same drawings as the Instagram kit.
   They size with the text like an emoji. The masks between the markers are written by tools/build_icons.py. */
[class^="ei-"] { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; flex: none; background: var(--brand-text); -webkit-mask: var(--ei) center / contain no-repeat; mask: var(--ei) center / contain no-repeat; }
.btn.primary [class^="ei-"], .on > [class^="ei-"], [aria-selected="true"] > [class^="ei-"], .like [class^="ei-"], .stars [class^="ei-"], .star-pick [class^="ei-"],
.auth-msg.error [class^="ei-"], .lightbox [class^="ei-"], .tag[class*="review-"] [class^="ei-"], .status-pill [class^="ei-"] { background: currentColor; }
/* On a business's coloured picture tiles the icon is white, like the app icons. */
.emoji-tile [class^="ei-"], .art [class^="ei-"], .thumb [class^="ei-"], .sheet-art [class^="ei-"], .req-hero [class^="ei-"], span.avatar [class^="ei-"],
.ic[style*="gradient"] [class^="ei-"] { background: #fff; width: 1em; height: 1em; vertical-align: middle; }
.stars [class^="ei-"] { width: 1em; height: 1em; vertical-align: -.12em; }
.stars .st.half [class^="ei-"] { background: linear-gradient(90deg, var(--star) 50%, var(--line) 50%); }
.ei-dot { background: #2DAA7A; } .ei-dot-off { background: var(--text-2); }
.ei-alert { background: #E8743B; }
.icon-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-pick label { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.icon-pick label:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); background: var(--brand-soft); }
/* ICONS START */
.ei-check { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-check-circle { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='m8 12.5 2.8 2.8L16.2 9.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-close { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-alert { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5 2.5 20h19z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 9.5v4.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='17.2' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
.ei-help { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M9.4 9.4a2.6 2.6 0 1 1 3.7 2.4c-.7.3-1.1.9-1.1 1.6v.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='17' r='1.2' fill='%23000'/%3E%3C/svg%3E"); }
.ei-pin { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22s7-7.2 7-12a7 7 0 0 0-14 0c0 4.8 7 12 7 12zm0-9.4a2.6 2.6 0 1 1 0-5.2 2.6 2.6 0 0 1 0 5.2z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ei-pushpin { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3.5h6M10 3.5v5.5l-3 4h10l-3-4V3.5M12 13v8' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-chat { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5c-5 0-9 3.4-9 7.6 0 2.4 1.3 4.5 3.3 5.9L5.6 21l4.3-2.4c.7.1 1.4.2 2.1.2 5 0 9-3.4 9-7.6s-4-7.7-9-7.7z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10h8M8 13.5h5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-card { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2.5' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M2.5 10h19M6 14.5h4' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-cart { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h2l2.4 11h11l2-8H6.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='19.5' r='1.6' fill='%23000'/%3E%3Ccircle cx='17' cy='19.5' r='1.6' fill='%23000'/%3E%3C/svg%3E"); }
.ei-bag { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8h14l-1 12.5H6zM9 8V6.5a3 3 0 0 1 6 0V8' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-money { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 3.5h5l-1.3 3h-2.4zM10.3 6.5C6.3 8.3 4 11.8 4 15.3 4 18.8 7 20.5 12 20.5s8-1.7 8-5.2c0-3.5-2.3-7-6.3-8.8' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 10v7M14 11.3h-2.8a1.6 1.6 0 0 0 0 3.2h1.6a1.6 1.6 0 0 1 0 3.2H10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-cash { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Ccircle cx='12' cy='12' r='2.8' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M6 9.5v5M18 9.5v5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-payout { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='8' width='14' height='11' rx='2' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Ccircle cx='9.5' cy='13.5' r='2.3' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M16 6.5 20.5 2M17 2h3.5v3.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-receipt { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h12v18l-2-1.5-2 1.5-2-1.5-2 1.5-2-1.5L6 21z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-bank { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9.5 12 4l9 5.5zM5.5 10.5v7M10 10.5v7M14 10.5v7M18.5 10.5v7M3 20.5h18' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-hourglass { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3h10M7 21h10M8 3c0 5 8 5 8 9s-8 4-8 9M16 3c0 5-8 5-8 9s8 4 8 9' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-clock { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M12 7v5l3.5 2' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-flag { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V4M5 4h11l-2 4.5 2 4.5H5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-user { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4.2' fill='%23000'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ei-users { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='8' r='3.5' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6M16 4.8a3.5 3.5 0 0 1 0 6.4M18 14.3c2.1.7 3.5 2.6 3.5 5.7' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-user-x { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='8' r='3.5' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M3.5 20c0-3.6 2.9-6 6.5-6 1.4 0 2.6.3 3.6.9M16 15l5 5M21 15l-5 5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-pencil { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l1-4.5L15.5 5a2.1 2.1 0 0 1 3 3L8 18.5zM13.5 7l3 3' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-clip { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11.5 12.3 19.2a5 5 0 0 1-7-7l8-8a3.3 3.3 0 0 1 4.7 4.7l-8 8a1.7 1.7 0 0 1-2.4-2.4l7.3-7.3' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-lock { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 10h9a2.5 2.5 0 0 1 2.5 2.5v6a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 5 18.5v-6A2.5 2.5 0 0 1 7.5 10z' fill='%23000' fill-rule='evenodd'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-tag { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 12.5v-8a1 1 0 0 1 1-1h8L21 12l-8.5 8.5z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='8' r='1.6' fill='%23000'/%3E%3C/svg%3E"); }
.ei-doc { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 3h8l4 4v14H6zM14 3v4h4M9 12h6M9 16h6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-truck { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 6h11v10h-11zM13.5 9.5h4l3 3.5V16h-7' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7' cy='17.5' r='1.9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Ccircle cx='17' cy='17.5' r='1.9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3C/svg%3E"); }
.ei-box { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 7.5 12 3l8.5 4.5v9L12 21l-8.5-4.5zM3.5 7.5 12 12l8.5-4.5M12 12v9' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-play { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.2v13.6L18.8 12z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ei-pause { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 5h3.5v14H7zM13.5 5H17v14h-3.5z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ei-camera { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7.5h3.5L9 5h6l1.5 2.5H20a1 1 0 0 1 1 1V19a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8.5a1 1 0 0 1 1-1z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='13.5' r='3.5' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3C/svg%3E"); }
.ei-image { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.7' fill='%23000'/%3E%3Cpath d='M3.5 17.5l5-5 4 4 2.5-2.5 5.5 5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-film { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='14' rx='2' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M3 9.5h18M8.5 5 7 9.5M13.5 5 12 9.5M18.5 5 17 9.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-trophy { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0zM8 6H4.5c0 3 1.5 4.5 3.7 4.8M16 6h3.5c0 3-1.5 4.5-3.7 4.8M12 13v4M8.5 20.5h7M10 17h4v3.5h-4z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-chart { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h16M5 15l4-5 4 3 6-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-bars { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19h16M7 19V11M12 19V6M17 19v-5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-eye { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3C/svg%3E"); }
.ei-eye-off { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12zM4 4l16 16' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='3' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3C/svg%3E"); }
.ei-heart { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5S3 15 3 9a4.5 4.5 0 0 1 9-1 4.5 4.5 0 0 1 9 1c0 6-9 11.5-9 11.5z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ei-heart-o { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20S3.5 14.8 3.5 9a4.3 4.3 0 0 1 8.5-.9A4.3 4.3 0 0 1 20.5 9c0 5.8-8.5 11-8.5 11z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-trash { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-bell { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.6 2H4.4zM10 20.5a2.2 2.2 0 0 0 4 0' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-bell-off { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 16.5V11a6 6 0 0 1 12 0v5.5l1.6 2H4.4zM10 20.5a2.2 2.2 0 0 0 4 0M3.5 3.5l17 17' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-party { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 20l4.5-12 7.5 7.5zM13 4.5c.5 1.2.4 2.5-.3 3.5M18.5 10.5c1-.6 2.3-.7 3.5-.2M16 3l.5 1.5M20.5 6.5 22 6M17.5 13.5l1.5 1' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-star { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ei-star-o { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.6l2.5 5.3 5.8.7-4.3 4 1.1 5.8L12 16.6l-5.1 2.8L8 13.6l-4.3-4 5.8-.7z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-phone { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M10.5 18.5h3' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-call { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3.5h3.5l1.5 5-2.2 1.5a11 11 0 0 0 5.2 5.2l1.5-2.2 5 1.5V18a2 2 0 0 1-2 2A16.5 16.5 0 0 1 3 5.5a2 2 0 0 1 2-2z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-briefcase { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='7' width='18' height='13' rx='2' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M9 7V4.5h6V7M3 12.5h18' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-link { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4L11.5 6M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.5-1.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-mail { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='2' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-bolt { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.5 2.5 5 13.5h6l-1 8 8.5-11h-6z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ei-compass { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M15.8 8.2 13.6 13.6 8.2 15.8 10.4 10.4z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ei-download { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v11M7 10.5l5 5 5-5M4.5 20h15' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-upload { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16V5M7 9.5l5-5 5 5M4.5 20h15' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-undo { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 5.5 4.5 10 9 14.5M5 10h9.5a5 5 0 0 1 0 10H11' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-repeat { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 2.5l3 3-3 3M4 11.5v-1a5 5 0 0 1 5-5h11M7 21.5l-3-3 3-3M20 12.5v1a5 5 0 0 1-5 5H4' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-hand { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 12.5V5.5a1.5 1.5 0 0 1 3 0V11M11 10.5V4a1.5 1.5 0 0 1 3 0v7M14 10.5V5.5a1.5 1.5 0 0 1 3 0V14c0 4-2.5 6.5-6 6.5-2.5 0-4-1-5.5-3L3.8 14.3a1.5 1.5 0 0 1 2.4-1.8L8 15' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-puzzle { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8h4a2 2 0 1 1 4 0h4v4a2 2 0 1 1 0 4v4H4z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-building { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V4h10v17M15 9h4v12M3 21h18M8.5 8h3M8.5 12h3M8.5 16h3' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-home { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 11 12 4l8.5 7M5.5 9.5V20h13V9.5M10 20v-5.5h4V20' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-store { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 9.5 6 4h12l1.5 5.5M5.5 10v10h13V10M10 20v-5h4v5M4.5 9.5h15' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-megaphone { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 10v4h3l9 5V5l-9 5zM18.5 9a4 4 0 0 1 0 6M6.5 14l1.5 6h3l-1.2-5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-calendar { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6.5h16v13.5H4zM4 10.5h16M8.5 3.5v5M15.5 3.5v5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m9 15 2 2 4-4.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-smile { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M8.5 14.5a4.5 4.5 0 0 0 7 0' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9' cy='10' r='1.2' fill='%23000'/%3E%3Ccircle cx='15' cy='10' r='1.2' fill='%23000'/%3E%3C/svg%3E"); }
.ei-angry { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M8.5 16.5a4.5 4.5 0 0 1 7 0M8 9l2.5 1M16 9l-2.5 1' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-palette { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18c1.4 0 2-.8 2-1.8 0-1.4-1.3-1.8-1.3-3s.9-1.7 2.1-1.7H17a4 4 0 0 0 4-4C21 6.4 17 3 12 3z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7.5' cy='11' r='1.4' fill='%23000'/%3E%3Ccircle cx='10' cy='7' r='1.4' fill='%23000'/%3E%3Ccircle cx='14.5' cy='7' r='1.4' fill='%23000'/%3E%3C/svg%3E"); }
.ei-brush { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 3.5 11.5 12M10 13c-2.5-.4-4.6 1.1-4.6 3.6 0 1.5-.9 2.5-2.1 3 3 1 7.6.4 8.6-3 .4-1.5-.3-3.1-1.9-3.6z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-sparkle { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2.5l1.8 5.7L18.5 10l-5.7 1.8L11 17.5l-1.8-5.7L3.5 10l5.7-1.8zM18.5 14.5l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ei-laptop { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='5' width='14' height='10.5' rx='1.5' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M2.5 19h19' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-copy { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8' y='8' width='12' height='12' rx='2' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M16 8V5a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h3' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-dot { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='6' fill='%23000'/%3E%3C/svg%3E"); }
.ei-dot-off { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E"); }
.ei-target { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Ccircle cx='12' cy='12' r='5' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%23000'/%3E%3C/svg%3E"); }
.ei-ban { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M5.7 5.7l12.6 12.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-gear { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.4 13.5a7.6 7.6 0 0 0 0-3l2-1.5-2-3.5-2.4 1a7.5 7.5 0 0 0-2.6-1.5L14 2.5h-4l-.4 2.5A7.5 7.5 0 0 0 7 6.5l-2.4-1-2 3.5 2 1.5a7.6 7.6 0 0 0 0 3l-2 1.5 2 3.5 2.4-1a7.5 7.5 0 0 0 2.6 1.5l.4 2.5h4l.4-2.5a7.5 7.5 0 0 0 2.6-1.5l2.4 1 2-3.5z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-shield { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.2 8.2 7.5 9.5 4.3-1.3 7.5-4.9 7.5-9.5V6z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m8.8 12 2.3 2.3 4.3-4.6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-ghost { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 21V10a7 7 0 0 1 14 0v11l-2.3-1.8-2.4 1.8-2.3-1.8-2.3 1.8-2.4-1.8z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='9.5' cy='10' r='1.3' fill='%23000'/%3E%3Ccircle cx='14.5' cy='10' r='1.3' fill='%23000'/%3E%3C/svg%3E"); }
.ei-music { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18V5.5l11-2V16' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='6.5' cy='18' r='2.5' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Ccircle cx='17.5' cy='16' r='2.5' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3C/svg%3E"); }
.ei-at { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.5' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M15.5 12v1.5a2.5 2.5 0 0 0 5 0V12a8.5 8.5 0 1 0-3.3 6.7' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-globe { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.7 5.6 3.7 9s-1.2 6.4-3.7 9c-2.5-2.6-3.7-5.6-3.7-9S9.5 5.6 12 3z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-facebook { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='18' rx='4' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M15.5 7.5H14a2 2 0 0 0-2 2V21M9.5 12.5H15' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-utensils { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3v8M5 3v5a2 2 0 0 0 4 0V3M7 11v10M17 21V3c-2.2 1-3.5 3.6-3.5 7v3H17' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-tools { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.5 3.5a5 5 0 0 0-6 6.3L3.5 15a2.1 2.1 0 0 0 3 3l5.2-5.1a5 5 0 0 0 6.3-6l-3 3-3-.6-.6-3z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-cake { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21h16M5 21v-7.5h14V21M5 17c1.5 1.2 3 1.2 4.6 0 1.5 1.2 3.2 1.2 4.8 0 1.6 1.2 3.1 1.2 4.6 0M12 13.5V10' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 8.3c-1.2 0-1.9-.9-1.6-2C10.7 5 12 3.5 12 3.5s1.3 1.5 1.6 2.8c.3 1.1-.4 2-1.6 2z' fill='%23000' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.ei-coffee { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h12v6a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5zM16 10.5h1.5a2.5 2.5 0 0 1 0 5H16M8 3.5c-.6 1 .6 2-.2 3M12 3.5c-.6 1 .6 2-.2 3' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-shirt { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 3.5 4 6l-1.5 5 3 1.2v8.3h13v-8.3l3-1.2L20 6l-4.5-2.5a3.5 3.5 0 0 1-7 0z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-scissors { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6.5' cy='17' r='2.8' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Ccircle cx='6.5' cy='7' r='2.8' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M8.8 8.6 20 18M8.8 15.4 20 6' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-car { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 15.5V12l2.2-5h12.6l2.2 5v3.5zM3.5 12h17' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='7.5' cy='17.5' r='1.9' fill='%23000'/%3E%3Ccircle cx='16.5' cy='17.5' r='1.9' fill='%23000'/%3E%3C/svg%3E"); }
.ei-gift { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3.5' y='8.5' width='17' height='4.5' rx='1' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M5 13v8h14v-8M12 8.5V21M12 8.5C10.5 4.5 7 4.5 7 6.7 7 8.5 12 8.5 12 8.5zM12 8.5c1.5-4 5-4 5-1.8 0 1.8-5 1.8-5 1.8z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-leaf { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19C5 10 10 5 20 4c0 9-5 15-13 15zM5 19l8-8' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-book { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 19V5.5A2.5 2.5 0 0 1 6.5 3H20v14H6.5A2.5 2.5 0 0 0 4 19.5 2.5 2.5 0 0 0 6.5 22H20' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-graduation { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 9.5 12 5l10 4.5-10 4.5zM6 11.5V16c0 1.5 2.7 3 6 3s6-1.5 6-3v-4.5M22 9.5V15' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-plug { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3v5M15 3v5M6.5 8h11v3a5.5 5.5 0 0 1-11 0zM12 16.5V21' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-drop { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3s6.5 7 6.5 11.5a6.5 6.5 0 0 1-13 0C5.5 10 12 3 12 3z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-sun { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='none' stroke='%23000' stroke-width='2.1'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-fire { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.5a6.5 6.5 0 0 1-6.5-6.5c0-4 3.5-6 4-10 2.5 1.5 4 3.5 4.5 6 .8-.7 1.3-1.7 1.5-3 1.8 1.8 3 4.2 3 7a6.5 6.5 0 0 1-6.5 6.5z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-rocket { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4.5c2.5-1.5 5-1.5 5.5-1 .5.5.5 3-1 5.5L13 14.5 9.5 11zM9.5 11 6 10.5 3.5 13l4 1M13 14.5l.5 3.5-2.5 2.5-1-4M6.5 17.5c-1 1-1.5 3-1.5 3s2-.5 3-1.5' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-mountain { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 20 9 8l4 6 2-3 6.5 9z' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ei-chevron-down { --ei: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
/* ICONS END */