/* HolyFit — Prototype Model 4 · komponen bersama */
:root{
  --y:#F5C518;--yd:#D4A800;--yl:#FFF8D6;
  --k:#111;--d:#1f2937;--g:#6b7280;--gl:#9ca3af;
  --b:#f3f4f6;--b2:#fafafa;--w:#fff;--br:#e5e7eb;
  --ok:#15803d;--ok-bg:#dcfce7;
  --warn:#b45309;--warn-bg:#fef3c7;
  --pause:#c2410c;--pause-bg:#ffedd5;
  --info:#1d4ed8;--info-bg:#dbeafe;
  --mute:#4b5563;--mute-bg:#e5e7eb;
  --rd:#dc2626;--rd-bg:#fee2e2;
  --brand:#111;--brand-ink:#F5C518;--brand-soft:#FFF8D6;
  --r:14px;--sh:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.05);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Poppins',system-ui,sans-serif;font-size:14px;line-height:1.5;color:var(--d);background:var(--b)}
a{color:inherit}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{color:var(--k);line-height:1.25}
.muted{color:var(--g)}
.small{font-size:12px}
.xs{font-size:11px}
.b{font-weight:600}
.nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.hide{display:none!important}
/* overlay/sheet memakai display:flex; tanpa ini atribut hidden kalah dan layer gelap tetap tampil */
[hidden]{display:none!important}

/* tombol */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:10px;padding:9px 14px;font-weight:600;font-size:13px;cursor:pointer;text-decoration:none;background:var(--y);color:var(--k);transition:filter .15s,background .15s;white-space:nowrap}
.btn:hover{filter:brightness(.96)}
.btn.dark{background:var(--k);color:var(--y)}
.btn.brand{background:var(--brand);color:var(--brand-ink)}
.btn.ghost{background:var(--w);border-color:var(--br);color:var(--d)}
.btn.ghost:hover{background:var(--b2)}
.btn.ok{background:var(--ok);color:#fff}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:8px}
.btn.block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}

/* kartu */
.card{background:var(--w);border:1px solid var(--br);border-radius:var(--r);box-shadow:var(--sh)}
.card.pad{padding:16px}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--br)}
.card-h h3{font-size:15px}
.card-b{padding:14px 16px}

/* badge & chip */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.warn{background:var(--warn-bg);color:var(--warn)}
.badge.pause{background:var(--pause-bg);color:var(--pause)}
.badge.info{background:var(--info-bg);color:var(--info)}
.badge.mute{background:var(--mute-bg);color:var(--mute)}
.badge.rd{background:var(--rd-bg);color:var(--rd)}
.badge.y{background:var(--yl);color:#7a5b00}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--br);background:var(--w);font-size:12px;font-weight:500;cursor:pointer;user-select:none}
.chip.on{background:var(--k);border-color:var(--k);color:var(--y)}

/* segmented */
.seg{display:inline-flex;background:var(--b);border:1px solid var(--br);border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:none;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;color:var(--g);cursor:pointer;white-space:nowrap}
.seg button.on{background:var(--w);color:var(--k);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* form */
.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.field label{font-size:12px;font-weight:600;color:var(--d)}
.input,select.input,textarea.input{width:100%;border:1px solid var(--br);border-radius:10px;padding:9px 12px;background:var(--w);font-size:14px;outline:none}
.input:focus{border-color:var(--k);box-shadow:0 0 0 3px rgba(245,197,24,.35)}
textarea.input{resize:vertical;min-height:64px}
.check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--k)}

/* tabel */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--g);font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--br);background:var(--b2)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--br);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--b2)}
.tbl-wrap{overflow-x:auto}

/* progres */
.bar{height:6px;border-radius:99px;background:var(--b);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--k);border-radius:99px}

/* modal & drawer */
.scrim{position:fixed;inset:0;background:rgba(17,17,17,.45);z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.scrim[hidden]{display:none}
.modal{background:var(--w);border-radius:18px;width:100%;max-width:520px;max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.modal-h{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--br);position:sticky;top:0;background:var(--w);z-index:1}
.modal-h h3{font-size:16px}
.modal-b{padding:16px 18px}
.modal-f{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--br);position:sticky;bottom:0;background:var(--w)}
.x{border:0;background:var(--b);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1}
.drawer-scrim{position:fixed;inset:0;background:rgba(17,17,17,.35);z-index:70}
.drawer-scrim[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);background:var(--w);z-index:71;overflow:auto;box-shadow:-10px 0 40px rgba(0,0,0,.15)}
.drawer[hidden]{display:none}

