/* Icons: outline glyphs rendered as CSS masks so they inherit `currentColor`.
   The emoji inside `.ui-icon` is a no-JS/no-mask fallback and is hidden (font-size: 0). */

.ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.1rem;
  line-height: 1;
}

.ui-icon[data-icon] {
  font-size: 0;
}

.ui-icon[data-icon]::before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--icon-mask) center / contain no-repeat;
  mask: var(--icon-mask) center / contain no-repeat;
}

.ui-icon[data-icon='info'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 10v6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7' r='1.1' fill='black'/%3E%3C/svg%3E");
}

.ui-icon[data-icon='spec'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3.5h7l4.5 4.5v12A1.5 1.5 0 0117 21.5H7A1.5 1.5 0 015.5 20V5A1.5 1.5 0 017 3.5z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M14 3.5V8h4.5M9 12h6M9 15h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ui-icon[data-icon='resource'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2a6.3 6.3 0 00-3.8 11.3V18a1 1 0 001 1h5.6a1 1 0 001-1v-3.5A6.3 6.3 0 0012 3.2z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M9.5 20.2h5M10.4 16.2h3.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ui-icon[data-icon='interactive'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 8l6 4-6 4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ui-icon[data-icon='static'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Crect x='9' y='9' width='6' height='6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

/* Theme picker glyphs (sun / moon / auto). */

.theme-option[data-mode='light'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%3E%3Crect%20x=%225%22%20y=%225%22%20width=%226%22%20height=%226%22%20rx=%223%22%20stroke=%22black%22%20stroke-width=%221.5%22/%3E%3Cpath%20d=%22M8%200.25C7.58579%200.25%207.25%200.585786%207.25%201L7.25391%201.07715C7.29248%201.45517%207.6118%201.75%208%201.75C8.41421%201.75%208.75%201.41421%208.75%201C8.75%200.585786%208.41421%200.25%208%200.25ZM8%2014.25C7.58579%2014.25%207.25%2014.5858%207.25%2015L7.25391%2015.0771C7.29248%2015.4552%207.6118%2015.75%208%2015.75C8.41421%2015.75%208.75%2015.4142%208.75%2015C8.75%2014.5858%208.41421%2014.25%208%2014.25ZM15.0771%207.25391C15.4552%207.29248%2015.75%207.6118%2015.75%208C15.75%208.3882%2015.4552%208.70752%2015.0771%208.74609L15%208.75C14.5858%208.75%2014.25%208.41421%2014.25%208C14.25%207.58579%2014.5858%207.25%2015%207.25L15.0771%207.25391ZM1.75%208C1.75%207.6118%201.45517%207.29248%201.07715%207.25391L1%207.25C0.585786%207.25%200.25%207.58579%200.25%208C0.25%208.41421%200.585786%208.75%201%208.75L1.07715%208.74609C1.45517%208.70752%201.75%208.3882%201.75%208Z%22%20fill=%22black%22/%3E%3Cpath%20d=%22M3.64135%2012.3586C3.93421%2012.6515%203.93414%2013.1264%203.64135%2013.4193C3.34846%2013.7122%202.87358%2013.7122%202.58069%2013.4193C2.30619%2013.1448%202.28888%2012.7105%202.5289%2012.416L2.58069%2012.3586C2.87359%2012.0659%203.34849%2012.0658%203.64135%2012.3586ZM3.63237%202.57723C3.87239%202.87181%203.85508%203.30608%203.58058%203.58058C3.30608%203.85508%202.87181%203.87239%202.57724%203.63237L2.51992%203.58058C2.22703%203.28769%202.22703%202.81281%202.51992%202.51992C2.81282%202.22702%203.28769%202.22702%203.58058%202.51992L3.63237%202.57723ZM13.4711%2012.416C13.7111%2012.7105%2013.6938%2013.1448%2013.4193%2013.4193C13.1448%2013.6938%2012.7105%2013.7111%2012.416%2013.4711L12.3587%2013.4193C12.0659%2013.1264%2012.0658%2012.6515%2012.3587%2012.3586C12.6515%2012.0658%2013.1264%2012.0659%2013.4193%2012.3586L13.4711%2012.416ZM13.4801%202.51992C13.773%202.81281%2013.773%203.28769%2013.4801%203.58058C13.1872%203.87347%2012.7123%203.87347%2012.4194%203.58058C12.1449%203.30608%2012.1276%202.87181%2012.3676%202.57723L12.4194%202.51992C12.7123%202.22702%2013.1872%202.22702%2013.4801%202.51992Z%22%20fill=%22black%22/%3E%3C/svg%3E");
}

.theme-option[data-mode='dark'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%3E%3Cpath%20d=%22M14.2252%2010.0845C14.54%209.95039%2014.8559%2010.244%2014.7134%2010.555C14.3379%2011.3742%2013.8066%2012.1157%2013.1463%2012.7369C12.2739%2013.5575%2011.2056%2014.1406%2010.0435%2014.4303C8.88133%2014.7201%207.6643%2014.7068%206.50878%2014.3918C5.35325%2014.0767%204.29789%2013.4705%203.44363%2012.631C2.58937%2011.7915%201.9648%2010.7469%201.62965%209.59707C1.2945%208.44722%201.25998%207.23061%201.52941%206.06361C1.79883%204.89661%202.36318%203.81825%203.16847%202.9317C3.76901%202.27056%204.48855%201.73258%205.28668%201.34413C5.59577%201.1937%205.88975%201.51373%205.74469%201.82539V1.82539C3.32126%207.032%208.59731%2012.4835%2013.8804%2010.2315L14.2252%2010.0845Z%22%20stroke=%22black%22%20stroke-width=%221.5%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}

.theme-option[data-mode='system'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2016%2016%22%20fill=%22none%22%3E%3Cpath%20d=%22M1%204V12C1%2013.6569%202.34315%2015%204%2015H12C13.6569%2015%2015%2013.6569%2015%2012V4C15%202.34315%2013.6569%201%2012%201H4C2.34315%201%201%202.34315%201%204Z%22%20stroke=%22black%22%20stroke-width=%221.5%22/%3E%3Crect%20x=%224%22%20y=%224%22%20width=%228%22%20height=%225%22%20stroke=%22black%22%20stroke-width=%221.5%22%20stroke-linejoin=%22round%22/%3E%3Crect%20x=%2211.25%22%20y=%2211.25%22%20width=%221.5%22%20height=%221.5%22%20rx=%220.75%22%20fill=%22black%22/%3E%3Cpath%20d=%22M4%2012H10%22%20stroke=%22black%22%20stroke-width=%221.5%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}

/* Category glyphs (categories index): drawn in a 24px grid, shown large inside the 80px icon container. */
.ui-icon[data-icon='login'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h3a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3h-3'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
}

.ui-icon[data-icon='lock'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='11' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E");
}

.ui-icon[data-icon='shield'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.8-3.3 7.9-8 9-4.7-1.1-8-4.2-8-9V6z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E");
}

.ui-icon[data-icon='grid'] {
  --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.5'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.5'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.5'/%3E%3C/svg%3E");
}