/* Transportation doodle wallpaper tile (seamless, stroke-only SVG used as a CSS mask).
   Kept as an inline data URI on purpose: browsers block external mask images when the
   page is opened straight from disk (file://). Editable source: assets/doodles.svg */
:root {
  --doodle-url: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22520%22 height=%22520%22 viewBox=%220 0 520 520%22%3E%3Cg fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.6%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cg transform=%22translate(302 237) rotate(16) scale(1.07)%22%3E%3Cpath d=%22M-26 8 v-6 q0-4 4-5 l7-1.5 l6-9 q1.5-2 4-2 h12 q3 0 4.5 2 l6 9 l5 1.5 q4 1 4 5 v6 M-26 8 h6 M-8 8 h16 M20 8 h6.5 M-12 -4 l4.5-8 h5 v8z M-1.5 -4 v-8 h8 l4.5 8z M-4 -15.5 v-4 h8 v4 M-1 1 h4 M23 0 h3 M-26 0 h2%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%226.5%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%222.4%22/%3E%3Ccircle cx=%2214%22 cy=%228%22 r=%226.5%22/%3E%3Ccircle cx=%2214%22 cy=%228%22 r=%222.4%22/%3E%3C/g%3E%3Cg transform=%22translate(247 345) rotate(-21) scale(1.17)%22%3E%3Cpath d=%22M-26 8 v-6 q0-4 4-5 l7-1.5 l6-9 q1.5-2 4-2 h12 q3 0 4.5 2 l6 9 l5 1.5 q4 1 4 5 v6 M-26 8 h6 M-8 8 h16 M20 8 h6.5 M-12 -4 l4.5-8 h5 v8z M-1.5 -4 v-8 h8 l4.5 8z M-4 -15.5 v-4 h8 v4 M-1 1 h4 M23 0 h3 M-26 0 h2%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%226.5%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%222.4%22/%3E%3Ccircle cx=%2214%22 cy=%228%22 r=%226.5%22/%3E%3Ccircle cx=%2214%22 cy=%228%22 r=%222.4%22/%3E%3C/g%3E%3Cg transform=%22translate(337 -4) rotate(15) scale(1.10)%22%3E%3Cpath d=%22M-26 24 C-26 4 14 14 14 -6 C14 -14 4 -18 -6 -22 M-16 24 C-16 12 26 20 26 -6 C26 -14 18 -18 8 -22%22/%3E%3Cpath stroke-dasharray=%223 4%22 d=%22M-21 24 C-21 8 20 17 20 -6 C20 -14 11 -18 1 -22%22/%3E%3C/g%3E%3Cg transform=%22translate(337 516) rotate(15) scale(1.10)%22%3E%3Cpath d=%22M-26 24 C-26 4 14 14 14 -6 C14 -14 4 -18 -6 -22 M-16 24 C-16 12 26 20 26 -6 C26 -14 18 -18 8 -22%22/%3E%3Cpath stroke-dasharray=%223 4%22 d=%22M-21 24 C-21 8 20 17 20 -6 C20 -14 11 -18 1 -22%22/%3E%3C/g%3E%3Cg transform=%22translate(240 87) rotate(-18) scale(0.93)%22%3E%3Cpath d=%22M-26 0 q0-3.5 3.5-3.5 h28 q12 0 17 3.5 q-5 3.5 -17 3.5 h-28 q-3.5 0 -3.5-3.500z M-2 -3.5 l-9 -16 h6 l15 16 M-2 3.5 l-9 16 h6 l15 -16 M-26 -3.5 l-3 -9 h5 l7 9 M10 -1 h8 M-14 0 h6%22/%3E%3C/g%3E%3Cg transform=%22translate(399 67) rotate(-12) scale(0.94)%22%3E%3Cpath d=%22M-26 0 q0-3.5 3.5-3.5 h28 q12 0 17 3.5 q-5 3.5 -17 3.5 h-28 q-3.5 0 -3.5-3.500z M-2 -3.5 l-9 -16 h6 l15 16 M-2 3.5 l-9 16 h6 l15 -16 M-26 -3.5 l-3 -9 h5 l7 9 M10 -1 h8 M-14 0 h6%22/%3E%3C/g%3E%3Cg transform=%22translate(286 459) rotate(15) scale(1.04)%22%3E%3Cpath d=%22M-26 24 C-26 4 14 14 14 -6 C14 -14 4 -18 -6 -22 M-16 24 C-16 12 26 20 26 -6 C26 -14 18 -18 8 -22%22/%3E%3Cpath stroke-dasharray=%223 4%22 d=%22M-21 24 C-21 8 20 17 20 -6 C20 -14 11 -18 1 -22%22/%3E%3C/g%3E%3Cg transform=%22translate(145 216) rotate(-7) scale(1.14)%22%3E%3Ccircle cx=%22-16%22 cy=%229%22 r=%228%22/%3E%3Ccircle cx=%2216%22 cy=%229%22 r=%228%22/%3E%3Ccircle cx=%22-16%22 cy=%229%22 r=%222.5%22/%3E%3Ccircle cx=%2216%22 cy=%229%22 r=%222.5%22/%3E%3Cpath d=%22M-16 9 L-6 -2 H5 L16 9 M5 -2 L9 -12 M5 -12 h9 M-6 -2 l-3 -6 h-9 M-14 -5 h10 M-4 3 h8 v6 h-8z M-22 -9 h5%22/%3E%3C/g%3E%3Cg transform=%22translate(-22 78) rotate(-16) scale(1.15)%22%3E%3Cpath d=%22M-20 -12 q20-10 40 0 l-2 4 h-36z M-20 -8 v6 M18 -8 l2 5 M-22 -2 h32 l10 8 v4 h-5 M-22 -2 v10 h4 M-8 8 h12 M8 -2 l5 -5 M-12 -2 v-6%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%225.5%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%221.8%22/%3E%3Ccircle cx=%2216%22 cy=%228%22 r=%225.5%22/%3E%3Ccircle cx=%2216%22 cy=%228%22 r=%221.8%22/%3E%3C/g%3E%3Cg transform=%22translate(498 78) rotate(-16) scale(1.15)%22%3E%3Cpath d=%22M-20 -12 q20-10 40 0 l-2 4 h-36z M-20 -8 v6 M18 -8 l2 5 M-22 -2 h32 l10 8 v4 h-5 M-22 -2 v10 h4 M-8 8 h12 M8 -2 l5 -5 M-12 -2 v-6%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%225.5%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%221.8%22/%3E%3Ccircle cx=%2216%22 cy=%228%22 r=%225.5%22/%3E%3Ccircle cx=%2216%22 cy=%228%22 r=%221.8%22/%3E%3C/g%3E%3Cg transform=%22translate(137 2) rotate(-4) scale(1.07)%22%3E%3Cpath d=%22M-20 -12 q20-10 40 0 l-2 4 h-36z M-20 -8 v6 M18 -8 l2 5 M-22 -2 h32 l10 8 v4 h-5 M-22 -2 v10 h4 M-8 8 h12 M8 -2 l5 -5 M-12 -2 v-6%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%225.5%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%221.8%22/%3E%3Ccircle cx=%2216%22 cy=%228%22 r=%225.5%22/%3E%3Ccircle cx=%2216%22 cy=%228%22 r=%221.8%22/%3E%3C/g%3E%3Cg transform=%22translate(137 522) rotate(-4) scale(1.07)%22%3E%3Cpath d=%22M-20 -12 q20-10 40 0 l-2 4 h-36z M-20 -8 v6 M18 -8 l2 5 M-22 -2 h32 l10 8 v4 h-5 M-22 -2 v10 h4 M-8 8 h12 M8 -2 l5 -5 M-12 -2 v-6%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%225.5%22/%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%221.8%22/%3E%3Ccircle cx=%2216%22 cy=%228%22 r=%225.5%22/%3E%3Ccircle cx=%2216%22 cy=%228%22 r=%221.8%22/%3E%3C/g%3E%3Cg transform=%22translate(28 468) rotate(13) scale(1.10)%22%3E%3Ccircle cx=%22-16%22 cy=%229%22 r=%228%22/%3E%3Ccircle cx=%2216%22 cy=%229%22 r=%228%22/%3E%3Ccircle cx=%22-16%22 cy=%229%22 r=%222.5%22/%3E%3Ccircle cx=%2216%22 cy=%229%22 r=%222.5%22/%3E%3Cpath d=%22M-16 9 L-6 -2 H5 L16 9 M5 -2 L9 -12 M5 -12 h9 M-6 -2 l-3 -6 h-9 M-14 -5 h10 M-4 3 h8 v6 h-8z M-22 -9 h5%22/%3E%3C/g%3E%3Cg transform=%22translate(548 468) rotate(13) scale(1.10)%22%3E%3Ccircle cx=%22-16%22 cy=%229%22 r=%228%22/%3E%3Ccircle cx=%2216%22 cy=%229%22 r=%228%22/%3E%3Ccircle cx=%22-16%22 cy=%229%22 r=%222.5%22/%3E%3Ccircle cx=%2216%22 cy=%229%22 r=%222.5%22/%3E%3Cpath d=%22M-16 9 L-6 -2 H5 L16 9 M5 -2 L9 -12 M5 -12 h9 M-6 -2 l-3 -6 h-9 M-14 -5 h10 M-4 3 h8 v6 h-8z M-22 -9 h5%22/%3E%3C/g%3E%3Cg transform=%22translate(415 204) rotate(-5) scale(1.15)%22%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%229%22/%3E%3Ccircle cx=%2214%22 cy=%228%22 r=%229%22/%3E%3Cpath d=%22M-14 8 L-5 -8 H7 L14 8 M-5 -8 L0 8 H14 M7 -8 l-2 -5 h6 M-5 -8 h-5 M-7 -11 h6 M0 8 l-2 3 M0 8 l2 -3%22/%3E%3C/g%3E%3Cg transform=%22translate(109 84) rotate(-8) scale(0.94)%22%3E%3Ccircle cx=%22-14%22 cy=%228%22 r=%229%22/%3E%3Ccircle cx=%2214%22 cy=%228%22 r=%229%22/%3E%3Cpath d=%22M-14 8 L-5 -8 H7 L14 8 M-5 -8 L0 8 H14 M7 -8 l-2 -5 h6 M-5 -8 h-5 M-7 -11 h6 M0 8 l-2 3 M0 8 l2 -3%22/%3E%3C/g%3E%3Cg transform=%22translate(319 77) rotate(-12) scale(1.15)%22%3E%3Ccircle cx=%22-18%22 cy=%2214%22 r=%226%22/%3E%3Ccircle cx=%2218%22 cy=%2214%22 r=%226%22/%3E%3Cpath d=%22M-18 14 h-0.1 M-12 14 h0 M-12 8 h26 q4 0 4 6 M14 8 L11 -18 M6 -18 h14 M-12 8 v6%22/%3E%3C/g%3E%3Cg transform=%22translate(-4 242) rotate(-1) scale(1.14)%22%3E%3Ccircle cx=%22-18%22 cy=%2214%22 r=%226%22/%3E%3Ccircle cx=%2218%22 cy=%2214%22 r=%226%22/%3E%3Cpath d=%22M-18 14 h-0.1 M-12 14 h0 M-12 8 h26 q4 0 4 6 M14 8 L11 -18 M6 -18 h14 M-12 8 v6%22/%3E%3C/g%3E%3Cg transform=%22translate(516 242) rotate(-1) scale(1.14)%22%3E%3Ccircle cx=%22-18%22 cy=%2214%22 r=%226%22/%3E%3Ccircle cx=%2218%22 cy=%2214%22 r=%226%22/%3E%3Cpath d=%22M-18 14 h-0.1 M-12 14 h0 M-12 8 h26 q4 0 4 6 M14 8 L11 -18 M6 -18 h14 M-12 8 v6%22/%3E%3C/g%3E%3Cg transform=%22translate(53 178) rotate(-11) scale(0.94)%22%3E%3Cpath d=%22M-22 -14 l14 5 l16-5 l14 5 v24 l-14-5 l-16 5 l-14-5z M-8 -9 v24 M8 -14 v24 M-3 -2 a3 3 0 1 1 6 0 q0 3 -3 6 q-3-3 -3-6z%22/%3E%3C/g%3E%3Cg transform=%22translate(449 362) rotate(-11) scale(1.17)%22%3E%3Cpath d=%22M-22 9 v-17 q0-3 3-3 h6 q3 9 13 9 q12 0 18 7 v4z M-22 9 h40 M-12 -3 l5 3 M-8 -7 l5 3 M-22 4 h40%22/%3E%3C/g%3E%3Cg transform=%22translate(87 401) rotate(2) scale(1.02)%22%3E%3Cpath d=%22M-22 9 v-17 q0-3 3-3 h6 q3 9 13 9 q12 0 18 7 v4z M-22 9 h40 M-12 -3 l5 3 M-8 -7 l5 3 M-22 4 h40%22/%3E%3C/g%3E%3Cg transform=%22translate(171 116) rotate(15) scale(1.12)%22%3E%3Cpath d=%22M-22 -14 l14 5 l16-5 l14 5 v24 l-14-5 l-16 5 l-14-5z M-8 -9 v24 M8 -14 v24 M-3 -2 a3 3 0 1 1 6 0 q0 3 -3 6 q-3-3 -3-6z%22/%3E%3C/g%3E%3Cg transform=%22translate(106 325) rotate(19) scale(0.97)%22%3E%3Cpath d=%22M-13 -19 h26 a4 4 0 0 1 4 4 v26 h-34 v-26 a4 4 0 0 1 4-4z M-11 -13 h22 v13 h-22z M-6 -16 h12 M-9 5 h18 M-13 11 l-5 8 M13 11 l5 8 M-8 19 h16%22/%3E%3Ccircle cx=%22-9%22 cy=%226%22 r=%220.1%22/%3E%3Ccircle cx=%22-8%22 cy=%228%22 r=%222%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%222%22/%3E%3C/g%3E%3Cg transform=%22translate(44 344) rotate(20) scale(1.13)%22%3E%3Ccircle cx=%22-14%22 cy=%220%22 r=%228%22/%3E%3Ccircle cx=%22-14%22 cy=%220%22 r=%223%22/%3E%3Cpath d=%22M-6 0 h26 M13 0 v7 M19 0 v5%22/%3E%3C/g%3E%3Cg transform=%22translate(-15 338) rotate(1) scale(0.92)%22%3E%3Cpath d=%22M-13 -19 h26 a4 4 0 0 1 4 4 v26 h-34 v-26 a4 4 0 0 1 4-4z M-11 -13 h22 v13 h-22z M-6 -16 h12 M-9 5 h18 M-13 11 l-5 8 M13 11 l5 8 M-8 19 h16%22/%3E%3Ccircle cx=%22-9%22 cy=%226%22 r=%220.1%22/%3E%3Ccircle cx=%22-8%22 cy=%228%22 r=%222%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%222%22/%3E%3C/g%3E%3Cg transform=%22translate(505 338) rotate(1) scale(0.92)%22%3E%3Cpath d=%22M-13 -19 h26 a4 4 0 0 1 4 4 v26 h-34 v-26 a4 4 0 0 1 4-4z M-11 -13 h22 v13 h-22z M-6 -16 h12 M-9 5 h18 M-13 11 l-5 8 M13 11 l5 8 M-8 19 h16%22/%3E%3Ccircle cx=%22-9%22 cy=%226%22 r=%220.1%22/%3E%3Ccircle cx=%22-8%22 cy=%228%22 r=%222%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%222%22/%3E%3C/g%3E%3Cg transform=%22translate(2 416) rotate(-16) scale(0.97)%22%3E%3Ccircle cx=%22-14%22 cy=%220%22 r=%228%22/%3E%3Ccircle cx=%22-14%22 cy=%220%22 r=%223%22/%3E%3Cpath d=%22M-6 0 h26 M13 0 v7 M19 0 v5%22/%3E%3C/g%3E%3Cg transform=%22translate(522 416) rotate(-16) scale(0.97)%22%3E%3Ccircle cx=%22-14%22 cy=%220%22 r=%228%22/%3E%3Ccircle cx=%22-14%22 cy=%220%22 r=%223%22/%3E%3Cpath d=%22M-6 0 h26 M13 0 v7 M19 0 v5%22/%3E%3C/g%3E%3Cg transform=%22translate(377 289) rotate(-8) scale(1.04)%22%3E%3Cpath d=%22M-8 -20 h16 l-3 10 h-10z M0 -10 v30 M-6 22 h12 M-2 -22 h4 M-8 -4 q8 8 16 0%22/%3E%3C/g%3E%3Cg transform=%22translate(291 129) rotate(-11) scale(0.95)%22%3E%3Cpath d=%22M-8 -20 h16 l-3 10 h-10z M0 -10 v30 M-6 22 h12 M-2 -22 h4 M-8 -4 q8 8 16 0%22/%3E%3C/g%3E%3Cg transform=%22translate(235 277) rotate(-1) scale(1.10)%22%3E%3Crect x=%22-8%22 y=%22-20%22 width=%2216%22 height=%2234%22 rx=%225%22/%3E%3Ccircle cy=%22-11%22 r=%223.4%22/%3E%3Ccircle cy=%22-2%22 r=%223.4%22/%3E%3Ccircle cy=%227%22 r=%223.4%22/%3E%3Cpath d=%22M-11 -14 l3 -2 M11 -14 l-3 -2 M0 14 v10 M-6 24 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(364 456) rotate(21) scale(1.16)%22%3E%3Cpath d=%22M-20 0 a20 18 0 0 1 40 0 q-5 -4 -10 0 q-5 -4 -10 0 q-5 -4 -10 0 q-5 -4 -10 0z M0 0 v20 q0 5 -5 5 q-4 0 -4 -4 M0 -18 v-4%22/%3E%3C/g%3E%3Cg transform=%22translate(38 125) rotate(-20) scale(1.03)%22%3E%3Cpath d=%22M-24 -4 l24 -12 l24 12 l-24 12z M-13 2 v11 q13 9 26 0 v-11 M22 -4 v13 M20 9 l2 5 l2 -5%22/%3E%3C/g%3E%3Cg transform=%22translate(372 343) rotate(-17) scale(0.96)%22%3E%3Cpath d=%22M-24 -4 l24 -12 l24 12 l-24 12z M-13 2 v11 q13 9 26 0 v-11 M22 -4 v13 M20 9 l2 5 l2 -5%22/%3E%3C/g%3E%3Cg transform=%22translate(268 176) rotate(-15) scale(1.03)%22%3E%3Cpath d=%22M-12 -20 h24 a3 3 0 0 1 3 3 v28 h-30 v-28 a3 3 0 0 1 3-3z M-11 -14 h22 v13 h-22z M-6 -18 h12 M-14 5 h28 M-14 11 v5 h6 v-5 M8 11 v5 h6 v-5 M-15 -12 h-3 v6 h3 M15 -12 h3 v6 h-3%22/%3E%3Ccircle cx=%22-8%22 cy=%228%22 r=%222.2%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%222.2%22/%3E%3C/g%3E%3Cg transform=%22translate(229 9) rotate(-8) scale(1.06)%22%3E%3Cpath d=%22M-12 -20 h24 a3 3 0 0 1 3 3 v28 h-30 v-28 a3 3 0 0 1 3-3z M-11 -14 h22 v13 h-22z M-6 -18 h12 M-14 5 h28 M-14 11 v5 h6 v-5 M8 11 v5 h6 v-5 M-15 -12 h-3 v6 h3 M15 -12 h3 v6 h-3%22/%3E%3Ccircle cx=%22-8%22 cy=%228%22 r=%222.2%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%222.2%22/%3E%3C/g%3E%3Cg transform=%22translate(229 529) rotate(-8) scale(1.06)%22%3E%3Cpath d=%22M-12 -20 h24 a3 3 0 0 1 3 3 v28 h-30 v-28 a3 3 0 0 1 3-3z M-11 -14 h22 v13 h-22z M-6 -18 h12 M-14 5 h28 M-14 11 v5 h6 v-5 M8 11 v5 h6 v-5 M-15 -12 h-3 v6 h3 M15 -12 h3 v6 h-3%22/%3E%3Ccircle cx=%22-8%22 cy=%228%22 r=%222.2%22/%3E%3Ccircle cx=%228%22 cy=%228%22 r=%222.2%22/%3E%3C/g%3E%3Cg transform=%22translate(410 -15) rotate(-19) scale(1.18)%22%3E%3Cpath d=%22M-20 0 a20 18 0 0 1 40 0 q-5 -4 -10 0 q-5 -4 -10 0 q-5 -4 -10 0 q-5 -4 -10 0z M0 0 v20 q0 5 -5 5 q-4 0 -4 -4 M0 -18 v-4%22/%3E%3C/g%3E%3Cg transform=%22translate(410 505) rotate(-19) scale(1.18)%22%3E%3Cpath d=%22M-20 0 a20 18 0 0 1 40 0 q-5 -4 -10 0 q-5 -4 -10 0 q-5 -4 -10 0 q-5 -4 -10 0z M0 0 v20 q0 5 -5 5 q-4 0 -4 -4 M0 -18 v-4%22/%3E%3C/g%3E%3Cg transform=%22translate(426 134) rotate(-17) scale(1.16)%22%3E%3Cpath d=%22M-18 18 V-6 h13 V-16 l11 -2 v36 M6 -8 h12 V18 M-22 18 h44 M-13 0 h4 M-13 7 h4 M-1 -8 h4 M-1 0 h4 M-1 8 h4 M10 0 h4 M10 8 h4%22/%3E%3Cpath d=%22M-5 18 v-6 h5 v6%22/%3E%3C/g%3E%3Cg transform=%22translate(176 288) rotate(20) scale(1.04)%22%3E%3Cpath d=%22M-18 18 V-6 h13 V-16 l11 -2 v36 M6 -8 h12 V18 M-22 18 h44 M-13 0 h4 M-13 7 h4 M-1 -8 h4 M-1 0 h4 M-1 8 h4 M10 0 h4 M10 8 h4%22/%3E%3Cpath d=%22M-5 18 v-6 h5 v6%22/%3E%3C/g%3E%3Cg transform=%22translate(67 274) rotate(-13) scale(0.99)%22%3E%3Cpath d=%22M-22 -14 h44 v28 h-44z M-14 -14 l-3 28 M-6 -14 l-1 28 M4 -14 l1 28 M14 -14 l3 28%22/%3E%3C/g%3E%3Cg transform=%22translate(84 26) rotate(-14) scale(0.95)%22%3E%3Crect x=%22-9%22 y=%22-12%22 width=%2218%22 height=%2230%22 rx=%228%22/%3E%3Ccircle cy=%22-4%22 r=%223%22/%3E%3Ccircle cy=%225%22 r=%222.2%22/%3E%3Cpath d=%22M-3 12 h6 M0 -12 v-6%22/%3E%3Ccircle cy=%22-22%22 r=%224.5%22/%3E%3C/g%3E%3Cg transform=%22translate(159 395) rotate(-10) scale(1.00)%22%3E%3Cpath d=%22M-19 -16 h38 q4 0 4 4 v18 q0 4 -4 4 h-20 l-9 9 v-9 h-9 q-4 0 -4-4 v-18 q0 -4 4 -4z M-1 -10 c-5 -6 -5 -9 0 -9 c5 0 5 3 0 9z%22/%3E%3Ccircle cx=%22-1%22 cy=%22-6%22 r=%220.1%22/%3E%3Cpath d=%22M-10 0 h20 M-10 5 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(-9 178) rotate(16) scale(1.10)%22%3E%3Cpath d=%22M-19 -16 h38 q4 0 4 4 v18 q0 4 -4 4 h-20 l-9 9 v-9 h-9 q-4 0 -4-4 v-18 q0 -4 4 -4z M-1 -10 c-5 -6 -5 -9 0 -9 c5 0 5 3 0 9z%22/%3E%3Ccircle cx=%22-1%22 cy=%22-6%22 r=%220.1%22/%3E%3Cpath d=%22M-10 0 h20 M-10 5 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(511 178) rotate(16) scale(1.10)%22%3E%3Cpath d=%22M-19 -16 h38 q4 0 4 4 v18 q0 4 -4 4 h-20 l-9 9 v-9 h-9 q-4 0 -4-4 v-18 q0 -4 4 -4z M-1 -10 c-5 -6 -5 -9 0 -9 c5 0 5 3 0 9z%22/%3E%3Ccircle cx=%22-1%22 cy=%22-6%22 r=%220.1%22/%3E%3Cpath d=%22M-10 0 h20 M-10 5 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(349 147) rotate(-12) scale(1.15)%22%3E%3Crect x=%22-9%22 y=%22-12%22 width=%2218%22 height=%2230%22 rx=%228%22/%3E%3Ccircle cy=%22-4%22 r=%223%22/%3E%3Ccircle cy=%225%22 r=%222.2%22/%3E%3Cpath d=%22M-3 12 h6 M0 -12 v-6%22/%3E%3Ccircle cy=%22-22%22 r=%224.5%22/%3E%3C/g%3E%3Cg transform=%22translate(22 12) rotate(-9) scale(1.02)%22%3E%3Crect x=%22-8%22 y=%22-20%22 width=%2216%22 height=%2234%22 rx=%225%22/%3E%3Ccircle cy=%22-11%22 r=%223.4%22/%3E%3Ccircle cy=%22-2%22 r=%223.4%22/%3E%3Ccircle cy=%227%22 r=%223.4%22/%3E%3Cpath d=%22M-11 -14 l3 -2 M11 -14 l-3 -2 M0 14 v10 M-6 24 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(22 532) rotate(-9) scale(1.02)%22%3E%3Crect x=%22-8%22 y=%22-20%22 width=%2216%22 height=%2234%22 rx=%225%22/%3E%3Ccircle cy=%22-11%22 r=%223.4%22/%3E%3Ccircle cy=%22-2%22 r=%223.4%22/%3E%3Ccircle cy=%227%22 r=%223.4%22/%3E%3Cpath d=%22M-11 -14 l3 -2 M11 -14 l-3 -2 M0 14 v10 M-6 24 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(542 12) rotate(-9) scale(1.02)%22%3E%3Crect x=%22-8%22 y=%22-20%22 width=%2216%22 height=%2234%22 rx=%225%22/%3E%3Ccircle cy=%22-11%22 r=%223.4%22/%3E%3Ccircle cy=%22-2%22 r=%223.4%22/%3E%3Ccircle cy=%227%22 r=%223.4%22/%3E%3Cpath d=%22M-11 -14 l3 -2 M11 -14 l-3 -2 M0 14 v10 M-6 24 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(542 532) rotate(-9) scale(1.02)%22%3E%3Crect x=%22-8%22 y=%22-20%22 width=%2216%22 height=%2234%22 rx=%225%22/%3E%3Ccircle cy=%22-11%22 r=%223.4%22/%3E%3Ccircle cy=%22-2%22 r=%223.4%22/%3E%3Ccircle cy=%227%22 r=%223.4%22/%3E%3Cpath d=%22M-11 -14 l3 -2 M11 -14 l-3 -2 M0 14 v10 M-6 24 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(203 170) rotate(23) scale(1.15)%22%3E%3Cpath d=%22M-22 -14 h44 v28 h-44z M-14 -14 l-3 28 M-6 -14 l-1 28 M4 -14 l1 28 M14 -14 l3 28%22/%3E%3C/g%3E%3Cg transform=%22translate(418 430) rotate(4) scale(1.14)%22%3E%3Cpath d=%22M-16 6 v-10 q0-3 3-4 l3-8 q1-3 4-3 h12 q3 0 4 3 l3 8 q3 1 3 4 v10z M-9 -9 l2-7 h14 l2 7z M-5 1 h10 M-5 4 h10 M-13 6 v4 h5 v-4 M8 6 v4 h5 v-4 M-16 -6 h-3 M16 -6 h3%22/%3E%3Ccircle cx=%22-10%22 cy=%22-2%22 r=%222.4%22/%3E%3Ccircle cx=%2210%22 cy=%22-2%22 r=%222.4%22/%3E%3C/g%3E%3Cg transform=%22translate(321 334) rotate(-20) scale(1.12)%22%3E%3Cpath d=%22M-12 -10 q0-9 12-9 t12 9 v22 q0 4-4 4 h-16 q-4 0-4-4z M-8 -1 h16 v11 h-16z M-4 -19 q4 -5 8 0 M-12 2 h-4 v11 h4 M12 2 h4 v11 h-4 M-3 3 h6%22/%3E%3C/g%3E%3Cg transform=%22translate(487 9) rotate(-2) scale(1.17)%22%3E%3Cpath d=%22M-12 -10 q0-9 12-9 t12 9 v22 q0 4-4 4 h-16 q-4 0-4-4z M-8 -1 h16 v11 h-16z M-4 -19 q4 -5 8 0 M-12 2 h-4 v11 h4 M12 2 h4 v11 h-4 M-3 3 h6%22/%3E%3C/g%3E%3Cg transform=%22translate(487 529) rotate(-2) scale(1.17)%22%3E%3Cpath d=%22M-12 -10 q0-9 12-9 t12 9 v22 q0 4-4 4 h-16 q-4 0-4-4z M-8 -1 h16 v11 h-16z M-4 -19 q4 -5 8 0 M-12 2 h-4 v11 h4 M12 2 h4 v11 h-4 M-3 3 h6%22/%3E%3C/g%3E%3Cg transform=%22translate(108 471) rotate(-0) scale(0.96)%22%3E%3Cpath d=%22M-16 6 v-10 q0-3 3-4 l3-8 q1-3 4-3 h12 q3 0 4 3 l3 8 q3 1 3 4 v10z M-9 -9 l2-7 h14 l2 7z M-5 1 h10 M-5 4 h10 M-13 6 v4 h5 v-4 M8 6 v4 h5 v-4 M-16 -6 h-3 M16 -6 h3%22/%3E%3Ccircle cx=%22-10%22 cy=%22-2%22 r=%222.4%22/%3E%3Ccircle cx=%2210%22 cy=%22-2%22 r=%222.4%22/%3E%3C/g%3E%3Cg transform=%22translate(178 47) rotate(-13) scale(0.94)%22%3E%3Cpath d=%22M-20 10 a20 20 0 1 1 40 0 M-20 10 h5 M15 10 h5 M-15 -3 l3.5 2 M-8 -13 l2.5 3.5 M0 -17 v5 M8 -13 l-2.5 3.5 M15 -3 l-3.5 2 M0 10 L9 -6 M-9 16 h18%22/%3E%3Ccircle cy=%2210%22 r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(112 141) rotate(-12) scale(1.14)%22%3E%3Cpath d=%22M0 22 v-14 M-6 22 h12 M0 8 q-14 0 -14-12 q0-8 8-9 q2-8 10-7 q8 1 9 8 q8 2 7 10 q-1 10 -12 10z M0 0 l-5-5 M0 4 l6-6%22/%3E%3C/g%3E%3Cg transform=%22translate(346 197) rotate(-6) scale(0.93)%22%3E%3Crect x=%22-15%22 y=%22-15%22 width=%2230%22 height=%2230%22 rx=%226%22/%3E%3Cpath d=%22M-5 9 v-18 h8 a5.5 5.5 0 0 1 0 11 h-8 M0 15 v10 M-6 25 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(217 449) rotate(24) scale(1.01)%22%3E%3Cpath d=%22M0 22 v-14 M-6 22 h12 M0 8 q-14 0 -14-12 q0-8 8-9 q2-8 10-7 q8 1 9 8 q8 2 7 10 q-1 10 -12 10z M0 0 l-5-5 M0 4 l6-6%22/%3E%3C/g%3E%3Cg transform=%22translate(292 394) rotate(-22) scale(0.93)%22%3E%3Crect x=%22-20%22 y=%22-13%22 width=%2240%22 height=%2226%22 rx=%224%22/%3E%3Ccircle cx=%22-9%22 cy=%22-3%22 r=%224%22/%3E%3Cpath d=%22M-16 9 q7 -9 14 0 M3 -5 h12 M3 1 h12 M3 7 h7%22/%3E%3C/g%3E%3Cg transform=%22translate(67 224) rotate(-20) scale(0.95)%22%3E%3Crect x=%22-20%22 y=%22-13%22 width=%2240%22 height=%2226%22 rx=%224%22/%3E%3Ccircle cx=%22-9%22 cy=%22-3%22 r=%224%22/%3E%3Cpath d=%22M-16 9 q7 -9 14 0 M3 -5 h12 M3 1 h12 M3 7 h7%22/%3E%3C/g%3E%3Cg transform=%22translate(448 47) rotate(15) scale(0.98)%22%3E%3Crect x=%22-11%22 y=%22-20%22 width=%2222%22 height=%2240%22 rx=%225%22/%3E%3Cpath d=%22M-3 -16 h6 M-6 12 C-6 2 6 8 6 -3%22 stroke-dasharray=%222.5 3%22/%3E%3Ccircle cx=%22-6%22 cy=%2212%22 r=%222%22/%3E%3Cpath d=%22M6 -4 c-4 -5 -4 -8 0 -8 c4 0 4 3 0 8z M-2 17 h4%22/%3E%3C/g%3E%3Cg transform=%22translate(344 386) rotate(-16) scale(1.14)%22%3E%3Cpath d=%22M-18 -8 h30 q4 0 4 4 v16 q0 4 -4 4 h-26 q-4 0 -4-4z M-18 -8 l22 -7 q3-1 4 2 v5 M12 2 h8 v7 h-8 q-3.5 0 -3.5 -3.5 t3.5 -3.500z%22/%3E%3Ccircle cx=%2213%22 cy=%225.5%22 r=%221%22/%3E%3C/g%3E%3Cg transform=%22translate(431 271) rotate(-4) scale(1.09)%22%3E%3Crect x=%22-21%22 y=%22-9%22 width=%2242%22 height=%2218%22 rx=%224%22/%3E%3Cpath d=%22M-15 -3 h5 M-15 3 h3 M-6 -3 v6 M-1 -3 v6 M4 -3 v6 M9 -3 v6 M-17 -9 v-0.1%22/%3E%3Ccircle cx=%22-17%22 cy=%220%22 r=%220.1%22/%3E%3C/g%3E%3Cg transform=%22translate(53 74) rotate(-13) scale(0.99)%22%3E%3Cpath d=%22M-20 10 a20 20 0 1 1 40 0 M-20 10 h5 M15 10 h5 M-15 -3 l3.5 2 M-8 -13 l2.5 3.5 M0 -17 v5 M8 -13 l-2.5 3.5 M15 -3 l-3.5 2 M0 10 L9 -6 M-9 16 h18%22/%3E%3Ccircle cy=%2210%22 r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(486 451) rotate(19) scale(0.98)%22%3E%3Cpath d=%22M-13 -18 h26 v36 l-4.3-3 l-4.3 3 l-4.4-3 l-4.4 3 l-4.3-3 l-4.3 3z M-8 -11 h16 M-8 -5 h16 M-8 1 h9%22/%3E%3Ccircle cx=%226%22 cy=%229%22 r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(159 337) rotate(-18) scale(0.99)%22%3E%3Cpath d=%22M-10 -18 h16 v34 h-16z M-7 -13 h10 v9 h-10z M6 -10 h4 q4 0 4 4 v10 q0 3 3 3 q3 0 3-3 v-13 l-4-5 M-13 16 h22%22/%3E%3C/g%3E%3Cg transform=%22translate(202 229) rotate(11) scale(0.94)%22%3E%3Crect x=%22-15%22 y=%22-15%22 width=%2230%22 height=%2230%22 rx=%226%22/%3E%3Cpath d=%22M-5 9 v-18 h8 a5.5 5.5 0 0 1 0 11 h-8 M0 15 v10 M-6 25 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(470 303) rotate(-7) scale(0.95)%22%3E%3Crect x=%22-11%22 y=%22-20%22 width=%2222%22 height=%2240%22 rx=%225%22/%3E%3Cpath d=%22M-3 -16 h6 M-6 12 C-6 2 6 8 6 -3%22 stroke-dasharray=%222.5 3%22/%3E%3Ccircle cx=%22-6%22 cy=%2212%22 r=%222%22/%3E%3Cpath d=%22M6 -4 c-4 -5 -4 -8 0 -8 c4 0 4 3 0 8z M-2 17 h4%22/%3E%3C/g%3E%3Cg transform=%22translate(168 470) rotate(-19) scale(1.04)%22%3E%3Cpath d=%22M-13 -18 h26 v36 l-4.3-3 l-4.3 3 l-4.4-3 l-4.4 3 l-4.3-3 l-4.3 3z M-8 -11 h16 M-8 -5 h16 M-8 1 h9%22/%3E%3Ccircle cx=%226%22 cy=%229%22 r=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(364 241) rotate(14) scale(0.96)%22%3E%3Crect x=%22-21%22 y=%22-9%22 width=%2242%22 height=%2218%22 rx=%224%22/%3E%3Cpath d=%22M-15 -3 h5 M-15 3 h3 M-6 -3 v6 M-1 -3 v6 M4 -3 v6 M9 -3 v6 M-17 -9 v-0.1%22/%3E%3Ccircle cx=%22-17%22 cy=%220%22 r=%220.1%22/%3E%3C/g%3E%3Cg transform=%22translate(392 387) rotate(18) scale(0.93)%22%3E%3Cpath d=%22M-10 -18 h16 v34 h-16z M-7 -13 h10 v9 h-10z M6 -10 h4 q4 0 4 4 v10 q0 3 3 3 q3 0 3-3 v-13 l-4-5 M-13 16 h22%22/%3E%3C/g%3E%3Cg transform=%22translate(210 397) rotate(11) scale(1.08)%22%3E%3Cpath d=%22M-18 -8 h30 q4 0 4 4 v16 q0 4 -4 4 h-26 q-4 0 -4-4z M-18 -8 l22 -7 q3-1 4 2 v5 M12 2 h8 v7 h-8 q-3.5 0 -3.5 -3.5 t3.5 -3.500z%22/%3E%3Ccircle cx=%2213%22 cy=%225.5%22 r=%221%22/%3E%3C/g%3E%3Cg transform=%22translate(459 173) rotate(15) scale(0.98)%22%3E%3Cpath d=%22M-10 -18 q-4 0 -4 5 l3 18 h22 l3 9 h6 M-10 -18 h6 q4 0 5 4 l3 10 M-11 11 v8 M9 11 v8 M-14 19 h28%22/%3E%3C/g%3E%3Cg transform=%22translate(14 297) rotate(-9) scale(0.99)%22%3E%3Cpath d=%22M-6 -16 h12 l9 9 v12 l-9 9 h-12 l-9-9 v-12z M-5 -10 h10 M-5 -4 h10 M-5 2 h6 M0 17 v12%22/%3E%3C/g%3E%3Cg transform=%22translate(534 297) rotate(-9) scale(0.99)%22%3E%3Cpath d=%22M-6 -16 h12 l9 9 v12 l-9 9 h-12 l-9-9 v-12z M-5 -10 h10 M-5 -4 h10 M-5 2 h6 M0 17 v12%22/%3E%3C/g%3E%3Cg transform=%22translate(277 -8) rotate(-17) scale(0.92)%22%3E%3Cpath d=%22M-10 -18 q-4 0 -4 5 l3 18 h22 l3 9 h6 M-10 -18 h6 q4 0 5 4 l3 10 M-11 11 v8 M9 11 v8 M-14 19 h28%22/%3E%3C/g%3E%3Cg transform=%22translate(277 512) rotate(-17) scale(0.92)%22%3E%3Cpath d=%22M-10 -18 q-4 0 -4 5 l3 18 h22 l3 9 h6 M-10 -18 h6 q4 0 5 4 l3 10 M-11 11 v8 M9 11 v8 M-14 19 h28%22/%3E%3C/g%3E%3Cg transform=%22translate(117 270) rotate(-18) scale(1.08)%22%3E%3Cpath d=%22M-6 -16 h12 l9 9 v12 l-9 9 h-12 l-9-9 v-12z M-5 -10 h10 M-5 -4 h10 M-5 2 h6 M0 17 v12%22/%3E%3C/g%3E%3Cg transform=%22translate(484 137) rotate(10) scale(1.01)%22%3E%3Cpath d=%22M0 -19 L9 11 h-18z M-4 -6 h8 M-6.5 3 h13 M-14 11 h28 v5 h-28z%22/%3E%3C/g%3E%3Cg transform=%22translate(459 485) rotate(10) scale(0.97)%22%3E%3Ccircle r=%2217%22/%3E%3Ccircle r=%2213%22/%3E%3Cpath d=%22M0 -10 L4.5 0 L0 10 L-4.5 0z M-4.5 0 h9%22/%3E%3Cpath d=%22M0 -17 v-3 M0 17 v3 M17 0 h3 M-17 0 h-3%22/%3E%3C/g%3E%3Cg transform=%22translate(275 36) rotate(-22) scale(1.12)%22%3E%3Cpath d=%22M0 17 C0 17 -12 5 -12 -4 a12 12 0 0 1 24 0 c0 9 -12 21 -12 21z%22/%3E%3Ccircle cy=%22-4%22 r=%224.5%22/%3E%3Cpath d=%22M-9 20 q9 4 18 0%22/%3E%3C/g%3E%3Cg transform=%22translate(469 218) rotate(18) scale(0.97)%22%3E%3Cpath d=%22M0 -19 L9 11 h-18z M-4 -6 h8 M-6.5 3 h13 M-14 11 h28 v5 h-28z%22/%3E%3C/g%3E%3Cg transform=%22translate(416 319) rotate(5) scale(1.04)%22%3E%3Ccircle r=%2217%22/%3E%3Ccircle r=%2213%22/%3E%3Cpath d=%22M0 -10 L4.5 0 L0 10 L-4.5 0z M-4.5 0 h9%22/%3E%3Cpath d=%22M0 -17 v-3 M0 17 v3 M17 0 h3 M-17 0 h-3%22/%3E%3C/g%3E%3Cg transform=%22translate(126 429) rotate(-23) scale(0.98)%22%3E%3Cpath d=%22M0 17 C0 17 -12 5 -12 -4 a12 12 0 0 1 24 0 c0 9 -12 21 -12 21z%22/%3E%3Ccircle cy=%22-4%22 r=%224.5%22/%3E%3Cpath d=%22M-9 20 q9 4 18 0%22/%3E%3C/g%3E%3Cg transform=%22translate(251 418) rotate(6) scale(1.06)%22%3E%3Cpath d=%22M-14 -4 q0-12 14-12 q14 0 14 12 q0 12 -14 12 q-14 0 -14-12z M0 8 v8 M-7 16 h14 M-8 -8 l5 -3%22/%3E%3C/g%3E%3Cg transform=%22translate(286 294) rotate(-11) scale(0.98)%22%3E%3Cpath d=%22M-16 5 a16 16 0 0 1 32 0 v7 h-12 q-3-4 -8-4 h-12z M-2 -11 v11 h18 M2 -2 h14 v8 h-14z%22/%3E%3C/g%3E%3Cg transform=%22translate(242 215) rotate(-20) scale(0.98)%22%3E%3Cpath d=%22M-16 5 a16 16 0 0 1 32 0 v7 h-12 q-3-4 -8-4 h-12z M-2 -11 v11 h18 M2 -2 h14 v8 h-14z%22/%3E%3C/g%3E%3Cg transform=%22translate(69 -18) rotate(-8) scale(0.99)%22%3E%3Cpath d=%22M-14 -4 q0-12 14-12 q14 0 14 12 q0 12 -14 12 q-14 0 -14-12z M0 8 v8 M-7 16 h14 M-8 -8 l5 -3%22/%3E%3C/g%3E%3Cg transform=%22translate(69 502) rotate(-8) scale(0.99)%22%3E%3Cpath d=%22M-14 -4 q0-12 14-12 q14 0 14 12 q0 12 -14 12 q-14 0 -14-12z M0 8 v8 M-7 16 h14 M-8 -8 l5 -3%22/%3E%3C/g%3E%3Cg transform=%22translate(472 406) rotate(16) scale(0.94)%22%3E%3Ccircle r=%2216%22/%3E%3Ccircle r=%2210%22/%3E%3Ccircle r=%223%22/%3E%3Ccircle cx=%220%22 cy=%22-6.5%22 r=%221.2%22/%3E%3Ccircle cx=%226.5%22 cy=%220%22 r=%221.2%22/%3E%3Ccircle cx=%220%22 cy=%226.5%22 r=%221.2%22/%3E%3Ccircle cx=%22-6.5%22 cy=%220%22 r=%221.2%22/%3E%3Cpath d=%22M0 -16 v-2 M0 16 v2 M16 0 h2 M-16 0 h-2 M11.3 -11.3 l1.4 -1.4 M-11.3 11.3 l-1.4 1.4 M11.3 11.3 l1.4 1.4 M-11.3 -11.3 l-1.4 -1.4%22/%3E%3C/g%3E%3Cg transform=%22translate(99 185) rotate(-6) scale(1.00)%22%3E%3Ccircle r=%2216%22/%3E%3Ccircle r=%2210%22/%3E%3Ccircle r=%223%22/%3E%3Ccircle cx=%220%22 cy=%22-6.5%22 r=%221.2%22/%3E%3Ccircle cx=%226.5%22 cy=%220%22 r=%221.2%22/%3E%3Ccircle cx=%220%22 cy=%226.5%22 r=%221.2%22/%3E%3Ccircle cx=%22-6.5%22 cy=%220%22 r=%221.2%22/%3E%3Cpath d=%22M0 -16 v-2 M0 16 v2 M16 0 h2 M-16 0 h-2 M11.3 -11.3 l1.4 -1.4 M-11.3 11.3 l-1.4 1.4 M11.3 11.3 l1.4 1.4 M-11.3 -11.3 l-1.4 -1.4%22/%3E%3C/g%3E%3Cg transform=%22translate(328 285) rotate(-6) scale(0.93)%22%3E%3Ccircle r=%2215%22/%3E%3Ccircle r=%224%22/%3E%3Cpath d=%22M-15 0 h11 M4 0 h11 M0 4 v11 M-14 -3 q14 -6 28 0%22/%3E%3C/g%3E%3Cg transform=%22translate(240 143) rotate(4) scale(0.96)%22%3E%3Cpath d=%22M-14 8 q-8 0 -8-7 q0-6 7-7 q1-9 10-9 q7 0 9 6 q9-1 10 8 q0 9 -9 9z%22/%3E%3C/g%3E%3Cg transform=%22translate(153 162) rotate(14) scale(1.06)%22%3E%3Cpath d=%22M-14 8 q-8 0 -8-7 q0-6 7-7 q1-9 10-9 q7 0 9 6 q9-1 10 8 q0 9 -9 9z%22/%3E%3C/g%3E%3Cg transform=%22translate(328 427) rotate(9) scale(1.01)%22%3E%3Ccircle r=%2214%22/%3E%3Ccircle r=%2210%22/%3E%3Cpath d=%22M-4.5 6 V-6 L4.5 6 V-6 M-7 -2 h14 M-7 2 h14%22/%3E%3C/g%3E%3Cg transform=%22translate(357 44) rotate(11) scale(1.00)%22%3E%3Ccircle r=%2214%22/%3E%3Ccircle r=%2210.5%22/%3E%3Cpath d=%22M0 -7 v7 l5 3.5 M0 -14 v-3 M-14 0 h-3 M14 0 h3%22/%3E%3C/g%3E%3Cg transform=%22translate(122 368) rotate(-21) scale(1.08)%22%3E%3Ccircle r=%2214%22/%3E%3Ccircle r=%2210.5%22/%3E%3Cpath d=%22M0 -7 v7 l5 3.5 M0 -14 v-3 M-14 0 h-3 M14 0 h3%22/%3E%3C/g%3E%3Cg transform=%22translate(189 -12) rotate(14) scale(1.20)%22%3E%3Ccircle r=%2214%22/%3E%3Ccircle r=%2210%22/%3E%3Cpath d=%22M-4.5 6 V-6 L4.5 6 V-6 M-7 -2 h14 M-7 2 h14%22/%3E%3C/g%3E%3Cg transform=%22translate(189 508) rotate(14) scale(1.20)%22%3E%3Ccircle r=%2214%22/%3E%3Ccircle r=%2210%22/%3E%3Cpath d=%22M-4.5 6 V-6 L4.5 6 V-6 M-7 -2 h14 M-7 2 h14%22/%3E%3C/g%3E%3Cg transform=%22translate(14 377) rotate(-1) scale(0.97)%22%3E%3Cpath d=%22M0 -14 l4 9 l10 1 l-7.5 7 l2.5 10 l-9 -5.5 l-9 5.5 l2.5 -10 l-7.5 -7 l10 -1z%22/%3E%3C/g%3E%3Cg transform=%22translate(67 441) rotate(-6) scale(0.98)%22%3E%3Cpath d=%22M4 -16 l-12 18 h9 l-3 14 l12-18 h-9z%22/%3E%3C/g%3E%3Cg transform=%22translate(215 48) rotate(-16) scale(1.05)%22%3E%3Cpath d=%22M0 -14 l4 9 l10 1 l-7.5 7 l2.5 10 l-9 -5.5 l-9 5.5 l2.5 -10 l-7.5 -7 l10 -1z%22/%3E%3C/g%3E%3Cg transform=%22translate(42 391) rotate(9) scale(1.15)%22%3E%3Cpath d=%22M4 -16 l-12 18 h9 l-3 14 l12-18 h-9z%22/%3E%3C/g%3E%3Cg transform=%22translate(192 354) rotate(2) scale(0.97)%22%3E%3Cpath d=%22M6 -14 a14 14 0 1 0 8 22 a11 11 0 0 1 -8 -22z%22/%3E%3C/g%3E%3Cg transform=%22translate(501 484) rotate(4) scale(1.00)%22%3E%3Cpath d=%22M6 -14 a14 14 0 1 0 8 22 a11 11 0 0 1 -8 -22z%22/%3E%3C/g%3E%3Cg transform=%22translate(388 167) rotate(-22) scale(0.99)%22%3E%3Cpath d=%22M0 12 C-18 0 -12 -14 -5 -10 q3 2 5 5 q2-3 5-5 c7-4 13 10 -5 22z%22/%3E%3C/g%3E%3Cg transform=%22translate(203 320) rotate(23) scale(1.00)%22%3E%3Cpath d=%22M0 12 C-18 0 -12 -14 -5 -10 q3 2 5 5 q2-3 5-5 c7-4 13 10 -5 22z%22/%3E%3C/g%3E%3Cg transform=%22translate(371 408) rotate(9) scale(0.90)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(375 489) rotate(-31) scale(1.07)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(8 50) rotate(3) scale(0.86)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(136 62) rotate(-26) scale(1.01)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(426 474) rotate(-35) scale(0.91)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(29 159) rotate(11) scale(0.87)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(-3 123) rotate(40) scale(1.01)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(517 123) rotate(40) scale(1.01)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(39 227) rotate(-41) scale(0.88)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(245 489) rotate(-44) scale(1.20)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(392 260) rotate(-20) scale(0.81)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(98 -1) rotate(-5) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(98 519) rotate(-5) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(73 124) rotate(2) scale(1.12)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(11 202) rotate(-11) scale(1.03)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(380 113) rotate(-28) scale(1.00)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(60 11) rotate(-31) scale(1.02)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(254 121) rotate(35) scale(0.91)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(382 29) rotate(10) scale(1.17)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(457 250) rotate(35) scale(0.81)%22%3E%3Cpath d=%22M0 -7 q1 6 7 7 q-6 1 -7 7 q-1-6 -7-7 q6-1 7-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(440 15) rotate(22) scale(1.24)%22%3E%3Cpath d=%22M0 -7 q1 6 7 7 q-6 1 -7 7 q-1-6 -7-7 q6-1 7-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(83 57) rotate(36) scale(1.01)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(135 479) rotate(22) scale(0.94)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(394 113) rotate(15) scale(1.19)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(419 98) rotate(-25) scale(0.92)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(310 27) rotate(9) scale(0.91)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(457 95) rotate(-8) scale(1.14)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(215 484) rotate(15) scale(0.81)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(23 186) rotate(-33) scale(1.06)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(383 132) rotate(-30) scale(1.00)%22%3E%3Cpath d=%22M0 -7 q1 6 7 7 q-6 1 -7 7 q-1-6 -7-7 q6-1 7-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(300 499) rotate(-9) scale(0.96)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(377 14) rotate(-14) scale(0.85)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(144 49) rotate(28) scale(1.21)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(318 481) rotate(-16) scale(1.06)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(437 465) rotate(7) scale(1.02)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(185 414) rotate(-43) scale(0.85)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(99 52) rotate(-40) scale(1.17)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(500 390) rotate(22) scale(1.07)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(10 154) rotate(11) scale(1.17)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(513 143) rotate(-33) scale(1.00)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(390 17) rotate(41) scale(0.92)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(35 237) rotate(21) scale(1.06)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(63 107) rotate(-19) scale(0.90)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(218 126) rotate(2) scale(1.14)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(170 73) rotate(-31) scale(0.89)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(141 296) rotate(8) scale(1.03)%22%3E%3Cpath d=%22M0 -7 q1 6 7 7 q-6 1 -7 7 q-1-6 -7-7 q6-1 7-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(325 175) rotate(-7) scale(1.20)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(308 161) rotate(43) scale(1.12)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(369 421) rotate(18) scale(1.02)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(444 -1) rotate(21) scale(1.11)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(444 519) rotate(21) scale(1.11)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(110 240) rotate(-37) scale(1.07)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(364 86) rotate(-3) scale(1.18)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(52 1) rotate(2) scale(0.94)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(52 521) rotate(2) scale(0.94)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(148 90) rotate(37) scale(1.16)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(105 215) rotate(9) scale(1.02)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(513 382) rotate(42) scale(1.10)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(75 134) rotate(-11) scale(0.81)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(233 188) rotate(-3) scale(1.14)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(209 111) rotate(-20) scale(1.05)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(76 315) rotate(22) scale(0.81)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(490 368) rotate(6) scale(1.04)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(402 249) rotate(-38) scale(0.90)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(404 107) rotate(1) scale(1.16)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(237 54) rotate(-31) scale(0.85)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(496 211) rotate(-39) scale(0.88)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(190 440) rotate(38) scale(0.88)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(389 147) rotate(2) scale(1.04)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(364 105) rotate(-13) scale(1.24)%22%3E%3Cpath d=%22M0 -7 q1 6 7 7 q-6 1 -7 7 q-1-6 -7-7 q6-1 7-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(76 97) rotate(-4) scale(0.87)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(497 308) rotate(-29) scale(0.83)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(369 26) rotate(14) scale(0.82)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(296 158) rotate(-38) scale(0.83)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(221 476) rotate(-21) scale(0.82)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(495 271) rotate(-45) scale(0.88)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(45 31) rotate(-1) scale(0.87)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(510 501) rotate(-23) scale(1.12)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(44 250) rotate(18) scale(1.00)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(410 244) rotate(24) scale(0.99)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(382 192) rotate(28) scale(0.85)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(441 96) rotate(10) scale(1.21)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(160 431) rotate(30) scale(0.86)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(22 56) rotate(-24) scale(1.06)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(306 424) rotate(9) scale(1.07)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(44 307) rotate(-12) scale(0.85)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(149 259) rotate(17) scale(1.03)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(175 360) rotate(-33) scale(0.90)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(239 168) rotate(-8) scale(0.85)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(147 448) rotate(-32) scale(1.15)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(335 262) rotate(30) scale(1.20)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(84 166) rotate(37) scale(0.82)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(164 366) rotate(-39) scale(1.20)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(358 76) rotate(18) scale(0.93)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(197 429) rotate(38) scale(0.86)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(470 114) rotate(-17) scale(1.03)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(308 193) rotate(7) scale(1.19)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(29 266) rotate(-41) scale(0.93)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(95 209) rotate(42) scale(0.83)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(73 459) rotate(9) scale(1.12)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(82 118) rotate(-4) scale(1.12)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(462 272) rotate(45) scale(1.07)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(310 413) rotate(-24) scale(0.89)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(322 466) rotate(29) scale(1.00)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(170 255) rotate(8) scale(0.96)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(204 136) rotate(-17) scale(1.09)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(12 103) rotate(-3) scale(1.08)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(145 74) rotate(22) scale(1.10)%22%3E%3Crect x=%22-7%22 y=%22-3%22 width=%2214%22 height=%226%22 rx=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(514 370) rotate(36) scale(1.22)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(271 75) rotate(-23) scale(0.98)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(116 46) rotate(25) scale(1.19)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(264 117) rotate(20) scale(0.89)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(454 74) rotate(-27) scale(0.85)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(127 175) rotate(-8) scale(0.85)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(285 331) rotate(15) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(345 306) rotate(-29) scale(1.18)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(99 241) rotate(-32) scale(0.88)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(67 477) rotate(-6) scale(1.16)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(354 317) rotate(41) scale(0.91)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(64 373) rotate(25) scale(1.04)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(339 226) rotate(-33) scale(0.95)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(2 508) rotate(-8) scale(0.88)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(522 508) rotate(-8) scale(0.88)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(486 384) rotate(-27) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(182 204) rotate(8) scale(1.06)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(482 272) rotate(-20) scale(1.18)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(9 140) rotate(-25) scale(0.95)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(51 417) rotate(11) scale(0.98)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(402 355) rotate(-35) scale(1.17)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(40 42) rotate(-34) scale(1.08)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(124 402) rotate(-33) scale(1.14)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(196 15) rotate(27) scale(1.01)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(384 6) rotate(6) scale(1.04)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(25 84) rotate(43) scale(1.07)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(76 365) rotate(-5) scale(0.83)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(-1 33) rotate(-13) scale(1.02)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(519 33) rotate(-13) scale(1.02)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(374 93) rotate(27) scale(0.91)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(372 210) rotate(30) scale(1.04)%22%3E%3Cpath d=%22M0 -7 q1 6 7 7 q-6 1 -7 7 q-1-6 -7-7 q6-1 7-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(451 413) rotate(15) scale(1.09)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(354 421) rotate(-31) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(20 210) rotate(38) scale(0.97)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(491 282) rotate(14) scale(0.86)%22%3E%3Cpath d=%22M0 -7 q1 6 7 7 q-6 1 -7 7 q-1-6 -7-7 q6-1 7-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(247 242) rotate(32) scale(1.12)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(391 237) rotate(12) scale(1.13)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(90 355) rotate(41) scale(1.00)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(100 499) rotate(41) scale(0.84)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(332 462) rotate(37) scale(0.94)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(385 421) rotate(41) scale(1.19)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(256 252) rotate(-27) scale(1.04)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(399 466) rotate(16) scale(1.04)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(316 201) rotate(-39) scale(0.99)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(18 67) rotate(34) scale(0.97)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(148 363) rotate(18) scale(1.05)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(354 89) rotate(18) scale(1.08)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(223 498) rotate(34) scale(1.06)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(281 90) rotate(16) scale(0.98)%22%3E%3Crect x=%22-7%22 y=%22-3%22 width=%2214%22 height=%226%22 rx=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(454 451) rotate(-25) scale(0.89)%22%3E%3Cpath d=%22M0 -7 q1 6 7 7 q-6 1 -7 7 q-1-6 -7-7 q6-1 7-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(217 203) rotate(25) scale(0.89)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(57 34) rotate(17) scale(0.87)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(398 25) rotate(3) scale(0.95)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(233 243) rotate(32) scale(0.98)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(434 80) rotate(-24) scale(0.90)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(342 110) rotate(-37) scale(1.18)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(176 241) rotate(21) scale(1.17)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(290 320) rotate(41) scale(1.14)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(187 79) rotate(13) scale(0.97)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(42 504) rotate(35) scale(0.87)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(183 15) rotate(42) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(259 303) rotate(36) scale(1.21)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(58 310) rotate(9) scale(0.99)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(245 469) rotate(27) scale(1.13)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(435 175) rotate(32) scale(0.87)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(23 96) rotate(39) scale(0.82)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(127 111) rotate(1) scale(1.07)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(97 432) rotate(3) scale(1.15)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(97 292) rotate(-31) scale(1.19)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(499 296) rotate(42) scale(0.91)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(320 129) rotate(33) scale(0.95)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(470 251) rotate(16) scale(1.02)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(43 205) rotate(21) scale(1.01)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(338 46) rotate(22) scale(1.05)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(360 64) rotate(27) scale(1.10)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(201 71) rotate(1) scale(1.11)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(336 118) rotate(35) scale(0.92)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(456 512) rotate(12) scale(1.13)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(454 439) rotate(-25) scale(1.05)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(429 397) rotate(-6) scale(0.83)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(262 136) rotate(3) scale(1.17)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(487 203) rotate(-32) scale(0.88)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(456 112) rotate(24) scale(1.06)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(61 147) rotate(-25) scale(0.85)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(148 37) rotate(-19) scale(1.16)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(290 421) rotate(-28) scale(0.98)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(77 473) rotate(42) scale(1.04)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(270 274) rotate(-3) scale(0.91)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(44 427) rotate(-19) scale(0.82)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(410 347) rotate(31) scale(0.86)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(177 436) rotate(15) scale(0.99)%22%3E%3Cpath d=%22M0 -7 q1 6 7 7 q-6 1 -7 7 q-1-6 -7-7 q6-1 7-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(185 423) rotate(-22) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(197 260) rotate(-33) scale(1.19)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(221 307) rotate(12) scale(1.05)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(77 150) rotate(-13) scale(1.14)%22%3E%3Crect x=%22-7%22 y=%22-3%22 width=%2214%22 height=%226%22 rx=%223%22/%3E%3C/g%3E%3Cg transform=%22translate(54 24) rotate(38) scale(1.08)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(416 20) rotate(42) scale(0.82)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(7 358) rotate(1) scale(0.99)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(410 32) rotate(-18) scale(1.08)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(273 66) rotate(-25) scale(0.81)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(444 406) rotate(5) scale(0.89)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(174 190) rotate(20) scale(0.82)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(303 364) rotate(15) scale(1.13)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(468 330) rotate(-22) scale(1.00)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(287 366) rotate(4) scale(1.03)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(203 85) rotate(-26) scale(1.22)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(6 109) rotate(-26) scale(0.88)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(99 360) rotate(41) scale(0.89)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(86 348) rotate(33) scale(1.10)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(92 441) rotate(-39) scale(1.18)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(-3 135) rotate(-17) scale(1.07)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(517 135) rotate(-17) scale(1.07)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(92 251) rotate(-1) scale(1.21)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(481 250) rotate(18) scale(0.84)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(318 115) rotate(-31) scale(0.83)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(249 51) rotate(43) scale(1.06)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(239 393) rotate(28) scale(1.15)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(197 469) rotate(0) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(18 160) rotate(-3) scale(1.12)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(127 49) rotate(-28) scale(0.86)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(241 190) rotate(-20) scale(1.11)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(394 135) rotate(-30) scale(0.95)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(446 316) rotate(-17) scale(0.98)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(199 482) rotate(-28) scale(1.10)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(24 44) rotate(17) scale(1.04)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(33 424) rotate(31) scale(0.98)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(129 346) rotate(0) scale(1.17)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(433 236) rotate(-41) scale(1.15)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(81 68) rotate(8) scale(1.12)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(340 268) rotate(-2) scale(1.01)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(314 175) rotate(-36) scale(0.89)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(501 380) rotate(-37) scale(1.04)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(297 7) rotate(23) scale(1.07)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(424 464) rotate(26) scale(0.91)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(159 65) rotate(44) scale(0.81)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(264 387) rotate(-4) scale(0.91)%22%3E%3Cpath d=%22M0 -7 q1 6 7 7 q-6 1 -7 7 q-1-6 -7-7 q6-1 7-7z%22/%3E%3C/g%3E%3Cg transform=%22translate(411 359) rotate(-27) scale(0.86)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(281 103) rotate(12) scale(0.82)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(138 308) rotate(36) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(3 151) rotate(-7) scale(0.81)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(445 239) rotate(17) scale(0.86)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(503 286) rotate(18) scale(1.02)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(186 378) rotate(25) scale(0.87)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(454 10) rotate(38) scale(0.83)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(85 367) rotate(6) scale(1.06)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(325 36) rotate(-29) scale(0.84)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(36 278) rotate(12) scale(0.83)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(61 99) rotate(-22) scale(0.86)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(43 435) rotate(15) scale(1.15)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(132 336) rotate(-21) scale(0.82)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(99 227) rotate(-27) scale(1.15)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(417 398) rotate(18) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(374 500) rotate(-42) scale(1.24)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(243 39) rotate(41) scale(1.12)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(260 491) rotate(8) scale(1.06)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(441 303) rotate(-29) scale(1.17)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(158 260) rotate(1) scale(1.16)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(407 165) rotate(-5) scale(0.86)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(151 424) rotate(7) scale(0.86)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(431 168) rotate(23) scale(0.94)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(293 351) rotate(21) scale(0.89)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(271 211) rotate(-23) scale(1.05)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(13 504) rotate(35) scale(1.02)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(506 301) rotate(-42) scale(1.08)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(316 39) rotate(12) scale(0.85)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(310 306) rotate(7) scale(0.81)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(507 367) rotate(16) scale(0.86)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(147 311) rotate(-5) scale(0.81)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(400 267) rotate(5) scale(0.95)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(372 116) rotate(-15) scale(1.12)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(51 429) rotate(-6) scale(0.94)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(228 120) rotate(-45) scale(0.86)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(198 338) rotate(-12) scale(0.85)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(185 317) rotate(4) scale(0.90)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(393 250) rotate(2) scale(1.00)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(302 173) rotate(14) scale(0.81)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(483 424) rotate(41) scale(0.89)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(512 464) rotate(-31) scale(0.87)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(171 15) rotate(-22) scale(0.83)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(210 364) rotate(-27) scale(1.11)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(39 417) rotate(21) scale(0.83)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(177 151) rotate(24) scale(0.83)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(83 301) rotate(-17) scale(0.84)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(187 332) rotate(9) scale(0.86)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(262 241) rotate(-23) scale(0.88)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(43 260) rotate(42) scale(1.16)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(292 100) rotate(-2) scale(0.88)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(478 193) rotate(-39) scale(0.91)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(143 266) rotate(-43) scale(0.82)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(249 458) rotate(8) scale(0.86)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(33 207) rotate(9) scale(1.25)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(135 41) rotate(-27) scale(1.14)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(59 44) rotate(-38) scale(1.09)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(69 306) rotate(-39) scale(1.02)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(91 110) rotate(-29) scale(0.81)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(301 18) rotate(22) scale(1.09)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(421 29) rotate(26) scale(0.95)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(243 502) rotate(28) scale(1.03)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(193 201) rotate(-36) scale(1.19)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(241 122) rotate(-26) scale(0.89)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(384 257) rotate(-19) scale(1.03)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(233 473) rotate(6) scale(0.86)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(269 108) rotate(-44) scale(0.85)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(213 139) rotate(24) scale(0.91)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(368 179) rotate(-7) scale(0.96)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(332 476) rotate(-30) scale(0.94)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(118 389) rotate(36) scale(1.24)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(89 432) rotate(24) scale(1.06)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(452 326) rotate(11) scale(0.92)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(276 416) rotate(19) scale(1.03)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(449 460) rotate(-16) scale(0.99)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(137 320) rotate(40) scale(0.83)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(387 100) rotate(-28) scale(1.17)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(345 352) rotate(-18) scale(1.00)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(254 477) rotate(30) scale(1.04)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(24 77) rotate(42) scale(0.92)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(235 497) rotate(20) scale(0.81)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(477 43) rotate(30) scale(0.99)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(483 483) rotate(-3) scale(1.14)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(509 132) rotate(44) scale(0.87)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(455 424) rotate(27) scale(0.87)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(458 136) rotate(29) scale(0.82)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(459 125) rotate(-36) scale(0.80)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(246 444) rotate(-32) scale(0.81)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(306 281) rotate(7) scale(1.13)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(85 208) rotate(31) scale(0.82)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(38 214) rotate(-32) scale(0.90)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(400 155) rotate(44) scale(0.91)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(323 207) rotate(-32) scale(0.80)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(13 93) rotate(-3) scale(0.85)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(325 452) rotate(-41) scale(0.98)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(343 256) rotate(44) scale(0.83)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(435 404) rotate(-45) scale(1.10)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(208 255) rotate(12) scale(1.02)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(141 465) rotate(-5) scale(1.04)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(351 269) rotate(-30) scale(0.83)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(161 74) rotate(12) scale(0.94)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(32 54) rotate(24) scale(1.07)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(91 363) rotate(-34) scale(0.85)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(478 332) rotate(38) scale(1.22)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(414 375) rotate(35) scale(1.20)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(446 507) rotate(31) scale(0.83)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(265 265) rotate(-15) scale(0.83)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(160 30) rotate(-6) scale(0.94)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(403 17) rotate(15) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(31 252) rotate(32) scale(1.03)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(357 415) rotate(-32) scale(0.97)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(167 180) rotate(-3) scale(0.82)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(185 252) rotate(-38) scale(0.91)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(372 168) rotate(-40) scale(0.92)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(130 306) rotate(17) scale(0.83)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(382 483) rotate(11) scale(1.03)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(204 271) rotate(-40) scale(0.88)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(210 301) rotate(-32) scale(0.91)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(97 510) rotate(21) scale(0.85)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(89 516) rotate(14) scale(0.85)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(419 245) rotate(15) scale(0.87)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(264 230) rotate(8) scale(0.87)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(509 37) rotate(12) scale(0.82)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(76 330) rotate(23) scale(0.95)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(454 83) rotate(-16) scale(0.85)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(513 279) rotate(38) scale(0.84)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(419 392) rotate(-13) scale(0.91)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(220 250) rotate(37) scale(0.81)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(22 150) rotate(-44) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(424 239) rotate(-25) scale(0.91)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(495 427) rotate(-41) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(-4 448) rotate(-12) scale(0.93)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(516 448) rotate(-12) scale(0.93)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(67 138) rotate(44) scale(1.08)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(381 221) rotate(-9) scale(1.15)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(19 197) rotate(21) scale(0.80)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(223 195) rotate(-25) scale(0.83)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(204 30) rotate(33) scale(1.20)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(33 411) rotate(37) scale(0.95)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(-2 43) rotate(-16) scale(0.96)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(518 43) rotate(-16) scale(0.96)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(122 299) rotate(-40) scale(0.92)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(119 36) rotate(41) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(493 401) rotate(-43) scale(1.21)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(308 42) rotate(-23) scale(1.03)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(444 227) rotate(-15) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(288 340) rotate(43) scale(0.92)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(117 399) rotate(12) scale(0.91)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(338 36) rotate(-40) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(315 185) rotate(-15) scale(0.95)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(296 198) rotate(25) scale(0.88)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(167 499) rotate(-29) scale(0.88)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(408 292) rotate(28) scale(0.98)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(95 350) rotate(-42) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(101 373) rotate(-29) scale(1.20)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(210 501) rotate(-23) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(147 62) rotate(16) scale(0.88)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(311 487) rotate(-36) scale(1.06)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(213 69) rotate(44) scale(1.08)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(495 115) rotate(40) scale(0.80)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(200 96) rotate(-33) scale(1.16)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(348 426) rotate(44) scale(1.18)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(79 84) rotate(3) scale(1.20)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(276 265) rotate(36) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(377 3) rotate(25) scale(0.94)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(144 142) rotate(42) scale(0.80)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(78 339) rotate(-31) scale(0.90)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(420 168) rotate(-1) scale(0.81)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(249 392) rotate(-18) scale(1.16)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(317 143) rotate(29) scale(0.95)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(471 266) rotate(-31) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(169 423) rotate(-44) scale(0.96)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(415 470) rotate(32) scale(0.84)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(492 415) rotate(21) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(238 182) rotate(-3) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(153 438) rotate(17) scale(1.24)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(23 174) rotate(26) scale(1.08)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(398 454) rotate(-32) scale(0.94)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(135 455) rotate(-7) scale(0.95)%22%3E%3Cpath d=%22M-6 0 h12%22/%3E%3C/g%3E%3Cg transform=%22translate(172 370) rotate(-19) scale(0.90)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(431 102) rotate(29) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(261 11) rotate(27) scale(1.00)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(6 498) rotate(-28) scale(1.02)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(486 496) rotate(-11) scale(1.20)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(139 102) rotate(11) scale(1.00)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(90 492) rotate(4) scale(0.97)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(332 446) rotate(-24) scale(1.10)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(351 104) rotate(31) scale(0.89)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(460 329) rotate(-33) scale(0.83)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(146 276) rotate(-17) scale(0.82)%22%3E%3Cpath d=%22M0 -4.5 v9 M-4.5 0 h9%22/%3E%3C/g%3E%3Cg transform=%22translate(61 381) rotate(12) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(11 326) rotate(-30) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(316 369) rotate(33) scale(0.83)%22%3E%3Ccircle r=%226%22/%3E%3C/g%3E%3Cg transform=%22translate(9 124) rotate(-30) scale(0.85)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(180 193) rotate(-11) scale(0.81)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(375 196) rotate(-28) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(226 237) rotate(-0) scale(1.15)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(82 357) rotate(16) scale(0.83)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(37 96) rotate(21) scale(0.89)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(16 85) rotate(-30) scale(1.07)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(49 48) rotate(37) scale(1.19)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(279 424) rotate(39) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(269 146) rotate(11) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(392 33) rotate(19) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(482 353) rotate(44) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(259 58) rotate(-34) scale(1.00)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(442 451) rotate(30) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(9 131) rotate(-33) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(85 452) rotate(-13) scale(1.08)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(477 261) rotate(-21) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(319 403) rotate(20) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(408 100) rotate(33) scale(0.89)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(81 483) rotate(-42) scale(0.98)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(516 489) rotate(-26) scale(0.82)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(145 486) rotate(20) scale(1.20)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(29 215) rotate(22) scale(0.83)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(390 477) rotate(-42) scale(0.82)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(1 367) rotate(44) scale(0.82)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(521 367) rotate(44) scale(0.82)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(443 84) rotate(-38) scale(1.22)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(366 72) rotate(-28) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(186 24) rotate(27) scale(0.89)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(448 398) rotate(-3) scale(0.94)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(192 421) rotate(-27) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(37 287) rotate(3) scale(0.92)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(463 260) rotate(30) scale(0.91)%22%3E%3Cpath d=%22M-4 -4 l8 8 M4 -4 l-8 8%22/%3E%3C/g%3E%3Cg transform=%22translate(278 78) rotate(15) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(487 41) rotate(40) scale(0.88)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(68 51) rotate(25) scale(0.94)%22%3E%3Cpath d=%22M0 -5 q.8 4 5 5 q-4.2 .8 -5 5 q-.8-4.2 -5-5 q4.2-.8 5-5z%22/%3E%3C/g%3E%3Cg transform=%22translate(413 460) rotate(20) scale(0.92)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(464 432) rotate(10) scale(1.08)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(466 102) rotate(8) scale(0.80)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(251 505) rotate(11) scale(1.03)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(101 444) rotate(27) scale(1.20)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(18 273) rotate(-22) scale(0.88)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(481 376) rotate(38) scale(0.84)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(138 127) rotate(-16) scale(0.87)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(205 202) rotate(-30) scale(1.05)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(231 309) rotate(-7) scale(0.95)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(142 254) rotate(-39) scale(0.98)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(400 242) rotate(-29) scale(0.80)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(44 301) rotate(-11) scale(0.96)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(401 341) rotate(38) scale(1.14)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(446 76) rotate(-27) scale(0.98)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(63 422) rotate(38) scale(0.83)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(283 67) rotate(27) scale(0.89)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(478 241) rotate(23) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(28 222) rotate(42) scale(0.87)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(288 13) rotate(9) scale(0.88)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(82 202) rotate(-32) scale(0.89)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(44 238) rotate(44) scale(0.87)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(276 374) rotate(12) scale(0.82)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(278 317) rotate(-41) scale(0.82)%22%3E%3Ccircle r=%223.6%22/%3E%3C/g%3E%3Cg transform=%22translate(123 58) rotate(32) scale(0.93)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(166 438) rotate(-3) scale(1.05)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(379 182) rotate(-18) scale(0.84)%22%3E%3Cpath d=%22M0 -5 l5 5 l-5 5 l-5 -5z%22/%3E%3C/g%3E%3Cg transform=%22translate(378 103) rotate(-36) scale(0.83)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3Cg transform=%22translate(348 281) rotate(-23) scale(0.99)%22%3E%3Ccircle r=%221.3%22 fill=%22%23000%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   CampusRides — design tokens (ported 1:1 from the product's Figma theme)
   ========================================================================== */

:root {
  --radius-lg: 1.25rem;

  --background: oklch(0.879 0.035 255);
  --foreground: oklch(var(--ink));

  --card: oklch(1 0 0);
  --card-foreground: oklch(var(--ink));

  --brand-soft: oklch(0.93 0.028 240);

  /* The near-black tone used everywhere for icon tints, dividers, and
     placeholder text — pulled into its own token (just the L C H
     numbers, no alpha) so dark mode can flip it to a light tone and
     every var(--ink) usage below follows automatically. */
  --ink: 0.16 0.01 260;

  --shadow-card: 0 18px 40px -20px oklch(0.4 0.06 250 / 45%);
  --shadow-tile: 0 10px 24px -14px oklch(0.5 0.09 240 / 55%);

  --primary: oklch(0.687 0.148 236.5);

  /* Exact blue sampled from the real CampusRides logo (rgb(13,161,231)) —
     used for the wallet card so it visually matches the brand mark. */
  --wallet-blue: #0da1e7;
  --wallet-blue-light: #35c0ff;
  --wallet-blue-dark: #086faa;
  --primary-strong: oklch(0.63 0.16 236.5);
  --primary-foreground: oklch(1 0 0);

  --muted-foreground: oklch(0.52 0.02 258);
  --border: oklch(0.92 0.02 250);
  --ring: oklch(0.687 0.148 236.5);

  /* Poppins and Rethink Sans don't include a Naira-sign glyph (₦), so
     without a fallback the browser picks *some* system font for just
     that one character — inconsistent across devices, and on several
     of them it renders looking like it has a line struck through it.
     Noto Sans has full Naira support and a similar weight, so it's
     listed first as the fallback; Segoe UI/Arial are safety nets below
     that on platforms without Noto Sans installed. */
  --font-sans: "Poppins", "Noto Sans", "Segoe UI", Arial, sans-serif;
  --font-display: "Rethink Sans", "Noto Sans", "Segoe UI", Arial, sans-serif;

  /* The tint every glass surface's background is mixed from (see
     .glass-panel/.glass-row/.card etc. below, all written as
     oklch(var(--glass-l) var(--glass-c) var(--glass-h) / X%) rather than
     a literal white) — white in light mode. Dark mode repoints these
     three instead of touching every rule that uses them, which is the
     fix for translucent "glass" cards turning into a pale white card
     with light dark-mode text landing invisibly on top of it. */
  --glass-l: 1;
  --glass-c: 0;
  --glass-h: 0;
}

/* Dark mode — toggled from Profile settings (see #dark-mode-toggle in
   app.js), which adds/removes this class on <html> so it survives every
   screen's re-render (the #app container itself gets fully replaced on
   each navigation, so the toggle can't live there). Brand blue
   (--primary) intentionally stays identical in both modes — that's the
   one color that shouldn't shift with the theme. */
html.dark {
  --background: oklch(0.19 0.025 260);
  --card: oklch(0.24 0.02 260);
  --card-foreground: oklch(0.95 0.01 260);
  --brand-soft: oklch(0.3 0.05 240);
  --ink: 0.95 0.01 260;
  --muted-foreground: oklch(0.68 0.02 258);
  --border: oklch(1 0 0 / 14%);
  --shadow-card: 0 18px 40px -20px oklch(0 0 0 / 65%);
  --shadow-tile: 0 10px 24px -14px oklch(0 0 0 / 70%);
  /* The glass tint itself flips to a light-on-dark card tone instead of
     white, so translucent surfaces read as "dark glass" — lighter than
     the page behind them, the way a card should look, instead of a pale
     washed-out white rectangle with invisible light text on it. */
  --glass-l: 0.32;
  --glass-c: 0.02;
  --glass-h: 260;
}
html.dark body {
  background:
    radial-gradient(120% 60% at 15% 0%, oklch(0.3 0.05 250 / 55%), transparent 60%),
    radial-gradient(100% 55% at 100% 15%, oklch(0.26 0.06 235 / 45%), transparent 55%),
    var(--background);
}

/* Splash screen in dark mode swaps the plain white backdrop for the
   brand-blue gradient (matching the reference), and the car/lines/
   doodles — all sized for a light backdrop — flip from blue-on-white to
   cream-on-blue. The car is a flat-color PNG, so brightness(0) crushes
   it to solid black on its transparent background and invert(1) flips
   that to white — cheaper than shipping a second image asset. */
html.dark .splash {
  background: linear-gradient(165deg, oklch(0.32 0.14 258) 0%, oklch(0.46 0.16 246) 45%, oklch(0.6 0.15 220) 100%);
}
html.dark .splash-car-icon { filter: brightness(0) invert(1); }
html.dark .splash-line { background: oklch(0.97 0.01 90); }
html.dark .splash-doodle,
html.dark .splash-doodle-arrow { stroke: oklch(1 0 0); opacity: 0.22; }
html.dark .splash-doodle-dot { fill: oklch(1 0 0); opacity: 0.22; }

* { box-sizing: border-box; }

/* The HTML `hidden` attribute must always win. Several components in
   this app (.driver-card, .btn-primary, .payment-paid-note, etc.) set
   their own `display` value, which — being author CSS — overrides the
   browser's default `[hidden] { display: none }` UA rule regardless of
   selector specificity. Without this, JS setting `el.hidden = true` on
   an element whose class sets `display: flex` silently does nothing,
   which was exactly why the ride-status payment note and driver card
   could show up before they were supposed to. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  /* Stop Safari/Chrome on iOS from silently bumping text size on rotation
     — unrelated to the zoom-on-focus fix below, but the same class of
     "the page doesn't render at the size we asked for" iOS quirk. */
  -webkit-text-size-adjust: 100%;
}

body {
  /* A gentle multi-point gradient instead of one flat tone — glass reads
     as glass because of subtle variation in what's behind it, so the
     backdrop needs a little more depth than a single flat color gives it. */
  background:
    radial-gradient(120% 60% at 15% 0%, oklch(0.93 0.03 250 / 70%), transparent 60%),
    radial-gradient(100% 55% at 100% 15%, oklch(0.85 0.045 235 / 55%), transparent 55%),
    var(--background);
  background-attachment: fixed;
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }

/* iOS Safari auto-zooms the *entire page* in when the user focuses a form
   control whose computed font-size is under 16px, then leaves the app
   looking "enlarged" until it's manually pinched back out — this is what
   was happening on iPhone. On the compact mobile scale (see the 480px
   media query in index.html) .pill-input, .search-input and the pickup/
   destination <select> all render just under 16px, and — being class
   selectors — they're MORE specific than a bare `input, select` reset, so
   an unqualified override here would silently lose the cascade. Naming
   them directly, with !important, is what actually wins. (.otp-box is
   already comfortably above 16px, so it's deliberately left out — no
   need to shrink those digits back down.) */
.pill-input, .search-input, .select-wrap select { font-size: 16px !important; }

.icon {
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  vertical-align: middle;
}
.icon-sm { width: 1.1rem; height: 1.1rem; }
.icon-lg { width: 1.6rem; height: 1.6rem; }
.icon-xl { width: 2.5rem; height: 2.5rem; }
.icon-muted { color: oklch(var(--ink) / 55%); }
.icon-info { color: var(--primary); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout shells
   ========================================================================== */

.screen { min-height: 100dvh; width: 100%; }

.page {
  max-width: 28rem;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.25rem;
}

.page--shell { padding: 1.5rem 1.25rem 8rem; }
.page--sheet { padding: 0.75rem 1.25rem 0; }

/* ==========================================================================
   Brand
   ========================================================================== */

.brand-logo { display: flex; align-items: center; gap: 0.75rem; }

.brand-mark {
  width: 2.75rem;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}


/* ==========================================================================
   Transportation doodle wallpaper — a dense, seamless tile of hand-drawn
   style cars, taxis, buses, keke, okada, bikes, pins, maps, roads, traffic
   lights, signs, tickets, backpacks, ID cards etc. with sparkles and dots
   filling the gaps (the CampusRides take on a chat-app wallpaper). One
   stroke-only SVG used as a CSS mask, so colour = --doodle-color and it
   flips cleanly between light and dark mode. Painted behind content
   (z-index:-1 inside an isolated stacking context) and never catches taps.
   ========================================================================== */
:root {
  /* --doodle-url is defined in doodles.css */
  --doodle-color: var(--primary);
  --doodle-opacity: 0.3;
  --doodle-size: 520px;
}
html.dark { --doodle-color: oklch(1 0 0); --doodle-opacity: 0.085; }

.splash, .option-screen, .auth-screen, .wallet-card { isolation: isolate; }
:where(.splash, .option-screen, .auth-screen) { position: relative; }

.splash::before, .option-screen::before, .auth-screen::before, .wallet-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--doodle-color);
  opacity: var(--doodle-opacity);
  -webkit-mask-image: var(--doodle-url);
          mask-image: var(--doodle-url);
  -webkit-mask-size: var(--doodle-size) var(--doodle-size);
          mask-size: var(--doodle-size) var(--doodle-size);
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
}
/* Splash: pale-blue wallpaper in light mode (dark mode keeps its gradient). */
.splash { background: oklch(0.955 0.025 250); }
html.dark .splash::before { --doodle-opacity: 0.2; }
/* Wallet card sits on a blue gradient: white doodles, finer scale. */
.wallet-card::before { --doodle-color: oklch(1 0 0); --doodle-opacity: 0.16; --doodle-size: 340px; }