/* pesan WA */
.wa-bubble{background:#dcf8c6;border-radius:12px 12px 12px 2px;padding:12px 14px;font-size:13px;white-space:pre-wrap;line-height:1.55;color:#111;border:1px solid #c5ecb0}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:var(--k);color:#fff;padding:10px 16px;border-radius:12px;font-size:13px;font-weight:500;opacity:0;pointer-events:none;transition:.25s;z-index:99;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* kalender */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .dh{font-size:10px;font-weight:600;color:var(--gl);text-align:center;padding-bottom:2px}
.cal .c{height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:500;color:var(--gl);position:relative}
.cal .c.done{background:var(--b);color:var(--g)}
.cal .c.next{background:var(--ok-bg);color:var(--ok);font-weight:600}
.cal .c.today{background:var(--k);color:var(--y);font-weight:700}
.cal .c.pause{background:var(--pause-bg);color:var(--pause);font-weight:600;text-decoration:line-through}
.cal .c.hol{background:repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 4px,#e5e7eb 4px,#e5e7eb 8px);color:var(--g)}
.cal .c.tap{cursor:pointer}
.cal .c.tap:hover{outline:2px solid var(--k)}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--g)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}

/* pemilih menu mingguan (checkout, portal, panel dapur). "on" memakai warna brand halaman */
.pkr-nav{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pkr-nav div{flex:1;text-align:center;line-height:1.25}
.pkr-nav b{display:block;font-size:13px;color:var(--k)}
.pkr-nav span{font-size:11px;color:var(--g)}
.pkr-arr{width:34px;height:34px;border-radius:50%;border:1px solid var(--br);background:var(--w);cursor:pointer;font-size:17px;line-height:1;color:var(--k);flex:none}
.pkr-arr[disabled]{opacity:.3;cursor:not-allowed}
/* tombol pola satu minggu: terlihat jelas sebagai tombol (isi abu, garis tegas, ikon); aktif = hitam + teks brand */
.pkr-pat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--br)}
.pkr-pb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;border:1.5px solid #c9c9c3;border-radius:12px;background:#f4f4f1;font:inherit;font-size:12px;font-weight:700;color:var(--k);padding:8px 2px;cursor:pointer;text-align:center;line-height:1.15;box-shadow:0 2px 0 #dcdcd6;transition:transform .08s}
.pkr-pb:active{transform:translateY(1px);box-shadow:none}
.pkr-pb .pi{display:flex;gap:1px;font-size:17px;line-height:1}
.pkr-pb .pp{font-size:11.5px;font-weight:600;margin-top:1px}
.pkr-pb .ps{font-size:9.5px;font-weight:700;background:#dcfce7;color:#166534;border-radius:4px;padding:1px 4px;white-space:nowrap}
.pkr-pb.on{border-color:var(--brand,var(--k));background:var(--brand,var(--k));color:var(--brand-ink,#fff);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.pkr-pb.cu{cursor:default;border-style:dashed;background:none;box-shadow:none;color:var(--gl);font-weight:600}
.pkr-pb.cu.on{border-style:solid;border-color:var(--d);background:var(--b2);color:var(--k)}
.pkr-day{display:grid;grid-template-columns:42px minmax(0,1fr) minmax(0,1fr);gap:6px;margin-bottom:6px}
.pkr-dl{line-height:1.2;padding-top:7px}
.pkr-dl b{display:block;font-size:12px;color:var(--k)}
.pkr-dl span{font-size:10.5px;color:var(--g)}
.pkr-c{border:1px solid var(--br);border-radius:10px;padding:7px 8px;background:var(--w);text-align:left;font:inherit;font-size:11.5px;line-height:1.3;color:var(--d);cursor:pointer;min-height:54px;min-width:0;overflow-wrap:anywhere}
.pkr-c .pkr-s{display:block;font-size:10.5px;color:var(--g);margin-bottom:1px}
.pkr-c.on{border:1.5px solid var(--brand);background:var(--brand-soft);color:var(--k);font-weight:500}
.pkr-c.on .pkr-s{color:var(--k)}
.pkr-c[disabled]{cursor:not-allowed;opacity:.55;background:var(--b2)}
.pkr-c.on[disabled]{opacity:.8}
.pkr-img{display:block;width:100%;height:58px;object-fit:cover;border-radius:7px;margin-bottom:6px;max-width:100%}
.pkr-c[disabled] .pkr-img{filter:grayscale(.6)}
.pkr-c .pkr-l{display:block;font-size:10px;color:var(--g);margin-top:2px;font-weight:500}

/* ikon garis 1 warna: warna ikut teks (currentColor), bentuk sama di semua HP */
.hi{display:inline-block;width:1.15em;height:1.15em;flex:none;vertical-align:-.2em;background-color:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.hi-home{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3Cpath d='M10 21v-6h4v6'/%3E%3C/svg%3E")}
.hi-pot{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11h18'/%3E%3Cpath d='M5 11v7a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3v-7'/%3E%3Cpath d='M9 7V5M12 7V3.5M15 7V5'/%3E%3C/svg%3E")}
.hi-tag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6 21.4 11.4a2 2 0 0 1 0 2.8l-7.2 7.2a2 2 0 0 1-2.8 0L2.6 12.6A2 2 0 0 1 2 11.2V4a2 2 0 0 1 2-2h7.2a2 2 0 0 1 1.4.6z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E")}
.hi-truck{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h12v10H2z'/%3E%3Cpath d='M14 9h4l3.5 3.5V16H14'/%3E%3Ccircle cx='6.5' cy='17.5' r='2'/%3E%3Ccircle cx='17.5' cy='17.5' r='2'/%3E%3C/svg%3E")}
.hi-users{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7'/%3E%3Cpath d='M18 14.5a6.5 6.5 0 0 1 3.5 5.5'/%3E%3C/svg%3E")}
.hi-card{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E")}
.hi-clipboard{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='17' rx='2'/%3E%3Cpath d='M9 2h6v4H9z'/%3E%3Cpath d='M9 11h6M9 15h6'/%3E%3C/svg%3E")}
.hi-sliders{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E")}
.hi-printer{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E")}
.hi-sun{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E")}
.hi-moon{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z'/%3E%3C/svg%3E")}
.hi-menu{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E")}
.hi-clock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.hi-lock{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E")}
.hi-repeat{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l4 4-4 4'/%3E%3Cpath d='M3 11V9a3 3 0 0 1 3-3h15'/%3E%3Cpath d='M7 22l-4-4 4-4'/%3E%3Cpath d='M21 13v2a3 3 0 0 1-3 3H3'/%3E%3C/svg%3E")}
.hi-pause{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 9v6M14 9v6'/%3E%3C/svg%3E")}
.hi-alert{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E")}
.hi-check{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E")}
.hi-fish{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12c2.5-4 7-6 11-4.5 2 .8 3.5 2.5 4.5 4.5-1 2-2.5 3.7-4.5 4.5C9 18 4.5 16 2 12z'/%3E%3Cpath d='M17.5 12 22 8v8z'/%3E%3Cpath d='M7 11h.01'/%3E%3C/svg%3E")}
.hi-note{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E")}
.hi-link{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E")}
.hi-send{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4z'/%3E%3C/svg%3E")}
.hi-eye{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.hi-bank{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18M4 10h16M12 3 3 8h18z'/%3E%3Cpath d='M6 10v8M10 10v8M14 10v8M18 10v8'/%3E%3C/svg%3E")}
.hi-inbox{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13h5l1.5 3h5L16 13h5'/%3E%3Cpath d='M5.5 5h13L21 13v6H3v-6z'/%3E%3C/svg%3E")}
.hi-receipt{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3h14v18l-3-2-2 2-2-2-2 2-2-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E")}
.hi-calendar{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E")}
.hi-calendar-x{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M10 13.5l4 4M14 13.5l-4 4'/%3E%3C/svg%3E")}
.hi-flask{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 19a1.5 1.5 0 0 0 1.3 2h12.4a1.5 1.5 0 0 0 1.3-2L14 9V3'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E")}
.hi-pin{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E")}
.hi-chat{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.7 7.1L4 20l1.1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E")}
.hi-map{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4 3 6v14l6-2 6 2 6-2V4l-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E")}
.hi-box{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='M3 7.5l9 4.5 9-4.5M12 12v9'/%3E%3C/svg%3E")}
.hi-camera{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3l2-3h6l2 3h3a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E")}
.hi-cart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.5 12h12l2-8H6'/%3E%3C/svg%3E")}
.hi-compass{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E")}
.hi-search{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.hi-user{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}
.hi-bag{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 13H6z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E")}
.hi-flame{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 3 5 5 5 10a5 5 0 0 1-10 0c0-2.5 1.5-4 2.5-5 .5 2 1.5 3 2.5 3 0-3-1-5 0-8z'/%3E%3C/svg%3E")}
.hi-leaf{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-14 15-15-1 10-7 15-15 15z'/%3E%3Cpath d='M5 19 13 11'/%3E%3C/svg%3E")}
.hi-dumbbell{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5v11M17.5 6.5v11M3.5 9v6M20.5 9v6M6.5 12h11'/%3E%3C/svg%3E")}
.hi-heart{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.5-9-9.5A4.8 4.8 0 0 1 12 6a4.8 4.8 0 0 1 9 4.5C19.5 15.5 12 20 12 20z'/%3E%3C/svg%3E")}
.hi-sprout{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-8'/%3E%3Cpath d='M12 13c0-4-3-6-7-6 0 4 3 6 7 6z'/%3E%3Cpath d='M12 11c0-3.5 2.5-6 7-6 0 3.5-2.5 6-7 6z'/%3E%3C/svg%3E")}
.hi-chevron-down{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.hi-chevron-right{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E")}
.hi-shield{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.hi-plus{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.hi-star{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3 6.4 20.2l1.1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E")}
.hi-building{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='1'/%3E%3Cpath d='M9 7h.01M15 7h.01M9 11h.01M15 11h.01M9 15h.01M15 15h.01M10 21v-3h4v3'/%3E%3C/svg%3E")}