/* Visual layer (2026-09 redesign). Loaded after app.css and leader-assignment.css.
   Only presentation lives here: layout rules that JS or the verifiers depend on
   (view switching, equipment board geometry, mobile table labels) stay in app.css.
   Colors come from tokens.css so light and dark share every rule. */

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "tnum" 0;
  letter-spacing: -.005em;
}
::selection { background: var(--accent-soft); color: var(--ink); }
/* Unclassed buttons used to fall back to the browser's grey default. */
button { background: transparent; color: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
:where(button, .btn, input, select, textarea, .panel, .commander-pick, .priority-card, .option, .commander-option, .inscription-option) {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }
h1, h2, h3, h4 { letter-spacing: -.02em; }

/* Native controls follow the active theme (app.css pinned them to light). */
select:not(:disabled), select:not(:disabled) option { color-scheme: inherit; }

/* ---------- Sidebar ---------- */
.side {
  background: var(--side-bg);
  color: var(--side-text);
  border-right: 1px solid var(--side-line);
  padding: 18px 12px 14px;
  gap: 0;
}
.side .brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 22px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--side-text);
}
.side .brand::before {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(140deg, #7c7ff2 0%, #5b5bd6 55%, #3f3fb5 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 6px rgba(63, 63, 181, .35);
}
.side .brand::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 11px;
  width: 16px;
  height: 16px;
  background: #fff;
  -webkit-mask: var(--icon-castle) center / contain no-repeat;
  mask: var(--icon-castle) center / contain no-repeat;
}
.side .brand span { color: var(--side-muted); font-weight: 500; }
.side > small,
.side .admin-nav-label {
  display: block;
  padding: 0 10px 6px !important;
  color: var(--side-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.side .nav { gap: 2px; }
.side .admin-menu { gap: 2px; padding-top: 14px; margin-top: auto; border-top: 1px solid var(--side-line); }
.side .admin-menu + .side-foot { margin-top: 0; }

.side .nav button,
.side .admin-menu button,
.side .nav-group-toggle,
.side .rok-profile-edit-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--side-text-2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}
.side .nav button:hover,
.side .admin-menu button:hover,
.side .nav-group-toggle:hover,
.side .rok-profile-edit-button:hover {
  background: var(--side-hover);
  color: var(--side-text);
}
.side .nav button.active,
.side .admin-menu button.active {
  background: var(--side-active-bg);
  color: var(--side-active-text);
  font-weight: 600;
}
/* Icons: one mask per destination, tinted by the button's text color. */
.side .nav button::before,
.side .admin-menu button::before,
.side .nav-group-toggle::before,
.side .rok-profile-edit-button::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  opacity: .8;
  -webkit-mask: var(--nav-icon, var(--icon-dot)) center / contain no-repeat;
  mask: var(--nav-icon, var(--icon-dot)) center / contain no-repeat;
}
.side .nav button.active::before, .side .admin-menu button.active::before { opacity: 1; }
[data-view="entry"] { --nav-icon: var(--icon-plus-square); }
[data-view="my-loadouts"] { --nav-icon: var(--icon-layers); }
[data-view="admin"] { --nav-icon: var(--icon-shield); }
[data-view="records"] { --nav-icon: var(--icon-history); }
[data-nav="applications"] { --nav-icon: var(--icon-user-plus); }
[data-nav="leader-history"] { --nav-icon: var(--icon-trophy); }
[data-nav="leader-application"] { --nav-icon: var(--icon-crown); }
[data-nav="leader-event-admin"] { --nav-icon: var(--icon-calendar); }
[data-nav="leader-ranking"] { --nav-icon: var(--icon-medal); }
.delegated-users-nav { --nav-icon: var(--icon-users); }
.alliance-online-status-nav { --nav-icon: var(--icon-activity); }
.nav-group-toggle { --nav-icon: var(--icon-user); }
.rok-profile-edit-button { --nav-icon: var(--icon-pencil); }