/* ==========================================================================
   Splash
   ========================================================================== */

.splash {
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.955 0.025 250);
  cursor: pointer;
  overflow: hidden;
}

/* Background route-sketch doodles (see the splash template comment) —
   sits behind .splash-mark via document order + no z-index on this
   layer, drifts very slowly so the screen doesn't feel static during
   the ~1.6s splash, and is skipped entirely under reduced-motion. */
.splash-doodles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.splash-doodle {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 9 10;
  opacity: 0.16;
  animation: splash-doodle-drift 9s ease-in-out infinite;
}
.splash-doodle-arrow {
  fill: none;
  stroke: var(--primary);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.16;
  animation: splash-doodle-drift 9s ease-in-out infinite;
}
.splash-doodle-dot { fill: var(--primary); opacity: 0.16; }
.splash-doodle:nth-of-type(3),
.splash-doodle-arrow:nth-of-type(4) { animation-delay: -3s; }

@keyframes splash-doodle-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Cartoon opening: the car hops along, squashes and stretches, puffs smoke,
   brakes with a wobble, then bounces happily. No road or streak lines. */
.splash {
  --splash-ink: var(--primary);
  --splash-bg: oklch(0.955 0.025 250);
  --splash-win: #e3f5fd;
  --splash-puff: #ffffff;
  --splash-puff-edge: oklch(0.687 0.148 236.5 / 0.45);
  --splash-shadow: oklch(0.45 0.12 245 / 0.22);
}
html.dark .splash {
  --splash-ink: oklch(0.97 0.01 90);
  --splash-bg: oklch(0.46 0.16 246);
  --splash-win: oklch(0.52 0.15 242);
  --splash-puff: oklch(1 0 0 / 0.7);
  --splash-puff-edge: oklch(1 0 0 / 0.6);
  --splash-shadow: oklch(0.2 0.1 255 / 0.35);
}

