/* Kittiwana Notify — custom thin-line icon set (PS3 XMB style).
   Renders via CSS mask so icons inherit currentColor. Keyed to the existing
   .bi-* class names, so markup needs no changes. Replaces Bootstrap Icons. */

.bi {
  display: inline-block;
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: var(--bi) center / contain no-repeat;
          mask: var(--bi) center / contain no-repeat;
}

/* ── Navigation (categories + items) ── */
.bi-grid          { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7' height='7' rx='1'/><rect x='13.5' y='3.5' width='7' height='7' rx='1'/><rect x='3.5' y='13.5' width='7' height='7' rx='1'/><rect x='13.5' y='13.5' width='7' height='7' rx='1'/></svg>"); }
.bi-grid-1x2-fill { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7' height='17' rx='1'/><rect x='13.5' y='3.5' width='7' height='7' rx='1'/><rect x='13.5' y='13.5' width='7' height='7' rx='1'/></svg>"); }
.bi-app-indicator { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='6' width='12' height='12' rx='2'/><circle cx='18' cy='6' r='3' fill='%23000' stroke='none'/></svg>"); }
.bi-bar-chart-line{ --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4v16h16'/><path d='M8 16v-3'/><path d='M13 16v-7'/><path d='M18 16v-10'/></svg>"); }
.bi-cpu           { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='7' width='10' height='10' rx='1.5'/><path d='M10 7V4M14 7V4M10 20v-3M14 20v-3M7 10H4M7 14H4M20 10h-3M20 14h-3'/></svg>"); }
.bi-person        { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='3.5'/><path d='M5.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'/></svg>"); }
.bi-people        { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8.5' r='3'/><path d='M3 19.5c0-3.2 2.7-5.5 6-5.5s6 2.3 6 5.5'/><path d='M15.5 6.2a3 3 0 0 1 0 5.6'/><path d='M17 14.2c2.4.5 4 2.4 4 5.3'/></svg>"); }
.bi-phone         { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='7' y='3' width='10' height='18' rx='2.5'/><line x1='11' y1='17.5' x2='13' y2='17.5'/></svg>"); }
.bi-journal-text  { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='5.5' y='4' width='13' height='16' rx='1.5'/><path d='M9 4v16'/><path d='M11.5 9h4.5M11.5 13h4.5'/></svg>"); }
.bi-send          { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M21 3 10.5 13.5'/><path d='M21 3 14.5 21l-4-7.5-7.5-4z'/></svg>"); }
.bi-sliders       { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='8' x2='20' y2='8'/><line x1='4' y1='16' x2='20' y2='16'/><circle cx='9' cy='8' r='2.2'/><circle cx='15' cy='16' r='2.2'/></svg>"); }
.bi-gear,
.bi-gear-fill     { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.2'/><path d='M12 2.5v3M12 18.5v3M21.5 12h-3M5.5 12h-3M18.7 5.3l-2.1 2.1M7.4 16.6l-2.1 2.1M18.7 18.7l-2.1-2.1M7.4 7.4 5.3 5.3'/></svg>"); }
.bi-shield-check  { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 19 6v5c0 4.5-3 7.6-7 9-4-1.4-7-4.5-7-9V6z'/><path d='M9 12l2.2 2.2L15.5 10'/></svg>"); }
.bi-file-earmark-code { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M13 3H7.5A1.5 1.5 0 0 0 6 4.5v15A1.5 1.5 0 0 0 7.5 21h9a1.5 1.5 0 0 0 1.5-1.5V8z'/><path d='M13 3v5h5'/><path d='M10.5 12 9 14l1.5 2M13.5 12 15 14l-1.5 2'/></svg>"); }
.bi-file-earmark-text { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M13 3H7.5A1.5 1.5 0 0 0 6 4.5v15A1.5 1.5 0 0 0 7.5 21h9a1.5 1.5 0 0 0 1.5-1.5V8z'/><path d='M13 3v5h5'/><path d='M9.5 13h5M9.5 16h5'/></svg>"); }
.bi-hdd-stack-fill{ --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='5' width='17' height='5.5' rx='1.5'/><rect x='3.5' y='13.5' width='17' height='5.5' rx='1.5'/><circle cx='7' cy='7.75' r='.8' fill='%23000' stroke='none'/><circle cx='7' cy='16.25' r='.8' fill='%23000' stroke='none'/></svg>"); }
.bi-tools         { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3-3a6 6 0 0 1-7.9 7.9l-6.3 6.3a2.1 2.1 0 0 1-3-3l6.3-6.3a6 6 0 0 1 7.9-7.9z'/></svg>"); }
.bi-info-circle-fill { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5'/><circle cx='12' cy='8' r='.7' fill='%23000' stroke='none'/></svg>"); }

/* ── UI / actions ── */
.bi-bell-fill     { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6'/><path d='M10 20a2 2 0 0 0 4 0'/></svg>"); }
.bi-arrow-clockwise { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M20 11a8 8 0 1 0-1.7 5.3'/><path d='M20 5v6h-6'/></svg>"); }
.bi-broadcast     { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2'/><path d='M8 8a5.5 5.5 0 0 0 0 8M16 8a5.5 5.5 0 0 1 0 8M5.4 5.4a9 9 0 0 0 0 13.2M18.6 5.4a9 9 0 0 1 0 13.2'/></svg>"); }
.bi-megaphone     { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M5 10v4h3l8 5V5L8 10H5z'/><path d='M18.5 9a4.5 4.5 0 0 1 0 6'/></svg>"); }
.bi-chat-fill     { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-8l-4 3v-3H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z'/></svg>"); }
.bi-envelope      { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='6' width='16' height='12' rx='1.5'/><path d='M4.5 7.5l7.5 6 7.5-6'/></svg>"); }
.bi-envelope-open { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 10l8-5 8 5v8a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 18z'/><path d='M4 10l8 5 8-5'/></svg>"); }
.bi-check-circle  { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12l3 3 5-6'/></svg>"); }
.bi-x-circle      { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9 9l6 6M15 9l-6 6'/></svg>"); }
.bi-chevron-left  { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14 6l-6 6 6 6'/></svg>"); }
.bi-chevron-right { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M10 6l6 6-6 6'/></svg>"); }
.bi-clipboard     { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='5' width='12' height='16' rx='1.5'/><rect x='9' y='3' width='6' height='4' rx='1'/></svg>"); }
.bi-key           { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='15' r='4'/><path d='M10.8 12.2 20 3'/><path d='M16 7l2.5 2.5'/></svg>"); }
.bi-link-45deg    { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M9 15l6-6'/><path d='M11 7l1.2-1.2a3.6 3.6 0 0 1 5 5L17 12'/><path d='M13 17l-1.2 1.2a3.6 3.6 0 0 1-5-5L7 12'/></svg>"); }
.bi-lock          { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='10' width='14' height='10' rx='1.7'/><path d='M8 10V7a4 4 0 0 1 8 0v3'/></svg>"); }
.bi-tag           { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h7l9 9-7 7-9-9z'/><circle cx='8.5' cy='8.5' r='1.3' fill='%23000' stroke='none'/></svg>"); }
.bi-box-arrow-right    { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14 5H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8'/><path d='M11 12h10'/><path d='M18 9l3 3-3 3'/></svg>"); }
.bi-box-arrow-in-right { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14 5h4a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-4'/><path d='M3 12h11'/><path d='M10 8l4 4-4 4'/></svg>"); }
.bi-box-arrow-up-right { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M14 5h5v5'/><path d='M19 5l-8 8'/><path d='M19 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4'/></svg>"); }
.bi-volume-up     { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9v6h3l5 4V5L7 9z'/><path d='M16 8.5a5 5 0 0 1 0 7M18.5 6a8 8 0 0 1 0 12'/></svg>"); }
.bi-volume-mute   { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 9v6h3l5 4V5L7 9z'/><path d='M16 9l5 6M21 9l-5 6'/></svg>"); }

/* ── Platform marks (simplified) ── */
.bi-apple         { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M16 13.5c0 3-1.8 6-3.4 6-.9 0-1.4-.5-2.6-.5s-1.7.5-2.6.5C5.8 19.5 4 16.5 4 13c0-3.3 2.3-4.6 4.2-4.6 1.1 0 1.9.6 2.8.6s1.7-.6 2.8-.6c1.3 0 2.6.6 3.2 1.9-1.7 1-1.8 3.4 0 4.7-.3.8-.7 1.5-1 2z'/><path d='M12.2 7.5c-.2-1.8 1.1-3.3 2.8-3.5.2 1.7-1.1 3.3-2.8 3.5z'/></svg>"); }
.bi-android2      { --bi: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M6 11a6 6 0 0 1 12 0'/><rect x='6' y='11' width='12' height='7' rx='1.5'/><path d='M8.5 7 7.3 5.2M15.5 7l1.2-1.8'/><circle cx='10' cy='9.4' r='.7' fill='%23000' stroke='none'/><circle cx='14' cy='9.4' r='.7' fill='%23000' stroke='none'/></svg>"); }