/* Inline SVG icon masks — lucide-style, brand-tinted via currentColor */
:root {
  --ico-home: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m3%209%209-7%209%207v11a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22/%3E%3Cpolyline%20points%3D%229%2022%209%2012%2015%2012%2015%2022%22/%3E%3C/svg%3E");
  --ico-book: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2019.5A2.5%202.5%200%200%201%206.5%2017H20%22/%3E%3Cpath%20d%3D%22M6.5%202H20v20H6.5A2.5%202.5%200%200%201%204%2019.5v-15A2.5%202.5%200%200%201%206.5%202z%22/%3E%3C/svg%3E");
  --ico-users: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E");
  --ico-key: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%225.5%22/%3E%3Cpath%20d%3D%22m21%202-9.6%209.6%22/%3E%3Cpath%20d%3D%22m15.5%207.5%203%203L22%207l-3-3%22/%3E%3C/svg%3E");
  --ico-shield: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010%22/%3E%3C/svg%3E");
  --ico-compass: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpolygon%20points%3D%2216.24%207.76%2014.12%2014.12%207.76%2016.24%209.88%209.88%2016.24%207.76%22/%3E%3C/svg%3E");
  --ico-wrench: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22/%3E%3C/svg%3E");
  --ico-mail: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22/%3E%3C/svg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22/%3E%3Cpath%20d%3D%22m21%2021-4.3-4.3%22/%3E%3C/svg%3E");
  --ico-chevron: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22/%3E%3C/svg%3E");
  --ico-lightbulb: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2014c.2-1%20.7-1.7%201.5-2.5%201-.9%201.5-2.2%201.5-3.5A6%206%200%200%200%206%208c0%201%20.2%202.2%201.5%203.5.7.7%201.3%201.5%201.5%202.5%22/%3E%3Cpath%20d%3D%22M9%2018h6%22/%3E%3Cpath%20d%3D%22M10%2022h4%22/%3E%3C/svg%3E");
  --ico-alert: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22/%3E%3Cpath%20d%3D%22M12%209v4%22/%3E%3Cpath%20d%3D%22M12%2017h.01%22/%3E%3C/svg%3E");
  --ico-flag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2015s1-1%204-1%205%202%208%202%204-1%204-1V3s-1%201-4%201-5-2-8-2-4%201-4%201z%22/%3E%3Cline%20x1%3D%224%22%20x2%3D%224%22%20y1%3D%2222%22%20y2%3D%2215%22/%3E%3C/svg%3E");
  --ico-spark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z%22/%3E%3C/svg%3E");
  --ico-cart: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2221%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2221%22%20r%3D%221%22/%3E%3Cpath%20d%3D%22M2.05%202.05h2l2.66%2012.42a2%202%200%200%200%202%201.58h9.78a2%202%200%200%200%201.95-1.57l1.65-7.43H5.12%22/%3E%3C/svg%3E");
  --ico-briefcase: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2020V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16%22/%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22/%3E%3C/svg%3E");
  --ico-receipt: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%202v20l2-1%202%201%202-1%202%201%202-1%202%201%202-1%202%201V2l-2%201-2-1-2%201-2-1-2%201-2-1-2%201Z%22/%3E%3Cpath%20d%3D%22M16%208h-6a2%202%200%201%200%200%204h4a2%202%200%201%201%200%204H8%22/%3E%3Cpath%20d%3D%22M12%2017.5v-11%22/%3E%3C/svg%3E");
  --ico-puzzle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19.439%207.85c-.172.331-.33.647-.496.974a.5.5%200%200%201-.7.17l-.8-.4a.5.5%200%200%200-.7.17l-.4.8a.5.5%200%200%201-.7.17c-.327-.166-.643-.324-.974-.496a.5.5%200%200%200-.58.12l-.56.56a.5.5%200%200%200%200%20.7l.4.8a.5.5%200%200%201-.17.7c-.327.166-.643.324-.974.496a.5.5%200%200%200-.17.7l.4.8a.5.5%200%200%201-.17.7l-.56.56a.5.5%200%200%200%200%20.7l.56.56a.5.5%200%200%200%20.7%200l.8-.4a.5.5%200%200%201%20.7.17c.166.327.324.643.496.974a.5.5%200%200%200%20.58.12l.56-.56a.5.5%200%200%200%200-.7l-.4-.8a.5.5%200%200%201%20.17-.7c.327-.166.643-.324.974-.496a.5.5%200%200%200%20.17-.7l-.4-.8a.5.5%200%200%201%20.17-.7l.56-.56a.5.5%200%200%200%200-.7l-.56-.56a.5.5%200%200%200-.7%200z%22/%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22/%3E%3C/svg%3E");
  --ico-settings: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22/%3E%3Cpath%20d%3D%22M12%201v2M12%2021v2M4.22%204.22l1.42%201.42M18.36%2018.36l1.42%201.42M1%2012h2M21%2012h2M4.22%2019.78l1.42-1.42M18.36%205.64l1.42-1.42%22/%3E%3C/svg%3E");
  --ico-phone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2214%22%20height%3D%2220%22%20x%3D%225%22%20y%3D%222%22%20rx%3D%222%22%20ry%3D%222%22/%3E%3Cpath%20d%3D%22M12%2018h.01%22/%3E%3C/svg%3E");
  --ico-help: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22/%3E%3Cpath%20d%3D%22M12%2017h.01%22/%3E%3C/svg%3E");
  --ico-layers: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12.83%202.18a2%202%200%200%200-1.66%200L2.6%206.08a1%201%200%200%200%200%201.83l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%200-1.83Z%22/%3E%3Cpath%20d%3D%22m22%2017.65-9.17%204.16a2%202%200%200%201-1.66%200L2%2017.65%22/%3E%3Cpath%20d%3D%22m22%2012.65-9.17%204.16a2%202%200%200%201-1.66%200L2%2012.65%22/%3E%3C/svg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22/%3E%3Cpolyline%20points%3D%2212%206%2012%2012%2016%2014%22/%3E%3C/svg%3E");
}