.splash-mark { position: relative; display: block; animation: splash-in 300ms ease-out both; }

/* wrapper = travels across the screen */
.splash-car {
  position: relative;
  width: 8rem;
  animation: splash-car-drive 1350ms cubic-bezier(.2,.75,.3,1) both;
}
/* body = hops, squashes and stretches (pivot at the tyres) */
.splash-body {
  position: relative;
  z-index: 1;
  transform-origin: 50% 100%;
  animation: splash-hop 0.225s ease-in-out 6,
             splash-brake 520ms cubic-bezier(.3,1.4,.5,1) 1350ms both,
             splash-happy 1.1s ease-in-out 1900ms infinite;
}
.splash-car-icon { width: 100%; height: auto; aspect-ratio: 700 / 458; display: block; }

/* round cartoon smoke puffs from the back of the car */
.splash-puffs { position: absolute; right: 98%; bottom: 14%; width: 1px; height: 1px; z-index: 0; }
.splash-puff {
  position: absolute;
  right: 0; bottom: 0;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--splash-puff);
  box-shadow: 0 0 0 0.12rem var(--splash-puff-edge);
  opacity: 0;
  animation: splash-puff 0.55s ease-out 1 both;
}
.splash-puff:nth-child(1) { animation-delay: 0ms;   animation-iteration-count: 3; }
.splash-puff:nth-child(2) { animation-delay: 180ms; animation-iteration-count: 3; width: 0.9rem; height: 0.9rem; }
.splash-puff:nth-child(3) { animation-delay: 360ms; animation-iteration-count: 2; width: 1.4rem; height: 1.4rem; }

