/* ============================================================
   自建图标系统 —— 纯 SVG path，零外部素材
   ★ 设计原则（欣姐要求）：
     1. 绝不混用「洛克王国页游」(17roco) 与「洛克王国世界」(nrc) 的素材
     2. 图形语义按本站功能定义，与魔法学院深色主题统一
     3. currentColor 着色，随主题/状态变化；描边线性风格，24×24 网格
   ============================================================ */

/* 基础图标盒：由 JS 注入 <svg class="ico"><path d="..."/></svg> */
.ico {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  flex: 0 0 auto;
}
/* 卡片内大图标 */
.ico-lg { width: 1.55em; height: 1.55em; stroke-width: 1.5; }
/* 登录门里的图标 */
.ico-gate { width: 2.1rem; height: 2.1rem; stroke-width: 1.3; opacity: 0.85; }

/* 导航项：图标与文字的排布 */
nav a { display: inline-flex; align-items: center; gap: 6px; }
nav a .ico { opacity: 0.86; transition: opacity 0.18s, transform 0.18s; }
nav a:hover .ico { opacity: 1; transform: scale(1.1); }
nav a.active .ico { opacity: 1; }

/* 卡片图标容器 */
.card-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(109, 124, 255, 0.2), rgba(139, 92, 246, 0.1));
  color: var(--brand);
  transition: color 0.2s, transform 0.2s, background 0.2s;
}
.card:hover .card-ico {
  color: #fff;
  transform: scale(1.06);
  background: linear-gradient(135deg, rgba(109, 124, 255, 0.42), rgba(139, 92, 246, 0.26));
}

/* 登录门图标 */
.gate-icon {
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  color: var(--brand);
}

/* 页头标题旁的图标 */
h2 .ico { color: var(--brand); }

/* 空状态/提示中的图标 */
.note-ico { color: var(--muted); margin-right: 5px; }