.nav-group-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.nav-group-title::before {
  content: "";
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  background-color: var(--primary-600);
  opacity: 0.9;
  -webkit-mask: var(--nav-ico, var(--ico-book)) center / contain no-repeat;
  mask: var(--nav-ico, var(--ico-book)) center / contain no-repeat;
}
.nav-group[data-nav="home"] { --nav-ico: var(--ico-home); }
.nav-group[data-nav="start"] { --nav-ico: var(--ico-spark); }
.nav-group[data-nav="sales"] { --nav-ico: var(--ico-cart); }
.nav-group[data-nav="work"] { --nav-ico: var(--ico-briefcase); }
.nav-group[data-nav="team"] { --nav-ico: var(--ico-users); }
.nav-group[data-nav="biz"] { --nav-ico: var(--ico-receipt); }
.nav-group[data-nav="addons"] { --nav-ico: var(--ico-layers); }
.nav-group[data-nav="system"] { --nav-ico: var(--ico-settings); }
.nav-group[data-nav="roles"] { --nav-ico: var(--ico-shield); }
.nav-group[data-nav="mobile"] { --nav-ico: var(--ico-phone); }
.nav-group[data-nav="help"] { --nav-ico: var(--ico-help); }
.nav-group[data-nav="end"] { --nav-ico: var(--ico-flag); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.badge::before {
  content: "";
  width: 0.85rem;
  height: 0.85rem;
  background-color: currentColor;
  opacity: 0.9;
  -webkit-mask: var(--badge-ico, var(--ico-users)) center / contain no-repeat;
  mask: var(--badge-ico, var(--ico-users)) center / contain no-repeat;
}
.badge-admin { --badge-ico: var(--ico-shield); }
.badge-vodja { --badge-ico: var(--ico-compass); }
.badge-delavec { --badge-ico: var(--ico-wrench); }
.badge-all { --badge-ico: var(--ico-users); }
.badge-soon { --badge-ico: var(--ico-clock); }

.callout-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.callout-title::before {
  content: "";
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--callout-ico, var(--ico-lightbulb)) center / contain no-repeat;
  mask: var(--callout-ico, var(--ico-lightbulb)) center / contain no-repeat;
}
.callout.tip .callout-title { color: var(--primary-700); --callout-ico: var(--ico-lightbulb); }
.callout.warn .callout-title { color: #b45309; --callout-ico: var(--ico-alert); }
.callout.role-admin .callout-title { color: #047857; --callout-ico: var(--ico-shield); }
.callout.role-vodja .callout-title { color: #1d4ed8; --callout-ico: var(--ico-compass); }
.callout.role-delavec .callout-title { color: #475569; --callout-ico: var(--ico-wrench); }

.card-grid a[data-icon] {
  position: relative;
  padding-left: 3.35rem;
}
.card-grid a[data-icon]::before {
  content: "";
  position: absolute;
  left: 0.95rem;
  top: 1.05rem;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 10px;
  background: var(--primary-50);
  border: 1px solid #99f6e4;
}
.card-grid a[data-icon]::after {
  content: "";
  position: absolute;
  left: 1.3rem;
  top: 1.4rem;
  width: 1.15rem;
  height: 1.15rem;
  background-color: var(--primary-700);
  -webkit-mask: var(--card-ico, var(--ico-book)) center / contain no-repeat;
  mask: var(--card-ico, var(--ico-book)) center / contain no-repeat;
  pointer-events: none;
}
.card-grid a[data-icon="book"] { --card-ico: var(--ico-book); }
.card-grid a[data-icon="users"] { --card-ico: var(--ico-users); }
.card-grid a[data-icon="key"] { --card-ico: var(--ico-key); }
.card-grid a[data-icon="shield"] { --card-ico: var(--ico-shield); }
.card-grid a[data-icon="compass"] { --card-ico: var(--ico-compass); }
.card-grid a[data-icon="wrench"] { --card-ico: var(--ico-wrench); }

.link-grid a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.link-grid a::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: var(--primary-600);
  opacity: 0.55;
  -webkit-mask: var(--ico-chevron) center / contain no-repeat;
  mask: var(--ico-chevron) center / contain no-repeat;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.link-grid a:hover::after {
  opacity: 1;
  transform: translateX(2px);
}

.support-cta {
  margin: 1rem 0 1.5rem;
}
.support-cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.05rem;
  border-radius: 999px;
  background: var(--primary-50);
  border: 1px solid #99f6e4;
  color: var(--primary-700);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.support-cta a:hover {
  background: #ccfbf1;
  border-color: var(--primary-500);
  box-shadow: 0 2px 8px rgb(13 148 136 / 12%);
}
.support-cta a::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  background-color: currentColor;
  -webkit-mask: var(--ico-mail) center / contain no-repeat;
  mask: var(--ico-mail) center / contain no-repeat;
}

.search-wrap .search-icon {
  width: 1rem;
  height: 1rem;
  background-color: var(--text-muted);
  -webkit-mask: var(--ico-search) center / contain no-repeat;
  mask: var(--ico-search) center / contain no-repeat;
  font-size: 0;
  line-height: 0;
}

.pager a.prev { padding-left: 2.45rem; }
.pager a.next { padding-right: 2.45rem; }
.pager a.prev::before,
.pager a.next::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1rem;
  height: 1rem;
  background-color: var(--primary-600);
  -webkit-mask: var(--ico-chevron) center / contain no-repeat;
  mask: var(--ico-chevron) center / contain no-repeat;
  opacity: 0.75;
}
.pager a.prev,
.pager a.next { position: relative; }
.pager a.prev::before {
  left: 0.9rem;
  transform: translateY(-50%) scaleX(-1);
}
.pager a.next::after {
  right: 0.9rem;
  transform: translateY(-50%);
}