/* squishy shadow that shrinks whenever the car is in the air */
.splash-shadow {
  position: absolute;
  left: 8%; right: 8%;
  top: 100%;
  height: 0.7rem;
  margin-top: -0.2rem;
  border-radius: 50%;
  background: var(--splash-shadow);
  filter: blur(2px);
  animation: splash-shadow-hop 0.225s ease-in-out 6,
             splash-shadow-happy 1.1s ease-in-out 1900ms infinite;
}

@keyframes splash-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-car-drive {
  0%   { transform: translateX(-26rem); }
  100% { transform: translateX(0); }
}
@keyframes splash-hop {
  0%, 100% { transform: translateY(0) scale(1.03, 0.97); }
  50%      { transform: translateY(-0.5rem) scale(0.98, 1.03); }
}
/* skid: lean forward, squash flat, spring back with a wobble */
@keyframes splash-brake {
  0%   { transform: rotate(0) scale(1.02, 0.98); }
  25%  { transform: rotate(3deg) scale(1.07, 0.93); }
  50%  { transform: rotate(-2deg) scale(0.97, 1.04); }
  75%  { transform: rotate(1deg) scale(1.01, 0.99); }
  100% { transform: rotate(0) scale(1); }
}
/* idle: a happy little jump every beat */
@keyframes splash-happy {
  0%, 100% { transform: translateY(0) scale(1.02, 0.97); }
  40%      { transform: translateY(-0.6rem) scale(0.98, 1.03); }
  60%      { transform: translateY(-0.6rem) scale(0.98, 1.03); }
}
@keyframes splash-puff {
  0%   { opacity: 0.95; transform: translate(0, 0) scale(0.3); }
  100% { opacity: 0;    transform: translate(-2.4rem, -0.9rem) scale(1.7); }
}
@keyframes splash-shadow-hop {
  0%, 100% { transform: scaleX(1);   opacity: 1; }
  50%      { transform: scaleX(0.8); opacity: 0.6; }
}
@keyframes splash-shadow-happy {
  0%, 100% { transform: scaleX(1);   opacity: 1; }
  40%, 60% { transform: scaleX(0.75); opacity: 0.55; }
}


