/* Mirsah website icon system — monochrome SVG masks aligned with browser-card icon styling. */
:root {
  --icon-grid: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E");
  --icon-search: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
  --icon-image: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 20'/%3E%3C/svg%3E");
  --icon-timer: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M9 2h6M12 9v4l3 2'/%3E%3C/svg%3E");
  --icon-lock: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3M12 14v3'/%3E%3C/svg%3E");
  --icon-sync: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7h-5V2'/%3E%3Cpath d='M4 17h5v5'/%3E%3Cpath d='M5.6 9a7 7 0 0 1 11.8-3L20 7M4 17l2.6 1a7 7 0 0 0 11.8-3'/%3E%3C/svg%3E");
  --icon-check: 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 6-11 11-5-5'/%3E%3C/svg%3E");
  --icon-plus: 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.8' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --icon-settings: 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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10M18 7h2M4 17h2M10 17h10'/%3E%3Ccircle cx='16' cy='7' r='2'/%3E%3Ccircle cx='8' cy='17' r='2'/%3E%3C/svg%3E");
  --icon-menu: 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.8' stroke-linecap='round'%3E%3Cpath d='M5 7h14M5 12h14M5 17h14'/%3E%3C/svg%3E");
  --icon-close: 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.8' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.feature-icon,
.mini-icon,
.current-dock-action,
.check,
.menu-button,
.dialog-close {
  font-size: 0 !important;
  line-height: 0;
}

.feature-icon::before,
.mini-icon::before,
.current-dock-action::before,
.check::before,
.menu-button::before,
.dialog-close::before,
.privacy-lock::before {
  content: "";
  display: block;
  background: currentColor;
  -webkit-mask: var(--site-icon) center / contain no-repeat;
  mask: var(--site-icon) center / contain no-repeat;
}

/* Main product/features: same restrained bordered icon shell as browser cards. */
.feature-icon {
  width: 35px;
  height: 35px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--brand);
  background: transparent;
}
.feature-icon::before { width: 19px; height: 19px; }

.mini-icon {
  width: 30px;
  height: 30px;
  display: grid !important;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--brand);
  background: transparent;
}
.mini-icon::before { width: 16px; height: 16px; }

.features-grid .feature-card:nth-child(1) .feature-icon,
.version-grid .version-item:nth-child(1) .mini-icon { --site-icon: var(--icon-grid); }
.features-grid .feature-card:nth-child(2) .feature-icon,
.version-grid .version-item:nth-child(2) .mini-icon { --site-icon: var(--icon-search); }
.features-grid .feature-card:nth-child(3) .feature-icon,
.version-grid .version-item:nth-child(3) .mini-icon { --site-icon: var(--icon-image); }
.features-grid .feature-card:nth-child(4) .feature-icon,
.version-grid .version-item:nth-child(4) .mini-icon { --site-icon: var(--icon-timer); }
.features-grid .feature-card:nth-child(5) .feature-icon,
.version-grid .version-item:nth-child(5) .mini-icon { --site-icon: var(--icon-lock); }
.features-grid .feature-card:nth-child(6) .feature-icon,
.version-grid .version-item:nth-child(6) .mini-icon { --site-icon: var(--icon-sync); }

/* Preview dock. */
.current-dock-action::before { width: 14px; height: 14px; }
.current-dock-action[data-dock-action="lock"] { --site-icon: var(--icon-lock); }
.current-dock-action[data-dock-action="focus"] { --site-icon: var(--icon-timer); }
.current-dock-action[data-dock-action="add"] { --site-icon: var(--icon-plus); }
.current-dock-action[data-dock-action="wallpapers"] { --site-icon: var(--icon-image); }
.current-dock-action[data-dock-action="settings"] { --site-icon: var(--icon-settings); }

/* Trust checkmarks, mobile navigation, privacy illustration and admin close action. */
.check {
  width: 13px;
  height: 13px;
  display: inline-grid !important;
  place-items: center;
  color: var(--brand);
  --site-icon: var(--icon-check);
}
.check::before { width: 12px; height: 12px; }

.menu-button {
  place-items: center;
  color: var(--muted);
  --site-icon: var(--icon-menu);
}
.menu-button::before { width: 18px; height: 18px; }

.privacy-lock {
  display: grid;
  place-items: center;
  color: var(--brand);
  --site-icon: var(--icon-lock);
}
.privacy-lock::before {
  position: static !important;
  width: 21px !important;
  height: 21px !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.privacy-lock::after { display: none !important; }

.dialog-close {
  display: grid;
  place-items: center;
  --site-icon: var(--icon-close);
}
.dialog-close::before { width: 17px; height: 17px; }