.side .nav-group-toggle { justify-content: flex-start; }
.side .nav-group-toggle::after {
  content: "";
  margin-left: auto;
  width: 14px;
  height: 14px;
  background: var(--side-muted);
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  transition: transform .15s ease;
}
.side .nav-submenu {
  gap: 2px;
  margin: 2px 0 4px 19px;
  padding-left: 8px;
  border-left: 1px solid var(--side-line);
}
.side .nav-submenu button,
.side .nav-submenu .rok-profile-edit-button { font-size: 13.5px; min-height: 34px; }
.side .nav-submenu button::before { width: 16px; height: 16px; }

.side-foot {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 12px 10px 2px;
  border-top: 1px solid var(--side-line);
  color: var(--side-muted);
  font-size: 12px;
  line-height: 1.45;
}
.side-foot::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px var(--success-soft);
}
.admin-menu ~ .side-foot { margin-top: 12px; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 60px;
  padding: 0 32px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.crumb { font-size: 13px; color: var(--muted); }
.crumb b { color: var(--ink); font-weight: 600; }
.avatar { gap: 8px; font-size: 13px; color: var(--text-2); }
.avatar #auth-label { font-weight: 500; color: var(--text-2); }
.avatar i {
  width: 32px;
  height: 32px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid var(--accent-border);
}
.lang-switch {
  gap: 2px;
  margin-right: 0;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
.lang-button {
  width: auto;
  min-width: 34px;
  height: 26px;
  padding: 0 8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  opacity: 1;
}
.lang-button:hover { color: var(--ink); }
.lang-button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--muted);
}
.theme-toggle:hover { color: var(--ink); background: var(--surface-hover); }
.theme-toggle::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--icon-moon) center / contain no-repeat;
  mask: var(--icon-moon) center / contain no-repeat;
}
.theme-toggle[data-effective="dark"]::before {
  -webkit-mask-image: var(--icon-sun);
  mask-image: var(--icon-sun);
}

.mobile-menu-toggle {
  border-radius: 8px;
  background: var(--surface-2);
  color: transparent;
  font-size: 0;
  position: relative;
}
.mobile-menu-toggle::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: var(--ink);
  -webkit-mask: var(--icon-menu) center / contain no-repeat;
  mask: var(--icon-menu) center / contain no-repeat;
}
.mobile-menu-backdrop { background: var(--overlay); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* ---------- Page heading ---------- */
.wrap { padding: 32px 32px 56px; }
.heading { align-items: flex-end; margin-bottom: 24px; }
.heading h1 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.25; }
.heading p { margin-top: 6px; font-size: 14px; color: var(--muted); }

/* ---------- Panels & cards ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px;
}
.panel + .panel { margin-top: 16px; }
.panel-head { margin-bottom: 18px; gap: 12px; }
.panel-head h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -.02em; }
.hint { font-size: 12px; color: var(--muted); }
.label { font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.field { margin-bottom: 18px; }
.stat, .priority, .gear-stats, .summary, .admin-matrix-head, .admin-matrix-label, .admin-matrix-cell, .pool-unit-section, .detail-commander, .detail-armament div, .commander-skill-card {
  border-color: var(--line);
}
.stat { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.stat strong { font-weight: 700; letter-spacing: -.02em; }
.summary { border: 1px solid var(--line); border-radius: var(--radius); }
.summary .row { font-size: 13px; padding: 10px 0; }
.summary .row span { color: var(--muted); }
.gear-stats { border-radius: var(--radius); }
.priority-card, .commander-pick, .option, .commander-option, .formation-card, .leader-card, .admin-placement-card {
  border-color: var(--line);
}
.priority-card { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.priority-card:hover { border-color: var(--line-strong); }
.commander-pick { border-radius: var(--radius); padding: 10px 14px; font-weight: 600; }
.commander-pick:hover { border-color: var(--accent-border); background: var(--surface-hover); }
.commander-pick .commander-thumb { border-radius: 10px; }
.admin-matrix-head { font-weight: 650; color: var(--text-2); }
.admin-matrix-label { font-weight: 650; }

/* ---------- Form controls ---------- */
:where(.wrap, .modal, .commander-picker, .approval-card, .leader-modal, .rok-profile-dialog, .inscription-action-card, .admin-placement-card)
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--ink);
  font: inherit;
  padding: 8px 12px;
}
:where(.wrap, .modal, .commander-picker, .leader-modal, .rok-profile-dialog)
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select) {
  min-height: 38px;
}
.field input, .field select,
.armament-input-grid input,
.inscription-toolbar input,
.commander-picker-search,
.approval-card textarea,
.leader-form-grid input, .leader-commander-field input, .leader-modal select, .leader-modal textarea, .leader-rank-slot textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--ink);
  padding: 9px 12px;
  min-height: 40px;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
}
.skill-levels select, .commander-skill-level select { border-radius: var(--radius-sm); border-color: var(--line-strong); }
:where(.wrap, .modal, .commander-picker, .approval-card, .leader-modal, .rok-profile-dialog, .inscription-action-card)
  :where(input, select, textarea):hover:not(:focus):not(:disabled) { border-color: var(--faint); }