/* ==========================================================================
   Glassmorphism surfaces
   ==========================================================================
   Classic glassmorphism: a flat translucent white fill, a soft blur+
   saturate backdrop-filter so colors behind the glass stay readable
   instead of washing out grey, a thin light border, and a soft drop
   shadow for lift. Three strengths, from most to least transparent:
     .glass-panel — big hero surfaces (auth cards) over the plain background
     .glass-row   — small chrome (search bar, bottom nav, icon buttons)
     .card        — content-bearing surfaces (see the shared selector list
                    just below it) that need higher opacity for legibility
   ========================================================================== */

.glass-panel {
  background: oklch(1 0 0 / 22%);
  border: 1px solid oklch(1 0 0 / 35%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-card);
  /* Works around a Safari/WebKit bug where backdrop-filter can render a
     jagged seam instead of clipping cleanly to border-radius, without
     resorting to overflow:hidden (which would also clip/break scrolling
     on tall cards like the driver-signup sheet). isolation:isolate forces
     its own compositing layer, which is the other half of this fix —
     the mask alone hasn't fully resolved it on every device tested. */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}

.glass-row {
  background: oklch(1 0 0 / 18%);
  border: 1px solid oklch(1 0 0 / 30%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Shared frosted body for every content card in the app — grouped in one
   rule so they all read as the same material. Each selector keeps its own
   border-radius/padding/layout in its own rule further down; only the
   glass "skin" lives here. */
.card,
.review-section,
.empty-state,
.profile-row,
.switch-row,
.faq-item,
.role-card,
.stat-chip,
.active-ride-card {
  background: oklch(1 0 0 / 62%);
  color: var(--card-foreground);
  border: 1px solid oklch(1 0 0 / 40%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-card);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}


/* ==========================================================================
   Liquid-glass surfaces (frosted, no outline)
   --------------------------------------------------------------------------
   Layered over the base glass rules above:
     • heavy blur + high saturation so the wallpaper and gradients behind the
       card dissolve into soft, blended colour (the "frost")
     • faint tinted blooms and a top-left sheen painted as background layers,
       so the inside of the card has depth instead of being a flat tint
     • a soft inner glow and a deep tinted shadow for lift
     • no border / rim line — the edge is defined only by the frost itself
   ========================================================================== */

/* Hero surfaces — the auth cards. */
.glass-panel {
  position: relative;
  overflow: hidden;
  border-radius: 42px;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.10),
      rgba(13, 162, 231, 0.025),
      rgba(255, 255, 255, 0.055)
    );

  -webkit-backdrop-filter:
    blur(3px)
    saturate(160%)
    brightness(1.12);

  backdrop-filter:
    blur(3px)
    saturate(100%)
    brightness(1.1);

  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.07),
    0 25px 55px -30px rgba(0, 60, 120, 0.25);
}

html.dark .glass-panel {
  background:
    radial-gradient(75% 55% at 88% 10%, oklch(0.6 0.14 290 / 26%) 0%, oklch(0.6 0.14 290 / 0%) 70%),
    radial-gradient(85% 60% at 8% 92%, oklch(0.55 0.15 245 / 30%) 0%, oklch(0.55 0.15 245 / 0%) 70%),
    radial-gradient(120% 80% at 4% 0%, oklch(1 0 0 / 18%) 0%, oklch(1 0 0 / 0%) 60%),
    linear-gradient(150deg, oklch(1 0 0 / 13%) 0%, oklch(1 0 0 / 4%) 55%, oklch(1 0 0 / 8%) 100%);
  box-shadow:
    0 32px 60px -24px oklch(0 0 0 / 55%),
    inset 0 0 64px oklch(1 0 0 / 6%);
}

/* Small chrome — search bar, icon buttons, wallet chip. */
.glass-row {
  background:
    radial-gradient(120% 120% at 0% 0%, oklch(1 0 0 / 42%) 0%, oklch(1 0 0 / 0%) 60%),
    linear-gradient(150deg, oklch(1 0 0 / 26%), oklch(1 0 0 / 9%));
  border-color: transparent;
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  box-shadow:
    0 12px 24px -14px oklch(0.4 0.14 255 / 30%),
    inset 0 0 20px oklch(1 0 0 / 16%);
}

/* Content cards — more opaque than the hero panels so text stays legible.
   Light mode only (dark keeps its existing card tone). :where() keeps the
   specificity at one class so later, more specific card rules still win. */
:where(html:not(.dark)) :is(.card, .review-section, .empty-state, .profile-row, .switch-row, .faq-item, .role-card, .stat-chip, .active-ride-card) {
  background:
    radial-gradient(120% 90% at 0% 0%, oklch(1 0 0 / 55%) 0%, oklch(1 0 0 / 0%) 58%),
    radial-gradient(80% 60% at 100% 100%, oklch(0.88 0.07 230 / 20%) 0%, oklch(0.88 0.07 230 / 0%) 70%),
    linear-gradient(150deg, oklch(1 0 0 / 60%) 0%, oklch(1 0 0 / 38%) 100%);
  border-color: transparent;
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  backdrop-filter: blur(28px) saturate(190%);
  box-shadow:
    0 18px 34px -18px oklch(0.4 0.14 255 / 30%),
    0 2px 6px oklch(0.4 0.14 255 / 7%),
    inset 0 0 28px oklch(1 0 0 / 16%);
}

/* ==========================================================================
   Auth screens
   ========================================================================== */

.auth-card {
  margin-top: 3.5rem;
  border-radius: 2rem;
  padding: 2rem 1.5rem;
}
.auth-card--center { text-align: center; }

/* The driver-signup screen mimics a bottom-sheet rather than a small
   floating card: it stretches to fill the rest of the viewport (flex:1,
   inside .page's flex column) and only rounds its top corners, so it
   reads as a tall panel rising up from the bottom of the screen. */
.auth-card--left {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  border-radius: 2rem;
  padding: 2rem 1.5rem 2.5rem;
}

/* The small "DRIVER" pill shown above the title on driver-only screens —
   a quick visual cue that this form is part of the driver flow, not the
   student one. */
.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.role-badge-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--primary);
}

.auth-title {
  color: var(--foreground);
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}
.auth-title--sm { font-size: 1.6rem; }
.auth-title--left { text-align: left; }

.auth-subtitle {
  margin: 0.25rem 0 0;
  text-align: center;
  font-size: 1rem;
  color: var(--muted-foreground);
}
.auth-subtitle--left { text-align: left; margin-top: 0.75rem; }
.auth-subtitle--left span { color: var(--foreground); font-weight: 500; }

.auth-form { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 1.25rem; }

.field { display: block; }

.field-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  color: oklch(var(--ink) / 70%);
}

.pill-input {
  height: 3.5rem;
  width: 100%;
  border: 1px solid oklch(1 0 0 / 60%);
  border-radius: 999px;
  background: linear-gradient(135deg, oklch(1 0 0 / 92%), oklch(1 0 0 / 74%));
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  padding: 0 1.5rem;
  font-size: 1rem;
  /* Deliberately a fixed dark ink, NOT var(--foreground) — this field's
     own background stays a light glass in both themes (see above), so
     its text has to stay dark too. Using the theme's foreground token
     here was the actual bug behind "login boxes look empty" in dark
     mode: --foreground flips light for dark-mode text on the dark page
     background, but that made typed text invisible against this
     field's backdrop, which never stopped being light. */
  color: oklch(0.16 0.01 260);
  outline: none;
  transition: box-shadow 150ms ease;
}
.pill-input.has-trailing { padding-right: 3.5rem; }
.pill-input::placeholder { color: oklch(0.52 0.02 258 / 70%); }
.pill-input:focus { box-shadow: 0 0 0 2px var(--ring); }

.input-wrap { position: relative; }

.trailing-btn {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--primary);
  display: flex;
  padding: 0.25rem;
}

.forgot-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--foreground);
}

/* Inline validation — shown when a sign-in/sign-up form is submitted with
   missing or invalid fields. `.has-error` marks the offending input. */
.form-error {
  margin: -0.5rem 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: oklch(0.55 0.19 25);
}
.pill-input.has-error {
  box-shadow: 0 0 0 2px oklch(0.62 0.19 25 / 65%);
}

/* OTP screen: since this preview can't send real email, this note (and
   its one-tap fill-and-continue link) is the actual fix for testers
   getting stuck waiting on a code that will never arrive. */
.otp-demo-note {
  margin: 0.75rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}
.otp-demo-note a { color: var(--primary); font-weight: 600; }

.btn-primary {
  height: 3.5rem;
  width: 100%;
  border: 1px solid oklch(1 0 0 / 30%);
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 1.0625rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px -10px oklch(0.5 0.15 236.5 / 55%);
  transition: transform 120ms ease, opacity 120ms ease;
}
.btn-primary:active { transform: scale(0.99); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-primary.btn-link { margin-top: 1.5rem; text-decoration: none; }

.divider {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.divider span { height: 1px; flex: 1; background: oklch(var(--ink) / 15%); }
.divider em {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.switch-line {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
  color: oklch(var(--ink) / 80%);
}
.switch-line a { font-weight: 500; color: var(--primary); }
.switch-line--muted { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

.field-hint {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* OTP boxes */
.otp-row {
  display: flex;
  gap: 0.6rem;
}
.otp-box {
  width: 100%;
  aspect-ratio: 1 / 1.05;
  border: 1px solid oklch(1 0 0 / 60%);
  border-radius: 1rem;
  background: linear-gradient(135deg, oklch(1 0 0 / 92%), oklch(1 0 0 / 74%));
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  /* Same fixed-ink fix as .pill-input above — this box's background
     doesn't follow the theme either, so its text can't follow it. */
  color: oklch(0.16 0.01 260);
  outline: none;
}
.otp-box:focus { box-shadow: 0 0 0 2px var(--ring); }

.resend-line {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}
.resend-line a { font-weight: 600; color: var(--primary); }
.resend-line a.is-disabled { pointer-events: none; opacity: 0.75; }

.success-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--primary);
  margin-bottom: 1rem;
}

/* ==========================================================================
   Flow screens (driver onboarding: verification, vehicle, documents, review)
   ========================================================================== */

.flow-screen .page { padding-top: 2rem; }

.flow-header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--foreground);
  flex-shrink: 0;
}

.flow-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.flow-subtitle {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.flow-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.field-label-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  color: var(--foreground);
}

.check-box {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.375rem;
  background: var(--border);
  color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 120ms ease, color 120ms ease;
}
.check-box .icon { width: 0.85rem; height: 0.85rem; }
input:checked + .check-box {
  background: var(--primary);
  color: oklch(1 0 0);
}

/* Submit Application review summary: one card per step (Personal Info /
   Vehicle Info / Bank Details) showing what was actually entered, each
   with an "Edit" link back to that step. */
.review-summary {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.review-section {
  border-radius: 1.5rem;
  padding: 1.25rem 1.375rem;
}
.review-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.review-section-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.review-section-head a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--primary);
}
.review-fields {
  margin: 0.85rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.review-fields > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9375rem;
}
.review-fields dt { margin: 0; color: var(--muted-foreground); }
.review-fields dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
  max-width: 65%;
}

.agree-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  font-size: 0.9375rem;
  color: var(--foreground);
}
.agree-row input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ==========================================================================
   Shell (header + bottom nav) screens
   ========================================================================== */

.shell-header { display: flex; align-items: center; justify-content: space-between; }

.icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(var(--ink) / 70%);
}

.shell-main { flex: 1; margin-top: 0; }

