:root {
  --ns-icon-compact-size: 16px;
  --ns-icon-button-size: 18px;
  --ns-icon-card-size: 20px;
  --ns-icon-navigation-size: 20px;
  --ns-icon-feature-size: 24px;
  --ns-icon-stroke-width: 1.8;
}

.ns-glyph,
.ui-icon,
.button-svg,
.card-svg,
.menu-svg,
[class$="-icon"] > svg,
[class$="-svg"] {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ns-icon-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ui-icon { width: var(--ns-icon-compact-size); height: var(--ns-icon-compact-size); }
.button-svg { width: var(--ns-icon-button-size); height: var(--ns-icon-button-size); }
.card-svg { width: var(--ns-icon-card-size); height: var(--ns-icon-card-size); }
.menu-svg { width: var(--ns-icon-navigation-size); height: var(--ns-icon-navigation-size); }

.ns-ui-icon-button,
[data-ns-icon-only="true"],
.icon-button {
  display: inline-grid;
  place-items: center;
}

/* Keep reusable tab glyphs compact even inside flex/grid containers. */
.ns-ui-tab > svg.ns-glyph { width: var(--ns-icon-button-size); height: var(--ns-icon-button-size); max-width: var(--ns-icon-button-size); max-height: var(--ns-icon-button-size); }