:where(.wrap, .modal, .commander-picker, .approval-card, .leader-modal, .rok-profile-dialog, .inscription-action-card)
  :where(input, select, textarea):focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  /* Neutral by default; .primary / .danger and module-specific variants override. */
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--surface-hover); color: var(--ink); }
.btn.ghost { background: var(--surface); border-color: var(--line-strong); color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-hover); color: var(--ink); }
.btn.primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn.danger { background: var(--danger); border-color: transparent; color: #fff; }
.btn.danger:hover { background: var(--danger); color: #fff; filter: brightness(1.06); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.heading .btn { flex: none; }

/* Row-level actions in tables and cards (previously unstyled). */
.detail-button, .edit-loadout-button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.detail-button:hover, .edit-loadout-button:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--faint); }
.delete, .own-loadout-delete {
  padding: 5px 9px;
  border-radius: 7px;
  color: var(--danger-text);
  font-size: 12.5px;
  font-weight: 600;
}
.delete:hover { background: var(--danger-soft); }
.chip, .commander-filter, .skill-role-tab { font-weight: 600; }
.commander-filter.active, .skill-role-tab.active, .chip.active { color: var(--accent-text); }
.commander-picker-close { color: var(--text-2); }
.commander-picker-close:hover { background: var(--surface-3); }

/* ---------- Tables ---------- */
.record-table { font-size: 13px; }
.record-table th {
  padding: 10px 12px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  border-bottom: 1px solid var(--line);
}
.record-table th:first-child { border-top-left-radius: var(--radius-sm); }
.record-table th:last-child { border-top-right-radius: var(--radius-sm); }
.record-table td { padding: 12px; vertical-align: middle; }
.record-table tbody tr:hover td { background: var(--surface-hover); }
.record-table tbody tr:last-child td { border-bottom: 0; }
.panel > .record-table, .panel > .table-scroll > .record-table { margin: -4px 0; }
.vip-cell { color: var(--accent-text); }

/* ---------- Badges ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
}
.priority-head span, .gear-stats-head > b { color: var(--accent-text); font-weight: 600; }
.ok { color: var(--success-text); font-weight: 700; }
.warn { color: var(--warn-text); font-weight: 700; }
.approval-status { background: var(--accent-soft); color: var(--accent-text); }

/* ---------- Overlays & dialogs ---------- */
/* The top bar is sticky (z 40) on every width now, so page dialogs must sit
   above it; their relative order (modal < commander picker) is preserved. */