/* Home screen greeting + at-a-glance wallet balance */
.home-greeting {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.home-greeting-line {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-greeting-name {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-wallet-chip {
  margin-top: 1rem;
  border-radius: 1.5rem;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: var(--shadow-card), inset 0 1px 0 oklch(1 0 0 / 45%);
}
.home-wallet-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.home-wallet-label { font-size: 0.75rem; color: var(--muted-foreground); }
.home-wallet-amount { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.home-wallet-eye {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: none;
  background: oklch(1 0 0 / 45%);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Small eye toggle sitting inline in the Wallet page's own balance label */
.wallet-eye-btn {
  border: none;
  background: none;
  padding: 0;
  color: inherit;
  opacity: 0.85;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.search-bar {
  margin-top: 1.25rem;
  height: 3.5rem;
  border-radius: 999px;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.search-input {
  flex: 1;
  height: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 1rem;
}
.search-input::placeholder { color: oklch(var(--ink) / 50%); }

.select-card {
  margin-top: 2rem;
  border-radius: 1.75rem;
  padding: 1.25rem;
}

.select-row { display: flex; align-items: center; gap: 1rem; }

.dot {
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--primary);
  flex-shrink: 0;
}

.select-col { min-width: 0; flex: 1; }

.select-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--primary);
}

.select-wrap { position: relative; margin-top: 0.1rem; }

.select-wrap select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  padding-right: 2rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--card-foreground);
}
.select-wrap select:invalid { color: oklch(var(--ink) / 55%); }

.select-chevron {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: oklch(var(--ink) / 60%);
}

.dashed-divider {
  margin: 1rem 0;
  border-top: 1px dashed var(--border);
}

.section-heading {
  margin-top: 2rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.section-heading h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.section-heading .hint { font-size: 0.875rem; color: var(--muted-foreground); }

.tile-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.brand-tile {
  height: 7rem;
  border: 1px solid oklch(1 0 0 / 25%);
  border-radius: 1rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  background: linear-gradient(135deg, oklch(1 0 0 / 30%) 0%, transparent 45%), linear-gradient(160deg, oklch(0.72 0.14 236), oklch(0.66 0.15 238));
  color: oklch(1 0 0);
  box-shadow: var(--shadow-tile), inset 0 1px 0 oklch(1 0 0 / 40%);
  transition: transform 120ms ease;
}
.brand-tile:active { transform: scale(0.97); }
.brand-tile .icon { width: 1.6rem; height: 1.6rem; }
.brand-tile span.label {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
}
.brand-tile.is-active { outline: 2px solid oklch(1 0 0 / 80%); outline-offset: -2px; }

#confirm-ride-btn { margin-top: 2rem; }

/* ==========================================================================
   Bottom navigation
   ========================================================================== */

.bottom-nav-wrap {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 26rem);
  z-index: 20;
}

.bottom-nav {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* Deliberately more transparent than the standard .glass-row it also
     carries — this is the one surface in the app meant to look almost
     entirely see-through, like the reference "Liquid Glass" nav pill:
     background shows through clearly, with just a bright top edge and a
     soft specular blob (the ::before below) suggesting curved glass. */
  background: linear-gradient(100deg, oklch(1 0 0 / 16%), oklch(1 0 0 / 5%));
  border: 1px solid oklch(1 0 0 / 38%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  box-shadow: var(--shadow-card), inset 0 1px 0 oklch(1 0 0 / 55%);
  /* .glass-row's corner mask (for the Safari backdrop-filter/border-radius
     bug) fades to fully transparent at the very edge — combined with how
     transparent this pill already is, that let whatever card was
     scrolling past underneath show through right at the rounded corners.
     This element already clips its own corners via overflow:hidden
     above, so the mask isn't needed here and the trade-off isn't worth
     it — it's what caused a Decline button's red outline to visibly
     peek through the nav on the Requests screen. */
  -webkit-mask-image: none;
}
.bottom-nav::before {
  /* The specular highlight blob — a soft bright patch near one edge,
     the way light catches the curve of real glass. Purely decorative
     and non-interactive. */
  content: "";
  position: absolute;
  top: -60%;
  right: -8%;
  width: 55%;
  height: 220%;
  background: radial-gradient(closest-side, oklch(1 0 0 / 50%), transparent 70%);
  pointer-events: none;
}

.nav-item {
  width: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  border: none;
  background: none;
  color: oklch(var(--ink) / 70%);
  font-size: 0.6875rem;
  padding: 0.25rem 0;
}

.nav-item .nav-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.nav-item.is-active { color: var(--primary); font-weight: 500; }
.nav-item.is-active .nav-icon { background: var(--primary); color: var(--primary-foreground); }

/* ==========================================================================
   Misc screens: rides / wallet / profile
   ========================================================================== */

.page-title {
  margin: 1.5rem 0 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.empty-state {
  margin-top: 2rem;
  border-radius: 1.75rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
.empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--primary);
  margin-bottom: 1rem;
}
.empty-title { margin: 0; font-weight: 600; font-size: 1.0625rem; }
.empty-copy { margin: 0.4rem 0 0; color: var(--muted-foreground); font-size: 0.9375rem; line-height: 1.5; }

/* ==========================================================================
   Wallet summary card
   Brand-blue gradient (matching the logo exactly) + a glassmorphism layer:
   two blurred, semi-transparent "blobs" sit on top of the gradient to give
   the frosted-glass sheen, same trick as .glass-panel/.glass-row elsewhere.
   ========================================================================== */

.wallet-card {
  position: relative;
  overflow: hidden;
  margin-top: 1.25rem;
  border-radius: 1.75rem;
  padding: 1.5rem 1.375rem 1.75rem;
  color: oklch(1 0 0);
  background: linear-gradient(160deg, var(--wallet-blue-light) 0%, var(--wallet-blue) 45%, var(--wallet-blue-dark) 100%);
  box-shadow: var(--shadow-card);
}

/* Frosted glass blob — soft, blurred, translucent shape layered over the
   gradient. Pure decoration; kept out of layout with position:absolute. */
.wallet-blob {
  position: absolute;
  border-radius: 999px;
  background: oklch(1 0 0 / 22%);
  filter: blur(30px);
  pointer-events: none;
}
.wallet-blob--a { width: 12rem; height: 12rem; top: -4rem; right: -3rem; left: auto; }

.wallet-card--simple {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}
.wallet-label { position: relative; z-index: 1; font-size: 0.875rem; opacity: 0.85; }
.wallet-amount {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
}
.btn-wallet-outline {
  position: relative;
  z-index: 1;
  margin-top: 0.75rem;
  height: 2.75rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  border: 1px solid oklch(1 0 0 / 55%);
  background: oklch(1 0 0 / 12%);
  color: oklch(1 0 0);
  font-size: 0.9375rem;
  font-weight: 500;
}

/* Wallet transaction history — a card per transaction (reusing the shared
   .card glass skin), an icon badge, label + timestamp, and a signed
   amount colored green for money in / plain for money out. */
.transaction-list { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.25rem; }
.transaction-row {
  border-radius: 1.25rem;
  padding: 0.9rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.transaction-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.transaction-icon--credit { background: oklch(0.92 0.09 150 / 60%); color: oklch(0.5 0.14 150); }
.transaction-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.transaction-label {
  font-size: 0.9375rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transaction-time { font-size: 0.75rem; color: var(--muted-foreground); }
.transaction-amount { font-weight: 600; flex-shrink: 0; }
.transaction-amount--credit { color: oklch(0.5 0.14 150); }

.profile-head {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.profile-head--btn {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.profile-head-text { flex: 1; min-width: 0; }
.profile-head-chevron { color: var(--muted-foreground); flex-shrink: 0; }

.profile-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-name { margin: 0; font-weight: 600; font-size: 1.0625rem; }
.profile-sub { margin: 0.15rem 0 0; font-size: 0.875rem; color: var(--muted-foreground); }

.profile-list { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.profile-row {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  font-size: 1.0625rem;
  color: var(--foreground);
  cursor: pointer;
}
.profile-row .icon { color: var(--primary); }
.profile-row span:not(.badge-default) { flex: 1; min-width: 0; }
.profile-row-chevron { color: var(--muted-foreground); flex-shrink: 0; }

.profile-row--danger {
  margin-top: 1.25rem;
  color: oklch(0.55 0.19 25);
  justify-content: flex-start;
}
.profile-row--danger .icon { color: oklch(0.55 0.19 25); }
.profile-row--danger span { flex: none; }

.badge-default {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--brand-soft);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.inline-success {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--primary);
}

/* ==========================================================================
   Notification toggles
   ========================================================================== */

.switch-list { display: flex; flex-direction: column; gap: 0.75rem; }
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 1.25rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
}
.switch-row-label { font-size: 1rem; }

/* Richer variant used on the Settings screen: an icon chip + a label
   with a muted sub-description underneath, instead of just a bare label
   (Notifications above uses the plain .switch-row-label on its own). */
.switch-row-text { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.switch-row-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.switch-row-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

.switch-toggle { position: relative; flex-shrink: 0; }
.switch-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.switch-track {
  display: block;
  width: 2.75rem;
  height: 1.6rem;
  border-radius: 999px;
  background: var(--border);
  transition: background 150ms ease;
}
.switch-thumb {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0.2rem;
  border-radius: 999px;
  background: oklch(1 0 0);
  transition: transform 150ms ease;
}
.switch-toggle input:checked + .switch-track { background: var(--primary); }
.switch-toggle input:checked + .switch-track .switch-thumb { transform: translateX(1.15rem); }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.faq-list { display: flex; flex-direction: column; gap: 0.75rem; }
.faq-item {
  border-radius: 1.25rem;
  padding: 1rem 1.25rem;
}
.faq-question {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  font-size: 1rem;
  font-weight: 500;
  color: var(--foreground);
  cursor: pointer;
}
.faq-chevron { color: var(--muted-foreground); transition: transform 150ms ease; flex-shrink: 0; }
.faq-answer {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  line-height: 1.5;
  transition: max-height 200ms ease, margin-top 200ms ease;
}
.faq-item.is-open .faq-answer { margin-top: 0.75rem; max-height: 10rem; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }

/* ==========================================================================
   Role picker (student / driver)
   ========================================================================== */

.option-page {
  justify-content: center;
  gap: 2rem;
}

.option-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.role-card {
  border: none;
  border-radius: 1.5rem;
  padding: 1.25rem 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 0.6rem;
  transition: transform 120ms ease;
}
.role-card:active { transform: scale(0.98); }

.role-illus {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
}
.role-illus .icon { width: 100%; height: 100%; }

.role-name { font-weight: 600; font-size: 1rem; color: var(--primary); }
.role-copy { font-size: 0.8125rem; line-height: 1.4; color: var(--muted-foreground); }

/* ==========================================================================
   Confirm ride + live ride status
   ========================================================================== */

.route-value { margin: 0.1rem 0 0; font-size: 1.0625rem; font-weight: 500; }
.route-line { margin: 0.35rem 0 0; color: var(--muted-foreground); font-size: 0.9375rem; }

.dot--dest { background: oklch(0.62 0.19 25); }

.stat-row {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.stat-chip {
  border-radius: 1.25rem;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.stat-label { font-size: 0.75rem; color: var(--muted-foreground); }
.stat-value { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.stat-sublabel { font-size: 0.6875rem; color: var(--muted-foreground); }

.fare-summary {
  margin-top: 1.25rem;
  padding: 1.15rem 1.2rem;
  border-radius: 1.35rem;
}
.fare-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  color: var(--foreground);
  font-size: 0.92rem;
}
.fare-summary-row span:last-child { font-weight: 650; }
.fare-summary-row--muted { color: var(--muted-foreground); }
.fare-summary-divider {
  height: 1px;
  background: var(--border);
  margin: 0.25rem 0;
}
.fare-summary-total {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 750;
}
.fare-summary-share {
  margin-top: 0.2rem;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border);
}
.fare-summary-share strong { color: var(--primary-strong); }
.fare-summary-note {
  margin: 0.65rem 0 0;
  font-size: 0.7rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.admin-metric { padding: 1rem; border-radius: 1.25rem; }
.admin-metric-label { display: block; font-size: 0.72rem; color: var(--muted-foreground); }
.admin-metric-value { display: block; margin-top: 0.25rem; font-family: var(--font-display); font-size: 1.15rem; font-weight: 750; }
.admin-section { margin-top: 1.5rem; }
.admin-section h2 { margin: 0; font-size: 1rem; }
.admin-list { display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.75rem; }
.admin-list-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem; border-radius: 1rem; }
@media (max-width: 360px) {
  .admin-grid { grid-template-columns: 1fr; }
}

/* Passenger count stepper on the Confirm Ride screen — campus cabs are
   shared, so the total fare (charged per person) depends on how many
   people are splitting it. */
.passenger-row {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 1.5rem;
  padding: 1.1rem 1.25rem;
}
.passenger-label { display: block; font-weight: 500; }
.passenger-hint { display: block; margin-top: 0.2rem; font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.4; }

.stepper-control {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.stepper-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: none;
  background: var(--primary);
  color: oklch(1 0 0);
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stepper-btn:disabled { opacity: 0.35; }
.stepper-count { min-width: 1.5rem; text-align: center; font-weight: 600; font-size: 1.0625rem; }

#confirm-ride-submit, #confirm-ride-btn { margin-top: 2rem; }
.flow-screen .switch-line { margin-top: 1rem; text-align: center; }

/* ==========================================================================
   Live tracking strip (simulated) on the ride-status screen
   ========================================================================== */

/* The track itself: a pinned start dot, a pinned end dot, and a line
   between them. .track-fill grows to show distance already covered;
   .track-marker (the "vehicle") sits at the leading edge of that fill —
   both are driven from JS by setting a single --progress (0–1) custom
   property on #track-fill / #track-marker each tick. */
/* The live map: a stylized rounded "map surface" with a faint street grid,
   a dashed base route from pickup to destination, a solid progress
   overlay revealed via stroke-dasharray/dashoffset (set in JS from the
   real SVG path length, so it stays accurate regardless of curve shape),
   and a marker positioned with plain top/left percentages computed from
   the same quadratic-bezier curve as the SVG path (see initRideStatus()
   in app.js) — deliberately plain JS math rather than CSS motion paths,
   so it stays correct at any card width instead of needing a fixed size. */
.live-map {
  position: relative;
  margin-top: 1.5rem;
  border-radius: 1.5rem;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  background: linear-gradient(160deg, oklch(0.95 0.015 240), oklch(0.9 0.025 245));
  box-shadow: var(--shadow-card);
}
.live-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Irregularly-spaced, dashed, low-opacity "streets" instead of a rigid
   graph-paper crosshatch — reads as a faint map texture rather than a
   mechanical grid. The diagonal is a single accent line for variety. */
.live-map-grid { fill: none; stroke: oklch(var(--ink) / 10%); stroke-width: 0.5; stroke-dasharray: 2.2 3; }
.live-map-grid--diagonal { stroke: oklch(var(--ink) / 7%); stroke-width: 0.4; stroke-dasharray: 1.6 2.4; }
.live-map-route {
  fill: none;
  stroke: var(--muted-foreground);
  stroke-width: 1.6;
  stroke-dasharray: 2.4 2.4;
  stroke-linecap: round;
  opacity: 0.55;
}
.live-map-progress {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.8;
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms linear;
}
.live-map-pin { stroke: var(--card); stroke-width: 1.2; }
.live-map-pin--start { fill: var(--primary); }
.live-map-pin--end { fill: oklch(0.62 0.19 25); }

.live-map-marker {
  position: absolute;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: var(--primary);
  border: 3px solid var(--card);
  box-shadow: var(--shadow-tile);
  transform: translate(-50%, -50%);
  transition: left 900ms linear, top 900ms linear;
}
.live-map-marker::after {
  /* soft pulse so the moving dot reads as "live" rather than static */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  animation: pulse-ring 1.6s ease-out infinite;
}

.track-labels {
  margin-top: 0.5rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.track-label {
  font-size: 0.75rem;
  color: var(--muted-foreground);
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.track-label--end { text-align: right; }

.stepper {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.stepper-step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  text-align: center;
}
.stepper-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0.9rem;
  left: 55%;
  width: 90%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.stepper-dot {
  position: relative;
  z-index: 1;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--card);
  border: 2px solid var(--border);
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
}
.stepper-label { font-size: 0.6875rem; color: var(--muted-foreground); line-height: 1.2; }

.stepper-step.is-done .stepper-dot,
.stepper-step.is-current .stepper-dot {
  background: var(--primary);
  border-color: var(--primary);
  color: oklch(1 0 0);
}
.stepper-step.is-done:not(:last-child)::after { background: var(--primary); }
.stepper-step.is-current .stepper-label,
.stepper-step.is-done .stepper-label { color: var(--foreground); font-weight: 500; }
.stepper-step.is-current .stepper-dot { animation: pulse-ring 1.4s ease-out infinite; }

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 oklch(0.687 0.148 236.5 / 45%); }
  100% { box-shadow: 0 0 0 8px oklch(0.687 0.148 236.5 / 0%); }
}

.status-message {
  margin: 1.5rem 0 0;
  font-size: 1.0625rem;
  font-weight: 500;
  text-align: center;
}

.driver-card {
  margin-top: 1.25rem;
  border-radius: 1.5rem;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.driver-info { flex: 1; min-width: 0; }
.driver-name { margin: 0; font-weight: 600; }
.driver-vehicle { margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--muted-foreground); }
.driver-rating { font-size: 0.9375rem; font-weight: 600; color: var(--primary); flex-shrink: 0; }

/* Payment prompt — only shown from the "driver has arrived" stage
   onward. The method row is a simple front-end selector: Wallet is the
   only one that actually processes anything right now, Card is a
   disabled placeholder so the flow already has a slot for a real payment
   backend later without needing a redesign. */
.payment-prompt { margin-top: 1.25rem; padding: 1.25rem 1.375rem; border-radius: 1.5rem; }
.payment-prompt-title { margin: 0 0 1rem; font-weight: 600; text-align: center; }
.payment-method-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1rem; }
.payment-method-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--brand-soft);
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
}
.payment-method-btn.is-selected {
  border-color: var(--primary);
  background: oklch(1 0 0 / 70%);
  color: var(--primary);
}
.payment-method-btn:disabled { opacity: 0.65; }
.payment-method-btn .badge-default { margin-left: 0.15rem; }

.payment-paid-note {
  margin: 1.25rem 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: oklch(0.5 0.14 150);
}

.rate-block { margin-top: 1.5rem; text-align: center; }
.rate-title { margin: 0 0 0.6rem; font-weight: 500; }
.star-row { display: flex; justify-content: center; gap: 0.35rem; }
.star-btn {
  border: none;
  background: none;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--border);
  padding: 0.1rem;
}
.star-btn.is-active { color: oklch(0.78 0.16 80); }

.btn-outline-danger {
  margin-top: 1.5rem;
  height: 3.25rem;
  width: 100%;
  border: 1.5px solid oklch(0.62 0.19 25 / 55%);
  border-radius: 999px;
  background: transparent;
  color: oklch(0.55 0.19 25);
  font-size: 1rem;
  font-weight: 500;
}

.active-ride-card {
  border-radius: 1.75rem;
  padding: 1.25rem 1.25rem 1.5rem;
  margin-top: 1.25rem;
}
.active-ride-card .route-line { margin-top: 0.5rem; }
.active-ride-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--primary);
}
.active-ride-status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--primary);
  animation: pulse-ring 1.4s ease-out infinite;
}
.active-ride-card .btn-primary { margin-top: 1rem; }

/* ==========================================================================
   Motion & accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .splash-mark, .splash-car, .splash-body, .splash-puff, .splash-shadow, .splash-doodle, .splash-doodle-arrow { animation: none; }
  .btn-primary, .brand-tile { transition: none; }
}

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }




/* CampusRides mobile sizing: subtle reduction for phone screens. (The
   actual iOS zoom-on-focus fix lives in styles.css as a hard !important
   override — a bare rule here would lose to component classes like
   .pill-input regardless of source order, since they're more specific.) */
@media (max-width: 480px) {
  html { font-size: 15px; }
}
#done-ride-btn { margin-top: 0.75rem; }



/* ==========================================================================
   Driver ride requests — polished mobile cards
   Keep request content aligned and readable instead of inheriting the
   full-width button styles used by other screens.
   ========================================================================== */

#driver-requests-preview,
#driver-requests-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding-bottom: 0.5rem;
}

.request-card {
  width: 100%;
  margin: 0;
  padding: 1.15rem 1.1rem 1.05rem;
  border-radius: 1.45rem;
  color: var(--card-foreground);
  text-align: left;
  overflow: hidden;
}

.request-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  min-width: 0;
}

.request-student {
  min-width: 0;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-fare {
  flex: 0 0 auto;
  color: var(--primary-strong);
  background: var(--brand-soft);
  border: 1px solid oklch(0.687 0.148 236.5 / 18%);
  border-radius: 999px;
  padding: 0.38rem 0.65rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.request-card .route-line {
  margin: 0.75rem 0 0;
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.request-card .request-meta {
  margin: 0.45rem 0 0;
  color: var(--foreground);
  font-size: 0.84rem;
  font-weight: 500;
  line-height: 1.35;
}

.request-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 1rem;
  align-items: stretch;
}

.request-actions .btn-primary,
.request-actions .btn-outline-danger {
  width: 100%;
  height: 3rem;
  min-height: 3rem;
  margin: 0;
  padding: 0 0.8rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.request-actions .btn-primary {
  color: var(--primary-foreground);
}

.request-actions .btn-outline-danger {
  color: oklch(0.55 0.19 25);
  background: oklch(1 0 0 / 18%);
}

.request-actions .btn-primary:active,
.request-actions .btn-outline-danger:active {
  transform: scale(0.985);
}

.request-card + .request-card {
  margin-top: 1rem;
}

/* Only the request-list "View all requests" link gets the pill treatment.
   Auth switch lines stay neutral, with only their actual link blue. */
.request-card + .switch-line,
.request-card ~ .switch-line {
  display: block;
  margin: 0.15rem 0 0.5rem;
  padding: 0.75rem 1rem;
  text-align: center;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;
  background: var(--brand-soft);
}

.request-card + .switch-line:hover,
.request-card ~ .switch-line:hover {
  color: var(--primary-strong);
}

/* Keep the last request clear of the fixed bottom navigation. */
#driver-requests-preview,
#driver-requests-list {
  padding-bottom: 1.25rem;
}

@media (max-width: 380px) {
  .request-card {
    padding: 1rem;
  }

  .request-actions {
    gap: 0.55rem;
  }

  .request-actions .btn-primary,
  .request-actions .btn-outline-danger {
    font-size: 0.86rem;
  }
}

/* ==========================================================================
   Splash entrance keyframes — the car drives in from the left with a small
   overshoot, then the three bars streak out behind it and settle into the
   existing "loading" pulse (they start at the pulse's first frame so the
   hand-off is seamless).
   ========================================================================== */
@keyframes splash-car-in {
  0%   { opacity: 0; transform: translateX(-140%); }
  15%  { opacity: 1; }
  72%  { transform: translateX(5%); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes splash-line-in {
  from { opacity: 0;   transform: scaleX(0); }
  to   { opacity: 0.3; transform: scaleX(0.45); }
}

/* ==========================================================================
   Animated logo (the original CampusRides tile, built from three layers so
   each part can move on its own):
     1. tile pops in with a springy scale
     2. the car drives in from the left and settles with a small overshoot
     3. the three speed bars streak out behind it, one after the other
     4. idle: the car bobs very slightly (road feel) and the bars shimmer
   Geometry is in % of the 480px tile so it scales to any .brand-mark size.
   ========================================================================== */
.brand-mark.logo-anim {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 23%;
  object-fit: initial;
}
.logo-anim > * { position: absolute; display: block; max-width: none; }
.logo-anim .la-tile {
  inset: 0;
  width: 100%;
  height: 100%;
  animation: la-tile-in 650ms cubic-bezier(.2,.9,.3,1.25) both;
}
.logo-anim .la-car {
  left: 32.8%;
  top: 37.4%;
  width: 48.1%;
  height: auto;
  animation: la-car-in 750ms cubic-bezier(.2,.9,.3,1) 250ms both,
             la-bob 3.2s ease-in-out 1.4s infinite;
}
.logo-anim .la-line {
  height: 2.7%;
  border-radius: 999px;
  background: #e0f4fd;
  transform-origin: right center;
}
.logo-anim .la-line:nth-of-type(1) { left: 17.5%; top: 40.0%; width: 13.1%; animation: la-line-in 480ms cubic-bezier(.2,.9,.3,1) 520ms both, la-streak 3.2s ease-in-out 1.5s infinite; }
.logo-anim .la-line:nth-of-type(2) { left: 15.6%; top: 45.4%; width: 16.5%; animation: la-line-in 480ms cubic-bezier(.2,.9,.3,1) 620ms both, la-streak 3.2s ease-in-out 1.65s infinite; }
.logo-anim .la-line:nth-of-type(3) { left: 18.3%; top: 50.8%; width: 11.5%; animation: la-line-in 480ms cubic-bezier(.2,.9,.3,1) 720ms both, la-streak 3.2s ease-in-out 1.8s infinite; }

@keyframes la-tile-in {
  0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes la-car-in {
  0%   { opacity: 0; transform: translateX(-140%); }
  18%  { opacity: 1; }
  72%  { transform: translateX(5%); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes la-line-in {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}
@keyframes la-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2.5%); }
}
@keyframes la-streak {
  0%, 100% { opacity: 1;   transform: scaleX(1); }
  50%      { opacity: 0.55; transform: scaleX(0.72); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-anim .la-tile, .logo-anim .la-car, .logo-anim .la-line,
  .splash-mark, .splash-car, .splash-body, .splash-wheel, .splash-puff, .splash-shadow, .splash-glow { animation: none !important; }
  .logo-anim .la-line { transform: none; opacity: 1; }
}

/* ==========================================================
   CAMPUSRides — FINAL TRANSPARENT GLASS OVERRIDE
   Visual styling only — preserves existing layout/functionality
   ========================================================== */

/* Main large glass surfaces */
.glass-panel {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.10),
      rgba(13, 162, 231, 0.025),
      rgba(255, 255, 255, 0.055)
    );

  border: none;

  -webkit-backdrop-filter:
    blur(3px)
    saturate(160%)
    brightness(1.12);

  backdrop-filter:
    blur(3px)
    saturate(100%)
    brightness(1.1);

  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.07),
    0 25px 55px -30px rgba(0, 60, 120, 0.25);

  -webkit-mask-image: -webkit-radial-gradient(white, black);
  isolation: isolate;
}


/* Small glass surfaces / search / chrome */
.glass-row {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.09),
      rgba(13, 162, 231, 0.02),
      rgba(255, 255, 255, 0.045)
    );

  border: none;

  -webkit-backdrop-filter:
    blur(3px)
    saturate(160%)
    brightness(1.12);

  backdrop-filter:
    blur(3px)
    saturate(100%)
    brightness(1.1);

  box-shadow:
    inset 0 0 30px rgba(255, 255, 255, 0.06),
    0 18px 40px -28px rgba(0, 60, 120, 0.22);

  -webkit-mask-image: -webkit-radial-gradient(white, black);
}


