/* 图标系统（mask + currentColor）—— 由小程序 styles/icons.wxss 直接搬来，
 * 只有一处改动：根选择器 .screen → :root（网页没有 .screen 包裹层）。
 * 原始文件由 design/nav-icons/generate-masks.py 生成，不要手改这里的 path。
 */
/* Mask SVG uses black only as an alpha carrier; UI colour comes from background-color. */

:root {
  --ico-brand: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20d%3D%22M7%2031%2032%209l25%2022%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2243%22%20r%3D%225%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --ico-home: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%2217%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M42%20114%20L128%2042%20L214%20114%22%2F%3E%3Cpath%20d%3D%22M64%20104%20V190%20Q64%20210%2084%20210%20H172%20Q192%20210%20192%20190%20V104%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%22158%22%20r%3D%2210%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E");
  --ico-lineage: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%2217%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%22104%22%20y%3D%2228%22%20width%3D%2256%22%20height%3D%2242%22%20rx%3D%2212%22%2F%3E%3Cpath%20d%3D%22M128%2070%20V102%20M56%20102%20H200%20M56%20102%20V146%20M200%20102%20V146%22%2F%3E%3Crect%20x%3D%2230%22%20y%3D%22146%22%20width%3D%2252%22%20height%3D%2240%22%20rx%3D%2212%22%2F%3E%3Crect%20x%3D%22174%22%20y%3D%22146%22%20width%3D%2252%22%20height%3D%2240%22%20rx%3D%2212%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%22102%22%20r%3D%2210%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E");
  --ico-events: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%2217%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2248%22%20y%3D%2248%22%20width%3D%22160%22%20height%3D%22166%22%20rx%3D%2222%22%2F%3E%3Cpath%20d%3D%22M48%2092%20H208%20M90%2034%20V64%20M166%2034%20V64%20M106%20164%20H176%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22106%22%20cy%3D%22134%22%20r%3D%2210%22%20fill%3D%22%23111111%22%2F%3E%3Cpath%20d%3D%22M140%20134%20H176%22%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%2217%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --ico-me: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%2217%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%2284%22%20r%3D%2232%22%2F%3E%3Cpath%20d%3D%22M62%20208%20C66%20164%2092%20146%20128%20146%20C164%20146%20190%20164%20194%20208%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%22180%22%20r%3D%229%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E");
  --ico-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%2217%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%22112%22%20r%3D%2282%22%2F%3E%3Cpath%20d%3D%22M169%20169%20L228%20228%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%22112%22%20r%3D%229%22%20fill%3D%22%23111111%22%2F%3E%3C%2Fsvg%3E");
  --ico-search-sm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227.4%22%2F%3E%3Cpath%20d%3D%22M15.5%2015.5%2021.5%2021.5%22%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%221.25%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --ico-add: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%2217%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%2278%22%20r%3D%2238%22%2F%3E%3Cpath%20d%3D%22M32%20218%20V160%20C32%20136%2060%20124%20100%20124%20C140%20124%20168%20136%20168%20160%20V218%22%2F%3E%3Cpath%20d%3D%22M196%2032%20H244%20M220%208%20V56%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --ico-data: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20width%3D%22256%22%20height%3D%22256%22%3E%3Cpath%20d%3D%22M92%2022%20H196%20Q212%2022%20212%2038%20V178%22%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%2215%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.55%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2264%22%20width%3D%22136%22%20height%3D%22144%22%20rx%3D%2218%22%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%2217%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%22126%22%20r%3D%229%22%20fill%3D%22%23111111%22%2F%3E%3Cpath%20d%3D%22M106%20126%20H152%22%20fill%3D%22none%22%20stroke%3D%22%23111111%22%20stroke-width%3D%2217%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --ico-close-lg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M5%205%2035%2035M35%205%205%2035%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --ico-close-sm: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22M2%202%2014%2014M14%202%202%2014%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4.5%2012.5%209.8%2017.6%2019.5%207%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --ico-plus: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2018%22%3E%3Cpath%20d%3D%22M9%202v14M2%209h14%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --ico-caret-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%3E%3Cpath%20d%3D%22M1.5%202.2%208%207%2014.5%202.2%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --ico-chevron-left: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20d%3D%22M9.5%202%204.5%207l5%205%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --ico-arrow-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%3E%3Cpath%20d%3D%22M5%202%2010.5%207%205%2012%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

.vico {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color var(--dur-fast) var(--ease);
}
.vico-hover { background-color: var(--ink); }
.vico-brand {
  -webkit-mask-image: var(--ico-brand);
  mask-image: var(--ico-brand);
}
.vico-home {
  -webkit-mask-image: var(--ico-home);
  mask-image: var(--ico-home);
}
.vico-lineage {
  -webkit-mask-image: var(--ico-lineage);
  mask-image: var(--ico-lineage);
}
.vico-events {
  -webkit-mask-image: var(--ico-events);
  mask-image: var(--ico-events);
}
.vico-me {
  -webkit-mask-image: var(--ico-me);
  mask-image: var(--ico-me);
}
.vico-search {
  -webkit-mask-image: var(--ico-search);
  mask-image: var(--ico-search);
}
.vico-search-sm {
  -webkit-mask-image: var(--ico-search-sm);
  mask-image: var(--ico-search-sm);
}
.vico-add {
  -webkit-mask-image: var(--ico-add);
  mask-image: var(--ico-add);
}
.vico-data {
  -webkit-mask-image: var(--ico-data);
  mask-image: var(--ico-data);
}

/* ---------- web 侧补充的 7 个类 ----------
 * 小程序那份只给「页面里用到的」几个图标建了类，其余只留了 --ico-* 变量
 * （WXML 里用 style="mask-image: var(--ico-x)"）。网页这边直接写 class 更短，
 * 所以把剩下这几个补上 —— **path 一个都没改**，只加类名。 */
.vico-chevron-left { -webkit-mask-image: var(--ico-chevron-left); mask-image: var(--ico-chevron-left); }
.vico-arrow-right  { -webkit-mask-image: var(--ico-arrow-right);  mask-image: var(--ico-arrow-right); }
.vico-caret-down   { -webkit-mask-image: var(--ico-caret-down);   mask-image: var(--ico-caret-down); }
.vico-close-lg     { -webkit-mask-image: var(--ico-close-lg);     mask-image: var(--ico-close-lg); }
.vico-close-sm     { -webkit-mask-image: var(--ico-close-sm);     mask-image: var(--ico-close-sm); }
.vico-check        { -webkit-mask-image: var(--ico-check);        mask-image: var(--ico-check); }
.vico-plus         { -webkit-mask-image: var(--ico-plus);         mask-image: var(--ico-plus); }