.modal-back { z-index: 90; }
.commander-picker-back { z-index: 95; }
.modal-back, .commander-picker-back, .leader-modal-back, .inscription-action-sheet, .admin-placement-sheet {
  background: var(--overlay);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal, .commander-picker, .leader-modal, .inscription-action-card, .admin-placement-card, .rok-profile-dialog {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
}
.modal h2, .commander-picker-head h2 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.option { border-radius: var(--radius-sm); }
.option:hover, .commander-option:hover { border-color: var(--accent-border); }
.commander-option { border-radius: var(--radius); }

/* ---------- Approval gate ---------- */
.approval-gate {
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--accent-soft), transparent 70%),
    var(--bg);
}
.approval-card { border-radius: 20px; box-shadow: var(--shadow-lg); padding: 32px; }
.approval-card h1 { font-size: 24px; font-weight: 700; letter-spacing: -.03em; }

/* ---------- Equipment grades ----------
   Icon background = item grade (GearRules.rarity -> data-rarity); the gold
   frame on the slot/card stays reserved for awakening. */
[data-rarity="legendary"] { --grade-bg: var(--grade-legendary); }
[data-rarity="epic"] { --grade-bg: var(--grade-epic); }
[data-rarity="elite"] { --grade-bg: var(--grade-elite); }
[data-rarity="advanced"] { --grade-bg: var(--grade-advanced); }
[data-rarity="normal"] { --grade-bg: var(--grade-normal); }
#equipment-grid .slot[data-rarity]:not([data-rarity=""]) .slot-icon,
.detail-gear-card[data-rarity]:not([data-rarity=""]) img,
.option[data-rarity]:not([data-rarity=""]) img {
  background: var(--grade-bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 -6px 12px rgba(0, 0, 0, .18);
}
.option[data-rarity]:not([data-rarity=""]) img { border-radius: 8px; }
/* The slot diamond used to be filled with grey, which showed as a grey band
   between the grade-colored icon and the (gold, when awakened) frame. Keep the
   frame and shadows; make the fill almost transparent. */
.equipment-grid .slot, .detail-gear-card { background: rgba(255, 255, 255, .06); }
.equipment-grid .slot .slot-icon { border-color: rgba(255, 255, 255, .28); }
/* Non-awakened frame: barely visible hairline. The 3px border stays (transparent)
   so slot geometry and icon position match awakened slots; the line is an inset
   outline. Awakened slots keep their gold border and glow from app.css. */
.equipment-grid .slot:not(.awakened), .detail-gear-card:not(.awakened) {
  border-color: transparent;
  outline: 1px solid var(--slot-line);
  outline-offset: -2px;
  box-shadow: 0 2px 6px rgba(19, 39, 67, .12);
}

#modal .equipment-search { display: block; width: 100%; margin: 0 0 12px; }
#modal .option[hidden] { display: none; }

/* ---------- My marches: drag to reorder ---------- */
.march-sort-handle {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 28px;
  margin: -4px 6px -4px -4px;
  padding: 0;
  vertical-align: middle;
  border-radius: 6px;
  color: var(--faint);
  cursor: grab;
  touch-action: none;
}
.march-sort-handle::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--icon-grip) center / contain no-repeat;
  mask: var(--icon-grip) center / contain no-repeat;
}
.march-sort-handle:hover { color: var(--text-2); background: var(--surface-3); }
#my-loadouts-body tr:only-child .march-sort-handle { display: none; }
#my-loadouts-body tr.is-dragging td { background: var(--accent-soft) !important; }
#my-loadouts-body tr.is-dragging { outline: 1px solid var(--accent-border); outline-offset: -1px; box-shadow: var(--shadow-lg); position: relative; z-index: 2; }
body.is-sorting-marches, body.is-sorting-marches * { cursor: grabbing !important; user-select: none; }
.march-sort-status { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--success-text); min-height: 1em; }
.march-sort-status[data-kind="error"] { color: var(--danger-text); }