/* Content cards */
.card,
.review-section,
.empty-state,
.profile-row,
.switch-row,
.faq-item,
.role-card,
.stat-chip,
.active-ride-card {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.10),
      rgba(13, 162, 231, 0.025),
      rgba(255, 255, 255, 0.055)
    );

  color: var(--card-foreground);

  border: none;

  -webkit-backdrop-filter:
    blur(3px)
    saturate(160%)
    brightness(1.12);

  backdrop-filter:
    blur(3px)
    saturate(100%)
    brightness(1.1);

  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.07),
    0 25px 55px -30px rgba(0, 60, 120, 0.25);

  -webkit-mask-image: -webkit-radial-gradient(white, black);
}


/* ==========================================================
   BOTTOM NAV
   Keeps your existing position, size, padding and structure.
   Only changes the glass appearance.
   ========================================================== */

.bottom-nav {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.10),
      rgba(13, 162, 231, 0.025),
      rgba(255, 255, 255, 0.055)
    );

  border: none;

  -webkit-backdrop-filter:
    blur(3px)
    saturate(160%)
    brightness(1.12);

  backdrop-filter:
    blur(3px)
    saturate(100%)
    brightness(1.1);

  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.07),
    0 25px 55px -30px rgba(0, 60, 120, 0.25);

  -webkit-mask-image: none;
}


/* Bottom-nav decorative shine — made much more subtle */
.bottom-nav::before {
  background:
    radial-gradient(
      closest-side,
      rgba(255, 255, 255, 0.18),
      transparent 70%
    );
}


/* ==========================================================
   DARK MODE
   ========================================================== */

html.dark .glass-panel,
html.dark .glass-row,
html.dark .card,
html.dark .review-section,
html.dark .empty-state,
html.dark .profile-row,
html.dark .switch-row,
html.dark .faq-item,
html.dark .role-card,
html.dark .stat-chip,
html.dark .active-ride-card {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.055),
      rgba(13, 162, 231, 0.018),
      rgba(255, 255, 255, 0.025)
    );

  border: none;

  -webkit-backdrop-filter:
    blur(3px)
    saturate(100%)
    brightness(1.08);

  backdrop-filter:
    blur(3px)
    saturate(100%)
    brightness(1.08);

  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.035),
    0 25px 55px -30px rgba(0, 0, 0, 0.35);
}


/* Dark-mode bottom navigation */
html.dark .bottom-nav {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.055),
      rgba(13, 162, 231, 0.018),
      rgba(255, 255, 255, 0.025)
    );

  border: none;

  -webkit-backdrop-filter:
    blur(3px)
    saturate(100%)
    brightness(1.08);

  backdrop-filter:
    blur(3px)
    saturate(100%)
    brightness(1.08);

  box-shadow:
    inset 0 0 40px rgba(255, 255, 255, 0.035),
    0 25px 55px -30px rgba(0, 0, 0, 0.35);
}


html.dark .bottom-nav::before {
  background:
    radial-gradient(
      closest-side,
      rgba(255, 255, 255, 0.10),
      transparent 70%
    );
}

/* ==========================================================================
   UNIFIED GLASS — every glass container uses the bottom-nav recipe
   --------------------------------------------------------------------------
   The nav pill is the reference: almost see-through, no outline, a faint
   inner glow, a soft tinted drop shadow and one specular blob near the top
   right edge ("light catching curved glass"). Cards, panels, chips and rows
   now share exactly that look so the app reads as one material.
     • overflow:hidden clips the blob to the rounded shape (and replaces the
       old Safari corner-mask hack, so the mask is switched off)
     • z-index:-1 inside an isolated stacking context keeps the blob under
       the content, so it can never wash out text
   ========================================================================== */
.glass-panel, .glass-row, .card, .review-section, .empty-state, .profile-row,
.switch-row, .faq-item, .role-card, .stat-chip, .active-ride-card,
.seg, .ride-history-item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: none;
  -webkit-mask-image: none;
          mask-image: none;
}
.glass-panel::before, .glass-row:not(.bottom-nav)::before, .card::before,
.review-section::before, .empty-state::before, .profile-row::before,
.switch-row::before, .faq-item::before, .role-card::before, .stat-chip::before,
.active-ride-card::before, .seg::before, .ride-history-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -60%;
  right: -8%;
  width: 55%;
  height: 220%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.16), transparent 70%);
  pointer-events: none;
}
/* Small round chrome (icon buttons, wallet chip) is too short for a tall
   blob — a wider, shallower highlight reads better there. */
.icon-btn.glass-row::before, .home-wallet-chip::before {
  top: -90%;
  height: 200%;
  width: 90%;
  right: -20%;
}
html.dark .glass-panel::before, html.dark .glass-row:not(.bottom-nav)::before,
html.dark .card::before, html.dark .review-section::before,
html.dark .empty-state::before, html.dark .profile-row::before,
html.dark .switch-row::before, html.dark .faq-item::before,
html.dark .role-card::before, html.dark .stat-chip::before,
html.dark .active-ride-card::before, html.dark .seg::before,
html.dark .ride-history-item::before {
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), transparent 70%);
}
/* Same see-through fill + shadow as the nav for the new rides surfaces. */
.seg, .ride-history-item {
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(13,162,231,0.025), rgba(255,255,255,0.055));
  -webkit-backdrop-filter: blur(3px) saturate(100%) brightness(1.1);
          backdrop-filter: blur(3px) saturate(100%) brightness(1.1);
  box-shadow: inset 0 0 40px rgba(255,255,255,0.07), 0 25px 55px -30px rgba(0,60,120,0.25);
}
html.dark .seg, html.dark .ride-history-item {
  background: linear-gradient(135deg, rgba(255,255,255,0.055), rgba(13,162,231,0.018), rgba(255,255,255,0.025));
  box-shadow: inset 0 0 40px rgba(255,255,255,0.035), 0 25px 55px -30px rgba(0,0,0,0.35);
}

/* ==========================================================================
   Rides section — alignment & grids
   --------------------------------------------------------------------------
   One 4-step spacing rhythm (0.75 / 1 / 1.25 rem), every card on the same
   left/right edges, and each block laid out on a grid instead of ad-hoc
   margins:
     header  → title + live summary on one baseline, segmented switcher
     active  → [status | ETA] row · route timeline (2-col grid) · 3-col stats
     history → [icon | route + meta | fare + status] on a 3-track grid
   ========================================================================== */
.rides-head { margin-top: 1.25rem; display: grid; gap: 0.2rem; }
.rides-head .page-title { margin: 0; }
.rides-summary { margin: 0; font-size: 0.875rem; color: var(--muted-foreground); }

.seg {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.3rem;
  border-radius: 999px;
}
.seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted-foreground);
  height: 2.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.seg-btn.is-active {
  color: var(--primary-strong, var(--primary));
  background: linear-gradient(135deg, rgba(255,255,255,0.75), rgba(255,255,255,0.45));
  box-shadow: 0 6px 16px -8px rgba(0, 60, 120, 0.35);
}
html.dark .seg-btn.is-active {
  color: var(--foreground);
  background: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08));
}
.seg-count {
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 0.75rem;
  background: var(--brand-soft);
  color: var(--primary);
}

#rides-content { margin-top: 1.25rem; display: grid; gap: 0.75rem; }
#rides-content > .empty-state { margin-top: 0; }

/* Active ride card */
.active-ride-card { margin-top: 0; display: grid; gap: 1.1rem; padding: 1.25rem; }
.active-ride-card .btn-primary { margin-top: 0; width: 100%; }
.ride-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.ride-chip {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--primary);
  white-space: nowrap;
}

.ride-route {
  display: grid;
  grid-template-columns: 1rem 1fr;
  column-gap: 0.85rem;
  row-gap: 1rem;
  align-items: start;
  position: relative;
}
.ride-route::before {            /* the connector between the two nodes */
  content: "";
  position: absolute;
  left: calc(0.5rem - 1px);
  top: 1.1rem;
  bottom: 1.35rem;
  border-left: 2px dashed color-mix(in oklab, var(--primary) 45%, transparent);
}
.ride-node {
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  border: 3px solid var(--primary);
  background: transparent;
}
.ride-node--to { background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 18%, transparent); }
.ride-place { display: grid; gap: 0.1rem; min-width: 0; }
.ride-label { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }
.ride-name  { font-weight: 600; font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }

.ride-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid color-mix(in oklab, var(--foreground) 9%, transparent);
  padding-top: 1rem;
}
.ride-stat { display: grid; gap: 0.15rem; padding: 0 0.75rem; text-align: left; min-width: 0; }
.ride-stat:first-child { padding-left: 0; }
.ride-stat + .ride-stat { border-left: 1px solid color-mix(in oklab, var(--foreground) 9%, transparent); }
.ride-stat-label { font-size: 0.6875rem; color: var(--muted-foreground); }
.ride-stat-value { font-weight: 650; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* History rows */
.ride-history-item {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border-radius: 1.5rem;
}
.ride-history-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--primary);
}
.ride-history-main { display: grid; gap: 0.15rem; min-width: 0; }
.ride-history-route { margin: 0; font-weight: 600; font-size: 0.9375rem; line-height: 1.3; overflow-wrap: anywhere; }
.ride-history-meta { margin: 0; font-size: 0.75rem; color: var(--muted-foreground); }
.ride-history-side { display: grid; gap: 0.15rem; justify-items: end; }
.ride-history-fare { font-weight: 700; font-family: var(--font-display); }
.ride-history-status { font-size: 0.6875rem; font-weight: 600; color: oklch(0.55 0.15 150); }

/* ==========================================================================
   Ride status — calmer layout (fare is one row; paying has its own screens)
   ========================================================================== */
.btn-text-link, .btn-text-danger {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.85rem 1rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.btn-text-link { color: var(--primary); }
.btn-text-danger { margin-top: 1.25rem; color: oklch(0.55 0.19 25); }
.btn-text-link[hidden], .btn-text-danger[hidden] { display: none; }

.shell-main > .card, .shell-main > .rate-block { margin-top: 1rem; }
.fare-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.85rem;
  padding: 0.9rem 1.1rem;
  border-radius: 1.5rem;
}
.fare-row-icon, .pay-method-icon {
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--primary);
}
.fare-row-text { display: grid; gap: 0.1rem; min-width: 0; }
.fare-row-label { font-weight: 600; }
.fare-row-sub { font-size: 0.8125rem; color: var(--muted-foreground); }
.fare-row-side { display: grid; justify-items: end; gap: 0.25rem; }
.fare-row-amount { font-family: var(--font-display); font-size: 1.125rem; }
.fare-row-chip {
  font-size: 0.6875rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px;
}
.fare-row-chip--due  { background: oklch(0.95 0.07 85);  color: oklch(0.5 0.13 70); }
.fare-row-chip--paid { background: oklch(0.94 0.07 150); color: oklch(0.45 0.14 150); }
.pay-cta { margin-top: 1rem; }

/* ==========================================================================
   Payment screen (banking-app style: hero amount → sections → sticky action)
   ========================================================================== */
.pay-page { padding-bottom: 10.5rem; }
.pay-hero { margin-top: 1.5rem; display: grid; justify-items: center; gap: 0.25rem; text-align: center; }
.pay-hero-label { font-size: 0.8125rem; color: var(--muted-foreground); letter-spacing: 0.02em; }
.pay-amount { margin: 0; font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; letter-spacing: -0.02em; }
.pay-hero-sub { margin: 0; font-size: 0.9375rem; color: var(--muted-foreground); }

.pay-section-title {
  margin: 1.75rem 0 0.7rem;
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.pay-trip { display: grid; gap: 1rem; padding: 1.1rem 1.25rem; border-radius: 1.5rem; position: relative; }
.pay-trip-row { display: grid; grid-template-columns: 1rem 1fr; column-gap: 0.85rem; align-items: start; }
.pay-trip-row > div { display: grid; gap: 0.1rem; }
.pay-dot { width: 1rem; height: 1rem; margin-top: 0.15rem; border-radius: 999px; border: 3px solid var(--primary); }
.pay-dot--dest { background: var(--primary); }
.pay-trip-label { font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }
.pay-trip-value { font-weight: 600; }

.pay-methods { display: grid; gap: 0.75rem; }
.pay-method {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center;
  column-gap: 0.85rem; width: 100%; padding: 0.9rem 1.1rem; border-radius: 1.5rem;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.pay-method:disabled { opacity: 0.55; cursor: not-allowed; }
.pay-method-text { display: grid; gap: 0.1rem; }
.pay-method-text span { font-size: 0.8125rem; color: var(--muted-foreground); }
.pay-radio { width: 1.4rem; height: 1.4rem; border-radius: 999px; border: 2px solid color-mix(in oklab, var(--foreground) 25%, transparent); }
.pay-method.is-selected .pay-radio {
  border-color: var(--primary);
  background: radial-gradient(circle, var(--primary) 0 45%, transparent 50%);
}
.pay-warn { margin: 0.75rem 0 0; font-size: 0.875rem; color: oklch(0.5 0.17 25); }
.pay-warn a { color: var(--primary); font-weight: 600; }

.pay-summary { display: grid; gap: 0.7rem; padding: 1.1rem 1.25rem; border-radius: 1.5rem; }
.pay-line { display: flex; justify-content: space-between; gap: 1rem; }
.pay-line--muted { color: var(--muted-foreground); font-size: 0.9375rem; }
.pay-line--total { font-size: 1.0625rem; }
.pay-line--total strong { font-family: var(--font-display); font-size: 1.25rem; }
.pay-divider { height: 1px; background: color-mix(in oklab, var(--foreground) 10%, transparent); }
.pay-note { margin: 0.75rem 0.25rem 0; font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.5; }

/* sticky action bar — same glass as the nav, safe-area aware */
.pay-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
  border-radius: 1.75rem 1.75rem 0 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.35));
  -webkit-backdrop-filter: blur(22px) saturate(180%);
          backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 -18px 40px -26px rgba(0, 60, 120, 0.3);
  max-width: 32rem; margin: 0 auto;
}
html.dark .pay-bar { background: linear-gradient(135deg, rgba(20,30,46,0.7), rgba(20,30,46,0.5)); }
.pay-secure {
  margin: 0.7rem 0 0; display: flex; align-items: center; justify-content: center; gap: 0.35rem;
  font-size: 0.75rem; color: var(--muted-foreground);
}