/* ---------- Charts & misc ---------- */
.aos-chart-svg .aos-hover-dot { fill: var(--surface); }
.summary-commander em, .screen-gear-group span strong, .gear-stat-row b, .gear-stat-inline-values strong, .detail-armament b { color: var(--accent-text); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .wrap { padding: 24px 20px 48px; }
  .topbar { padding: 0 20px; }
}
@media (max-width: 760px) {
  .topbar { height: 56px; padding: 0 12px; }
  .wrap { padding: 20px 14px 40px; }
  .heading { align-items: flex-start; }
  .heading h1 { font-size: 22px; }
  .panel { padding: 16px; border-radius: 14px; }
  .side { width: min(284px, 86vw); box-shadow: var(--shadow-lg); border-right: 1px solid var(--side-line); }
  .side .nav button, .side .admin-menu button, .side .nav-group-toggle, .side .rok-profile-edit-button { font-size: 14.5px; min-height: 40px; }
  .avatar { gap: 6px; }
  .avatar #auth-label { display: none; }
  .avatar .btn { min-height: 32px; padding: 6px 10px; font-size: 12px; }
  .lang-button { min-width: 30px; padding: 0 6px; }
  .theme-toggle { width: 32px; height: 32px; }
  #records .record-table tr, #my-loadouts .record-table tr, .application-table tr {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .record-table tbody tr:hover td { background: transparent; }
  /* Rows already render as cards on phones; drop the panel frame around them. */
  #records .panel, #my-loadouts .panel, .application-panel {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .crumb { flex: 1 1 auto; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .avatar { flex: none; }
}
@media (max-width: 560px) {
  .avatar i { display: none; }
}

/* ---------- Icon set (Lucide-style strokes, used as masks) ---------- */
:root {
  --icon-dot: 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='3'/%3E%3C/svg%3E");
  --icon-plus-square: 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%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
  --icon-layers: 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='m12 2 10 5-10 5L2 7z'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E");
  --icon-shield: 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='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  --icon-history: 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='M3 12a9 9 0 1 0 3-6.7L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3Cpath d='M12 7v5l4 2'/%3E%3C/svg%3E");
  --icon-user-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='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M19 8v6M22 11h-6'/%3E%3C/svg%3E");
  --icon-users: 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='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
  --icon-activity: 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='M22 12h-4l-3 9L9 3l-3 9H2'/%3E%3C/svg%3E");
  --icon-calendar: 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%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  --icon-medal: 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%3Ccircle cx='12' cy='15' r='6'/%3E%3Cpath d='M8.5 10.2 5 2h4l3 6 3-6h4l-3.5 8.2'/%3E%3Cpath d='m12 12.5.9 1.8 2 .3-1.45 1.4.35 2-1.8-.95-1.8.95.35-2L9.1 14.6l2-.3z'/%3E%3C/svg%3E");
  --icon-trophy: 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='M6 9H4.5a2.5 2.5 0 0 1 0-5H6'/%3E%3Cpath d='M18 9h1.5a2.5 2.5 0 0 0 0-5H18'/%3E%3Cpath d='M4 22h16'/%3E%3Cpath d='M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22'/%3E%3Cpath d='M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22'/%3E%3Cpath d='M18 2H6v7a6 6 0 0 0 12 0V2Z'/%3E%3C/svg%3E");
  --icon-grip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='5' r='1.8'/%3E%3Ccircle cx='15' cy='5' r='1.8'/%3E%3Ccircle cx='9' cy='12' r='1.8'/%3E%3Ccircle cx='15' cy='12' r='1.8'/%3E%3Ccircle cx='9' cy='19' r='1.8'/%3E%3Ccircle cx='15' cy='19' r='1.8'/%3E%3C/svg%3E");
  --icon-crown: 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='m2 7 5 5 5-8 5 8 5-5-2 12H4z'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E");
  --icon-user: 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%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E");
  --icon-pencil: 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='M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E");
  --icon-chevron: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%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='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
  --icon-moon: 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='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
  --icon-sun: 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%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
  --icon-castle: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V8l2.5 1.5L9 8v3h6V8l2.5 1.5L20 8v13z'/%3E%3Cpath d='M10 21v-4a2 2 0 0 1 4 0v4'/%3E%3Cpath d='M12 3v5'/%3E%3Cpath d='m12 3 3 1.5L12 6'/%3E%3C/svg%3E");
}