/* confirmation bottom sheet */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8, 24, 48, 0);
  transition: background 220ms ease;
}
.sheet-backdrop[hidden] { display: none; }
.sheet-backdrop.is-open { background: rgba(8, 24, 48, 0.42); }
.sheet {
  width: 100%; max-width: 32rem;
  padding: 0.75rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  border-radius: 2rem 2rem 0 0;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
          backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 -24px 60px -20px rgba(0, 40, 90, 0.45);
  transform: translateY(100%);
  transition: transform 260ms cubic-bezier(.2,.9,.3,1);
}
html.dark .sheet { background: rgba(16, 26, 42, 0.9); }
.sheet-backdrop.is-open .sheet { transform: translateY(0); }
.sheet-handle { display: block; width: 2.6rem; height: 0.3rem; margin: 0 auto 1rem; border-radius: 999px; background: color-mix(in oklab, var(--foreground) 20%, transparent); }
.sheet-title { margin: 0; text-align: center; font-size: 1.0625rem; font-weight: 600; }
.sheet-amount { margin: 0.4rem 0 1.25rem; text-align: center; font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; }
.sheet-rows { display: grid; gap: 0.85rem; padding: 1rem 0; border-top: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent); margin-bottom: 1.25rem; }
.sheet-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; font-size: 0.9375rem; }
.sheet-row span { color: var(--muted-foreground); }
.sheet-row strong { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.sheet-error { margin: -0.4rem 0 0.9rem; text-align: center; font-size: 0.875rem; color: oklch(0.5 0.17 25); }
.btn-spinner { display: none; width: 1.1rem; height: 1.1rem; margin-right: 0.6rem; border-radius: 999px; border: 2px solid rgba(255,255,255,0.45); border-top-color: #fff; animation: pay-spin 700ms linear infinite; }
.is-loading .btn-spinner { display: inline-block; }
@keyframes pay-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Payment success + receipt
   ========================================================================== */
.success-hero { margin-top: 2.5rem; display: grid; justify-items: center; gap: 0.35rem; text-align: center; }
.success-check { width: 5.5rem; height: 5.5rem; display: block; margin-bottom: 0.75rem; animation: success-pop 520ms cubic-bezier(.2,.9,.3,1.3) both; }
.success-check svg { width: 100%; height: 100%; overflow: visible; }
.success-check-ring { fill: oklch(0.94 0.07 150); stroke: oklch(0.65 0.17 150); stroke-width: 2; }
.success-check-tick { fill: none; stroke: oklch(0.5 0.16 150); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: success-draw 420ms ease-out 320ms forwards; }
@keyframes success-pop { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }
@keyframes success-draw { to { stroke-dashoffset: 0; } }
.success-title { margin: 0; font-size: 1.25rem; font-weight: 600; }
.success-amount { margin: 0.2rem 0 0; font-family: var(--font-display); font-size: 2.75rem; font-weight: 700; letter-spacing: -0.02em; }
.success-sub { margin: 0; max-width: 24rem; font-size: 0.9375rem; color: var(--muted-foreground); }
.receipt { margin-top: 1.75rem; display: grid; gap: 0.95rem; padding: 1.25rem; border-radius: 1.5rem; }
.receipt-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.75rem; align-items: baseline; font-size: 0.9375rem; }
.receipt-row span { color: var(--muted-foreground); }
.receipt-row strong { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.receipt-ok { color: oklch(0.5 0.15 150); }
.success-actions { margin-top: 1.5rem; padding-bottom: 2rem; }
@media (prefers-reduced-motion: reduce) {
  .success-check, .success-check-tick, .sheet, .btn-spinner { animation: none !important; transition: none !important; }
  .success-check-tick { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Live ride — map + one bottom sheet per phase
   ========================================================================== */
.ride-screen { display: flex; flex-direction: column; max-width: 32rem; margin: 0 auto; }
.ride-map {
  position: relative; flex: none; width: 100%;
  height: 46dvh; min-height: 18rem; max-height: 30rem;
  overflow: hidden; background: #e7edf3;
}
.ride-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.ride-sheet {
  position: relative; z-index: 2; flex: 1;
  margin-top: -1.75rem; padding: 0.75rem 1.25rem 2.5rem;
  border-radius: 2rem 2rem 0 0;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
          backdrop-filter: blur(26px) saturate(180%);
  box-shadow: 0 -22px 50px -24px rgba(0, 50, 100, 0.4);
  animation: sheet-in 380ms cubic-bezier(.2,.9,.3,1) both;
}
html.dark .ride-sheet { background: rgba(16, 26, 42, 0.92); }
@keyframes sheet-in { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.ride-sheet > .card { margin-top: 0.85rem; }
.ride-sheet > .sheet-handle { margin-bottom: 0.9rem; }

.map-fab {
  position: absolute; z-index: 3; top: max(0.9rem, env(safe-area-inset-top, 0px)); left: 1rem;
  width: 2.75rem; height: 2.75rem; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255,255,255,0.85); color: #0e1b2c;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 8px 20px -8px rgba(0,40,90,0.45);
}
html.dark .map-fab { background: rgba(16,26,42,0.8); color: #fff; }
.map-chip {
  position: absolute; z-index: 3; top: max(1.05rem, env(safe-area-inset-top, 0px)); right: 1rem;
  padding: 0.45rem 0.85rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 700;
  background: rgba(255,255,255,0.9); color: #0e1b2c; box-shadow: 0 8px 20px -8px rgba(0,40,90,0.45);
}
.map-chip:empty { display: none; }
.map-chip--ok { background: oklch(0.94 0.07 150); color: oklch(0.4 0.14 150); }
html.dark .map-chip { background: rgba(16,26,42,0.85); color: #fff; }

/* progress: Match · Pickup · Trip · Arrive */
.ride-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.ride-progress-seg { display: grid; gap: 0.35rem; }
.ride-progress-seg i { display: block; height: 0.28rem; border-radius: 999px; background: color-mix(in oklab, var(--foreground) 12%, transparent); --p: 0; }
.ride-progress-seg.is-done i { background: var(--primary); }
.ride-progress-seg.is-current i { background: linear-gradient(90deg, var(--primary) calc(var(--p) * 100%), color-mix(in oklab, var(--foreground) 12%, transparent) 0); }
.ride-progress-seg:first-child.is-current i { animation: seg-search 1.6s ease-in-out infinite; }
@keyframes seg-search { 0%,100% { --p: 0.15; } 50% { --p: 0.7; } }
.ride-progress-seg span { font-size: 0.6875rem; color: var(--muted-foreground); }
.ride-progress-seg.is-done span, .ride-progress-seg.is-current span { color: var(--foreground); font-weight: 600; }

.ride-title { margin: 1.1rem 0 0; font-size: 1.4rem; font-weight: 650; letter-spacing: -0.01em; }
.ride-sub { margin: 0.35rem 0 0; color: var(--muted-foreground); line-height: 1.5; }
.ride-sub strong { color: var(--foreground); }
.ride-eta { margin: 0.25rem 0 0; font-size: 1.0625rem; color: var(--muted-foreground); }
.ride-eta strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--primary); }
.ride-line { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1rem; padding: 0 0.25rem; }
.ride-line strong { font-family: var(--font-display); font-size: 1.15rem; }
.ride-hint { margin: 0.6rem 0.25rem 0; font-size: 0.8125rem; color: var(--muted-foreground); }
.dots i { font-style: normal; animation: dot-blink 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: 0.2s; } .dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-blink { 0%, 80%, 100% { opacity: 0.2; } 40% { opacity: 1; } }

.ride-driver { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: center; column-gap: 0.85rem; padding: 0.85rem 1.1rem; border-radius: 1.5rem; }
.ride-driver .profile-avatar { width: 3.25rem; height: 3.25rem; }
.ride-driver-side { display: grid; justify-items: end; gap: 0.3rem; }
.plate { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.15rem 0.5rem; border-radius: 0.4rem; background: oklch(0.96 0.05 95); color: #3a3000; border: 1px solid oklch(0.8 0.1 90); }
.ride-pin { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 1.1rem; border-radius: 1.5rem; }
.ride-pin-hint { margin: 0.2rem 0 0; font-size: 0.8125rem; color: var(--muted-foreground); max-width: 11rem; }
.pin-digits { display: flex; gap: 0.35rem; }
.pin-digits span { width: 2.1rem; height: 2.6rem; display: grid; place-items: center; border-radius: 0.7rem; background: var(--brand-soft); color: var(--primary); font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }

.ride-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.85rem; }
.ride-action { height: 3.1rem; border-radius: 999px; border: 1.5px solid color-mix(in oklab, var(--primary) 35%, transparent); background: transparent; color: var(--primary); font: inherit; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer; }

.wait-chip { display: inline-block; margin-top: 0.8rem; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.8125rem; background: oklch(0.95 0.07 85); color: oklch(0.45 0.12 70); }
.wait-chip b { font-variant-numeric: tabular-nums; }
.paid-banner { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; padding: 0.75rem 1rem; border-radius: 1.1rem; background: oklch(0.94 0.07 150); color: oklch(0.38 0.13 150); animation: sheet-in 400ms ease both; }
.paid-banner .icon { width: 1.5rem; height: 1.5rem; flex: none; }
.paid-banner div { display: grid; line-height: 1.3; } .paid-banner span { font-size: 0.8125rem; opacity: 0.85; }

/* toasts */
#toast-host { position: fixed; z-index: 100; top: max(0.8rem, env(safe-area-inset-top, 0px)); left: 0; right: 0; display: grid; justify-items: center; gap: 0.5rem; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 0.5rem; max-width: 90%; padding: 0.7rem 1.1rem; border-radius: 999px; background: rgba(14, 27, 44, 0.92); color: #fff; font-size: 0.875rem; font-weight: 600; transform: translateY(-14px); opacity: 0; transition: transform 260ms cubic-bezier(.2,.9,.3,1), opacity 260ms; box-shadow: 0 14px 30px -12px rgba(0,30,70,0.6); }
.toast.is-in { transform: none; opacity: 1; }
.toast--success { background: oklch(0.45 0.14 150); }

/* ---- map artwork ---- */
.cm-land { fill: #e8edf2; }
.cm-park { fill: #d3e8d2; } .cm-tree { fill: #b6d9b4; }
.cm-bldg { fill: #d6dde6; }
.cm-road-casing { stroke: #cbd4de; stroke-linecap: round; }
.cm-road { stroke: #ffffff; stroke-linecap: round; }
.cm-road-center { stroke: #dfe6ee; stroke-dasharray: 3 3; }
.cm-poi { fill: #9fb0c4; }
.cm-label { font-family: var(--font-body, system-ui), sans-serif; font-weight: 600; fill: #5c6e83; paint-order: stroke; stroke: #e8edf2; stroke-width: 1.6px; stroke-linejoin: round; }
.cm-route-casing { stroke: #ffffff; }
.cm-route-base { stroke: color-mix(in oklab, var(--primary) 38%, white); }
.cm-route-done { stroke: var(--primary); }
.cm-pin-halo { opacity: 0.22; } .cm-pin { stroke: #fff; stroke-width: 2.5; }
.cm-pin--start { fill: var(--primary); } .cm-pin-halo.cm-pin--start { fill: var(--primary); }
.cm-pin--end { fill: oklch(0.6 0.2 25); } .cm-pin-halo.cm-pin--end { fill: oklch(0.6 0.2 25); }
.cm-pin-label { font: 700 11px var(--font-body, system-ui), sans-serif; fill: #0e1b2c; paint-order: stroke; stroke: rgba(255,255,255,0.95); stroke-width: 3.5px; stroke-linejoin: round; }
.cm-radar { fill: var(--primary); opacity: 0; transform-box: fill-box; transform-origin: center; animation: cm-radar 2.4s ease-out infinite; }
.cm-radar--2 { animation-delay: 1.2s; }
@keyframes cm-radar { 0% { transform: scale(0.25); opacity: 0.4; } 100% { transform: scale(3.2); opacity: 0; } }
.cm-ghost { fill: #6b7c92; stroke: #fff; stroke-width: 1.2; opacity: 0.85; }
.cm-car-pulse { fill: var(--primary); opacity: 0.18; transform-box: fill-box; transform-origin: center; animation: cm-pulse 1.8s ease-in-out infinite; }
@keyframes cm-pulse { 0%,100% { transform: scale(0.8); opacity: 0.25; } 50% { transform: scale(1.15); opacity: 0.08; } }
.cm-car-body { fill: var(--primary); stroke: #fff; stroke-width: 2; }
.cm-car-glass { fill: #fff; opacity: 0.9; } .cm-car-roof { fill: rgba(255,255,255,0.35); }

html.dark .ride-map { background: #121c2b; }
html.dark .cm-land { fill: #131e2e; } html.dark .cm-park { fill: #17302a; } html.dark .cm-tree { fill: #1f4136; }
html.dark .cm-bldg { fill: #1c2a3d; } html.dark .cm-road-casing { stroke: #0b1420; } html.dark .cm-road { stroke: #2b3b52; }
html.dark .cm-road-center { stroke: #3a4c66; } html.dark .cm-poi { fill: #4a5d78; }
html.dark .cm-label { fill: #8fa3bd; stroke: #131e2e; }
html.dark .cm-route-casing { stroke: #0b1420; } html.dark .cm-pin-label { fill: #fff; stroke: rgba(11,20,32,0.95); }
html.dark .cm-route-base { stroke: color-mix(in oklab, var(--primary) 40%, #0b1420); }
@media (prefers-reduced-motion: reduce) {
  .ride-sheet, .paid-banner, .cm-radar, .cm-car-pulse, .dots i, .ride-progress-seg:first-child.is-current i { animation: none !important; }
}

/* shown on every map until campus-map.js is marked verified */
.map-demo-tag { position: absolute; z-index: 3; left: 1rem; bottom: 2.6rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; background: rgba(255,255,255,0.8); color: #5b6b80; }
html.dark .map-demo-tag { background: rgba(16,26,42,0.8); color: #9fb0c4; }

/* driver: current-trip banner on the requests lists */
.current-trip { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-radius: 1.5rem; margin-bottom: 0.9rem; color: inherit; text-decoration: none; }
.current-trip-route { margin: 0.15rem 0; font-weight: 600; }
.current-trip-status { font-size: 0.8125rem; color: var(--muted-foreground); }

/* auth screens: back button + brand on one row, card content-height */
.auth-top { display: flex; align-items: center; gap: 0.9rem; }
.auth-back { flex: none; color: var(--foreground); }
.auth-top + .auth-card { margin-top: 1.75rem; }
.auth-card--left { flex: none; }
.role-badge { align-self: flex-start; }


/* admin driver cards + driver online switch */
.admin-driver { padding: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.admin-driver .request-meta { margin: 0; word-break: break-word; }
.admin-driver .request-actions { margin-top: .5rem; }
.shell-main > .switch-row { padding: .9rem 1rem; }

/* ==========================================================================
   Admin page polish — same transparent glass as sign-in, logo in header,
   settings form as one glass panel (no box-inside-a-box)
   ========================================================================== */
.admin-header { align-items: center; gap: 1rem; }
.admin-header .brand-mark { width: 3rem; }
.admin-title { margin: 0; font-size: 1.35rem; line-height: 1.15; }

.admin-metric, .admin-list-row, .admin-driver {
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(13,162,231,0.025), rgba(255,255,255,0.055));
  border: none;
  -webkit-backdrop-filter: blur(3px) saturate(100%) brightness(1.1);
          backdrop-filter: blur(3px) saturate(100%) brightness(1.1);
  box-shadow: inset 0 0 30px rgba(255,255,255,0.07), 0 18px 40px -28px rgba(0,60,120,0.25);
}

.admin-settings {
  margin-top: 0.75rem;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.admin-settings .switch-row {
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  padding-left: 0;
  padding-right: 0;
}
.admin-settings .switch-row::before { display: none; }
.admin-settings .btn-primary { width: 100%; }
.admin-header .flow-subtitle { text-align: left; white-space: nowrap; }
.admin-header .brand-logo > div { display: flex; flex-direction: column; align-items: flex-start; }
.admin-driver { border-radius: 1.25rem; }

/* ==========================================================================
   iPhone typing fix — inputs sat inside glass panels (backdrop-filter +
   mask) and were themselves backdrop-filtered, plus the body background was
   `fixed`. On iOS Safari that combination makes the page jump/repaint when
   a field is tapped, so the keyboard appears and then the field loses focus.
   Fields are now plain (no nested blur) and the background scrolls normally.
   ========================================================================== */
.pill-input, .search-input, .select-wrap select, .otp-box {
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  background: oklch(1 0 0 / 88%);
  -webkit-user-select: text;
          user-select: text;
  touch-action: manipulation;
}
@media (hover: none) {
  body { background-attachment: scroll; }
}

/* password rules checklist */
.pw-rules { list-style: none; margin: 0.65rem 0 0; padding: 0; display: grid; gap: 0.2rem; font-size: 0.8125rem; color: var(--muted-foreground); }
.pw-rules li { display: flex; align-items: center; gap: 0.5rem; }
.pw-rules li::before { content: ""; width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0.55; flex-shrink: 0; }
.pw-rules li.ok { color: oklch(0.52 0.14 150); }
.pw-rules li.ok::before { background: currentColor; border-color: currentColor; opacity: 1; box-shadow: inset 0 0 0 2.5px oklch(1 0 0 / 90%); }
.pw-rules.show-missing li:not(.ok) { color: oklch(0.55 0.2 27); }

/* Continue with Google */
.social-login { margin-top: 0.25rem; }
.btn-social {
  width: 100%; height: 3.5rem; border: 1px solid oklch(1 0 0 / 60%); border-radius: 999px;
  background: oklch(1 0 0 / 88%); color: oklch(0.16 0.01 260);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; cursor: pointer;
  box-shadow: 0 10px 28px -18px rgba(0,60,120,0.35);
}
.btn-social:active { transform: scale(0.98); }
.btn-social:disabled { opacity: 0.6; }

/* Official "Sign in with Google" button artwork — used exactly as supplied by Google, only scaled. */
.btn-google-official { display: block; width: 100%; max-width: 14rem; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.btn-google-official img { display: block; width: 100%; height: auto; }
.btn-google-official:active { transform: scale(0.98); }
.btn-google-official:disabled { opacity: 0.6; }

/* Select fields sit inside the Pickup/Destination card: no white box behind them. */
.select-wrap select { background: transparent; }

/* Driver online/offline switch: sits in the header beside the bell. */
.header-actions { display: flex; align-items: center; gap: 0.75rem; }
.header-switch { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; }
.header-switch-text { font-size: 0.875rem; font-weight: 600; color: var(--muted-foreground); min-width: 3.1rem; text-align: right; transition: color 150ms ease; }
.header-switch-text.is-on { color: var(--primary); }
.header-switch .switch-track {
  width: 3.4rem; height: 2.05rem; background: oklch(0.78 0.01 255);
  box-shadow: inset 0 1px 3px oklch(0 0 0 / 14%); transition: background 200ms ease;
}
.header-switch .switch-thumb {
  width: 1.65rem; height: 1.65rem; margin: 0.2rem;
  box-shadow: 0 2px 5px oklch(0 0 0 / 28%); transition: transform 200ms ease;
}
.header-switch .switch-toggle input:checked + .switch-track { background: var(--primary); }
.header-switch .switch-toggle input:checked + .switch-track .switch-thumb { transform: translateX(1.35rem); }
.header-switch .switch-toggle input:focus-visible + .switch-track { outline: 3px solid oklch(0.687 0.148 236.5 / 45%); outline-offset: 2px; }
.header-switch .switch-toggle input:disabled + .switch-track { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .header-switch .switch-track, .header-switch .switch-thumb { transition: none; } }

/* Notifications sheet (bell) */
.notif-sheet { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
.notif-backdrop { position: absolute; inset: 0; background: oklch(0.2 0.03 255 / 45%); }
.notif-panel {
  position: relative; width: 100%; max-width: 30rem; max-height: 82vh; display: flex; flex-direction: column;
  background: oklch(0.97 0.012 250); border-radius: 1.75rem 1.75rem 0 0; padding: 1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px oklch(0.2 0.05 255 / 25%); animation: notif-up 220ms ease;
}
@keyframes notif-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .notif-panel { animation: none; } }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 0.25rem 0.4rem 0.8rem; }
.notif-head h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.notif-close { width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: oklch(0.92 0.02 250); font-size: 1.5rem; line-height: 1; cursor: pointer; color: inherit; }
.notif-list { overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; }
.notif-item { display: flex; align-items: flex-start; gap: 0.8rem; padding: 0.8rem 0.9rem; border-radius: 1.1rem; background: #fff; }
.notif-icon { flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; }
.notif-body { flex: 1; min-width: 0; }
.notif-title { margin: 0; font-weight: 600; font-size: 0.95rem; }
.notif-text { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--muted-foreground); overflow-wrap: anywhere; }
.notif-time { flex: none; font-size: 0.72rem; color: var(--muted-foreground); text-align: right; max-width: 5.2rem; }
.notif-empty { text-align: center; padding: 2rem 1rem; }

/* Support + complaints */
.support-detail { display: block; font-size: 0.8125rem; color: var(--muted-foreground); font-weight: 400; overflow-wrap: anywhere; }
.support-complaint-btn { display: flex; align-items: center; justify-content: center; margin-top: 1.25rem; text-decoration: none; }
.complaint-text { min-height: 8rem; border-radius: 1.25rem !important; padding: 0.9rem 1.1rem; resize: vertical; font: inherit; width: 100%; }
.field-select select { width: 100%; }
.complaint-history { margin-top: 2rem; }
.complaint-history-title { font-size: 1.1rem; margin: 0 0 0.75rem; }
.complaint-card { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
.complaint-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.complaint-card-msg { margin: 0; overflow-wrap: anywhere; }
.complaint-card-reply { margin: 0; padding: 0.6rem 0.8rem; border-radius: 0.9rem; background: oklch(0.95 0.03 236); font-size: 0.9rem; }
.complaint-card-date { margin: 0; font-size: 0.75rem; color: var(--muted-foreground); }
select.field-dropdown {
  width: 100%; appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.6rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23556' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 1rem center;
}
.complaint-card { padding: 1rem 1.1rem; border-radius: 1.25rem; background: oklch(1 0 0 / 70%); }

/* Ride-alerts banner (driver home) */
.alerts-banner { margin-top: 0.5rem; display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; margin-bottom: 0.9rem; border-radius: 1.1rem; background: var(--brand-soft, oklch(0.95 0.04 236)); border: 1px solid oklch(0.687 0.148 236.5 / 0.25); }
.alerts-banner[hidden] { display: none; }
.alerts-banner-icon { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; }
.alerts-banner-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.82rem; }
.alerts-banner-text strong { font-size: 0.9rem; }
.alerts-banner-text small { color: var(--muted-foreground, #5b6b7b); line-height: 1.3; }
.alerts-banner-btn { flex: none; border: 0; border-radius: 999px; padding: 0.55rem 1rem; font: inherit; font-weight: 600; font-size: 0.82rem; background: var(--primary); color: #fff; cursor: pointer; }
.alerts-banner-btn[hidden] { display: none; }
.alerts-banner-btn:disabled { opacity: 0.6; }

/* Manual top-up instructions (student wallet) */
.topup-info { margin: 1rem 0; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.topup-info[hidden] { display: none; }
.topup-info-title { margin: 0; font-size: 1rem; }
.topup-info-text { margin: 0; white-space: pre-line; line-height: 1.5; font-size: 0.9rem; }
.topup-info-small { margin: 0; font-size: 0.78rem; opacity: 0.75; word-break: break-all; }
.topup-info-link { display: block; text-align: center; text-decoration: none; }
.field-hint { margin: 0 0 0.4rem; font-size: 0.82rem; opacity: 0.75; }

/* Terms page + consent line */
.terms-note { margin: 0.9rem 0 0; font-size: 0.78rem; text-align: center; opacity: 0.8; }
.terms-note a { color: var(--primary); font-weight: 600; }
.terms-body { margin-top: 1.2rem; padding-bottom: 2rem; }
.terms-body h2 { font-size: 0.98rem; margin: 1.3rem 0 0.35rem; }
.terms-body p { margin: 0 0 0.6rem; font-size: 0.9rem; line-height: 1.55; }
.terms-body a { color: var(--primary); font-weight: 600; }


/* SOS, saved drivers, lost items */
.btn-secondary { display: block; width: 100%; padding: 0.95rem 1.25rem; border-radius: 999px; border: 1.5px solid var(--primary); background: transparent; color: var(--primary); font: inherit; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; margin-top: 0.75rem; }
.btn-secondary:disabled { opacity: 0.6; }
.btn-secondary.btn-link { margin-top: 0; }
.saved-card { margin-top: 0.9rem; padding: 1rem; }
.saved-actions { display: flex; gap: 0.6rem; margin-top: 0.75rem; }
.saved-actions .saved-btn { flex: 1; margin-top: 0; padding: 0.7rem 0.5rem; }
.saved-actions .btn-primary.btn-link { margin-top: 0; }
.sos-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.sos-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.sos-panel { position: relative; width: 100%; max-width: 30rem; background: var(--background, #fff); color: var(--foreground, #111); border-radius: 1.5rem 1.5rem 0 0; padding: 1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom)); max-height: 85vh; overflow: auto; }
.sos-title { margin: 0 0 0.25rem; font-size: 1.35rem; color: oklch(0.55 0.22 25); }
.sos-sub { margin: 0 0 0.9rem; font-size: 0.9rem; opacity: 0.75; }
.sos-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1rem; margin-bottom: 0.55rem; border-radius: 1rem; border: 1px solid color-mix(in oklab, var(--foreground, #111) 14%, transparent); text-decoration: none; color: inherit; }
.sos-row-text { display: flex; flex-direction: column; min-width: 0; }
.sos-row-text small { opacity: 0.7; }
.sos-row-call { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; color: oklch(0.55 0.22 25); white-space: nowrap; }

.saved-actions .saved-btn { height: 2.8rem; }

.online-pill { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.5rem; padding: 0 0.85rem; border-radius: 999px; background: color-mix(in oklab, var(--background) 55%, white); border: 1px solid oklch(1 0 0 / 40%); font-size: 0.95rem; color: var(--foreground); }
.online-pill[hidden] { display: none; }
.online-pill b { font-weight: 700; }
.online-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: oklch(0.72 0.19 150); box-shadow: 0 0 0 0 oklch(0.72 0.19 150 / 0.6); animation: online-pulse 2s infinite; }
.online-pill.is-zero .online-dot { background: oklch(0.7 0 0); animation: none; }
@keyframes online-pulse { 70% { box-shadow: 0 0 0 7px oklch(0.72 0.19 150 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.72 0.19 150 / 0); } }
.profile-row--sos .icon, .profile-row--sos span { color: oklch(0.55 0.22 25); }


/* ---- Direct bank-transfer payment ---- */
.transfer-card{padding:16px;margin:12px 0;display:flex;flex-direction:column;gap:6px}
.transfer-label{font-size:13px;opacity:.7}
.transfer-amount{font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0}
.transfer-acct{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 0;font-size:24px;font-weight:800;letter-spacing:.06em}
.transfer-copy{border:1.5px solid var(--blue,#0da1e7);color:var(--blue,#0da1e7);background:transparent;border-radius:999px;padding:7px 14px;font-weight:600;font-size:13px;font-family:inherit;line-height:1;cursor:pointer}
.transfer-bank{font-size:14px;margin:0;opacity:.85}
.transfer-steps{font-size:13px;line-height:1.5;opacity:.75;margin:6px 0 0}
.transfer-call{align-self:flex-start;background:none;border:0;color:var(--blue,#0da1e7);font-weight:600;font-size:14px;font-family:inherit;padding:8px 0 0;cursor:pointer;text-decoration:underline}
.admin-fee-line{font-size:13px;margin:4px 0 0}
.admin-fee-line.is-due{color:#b3261e;font-weight:600}

.transfer-or{text-align:center;font-size:13px;opacity:.6;margin:10px 0 8px}

.seat-card{display:grid;gap:10px;margin:0 0 16px;padding:14px}
.seat-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.seat-card-head small,.seat-card-note{color:var(--muted,#6b7280);font-size:12px;margin:0}
.seat-card-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rider-list{display:grid;gap:8px;margin:0 0 12px}
.rider-row{display:flex;align-items:center;gap:10px;padding:10px 12px}
.rider-row .driver-info{flex:1;min-width:0}
.rider-chip{font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;background:#fef3c7;color:#92400e}
.rider-chip.is-paid{background:#dcfce7;color:#166534}
.cab-note{font-size:13px;margin:0 0 10px;color:#92400e}
.add-cab-head{margin:14px 0 6px;font-size:13px;font-weight:600}