From b39e37ca28a3f8d58641d12498470c63b6b847f2 Mon Sep 17 00:00:00 2001
From: xiaomai <xsbugh@gmail.com>
Date: Thu, 30 Apr 2026 13:52:44 +0800
Subject: [PATCH] feat(ui): overhaul frontend design system and layout

Introduce reusable UI components (AppShell, EntityCard, PageHeader)
Implement Pokemon-themed CSS variables and responsive grids
Refactor all views to adopt the new component structure
---
 DesignGuidelines.html                     | 4142 +++++++++++++++++++++
 frontend/public/types/1.png               |  Bin 0 -> 2362 bytes
 frontend/public/types/10.png              |  Bin 0 -> 1446 bytes
 frontend/public/types/11.png              |  Bin 0 -> 2053 bytes
 frontend/public/types/12.png              |  Bin 0 -> 3026 bytes
 frontend/public/types/13.png              |  Bin 0 -> 2204 bytes
 frontend/public/types/14.png              |  Bin 0 -> 2413 bytes
 frontend/public/types/15.png              |  Bin 0 -> 1422 bytes
 frontend/public/types/16.png              |  Bin 0 -> 2542 bytes
 frontend/public/types/17.png              |  Bin 0 -> 2171 bytes
 frontend/public/types/18.png              |  Bin 0 -> 2037 bytes
 frontend/public/types/19.png              |  Bin 0 -> 11060 bytes
 frontend/public/types/2.png               |  Bin 0 -> 2357 bytes
 frontend/public/types/3.png               |  Bin 0 -> 1858 bytes
 frontend/public/types/4.png               |  Bin 0 -> 2601 bytes
 frontend/public/types/5.png               |  Bin 0 -> 2534 bytes
 frontend/public/types/6.png               |  Bin 0 -> 1949 bytes
 frontend/public/types/7.png               |  Bin 0 -> 1998 bytes
 frontend/public/types/8.png               |  Bin 0 -> 2147 bytes
 frontend/public/types/9.png               |  Bin 0 -> 1757 bytes
 frontend/public/types/small/1.png         |  Bin 0 -> 1485 bytes
 frontend/public/types/small/10.png        |  Bin 0 -> 1326 bytes
 frontend/public/types/small/11.png        |  Bin 0 -> 1206 bytes
 frontend/public/types/small/12.png        |  Bin 0 -> 1614 bytes
 frontend/public/types/small/13.png        |  Bin 0 -> 1132 bytes
 frontend/public/types/small/14.png        |  Bin 0 -> 1368 bytes
 frontend/public/types/small/15.png        |  Bin 0 -> 1289 bytes
 frontend/public/types/small/16.png        |  Bin 0 -> 1542 bytes
 frontend/public/types/small/17.png        |  Bin 0 -> 1187 bytes
 frontend/public/types/small/18.png        |  Bin 0 -> 1227 bytes
 frontend/public/types/small/2.png         |  Bin 0 -> 1116 bytes
 frontend/public/types/small/3.png         |  Bin 0 -> 1191 bytes
 frontend/public/types/small/4.png         |  Bin 0 -> 1446 bytes
 frontend/public/types/small/5.png         |  Bin 0 -> 1423 bytes
 frontend/public/types/small/6.png         |  Bin 0 -> 1308 bytes
 frontend/public/types/small/7.png         |  Bin 0 -> 1482 bytes
 frontend/public/types/small/8.png         |  Bin 0 -> 1311 bytes
 frontend/public/types/small/9.png         |  Bin 0 -> 1651 bytes
 frontend/src/App.vue                      |   31 +-
 frontend/src/components/AppShell.vue      |   50 +
 frontend/src/components/DetailSection.vue |   17 +
 frontend/src/components/EntityCard.vue    |   36 +
 frontend/src/components/FilterPanel.vue   |    5 +
 frontend/src/components/PageHeader.vue    |   22 +
 frontend/src/components/PokeBallMark.vue  |   14 +
 frontend/src/components/StatusMessage.vue |   43 +
 frontend/src/styles/main.css              |  991 +++--
 frontend/src/views/AdminView.vue          |   15 +-
 frontend/src/views/HabitatDetail.vue      |   32 +-
 frontend/src/views/HabitatList.vue        |   23 +-
 frontend/src/views/ItemDetail.vue         |   47 +-
 frontend/src/views/ItemsList.vue          |   43 +-
 frontend/src/views/LoginView.vue          |   15 +-
 frontend/src/views/PokemonDetail.vue      |   37 +-
 frontend/src/views/PokemonList.vue        |   35 +-
 frontend/src/views/RecipeDetail.vue       |   32 +-
 frontend/src/views/RegisterView.vue       |   17 +-
 frontend/src/views/VerifyEmailView.vue    |   19 +-
 58 files changed, 5203 insertions(+), 463 deletions(-)
 create mode 100644 DesignGuidelines.html
 create mode 100644 frontend/public/types/1.png
 create mode 100644 frontend/public/types/10.png
 create mode 100644 frontend/public/types/11.png
 create mode 100644 frontend/public/types/12.png
 create mode 100644 frontend/public/types/13.png
 create mode 100644 frontend/public/types/14.png
 create mode 100644 frontend/public/types/15.png
 create mode 100644 frontend/public/types/16.png
 create mode 100644 frontend/public/types/17.png
 create mode 100644 frontend/public/types/18.png
 create mode 100644 frontend/public/types/19.png
 create mode 100644 frontend/public/types/2.png
 create mode 100644 frontend/public/types/3.png
 create mode 100644 frontend/public/types/4.png
 create mode 100644 frontend/public/types/5.png
 create mode 100644 frontend/public/types/6.png
 create mode 100644 frontend/public/types/7.png
 create mode 100644 frontend/public/types/8.png
 create mode 100644 frontend/public/types/9.png
 create mode 100644 frontend/public/types/small/1.png
 create mode 100644 frontend/public/types/small/10.png
 create mode 100644 frontend/public/types/small/11.png
 create mode 100644 frontend/public/types/small/12.png
 create mode 100644 frontend/public/types/small/13.png
 create mode 100644 frontend/public/types/small/14.png
 create mode 100644 frontend/public/types/small/15.png
 create mode 100644 frontend/public/types/small/16.png
 create mode 100644 frontend/public/types/small/17.png
 create mode 100644 frontend/public/types/small/18.png
 create mode 100644 frontend/public/types/small/2.png
 create mode 100644 frontend/public/types/small/3.png
 create mode 100644 frontend/public/types/small/4.png
 create mode 100644 frontend/public/types/small/5.png
 create mode 100644 frontend/public/types/small/6.png
 create mode 100644 frontend/public/types/small/7.png
 create mode 100644 frontend/public/types/small/8.png
 create mode 100644 frontend/public/types/small/9.png
 create mode 100644 frontend/src/components/AppShell.vue
 create mode 100644 frontend/src/components/DetailSection.vue
 create mode 100644 frontend/src/components/EntityCard.vue
 create mode 100644 frontend/src/components/FilterPanel.vue
 create mode 100644 frontend/src/components/PageHeader.vue
 create mode 100644 frontend/src/components/PokeBallMark.vue
 create mode 100644 frontend/src/components/StatusMessage.vue

diff --git a/DesignGuidelines.html b/DesignGuidelines.html
new file mode 100644
index 0000000..70c2892
--- /dev/null
+++ b/DesignGuidelines.html
@@ -0,0 +1,4142 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Pokémon UI Library Design Guidelines v3</title>
+  <meta name="description" content="面向已获授权 Pokémon 项目的完整 UI 库设计规范，覆盖品牌元素、视觉令牌、控件、导航、反馈、数据展示、专属产品组件与页面模板。" />
+  <style>
+    :root {
+      color-scheme: light;
+
+      --pokemon-yellow: #ffcb05;
+      --pokemon-yellow-2: #ffe46b;
+      --pokemon-blue: #2a75bb;
+      --pokemon-blue-deep: #003a70;
+      --pokemon-red: #ee1515;
+      --pokemon-red-deep: #cc0000;
+      --pokeball-black: #202124;
+      --pokeball-white: #f7f8fb;
+
+      --type-normal: #a8a77a;
+      --type-fire: #ee8130;
+      --type-water: #6390f0;
+      --type-electric: #f7d02c;
+      --type-grass: #7ac74c;
+      --type-ice: #96d9d6;
+      --type-fighting: #c22e28;
+      --type-poison: #a33ea1;
+      --type-ground: #e2bf65;
+      --type-flying: #a98ff3;
+      --type-psychic: #f95587;
+      --type-bug: #a6b91a;
+      --type-rock: #b6a136;
+      --type-ghost: #735797;
+      --type-dragon: #6f35fc;
+      --type-dark: #705746;
+      --type-steel: #b7b7ce;
+      --type-fairy: #d685ad;
+      --type-stellar: #35c4f0;
+
+      --bg: #f2f5fa;
+      --bg-alt: #eaf1fb;
+      --surface: #ffffff;
+      --surface-raised: #ffffff;
+      --surface-soft: #f8fafd;
+      --ink: #151923;
+      --ink-soft: #354052;
+      --muted: #687487;
+      --line: #d8deea;
+      --line-strong: #1f2a3b;
+      --focus: #0b63ce;
+      --success: #2eb872;
+      --warning: #ffb800;
+      --danger: #df2f2f;
+
+      --radius-card: 8px;
+      --radius-control: 8px;
+      --radius-small: 6px;
+      --shadow-raised: 0 14px 32px rgba(23, 35, 54, .13);
+      --shadow-control: 0 3px 0 var(--line-strong);
+      --shadow-soft: 0 8px 22px rgba(23, 35, 54, .09);
+      --container: 1240px;
+
+      --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
+      --font-display: "Arial Rounded MT Bold", "Nunito", "Avenir Next Rounded", var(--font-sans);
+      --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+    }
+
+    [data-theme="night"] {
+      color-scheme: dark;
+      --bg: #101722;
+      --bg-alt: #151f2e;
+      --surface: #182233;
+      --surface-raised: #1d2a3f;
+      --surface-soft: #121c2c;
+      --ink: #f5f8ff;
+      --ink-soft: #dce6f5;
+      --muted: #a8b5c7;
+      --line: #334158;
+      --line-strong: #f5f8ff;
+      --shadow-raised: 0 16px 36px rgba(0, 0, 0, .34);
+      --shadow-soft: 0 8px 24px rgba(0, 0, 0, .28);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html {
+      scroll-behavior: smooth;
+    }
+
+    body {
+      margin: 0;
+      min-width: 320px;
+      color: var(--ink);
+      font-family: var(--font-sans);
+      line-height: 1.6;
+      background:
+        linear-gradient(90deg, rgba(42, 117, 187, .08) 1px, transparent 1px) 0 0 / 32px 32px,
+        linear-gradient(rgba(42, 117, 187, .08) 1px, transparent 1px) 0 0 / 32px 32px,
+        linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
+      overflow-x: hidden;
+    }
+
+    body.lock-scroll {
+      overflow: hidden;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    button,
+    input,
+    select,
+    textarea {
+      font: inherit;
+    }
+
+    button {
+      border: 0;
+    }
+
+    code {
+      padding: 2px 6px;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      background: var(--surface-soft);
+      color: var(--pokemon-blue-deep);
+      font-family: var(--font-mono);
+      font-size: .88em;
+    }
+
+    [data-theme="night"] code {
+      color: var(--pokemon-yellow);
+    }
+
+    .sr-only {
+      position: absolute !important;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    img,
+    svg {
+      display: block;
+      max-width: 100%;
+    }
+
+    :focus-visible {
+      outline: 3px solid var(--focus);
+      outline-offset: 3px;
+    }
+
+    .container {
+      width: min(100%, var(--container));
+      margin: 0 auto;
+      padding: 0 24px;
+    }
+
+    .site-header {
+      position: sticky;
+      top: 0;
+      z-index: 50;
+      border-bottom: 1px solid rgba(31, 42, 59, .12);
+      background: color-mix(in srgb, var(--surface) 88%, transparent);
+      backdrop-filter: blur(18px);
+    }
+
+    .top-nav {
+      min-height: 70px;
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+      gap: 22px;
+    }
+
+    .brand-lockup {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      min-width: 220px;
+    }
+
+    .pokemon-word {
+      display: inline-block;
+      color: var(--pokemon-yellow);
+      font-family: var(--font-display);
+      font-size: 1.75rem;
+      font-weight: 900;
+      line-height: .9;
+      -webkit-text-stroke: 2px var(--pokemon-blue-deep);
+      text-shadow: 2px 3px 0 var(--pokemon-blue);
+    }
+
+    .brand-subtitle {
+      display: block;
+      margin-top: 2px;
+      color: var(--muted);
+      font-size: .74rem;
+      font-weight: 800;
+      text-transform: uppercase;
+    }
+
+    .nav-links {
+      display: flex;
+      justify-content: center;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+
+    .nav-links a {
+      min-height: 38px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 8px 10px;
+      border-radius: var(--radius-control);
+      color: var(--ink-soft);
+      font-size: .9rem;
+      font-weight: 800;
+    }
+
+    .nav-links a:hover {
+      background: rgba(255, 203, 5, .22);
+      color: var(--ink);
+    }
+
+    .nav-actions {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .pokeball {
+      position: relative;
+      width: var(--ball-size, 44px);
+      height: var(--ball-size, 44px);
+      flex: 0 0 auto;
+      border: calc(var(--ball-size, 44px) * .07) solid var(--pokeball-black);
+      border-radius: 50%;
+      background:
+        linear-gradient(to bottom, var(--pokemon-red) 0 45%, var(--pokeball-black) 45% 55%, var(--pokeball-white) 55% 100%);
+      box-shadow: inset 0 4px 0 rgba(255,255,255,.45), 0 3px 0 rgba(0,0,0,.18);
+    }
+
+    .pokeball::after {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      width: calc(var(--ball-size, 44px) * .34);
+      height: calc(var(--ball-size, 44px) * .34);
+      transform: translate(-50%, -50%);
+      border: calc(var(--ball-size, 44px) * .055) solid var(--pokeball-black);
+      border-radius: 50%;
+      background: var(--pokeball-white);
+      box-shadow: inset 0 0 0 calc(var(--ball-size, 44px) * .055) #dfe5ef;
+    }
+
+    .section {
+      padding: 58px 0;
+    }
+
+    .section.band {
+      background: color-mix(in srgb, var(--surface) 72%, transparent);
+      border-top: 1px solid rgba(31, 42, 59, .08);
+      border-bottom: 1px solid rgba(31, 42, 59, .08);
+    }
+
+    .section-header {
+      display: grid;
+      gap: 10px;
+      max-width: 860px;
+      margin-bottom: 24px;
+    }
+
+    .section-kicker {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      width: fit-content;
+      color: var(--pokemon-blue);
+      font-size: .82rem;
+      font-weight: 900;
+      text-transform: uppercase;
+    }
+
+    .section-kicker::before {
+      content: "";
+      width: 18px;
+      height: 18px;
+      border: 3px solid var(--line-strong);
+      border-radius: 50%;
+      background:
+        linear-gradient(to bottom, var(--pokemon-red) 0 44%, var(--line-strong) 44% 56%, var(--surface) 56% 100%);
+    }
+
+    h1,
+    h2,
+    h3,
+    h4 {
+      margin: 0;
+      font-family: var(--font-display);
+      line-height: 1.08;
+    }
+
+    h1 {
+      max-width: 820px;
+      font-size: 4.9rem;
+      font-weight: 950;
+    }
+
+    h2 {
+      font-size: 2.85rem;
+      font-weight: 950;
+    }
+
+    h3 {
+      font-size: 1.35rem;
+      font-weight: 950;
+    }
+
+    h4 {
+      font-size: 1rem;
+      font-weight: 950;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    .lead {
+      max-width: 760px;
+      color: var(--ink-soft);
+      font-size: 1.08rem;
+    }
+
+    .muted {
+      color: var(--muted);
+    }
+
+    .hero {
+      min-height: calc(100vh - 70px);
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 460px;
+      align-items: center;
+      gap: 44px;
+      padding-top: 34px;
+      padding-bottom: 38px;
+    }
+
+    .hero-copy {
+      margin-top: 20px;
+      color: var(--ink-soft);
+      font-size: 1.18rem;
+    }
+
+    .hero-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      margin-top: 26px;
+    }
+
+    .quick-index {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 10px;
+      margin-top: 30px;
+      max-width: 720px;
+    }
+
+    .quick-index a {
+      min-height: 74px;
+      display: grid;
+      align-content: center;
+      gap: 2px;
+      padding: 12px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+      box-shadow: var(--shadow-soft);
+      transition: transform .16s ease, border-color .16s ease;
+    }
+
+    .quick-index a:hover {
+      transform: translateY(-2px);
+      border-color: var(--pokemon-blue);
+    }
+
+    .quick-index strong {
+      font-family: var(--font-display);
+      line-height: 1.1;
+    }
+
+    .quick-index span {
+      color: var(--muted);
+      font-size: .82rem;
+    }
+
+    .pokedex-shell {
+      position: relative;
+      border: 4px solid #7b0f16;
+      border-radius: var(--radius-card);
+      background:
+        linear-gradient(90deg, rgba(255,255,255,.15) 0 18%, transparent 18% 100%),
+        linear-gradient(180deg, #f43c3c 0%, #d81724 100%);
+      box-shadow: 0 9px 0 #7b0f16, var(--shadow-raised);
+      overflow: hidden;
+    }
+
+    .pokedex-head {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 14px;
+      padding: 16px 18px;
+      border-bottom: 4px solid #7b0f16;
+    }
+
+    .pokedex-lights {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .lens {
+      width: 44px;
+      height: 44px;
+      border: 4px solid #ffffff;
+      border-radius: 50%;
+      background:
+        radial-gradient(circle at 32% 28%, #ffffff 0 12%, transparent 14%),
+        #45b8ff;
+      box-shadow: 0 0 0 3px #172036, inset 0 -8px 0 rgba(0,0,0,.18);
+    }
+
+    .signal {
+      width: 15px;
+      height: 15px;
+      border: 2px solid #172036;
+      border-radius: 50%;
+      box-shadow: inset 0 2px 0 rgba(255,255,255,.42);
+    }
+
+    .signal.red {
+      background: #ff3f4a;
+    }
+
+    .signal.yellow {
+      background: var(--pokemon-yellow);
+    }
+
+    .signal.green {
+      background: #38d678;
+    }
+
+    .pokedex-code {
+      padding: 7px 10px;
+      border: 2px solid #172036;
+      border-radius: var(--radius-small);
+      background: #172036;
+      color: #ffffff;
+      font-family: var(--font-mono);
+      font-size: .82rem;
+      font-weight: 800;
+    }
+
+    .pokedex-body {
+      padding: 18px;
+    }
+
+    .pokedex-screen {
+      min-height: 456px;
+      padding: 16px;
+      border: 4px solid #172036;
+      border-radius: var(--radius-card);
+      background:
+        linear-gradient(90deg, rgba(42,117,187,.08) 1px, transparent 1px) 0 0 / 18px 18px,
+        linear-gradient(rgba(42,117,187,.08) 1px, transparent 1px) 0 0 / 18px 18px,
+        #eef9ff;
+      color: #172036;
+    }
+
+    .screen-topline {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 14px;
+    }
+
+    .dex-number {
+      display: inline-flex;
+      align-items: center;
+      min-height: 30px;
+      padding: 4px 9px;
+      border: 2px solid #172036;
+      border-radius: var(--radius-small);
+      background: #172036;
+      color: #ffffff;
+      font-family: var(--font-mono);
+      font-size: .78rem;
+      font-weight: 900;
+    }
+
+    .sprite-stage {
+      min-height: 184px;
+      display: grid;
+      place-items: center;
+      margin-bottom: 12px;
+      border: 2px solid rgba(23,32,54,.18);
+      border-radius: var(--radius-card);
+      background:
+        linear-gradient(135deg, rgba(255,203,5,.24), rgba(42,117,187,.12)),
+        #ffffff;
+    }
+
+    .pikachu-face {
+      position: relative;
+      width: 138px;
+      height: 122px;
+      border: 4px solid #4a3216;
+      border-radius: 50% 50% 44% 44%;
+      background:
+        radial-gradient(circle at 32% 48%, #281b12 0 7px, transparent 8px),
+        radial-gradient(circle at 68% 48%, #281b12 0 7px, transparent 8px),
+        radial-gradient(circle at 21% 66%, #ee1515 0 13px, transparent 14px),
+        radial-gradient(circle at 79% 66%, #ee1515 0 13px, transparent 14px),
+        radial-gradient(ellipse at 50% 66%, #4a3216 0 4px, transparent 5px),
+        var(--pokemon-yellow);
+      box-shadow: inset 0 8px 0 rgba(255,255,255,.28), 0 8px 0 rgba(0,0,0,.12);
+    }
+
+    .pikachu-face::before,
+    .pikachu-face::after {
+      content: "";
+      position: absolute;
+      top: -66px;
+      width: 38px;
+      height: 92px;
+      border: 4px solid #4a3216;
+      border-bottom: 0;
+      border-radius: 70% 70% 18% 18%;
+      background:
+        linear-gradient(to bottom, #4a3216 0 31%, var(--pokemon-yellow) 32% 100%);
+      transform-origin: bottom center;
+      z-index: -1;
+    }
+
+    .pikachu-face::before {
+      left: 16px;
+      transform: rotate(-24deg);
+    }
+
+    .pikachu-face::after {
+      right: 16px;
+      transform: rotate(24deg);
+    }
+
+    .dex-title-row {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 10px;
+    }
+
+    .dex-title-row h3 {
+      color: #172036;
+      font-size: 1.55rem;
+    }
+
+    .stat-list {
+      display: grid;
+      gap: 9px;
+      margin-top: 14px;
+    }
+
+    .stat-row {
+      display: grid;
+      grid-template-columns: 44px 1fr 36px;
+      align-items: center;
+      gap: 8px;
+      font-size: .78rem;
+      font-weight: 900;
+      text-transform: uppercase;
+    }
+
+    .stat-track {
+      height: 12px;
+      overflow: hidden;
+      border: 2px solid #172036;
+      border-radius: 999px;
+      background: #ffffff;
+    }
+
+    .stat-fill {
+      display: block;
+      height: 100%;
+      border-radius: inherit;
+      background: var(--pokemon-blue);
+    }
+
+    .pokedex-controls {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-items: center;
+      gap: 12px;
+      margin-top: 16px;
+    }
+
+    .dpad {
+      width: 74px;
+      height: 74px;
+      position: relative;
+    }
+
+    .dpad::before,
+    .dpad::after {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      transform: translate(-50%, -50%);
+      border-radius: 7px;
+      background: #172036;
+    }
+
+    .dpad::before {
+      width: 24px;
+      height: 74px;
+    }
+
+    .dpad::after {
+      width: 74px;
+      height: 24px;
+    }
+
+    .screen-buttons {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .btn {
+      --btn-bg: var(--surface);
+      --btn-fg: var(--ink);
+      --btn-border: var(--line-strong);
+      min-height: 44px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 10px 14px;
+      border: 2px solid var(--btn-border);
+      border-radius: var(--radius-control);
+      background: var(--btn-bg);
+      color: var(--btn-fg);
+      box-shadow: var(--shadow-control);
+      font-weight: 900;
+      line-height: 1.1;
+      cursor: pointer;
+      transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
+      white-space: nowrap;
+    }
+
+    .btn:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 5px 0 var(--line-strong);
+    }
+
+    .btn:active,
+    .btn.is-active {
+      transform: translateY(2px);
+      box-shadow: 0 1px 0 var(--line-strong);
+    }
+
+    .btn.primary {
+      --btn-bg: var(--pokemon-yellow);
+      --btn-fg: #172036;
+    }
+
+    .btn.blue {
+      --btn-bg: var(--pokemon-blue);
+      --btn-fg: #ffffff;
+    }
+
+    .btn.red {
+      --btn-bg: var(--pokemon-red);
+      --btn-fg: #ffffff;
+    }
+
+    .btn.ghost {
+      --btn-bg: transparent;
+      --btn-border: var(--line);
+      box-shadow: none;
+    }
+
+    .btn.small {
+      min-height: 36px;
+      padding: 7px 10px;
+      font-size: .86rem;
+      box-shadow: 0 2px 0 var(--line-strong);
+    }
+
+    .btn.large {
+      min-height: 54px;
+      padding: 13px 18px;
+      font-size: 1.05rem;
+    }
+
+    .btn:disabled,
+    .btn.disabled {
+      opacity: .48;
+      transform: none;
+      box-shadow: 0 2px 0 var(--line);
+      cursor: not-allowed;
+    }
+
+    .icon {
+      width: 1.05em;
+      height: 1.05em;
+      display: inline-grid;
+      place-items: center;
+      flex: 0 0 auto;
+      font-weight: 950;
+      line-height: 1;
+    }
+
+    .icon-btn {
+      width: 44px;
+      min-width: 44px;
+      padding: 0;
+    }
+
+    .grid {
+      display: grid;
+      gap: 16px;
+    }
+
+    .grid.two {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .grid.three {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .grid.four {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .grid.six {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .card {
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+      box-shadow: var(--shadow-soft);
+      overflow: hidden;
+    }
+
+    .card.padded {
+      padding: 18px;
+    }
+
+    .card.strong {
+      border: 2px solid var(--line-strong);
+      box-shadow: var(--shadow-control);
+    }
+
+    .card-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      margin-bottom: 10px;
+    }
+
+    .card-title h3,
+    .card-title h4 {
+      min-width: 0;
+    }
+
+    .rule-list {
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: grid;
+      gap: 10px;
+    }
+
+    .rule-list li {
+      position: relative;
+      padding-left: 28px;
+      color: var(--ink-soft);
+    }
+
+    .rule-list li::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: .32em;
+      width: 16px;
+      height: 16px;
+      border: 2px solid var(--line-strong);
+      border-radius: 50%;
+      background:
+        linear-gradient(to bottom, var(--pokemon-red) 0 45%, var(--line-strong) 45% 55%, var(--surface) 55% 100%);
+    }
+
+    .token-swatch {
+      min-height: 148px;
+      display: grid;
+      align-content: space-between;
+      gap: 16px;
+      padding: 14px;
+      border: 1px solid rgba(31, 42, 59, .22);
+      border-radius: var(--radius-card);
+      color: #ffffff;
+      background: var(--swatch);
+      box-shadow: var(--shadow-soft);
+    }
+
+    .token-swatch.light-text {
+      color: #172036;
+    }
+
+    .token-swatch strong {
+      font-family: var(--font-display);
+      font-size: 1.15rem;
+      line-height: 1.1;
+    }
+
+    .token-swatch span {
+      opacity: .92;
+      font-size: .86rem;
+    }
+
+    .token-swatch code {
+      width: fit-content;
+      border-color: rgba(31,42,59,.2);
+      background: rgba(255,255,255,.86);
+      color: #172036;
+    }
+
+    .type-grid {
+      display: grid;
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .type-chip {
+      --type-bg: var(--type-normal);
+      min-height: 32px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 7px;
+      padding: 6px 10px;
+      border: 1px solid rgba(0,0,0,.18);
+      border-radius: 999px;
+      background: var(--type-bg);
+      color: #ffffff;
+      font-size: .78rem;
+      font-weight: 950;
+      line-height: 1;
+      text-shadow: 0 1px 0 rgba(0,0,0,.22);
+      text-transform: uppercase;
+      white-space: nowrap;
+    }
+
+    .type-chip::before {
+      content: "";
+      width: 9px;
+      height: 9px;
+      border: 2px solid rgba(255,255,255,.85);
+      border-radius: 50%;
+      background: rgba(255,255,255,.24);
+      flex: 0 0 auto;
+    }
+
+    .type-chip.type-image-chip {
+      --type-badge-height: 20px;
+      width: auto;
+      max-width: 100%;
+      height: var(--type-badge-height);
+      min-height: 0;
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      background: transparent;
+      box-shadow: none;
+      color: inherit;
+      line-height: 0;
+      text-shadow: none;
+      justify-self: start;
+    }
+
+    .type-chip.type-image-chip::before {
+      content: none;
+      display: none;
+    }
+
+    .type-chip.type-image-chip img {
+      width: auto;
+      max-width: 100%;
+      height: 100%;
+      object-fit: contain;
+      filter: drop-shadow(0 1px 0 rgba(31, 42, 59, .18));
+    }
+
+    .type-grid .type-image-chip {
+      --type-badge-height: 25px;
+      justify-self: center;
+    }
+
+    .data-table .type-image-chip,
+    .dex-mini-card .type-image-chip {
+      --type-badge-height: 28px;
+    }
+
+    .screen-topline .type-image-chip,
+    .pokemon-card .type-image-chip,
+    .suggestion-item .type-image-chip,
+    .type-toggle .type-image-chip,
+    .evolution-node .type-image-chip,
+    .move-card .type-image-chip,
+    .weakness-cell .type-image-chip,
+    .team-slot .type-image-chip,
+    .event-card .type-image-chip {
+      --type-badge-height: 30px;
+    }
+
+    .type-toggle .type-image-chip,
+    .weakness-cell .type-image-chip {
+      justify-self: center;
+    }
+
+    .type-toggle .type-image-chip,
+    .suggestion-item .type-image-chip,
+    .weakness-cell .type-image-chip,
+    .team-slot .type-image-chip,
+    .event-card .type-image-chip,
+    .move-card .type-image-chip {
+      width: var(--type-badge-height);
+    }
+
+    .type-toggle .type-image-chip img,
+    .suggestion-item .type-image-chip img,
+    .weakness-cell .type-image-chip img,
+    .team-slot .type-image-chip img,
+    .event-card .type-image-chip img,
+    .move-card .type-image-chip img {
+      width: 100%;
+      height: 100%;
+    }
+
+    .small-type-grid {
+      display: grid;
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+      gap: 10px;
+      margin-top: 14px;
+    }
+
+    .small-type-grid .type-image-chip {
+      --type-badge-height: 34px;
+      justify-self: center;
+    }
+
+    .type-normal { --type-bg: var(--type-normal); }
+    .type-fire { --type-bg: var(--type-fire); }
+    .type-water { --type-bg: var(--type-water); }
+    .type-electric { --type-bg: var(--type-electric); color: #172036; text-shadow: none; }
+    .type-grass { --type-bg: var(--type-grass); }
+    .type-ice { --type-bg: var(--type-ice); color: #172036; text-shadow: none; }
+    .type-fighting { --type-bg: var(--type-fighting); }
+    .type-poison { --type-bg: var(--type-poison); }
+    .type-ground { --type-bg: var(--type-ground); color: #172036; text-shadow: none; }
+    .type-flying { --type-bg: var(--type-flying); }
+    .type-psychic { --type-bg: var(--type-psychic); }
+    .type-bug { --type-bg: var(--type-bug); color: #172036; text-shadow: none; }
+    .type-rock { --type-bg: var(--type-rock); }
+    .type-ghost { --type-bg: var(--type-ghost); }
+    .type-dragon { --type-bg: var(--type-dragon); }
+    .type-dark { --type-bg: var(--type-dark); }
+    .type-steel { --type-bg: var(--type-steel); color: #172036; text-shadow: none; }
+    .type-fairy { --type-bg: var(--type-fairy); color: #172036; text-shadow: none; }
+    .type-stellar { --type-bg: var(--type-stellar); color: #172036; text-shadow: none; }
+
+    .foundation-card {
+      min-height: 196px;
+      display: grid;
+      gap: 12px;
+      align-content: start;
+    }
+
+    .number-mark {
+      width: 42px;
+      height: 42px;
+      display: inline-grid;
+      place-items: center;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-control);
+      background: var(--pokemon-yellow);
+      box-shadow: 0 3px 0 var(--line-strong);
+      color: #172036;
+      font-family: var(--font-display);
+      font-weight: 950;
+    }
+
+    .asset-showcase {
+      display: grid;
+      grid-template-columns: 1.1fr .9fr;
+      gap: 18px;
+      align-items: stretch;
+    }
+
+    .brand-panel {
+      min-height: 320px;
+      display: grid;
+      align-content: center;
+      justify-items: center;
+      gap: 18px;
+      padding: 28px;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-card);
+      background:
+        linear-gradient(90deg, rgba(31,42,59,.08) 1px, transparent 1px) 0 0 / 28px 28px,
+        linear-gradient(rgba(31,42,59,.08) 1px, transparent 1px) 0 0 / 28px 28px,
+        var(--surface);
+      box-shadow: var(--shadow-control);
+    }
+
+    .brand-panel .pokemon-word {
+      font-size: 4rem;
+      -webkit-text-stroke-width: 3px;
+      text-shadow: 3px 5px 0 var(--pokemon-blue);
+    }
+
+    .asset-mini-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 12px;
+    }
+
+    .asset-tile {
+      min-height: 154px;
+      display: grid;
+      place-items: center;
+      gap: 10px;
+      padding: 16px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+      text-align: center;
+    }
+
+    .asset-tile strong {
+      font-family: var(--font-display);
+    }
+
+    .gym-badge {
+      width: 68px;
+      height: 68px;
+      display: grid;
+      place-items: center;
+      border: 3px solid var(--line-strong);
+      background: var(--pokemon-blue);
+      color: #ffffff;
+      box-shadow: 0 4px 0 var(--line-strong);
+      clip-path: polygon(50% 0, 64% 23%, 91% 19%, 80% 45%, 100% 63%, 71% 67%, 69% 96%, 50% 75%, 31% 96%, 29% 67%, 0 63%, 20% 45%, 9% 19%, 36% 23%);
+      font-family: var(--font-display);
+      font-size: 1.3rem;
+      font-weight: 950;
+    }
+
+    .trainer-pass {
+      display: grid;
+      grid-template-columns: 82px 1fr;
+      gap: 14px;
+      align-items: center;
+      width: min(100%, 360px);
+      padding: 14px;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-card);
+      background:
+        linear-gradient(90deg, var(--pokemon-blue) 0 26%, transparent 26% 100%),
+        var(--pokemon-yellow);
+      box-shadow: 0 4px 0 var(--line-strong);
+      color: #172036;
+      text-align: left;
+    }
+
+    .trainer-avatar {
+      width: 64px;
+      height: 64px;
+      display: grid;
+      place-items: center;
+      border: 2px solid var(--line-strong);
+      border-radius: 50%;
+      background: var(--surface);
+      color: var(--pokemon-blue);
+      font-family: var(--font-display);
+      font-size: 1.65rem;
+      font-weight: 950;
+    }
+
+    .trainer-pass span {
+      display: block;
+      font-size: .82rem;
+      font-weight: 800;
+    }
+
+    .trainer-pass strong {
+      display: block;
+      font-family: var(--font-display);
+      font-size: 1.25rem;
+    }
+
+    .demo-surface {
+      display: grid;
+      gap: 14px;
+      padding: 16px;
+      border: 1px dashed var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface-soft);
+    }
+
+    .control-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      align-items: center;
+    }
+
+    .control-stack {
+      display: grid;
+      gap: 12px;
+    }
+
+    .field {
+      display: grid;
+      gap: 6px;
+    }
+
+    .field label,
+    .field-label {
+      color: var(--ink-soft);
+      font-size: .86rem;
+      font-weight: 850;
+    }
+
+    .input,
+    .select,
+    .textarea {
+      width: 100%;
+      min-height: 44px;
+      border: 2px solid var(--line);
+      border-radius: var(--radius-control);
+      background: var(--surface);
+      color: var(--ink);
+      padding: 10px 12px;
+      transition: border-color .14s ease, box-shadow .14s ease;
+    }
+
+    .textarea {
+      min-height: 98px;
+      resize: vertical;
+    }
+
+    .input:focus,
+    .select:focus,
+    .textarea:focus {
+      border-color: var(--pokemon-blue);
+      box-shadow: 0 0 0 4px rgba(42, 117, 187, .16);
+      outline: none;
+    }
+
+    .input.is-valid {
+      border-color: var(--success);
+    }
+
+    .input.is-error {
+      border-color: var(--danger);
+    }
+
+    .field-note {
+      color: var(--muted);
+      font-size: .8rem;
+    }
+
+    .field-note.error {
+      color: var(--danger);
+      font-weight: 800;
+    }
+
+    .search-field {
+      position: relative;
+    }
+
+    .search-field .input {
+      padding-left: 42px;
+    }
+
+    .search-field::before {
+      content: "⌕";
+      position: absolute;
+      left: 14px;
+      top: 34px;
+      color: var(--muted);
+      font-size: 1.25rem;
+      line-height: 1;
+    }
+
+    .input-group {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: stretch;
+    }
+
+    .input-addon {
+      min-height: 44px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 12px;
+      border: 2px solid var(--line);
+      background: var(--surface-soft);
+      color: var(--muted);
+      font-weight: 850;
+    }
+
+    .input-addon:first-child {
+      border-radius: var(--radius-control) 0 0 var(--radius-control);
+      border-right: 0;
+    }
+
+    .input-addon:last-child {
+      border-radius: 0 var(--radius-control) var(--radius-control) 0;
+      border-left: 0;
+    }
+
+    .input-group .input {
+      border-radius: 0;
+    }
+
+    .check-control,
+    .radio-control,
+    .switch-control {
+      display: inline-flex;
+      align-items: center;
+      gap: 9px;
+      min-height: 36px;
+      color: var(--ink-soft);
+      font-weight: 800;
+      cursor: pointer;
+      user-select: none;
+    }
+
+    .check-control input,
+    .radio-control input {
+      width: 20px;
+      height: 20px;
+      accent-color: var(--pokemon-blue);
+    }
+
+    .switch-control input {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      opacity: 0;
+    }
+
+    .switch-track {
+      width: 48px;
+      height: 28px;
+      position: relative;
+      border: 2px solid var(--line-strong);
+      border-radius: 999px;
+      background: var(--line);
+      transition: background .16s ease;
+    }
+
+    .switch-track::after {
+      content: "";
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: var(--surface);
+      box-shadow: 0 2px 0 rgba(0,0,0,.2);
+      transition: transform .16s ease;
+    }
+
+    .switch-control input:checked + .switch-track {
+      background: var(--pokemon-blue);
+    }
+
+    .switch-control input:checked + .switch-track::after {
+      transform: translateX(20px);
+    }
+
+    .range-wrap {
+      display: grid;
+      grid-template-columns: 1fr 44px;
+      align-items: center;
+      gap: 12px;
+    }
+
+    input[type="range"] {
+      width: 100%;
+      accent-color: var(--pokemon-blue);
+    }
+
+    .range-value {
+      min-height: 32px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-control);
+      background: var(--pokemon-yellow);
+      color: #172036;
+      font-weight: 950;
+    }
+
+    .stepper {
+      display: inline-grid;
+      grid-template-columns: 38px 54px 38px;
+      align-items: center;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-control);
+      overflow: hidden;
+      background: var(--surface);
+    }
+
+    .stepper button {
+      min-height: 38px;
+      background: var(--pokemon-yellow);
+      color: #172036;
+      font-weight: 950;
+      cursor: pointer;
+    }
+
+    .stepper output {
+      display: grid;
+      place-items: center;
+      min-height: 38px;
+      border-left: 2px solid var(--line-strong);
+      border-right: 2px solid var(--line-strong);
+      font-weight: 900;
+    }
+
+    .segmented {
+      display: inline-flex;
+      flex-wrap: wrap;
+      gap: 4px;
+      padding: 4px;
+      border: 2px solid var(--line);
+      border-radius: var(--radius-control);
+      background: var(--surface-soft);
+    }
+
+    .segmented button {
+      min-height: 34px;
+      padding: 6px 11px;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--ink-soft);
+      font-weight: 850;
+      cursor: pointer;
+    }
+
+    .segmented button[aria-pressed="true"] {
+      background: var(--pokemon-blue);
+      color: #ffffff;
+    }
+
+    .tabs {
+      display: grid;
+      gap: 14px;
+    }
+
+    .tab-list {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+      border-bottom: 2px solid var(--line);
+    }
+
+    .tab-button {
+      min-height: 42px;
+      padding: 9px 13px;
+      border-radius: var(--radius-control) var(--radius-control) 0 0;
+      background: transparent;
+      color: var(--ink-soft);
+      font-weight: 900;
+      cursor: pointer;
+      border-bottom: 3px solid transparent;
+    }
+
+    .tab-button[aria-selected="true"] {
+      background: var(--surface);
+      color: var(--pokemon-blue-deep);
+      border-color: var(--pokemon-yellow);
+    }
+
+    [data-theme="night"] .tab-button[aria-selected="true"] {
+      color: var(--pokemon-yellow);
+    }
+
+    .tab-panel {
+      display: none;
+    }
+
+    .tab-panel.is-active {
+      display: block;
+    }
+
+    .pokemon-card {
+      display: grid;
+      grid-template-rows: 188px auto;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-card);
+      overflow: hidden;
+      background: var(--surface);
+      box-shadow: var(--shadow-control);
+    }
+
+    .pokemon-card-media {
+      display: grid;
+      place-items: center;
+      padding: 18px;
+      background:
+        linear-gradient(90deg, rgba(31,42,59,.07) 1px, transparent 1px) 0 0 / 18px 18px,
+        linear-gradient(rgba(31,42,59,.07) 1px, transparent 1px) 0 0 / 18px 18px,
+        linear-gradient(135deg, rgba(255,203,5,.34), rgba(99,144,240,.18)),
+        var(--surface-soft);
+    }
+
+    .pokemon-card-body {
+      display: grid;
+      gap: 10px;
+      padding: 14px;
+      border-top: 2px solid var(--line-strong);
+    }
+
+    .pokemon-card-head {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 10px;
+    }
+
+    .pokemon-name {
+      display: grid;
+      gap: 4px;
+    }
+
+    .pokemon-name strong {
+      font-family: var(--font-display);
+      font-size: 1.3rem;
+      line-height: 1.1;
+    }
+
+    .hp-pill {
+      min-height: 28px;
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 4px 8px;
+      border: 2px solid var(--line-strong);
+      border-radius: 999px;
+      background: var(--pokemon-yellow);
+      color: #172036;
+      font-family: var(--font-mono);
+      font-size: .78rem;
+      font-weight: 950;
+      white-space: nowrap;
+    }
+
+    .avatar-symbol {
+      width: 108px;
+      height: 108px;
+      display: grid;
+      place-items: center;
+      border: 3px solid var(--line-strong);
+      border-radius: 50%;
+      background: var(--pokemon-yellow);
+      box-shadow: 0 6px 0 rgba(31,42,59,.22);
+      color: #172036;
+      font-family: var(--font-display);
+      font-size: 2.7rem;
+      font-weight: 950;
+    }
+
+    .progress {
+      display: grid;
+      gap: 6px;
+    }
+
+    .progress-label {
+      display: flex;
+      justify-content: space-between;
+      gap: 8px;
+      color: var(--muted);
+      font-size: .82rem;
+      font-weight: 850;
+    }
+
+    .progress-track {
+      height: 12px;
+      overflow: hidden;
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      background: var(--surface-soft);
+    }
+
+    .progress-fill {
+      display: block;
+      height: 100%;
+      border-radius: inherit;
+      background: var(--pokemon-blue);
+    }
+
+    .list-row {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 12px;
+      align-items: center;
+      padding: 12px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+    }
+
+    .mini-ball {
+      --ball-size: 30px;
+    }
+
+    .data-table-wrap {
+      overflow-x: auto;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+    }
+
+    .data-table {
+      width: 100%;
+      min-width: 720px;
+      border-collapse: collapse;
+    }
+
+    .data-table th,
+    .data-table td {
+      padding: 12px 14px;
+      border-bottom: 1px solid var(--line);
+      text-align: left;
+      vertical-align: middle;
+    }
+
+    .data-table th {
+      background: var(--pokemon-blue-deep);
+      color: #ffffff;
+      font-size: .82rem;
+      font-weight: 950;
+      text-transform: uppercase;
+    }
+
+    .data-table tr:last-child td {
+      border-bottom: 0;
+    }
+
+    .status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      min-height: 28px;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: var(--surface-soft);
+      color: var(--ink-soft);
+      font-size: .78rem;
+      font-weight: 900;
+      white-space: nowrap;
+    }
+
+    .status-badge::before {
+      content: "";
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--status, var(--muted));
+    }
+
+    .status-badge.success { --status: var(--success); }
+    .status-badge.warning { --status: var(--warning); }
+    .status-badge.danger { --status: var(--danger); }
+    .status-badge.info { --status: var(--pokemon-blue); }
+
+    .alert {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      gap: 12px;
+      align-items: start;
+      padding: 14px;
+      border: 1px solid var(--alert-line, var(--line));
+      border-left: 6px solid var(--alert-accent, var(--pokemon-blue));
+      border-radius: var(--radius-card);
+      background: var(--alert-bg, var(--surface));
+    }
+
+    .alert-icon {
+      width: 28px;
+      height: 28px;
+      display: grid;
+      place-items: center;
+      border-radius: 50%;
+      background: var(--alert-accent, var(--pokemon-blue));
+      color: #ffffff;
+      font-weight: 950;
+    }
+
+    .alert.success {
+      --alert-accent: var(--success);
+      --alert-line: color-mix(in srgb, var(--success) 38%, var(--line));
+      --alert-bg: color-mix(in srgb, var(--success) 10%, var(--surface));
+    }
+
+    .alert.warning {
+      --alert-accent: var(--warning);
+      --alert-line: color-mix(in srgb, var(--warning) 42%, var(--line));
+      --alert-bg: color-mix(in srgb, var(--warning) 12%, var(--surface));
+    }
+
+    .alert.danger {
+      --alert-accent: var(--danger);
+      --alert-line: color-mix(in srgb, var(--danger) 38%, var(--line));
+      --alert-bg: color-mix(in srgb, var(--danger) 10%, var(--surface));
+    }
+
+    .toast-stack {
+      position: fixed;
+      right: 18px;
+      bottom: 18px;
+      z-index: 70;
+      display: grid;
+      gap: 10px;
+      pointer-events: none;
+    }
+
+    .toast {
+      width: min(360px, calc(100vw - 36px));
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 10px;
+      align-items: center;
+      padding: 12px;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+      box-shadow: var(--shadow-raised);
+      transform: translateY(14px);
+      opacity: 0;
+      transition: transform .2s ease, opacity .2s ease;
+    }
+
+    .toast.show {
+      transform: translateY(0);
+      opacity: 1;
+    }
+
+    .modal-backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 65;
+      display: none;
+      place-items: center;
+      padding: 22px;
+      background: rgba(8, 13, 22, .56);
+    }
+
+    .modal-backdrop.is-open {
+      display: grid;
+    }
+
+    .modal {
+      width: min(560px, 100%);
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+      box-shadow: var(--shadow-raised);
+      overflow: hidden;
+    }
+
+    .modal-header,
+    .modal-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 14px 16px;
+      background: var(--surface-soft);
+    }
+
+    .modal-header {
+      border-bottom: 1px solid var(--line);
+    }
+
+    .modal-footer {
+      border-top: 1px solid var(--line);
+      justify-content: flex-end;
+    }
+
+    .modal-body {
+      padding: 16px;
+      display: grid;
+      gap: 12px;
+    }
+
+    .tooltip-demo {
+      position: relative;
+      display: inline-flex;
+      width: fit-content;
+    }
+
+    .tooltip-bubble {
+      position: absolute;
+      left: 50%;
+      bottom: calc(100% + 9px);
+      transform: translateX(-50%) translateY(4px);
+      min-width: 190px;
+      padding: 8px 10px;
+      border-radius: var(--radius-small);
+      background: #172036;
+      color: #ffffff;
+      font-size: .82rem;
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity .14s ease, transform .14s ease;
+    }
+
+    .tooltip-demo:hover .tooltip-bubble,
+    .tooltip-demo:focus-within .tooltip-bubble {
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+    }
+
+    .chip-tooltip {
+      position: fixed;
+      z-index: 120;
+      max-width: min(240px, calc(100vw - 24px));
+      padding: 7px 9px;
+      border-radius: var(--radius-small);
+      background: #172036;
+      color: #ffffff;
+      box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
+      font-size: .78rem;
+      font-weight: 850;
+      line-height: 1.25;
+      text-align: center;
+      white-space: nowrap;
+      pointer-events: none;
+      opacity: 0;
+      transform: translate(-50%, -6px);
+      transition: opacity .12s ease, transform .12s ease;
+    }
+
+    .chip-tooltip.is-visible {
+      opacity: 1;
+      transform: translate(-50%, 0);
+    }
+
+    .breadcrumb {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px;
+      color: var(--muted);
+      font-size: .9rem;
+      font-weight: 800;
+    }
+
+    .breadcrumb a {
+      color: var(--pokemon-blue);
+    }
+
+    .breadcrumb span:not(:last-child)::after {
+      content: "/";
+      margin-left: 8px;
+      color: var(--line-strong);
+    }
+
+    .side-nav-demo {
+      display: grid;
+      grid-template-columns: 210px 1fr;
+      min-height: 350px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      overflow: hidden;
+      background: var(--surface);
+    }
+
+    .side-rail {
+      display: grid;
+      align-content: start;
+      gap: 4px;
+      padding: 12px;
+      border-right: 1px solid var(--line);
+      background: var(--surface-soft);
+    }
+
+    .side-rail a {
+      min-height: 38px;
+      display: flex;
+      align-items: center;
+      gap: 9px;
+      padding: 8px 10px;
+      border-radius: var(--radius-control);
+      color: var(--ink-soft);
+      font-weight: 850;
+    }
+
+    .side-rail a.is-active {
+      background: var(--pokemon-blue);
+      color: #ffffff;
+    }
+
+    .nav-preview {
+      display: grid;
+      align-content: start;
+      gap: 12px;
+      padding: 16px;
+    }
+
+    .pagination {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .page-link {
+      min-width: 38px;
+      min-height: 38px;
+      display: inline-grid;
+      place-items: center;
+      padding: 6px 10px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-control);
+      background: var(--surface);
+      color: var(--ink-soft);
+      font-weight: 850;
+    }
+
+    .page-link.is-active {
+      border-color: var(--line-strong);
+      background: var(--pokemon-yellow);
+      color: #172036;
+    }
+
+    .bottom-nav {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 4px;
+      width: min(100%, 420px);
+      padding: 6px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+      box-shadow: var(--shadow-soft);
+    }
+
+    .bottom-nav a {
+      min-height: 54px;
+      display: grid;
+      place-items: center;
+      gap: 3px;
+      border-radius: var(--radius-control);
+      color: var(--muted);
+      font-size: .76rem;
+      font-weight: 850;
+    }
+
+    .bottom-nav a.is-active {
+      background: rgba(255, 203, 5, .25);
+      color: var(--pokemon-blue-deep);
+    }
+
+    .template-grid {
+      display: grid;
+      grid-template-columns: 1.1fr .9fr;
+      gap: 16px;
+    }
+
+    .template-panel {
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+      box-shadow: var(--shadow-control);
+      overflow: hidden;
+    }
+
+    .template-toolbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 12px;
+      border-bottom: 2px solid var(--line-strong);
+      background: var(--pokemon-blue-deep);
+      color: #ffffff;
+    }
+
+    .template-body {
+      padding: 14px;
+      display: grid;
+      gap: 12px;
+    }
+
+    .dex-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+    }
+
+    .dex-mini-card {
+      min-height: 112px;
+      display: grid;
+      justify-items: center;
+      align-content: center;
+      gap: 8px;
+      padding: 10px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface-soft);
+      text-align: center;
+    }
+
+    .detail-layout {
+      display: grid;
+      grid-template-columns: 172px 1fr;
+      gap: 14px;
+      align-items: start;
+    }
+
+    .detail-art {
+      min-height: 188px;
+      display: grid;
+      place-items: center;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: linear-gradient(135deg, rgba(255,203,5,.28), rgba(42,117,187,.12));
+    }
+
+    .battle-hud {
+      display: grid;
+      gap: 10px;
+      padding: 12px;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-card);
+      background: #172036;
+      color: #ffffff;
+    }
+
+    .hud-row {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .hp-track {
+      height: 14px;
+      overflow: hidden;
+      border: 2px solid #ffffff;
+      border-radius: 999px;
+      background: rgba(255,255,255,.16);
+    }
+
+    .hp-fill {
+      display: block;
+      height: 100%;
+      border-radius: inherit;
+      background: linear-gradient(90deg, #2eb872, #a6e44d);
+    }
+
+    .inventory-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 10px;
+    }
+
+    .item-slot {
+      min-height: 96px;
+      display: grid;
+      place-items: center;
+      gap: 5px;
+      padding: 8px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface-soft);
+      text-align: center;
+      font-size: .8rem;
+      font-weight: 850;
+    }
+
+    .empty-state {
+      min-height: 220px;
+      display: grid;
+      place-items: center;
+      gap: 12px;
+      padding: 26px;
+      border: 1px dashed var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface-soft);
+      text-align: center;
+    }
+
+    .skeleton {
+      display: grid;
+      gap: 10px;
+    }
+
+    .skeleton-line {
+      height: 14px;
+      border-radius: 999px;
+      background: linear-gradient(90deg, var(--line), var(--surface), var(--line));
+      background-size: 200% 100%;
+      animation: shimmer 1.4s linear infinite;
+    }
+
+    .skeleton-box {
+      height: 128px;
+      border-radius: var(--radius-card);
+      background: linear-gradient(90deg, var(--line), var(--surface), var(--line));
+      background-size: 200% 100%;
+      animation: shimmer 1.4s linear infinite;
+    }
+
+    @keyframes shimmer {
+      to { background-position: -200% 0; }
+    }
+
+    .autocomplete {
+      position: relative;
+    }
+
+    .suggestion-list {
+      position: absolute;
+      z-index: 18;
+      top: calc(100% + 6px);
+      left: 0;
+      right: 0;
+      display: none;
+      gap: 6px;
+      max-height: 300px;
+      margin: 0;
+      padding: 8px;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+      box-shadow: var(--shadow-raised);
+      list-style: none;
+      overflow: auto;
+    }
+
+    .suggestion-list.is-open {
+      display: grid;
+    }
+
+    .autocomplete.demo-open .suggestion-list {
+      position: static;
+      margin-top: 6px;
+    }
+
+    .suggestion-item {
+      display: grid;
+      grid-template-columns: auto 1fr auto;
+      align-items: center;
+      gap: 10px;
+      min-height: 54px;
+      padding: 8px;
+      border-radius: var(--radius-control);
+      cursor: pointer;
+    }
+
+    .suggestion-item:hover,
+    .suggestion-item.is-active {
+      background: rgba(255, 203, 5, .2);
+    }
+
+    .suggestion-item strong {
+      display: block;
+      line-height: 1.1;
+    }
+
+    .filter-summary {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      align-items: center;
+      gap: 12px;
+      padding: 12px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+    }
+
+    .type-filter-grid {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 8px;
+    }
+
+    .type-toggle {
+      display: grid;
+      place-items: center;
+      min-height: 42px;
+      padding: 7px;
+      border: 2px solid var(--line);
+      border-radius: var(--radius-control);
+      background: var(--surface);
+      cursor: pointer;
+    }
+
+    .type-toggle[aria-pressed="true"] {
+      border-color: var(--line-strong);
+      background: rgba(255, 203, 5, .24);
+      box-shadow: 0 2px 0 var(--line-strong);
+    }
+
+    .evolution-chain {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      align-items: center;
+      gap: 14px;
+    }
+
+    .evolution-node {
+      display: grid;
+      justify-items: center;
+      gap: 8px;
+      min-height: 190px;
+      padding: 14px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+      text-align: center;
+    }
+
+    .evolution-node:not(:last-child) {
+      position: relative;
+    }
+
+    .evolution-node:not(:last-child)::after {
+      content: "→";
+      position: absolute;
+      right: -22px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--pokemon-blue);
+      font-size: 1.55rem;
+      font-weight: 950;
+    }
+
+    .evolution-sprite {
+      width: 82px;
+      height: 82px;
+      display: grid;
+      place-items: center;
+      border: 2px solid var(--line-strong);
+      border-radius: 50%;
+      background: linear-gradient(135deg, rgba(255,203,5,.35), rgba(42,117,187,.16)), var(--surface);
+      color: #172036;
+      font-family: var(--font-display);
+      font-size: 1.55rem;
+      font-weight: 950;
+    }
+
+    .move-grid {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .move-card {
+      display: grid;
+      gap: 10px;
+      padding: 12px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+    }
+
+    .move-head,
+    .move-meta {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+
+    .move-category {
+      display: inline-flex;
+      align-items: center;
+      min-height: 26px;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: var(--surface-soft);
+      color: var(--ink-soft);
+      font-size: .75rem;
+      font-weight: 900;
+      text-transform: uppercase;
+    }
+
+    .weakness-matrix {
+      display: grid;
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+      gap: 8px;
+    }
+
+    .weakness-cell {
+      display: grid;
+      justify-items: center;
+      gap: 6px;
+      min-height: 78px;
+      padding: 9px;
+      min-width: 0;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+    }
+
+    .multiplier {
+      min-width: 42px;
+      min-height: 26px;
+      display: inline-grid;
+      place-items: center;
+      padding: 3px 8px;
+      border-radius: 999px;
+      background: var(--surface-soft);
+      color: var(--ink-soft);
+      font-family: var(--font-mono);
+      font-size: .76rem;
+      font-weight: 950;
+    }
+
+    .multiplier.high {
+      background: rgba(223, 47, 47, .14);
+      color: var(--danger);
+    }
+
+    .multiplier.low {
+      background: rgba(46, 184, 114, .15);
+      color: var(--success);
+    }
+
+    .team-slots {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .team-slot {
+      display: grid;
+      justify-items: center;
+      align-content: center;
+      gap: 8px;
+      min-height: 148px;
+      padding: 12px;
+      border: 2px dashed var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface-soft);
+      color: var(--ink);
+      text-align: center;
+      cursor: pointer;
+    }
+
+    .team-slot.is-filled {
+      border-style: solid;
+      border-color: var(--line-strong);
+      background: var(--surface);
+      box-shadow: var(--shadow-control);
+    }
+
+    .team-slot.is-selected {
+      background: rgba(255, 203, 5, .22);
+    }
+
+    .compare-table {
+      display: grid;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      overflow: hidden;
+      background: var(--surface);
+    }
+
+    .compare-row {
+      display: grid;
+      grid-template-columns: 112px repeat(3, minmax(0, 1fr));
+      min-height: 46px;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .compare-row:last-child {
+      border-bottom: 0;
+    }
+
+    .compare-row > * {
+      display: grid;
+      align-items: center;
+      padding: 9px 10px;
+      border-right: 1px solid var(--line);
+    }
+
+    .compare-row > *:last-child {
+      border-right: 0;
+    }
+
+    .compare-row strong:first-child {
+      background: var(--surface-soft);
+      color: var(--ink-soft);
+    }
+
+    .radar-wrap {
+      display: grid;
+      place-items: center;
+      gap: 10px;
+      min-height: 260px;
+    }
+
+    .radar-chart {
+      width: min(100%, 250px);
+      height: auto;
+    }
+
+    .radar-grid-line {
+      fill: none;
+      stroke: var(--line);
+      stroke-width: 1.3;
+    }
+
+    .radar-axis {
+      stroke: var(--line);
+      stroke-width: 1;
+    }
+
+    .radar-shape {
+      fill: rgba(42, 117, 187, .32);
+      stroke: var(--pokemon-blue);
+      stroke-width: 3;
+    }
+
+    .radar-label {
+      fill: var(--ink-soft);
+      font-size: 11px;
+      font-weight: 900;
+      text-anchor: middle;
+    }
+
+    .battle-action-menu {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 10px;
+      padding: 12px;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-card);
+      background: #172036;
+    }
+
+    .battle-action-menu .btn {
+      width: 100%;
+    }
+
+    .bag-card,
+    .event-card {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      align-items: center;
+      gap: 12px;
+      padding: 12px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+    }
+
+    .item-icon {
+      width: 58px;
+      height: 58px;
+      display: grid;
+      place-items: center;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-card);
+      background: var(--pokemon-yellow);
+      color: #172036;
+      font-family: var(--font-display);
+      font-size: 1.5rem;
+      font-weight: 950;
+    }
+
+    .event-card {
+      grid-template-columns: 1fr auto;
+      align-items: start;
+      border-color: var(--line-strong);
+      background:
+        linear-gradient(135deg, rgba(255,203,5,.22), rgba(42,117,187,.12)),
+        var(--surface);
+    }
+
+    .countdown {
+      min-width: 82px;
+      display: grid;
+      place-items: center;
+      padding: 8px;
+      border: 2px solid var(--line-strong);
+      border-radius: var(--radius-card);
+      background: var(--pokemon-red);
+      color: #ffffff;
+      font-family: var(--font-mono);
+      font-weight: 950;
+    }
+
+    .reward-shelf {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
+      gap: 8px;
+    }
+
+    .reward {
+      display: grid;
+      justify-items: center;
+      gap: 8px;
+      min-width: 0;
+      min-height: 104px;
+      padding: 8px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+      text-align: center;
+      font-size: .82rem;
+      font-weight: 850;
+      overflow: hidden;
+    }
+
+    .reward .gym-badge,
+    .reward .item-icon {
+      width: 48px;
+      height: 48px;
+      font-size: 1rem;
+    }
+
+    .reward > span:last-child {
+      max-width: 100%;
+      overflow-wrap: anywhere;
+      line-height: 1.2;
+    }
+
+    .reward.is-locked {
+      opacity: .48;
+      filter: grayscale(.45);
+    }
+
+    .code-block {
+      overflow: auto;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: #111827;
+      color: #f9fafb;
+    }
+
+    .code-block pre {
+      margin: 0;
+      padding: 16px;
+      font-family: var(--font-mono);
+      font-size: .86rem;
+      line-height: 1.7;
+    }
+
+    .code-block code {
+      padding: 0;
+      border: 0;
+      background: transparent;
+      color: inherit;
+    }
+
+    .checklist {
+      display: grid;
+      gap: 12px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .checklist li {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 10px;
+      align-items: start;
+      padding: 12px;
+      border: 1px solid var(--line);
+      border-radius: var(--radius-card);
+      background: var(--surface);
+      color: var(--ink-soft);
+    }
+
+    .checklist li::before {
+      content: "✓";
+      width: 24px;
+      height: 24px;
+      display: grid;
+      place-items: center;
+      border-radius: 50%;
+      background: var(--success);
+      color: #ffffff;
+      font-weight: 950;
+      line-height: 1;
+    }
+
+    .footer {
+      padding: 34px 0 48px;
+      border-top: 1px solid var(--line);
+      color: var(--muted);
+      font-size: .9rem;
+    }
+
+    .footer strong {
+      color: var(--ink);
+    }
+
+    @media (max-width: 1080px) {
+      .top-nav {
+        grid-template-columns: 1fr auto;
+      }
+
+      .nav-links {
+        grid-column: 1 / -1;
+        justify-content: flex-start;
+        padding-bottom: 10px;
+      }
+
+      .hero,
+      .asset-showcase,
+      .template-grid {
+        grid-template-columns: 1fr;
+      }
+
+      .pokedex-shell {
+        max-width: 560px;
+      }
+
+      .grid.four,
+      .grid.six,
+      .weakness-matrix,
+      .reward-shelf {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+      }
+    }
+
+    @media (max-width: 820px) {
+      .container {
+        padding: 0 18px;
+      }
+
+      .section {
+        padding: 42px 0;
+      }
+
+      h1 {
+        font-size: 3.05rem;
+      }
+
+      h2 {
+        font-size: 2.15rem;
+      }
+
+      .hero {
+        min-height: auto;
+      }
+
+      .quick-index,
+      .grid.two,
+      .grid.three,
+      .grid.four,
+      .grid.six,
+      .type-grid,
+      .asset-mini-grid,
+      .type-filter-grid,
+      .team-slots,
+      .weakness-matrix,
+      .reward-shelf {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+      }
+
+      .side-nav-demo,
+      .detail-layout,
+      .evolution-chain {
+        grid-template-columns: 1fr;
+      }
+
+      .evolution-node:not(:last-child)::after {
+        right: auto;
+        top: auto;
+        bottom: -25px;
+        left: 50%;
+        transform: translateX(-50%) rotate(90deg);
+      }
+
+      .side-rail {
+        border-right: 0;
+        border-bottom: 1px solid var(--line);
+      }
+
+      .inventory-grid,
+      .dex-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    @media (max-width: 560px) {
+      .top-nav {
+        min-height: 64px;
+        gap: 12px;
+      }
+
+      .brand-lockup {
+        min-width: 0;
+      }
+
+      .pokemon-word {
+        font-size: 1.4rem;
+        -webkit-text-stroke-width: 1.5px;
+        text-shadow: 1px 2px 0 var(--pokemon-blue);
+      }
+
+      .brand-subtitle {
+        display: none;
+      }
+
+      h1 {
+        font-size: 2.35rem;
+      }
+
+      h2 {
+        font-size: 1.78rem;
+      }
+
+      .hero-copy,
+      .lead {
+        font-size: 1rem;
+      }
+
+      .quick-index,
+      .grid.two,
+      .grid.three,
+      .grid.four,
+      .grid.six,
+      .type-grid,
+      .asset-mini-grid,
+      .type-filter-grid,
+      .move-grid,
+      .team-slots,
+      .weakness-matrix,
+      .reward-shelf,
+      .battle-action-menu {
+        grid-template-columns: 1fr;
+      }
+
+      .compare-row {
+        grid-template-columns: 1fr;
+      }
+
+      .compare-row > * {
+        border-right: 0;
+        border-bottom: 1px solid var(--line);
+      }
+
+      .compare-row > *:last-child {
+        border-bottom: 0;
+      }
+
+      .bag-card,
+      .event-card,
+      .filter-summary {
+        grid-template-columns: 1fr;
+      }
+
+      .pokedex-body {
+        padding: 12px;
+      }
+
+      .pokedex-screen {
+        min-height: 420px;
+        padding: 12px;
+      }
+
+      .pokedex-controls {
+        grid-template-columns: 1fr;
+      }
+
+      .screen-buttons,
+      .hero-actions,
+      .control-row {
+        align-items: stretch;
+      }
+
+      .btn {
+        width: 100%;
+      }
+
+      .icon-btn {
+        width: 44px;
+      }
+
+      .modal-footer {
+        flex-direction: column-reverse;
+        align-items: stretch;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      html {
+        scroll-behavior: auto;
+      }
+
+      *,
+      *::before,
+      *::after {
+        animation-duration: .001ms !important;
+        animation-iteration-count: 1 !important;
+        scroll-behavior: auto !important;
+        transition-duration: .001ms !important;
+      }
+    }
+
+    @media print {
+      .site-header,
+      .hero-actions,
+      .nav-actions,
+      .toast-stack,
+      .modal-backdrop {
+        display: none !important;
+      }
+
+      body {
+        background: #ffffff;
+      }
+
+      .card,
+      .pokedex-shell,
+      .template-panel,
+      .pokemon-card {
+        box-shadow: none;
+      }
+
+      .section {
+        break-inside: avoid;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <header class="site-header">
+    <div class="container top-nav">
+      <a class="brand-lockup" href="#top" aria-label="返回顶部">
+        <span class="pokeball" aria-hidden="true"></span>
+        <span>
+          <span class="pokemon-word">Pokémon</span>
+          <span class="brand-subtitle">UI Library Guidelines v3.0</span>
+        </span>
+      </a>
+
+      <nav class="nav-links" aria-label="页面导航">
+        <a href="#foundation">方向</a>
+        <a href="#assets">官方元素</a>
+        <a href="#tokens">Tokens</a>
+        <a href="#controls">控件</a>
+        <a href="#display">数据展示</a>
+        <a href="#pokemon-components">专属组件</a>
+        <a href="#feedback">反馈</a>
+        <a href="#navigation">导航</a>
+        <a href="#templates">模板</a>
+        <a href="#handoff">交付</a>
+      </nav>
+
+      <div class="nav-actions">
+        <button class="btn icon-btn ghost" type="button" id="themeToggle" aria-label="切换明暗主题" title="切换明暗主题">
+          <span class="icon" aria-hidden="true">◐</span>
+        </button>
+        <button class="btn small primary" type="button" data-open-modal>
+          <span class="icon" aria-hidden="true">?</span>
+          用法
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <main id="top">
+    <section class="container hero" aria-labelledby="page-title">
+      <div>
+        <span class="section-kicker">Authorized Pokémon Product System</span>
+        <h1 id="page-title">Pokémon UI Library Design Guidelines v3</h1>
+        <p class="hero-copy">
+          针对已获得授权的 Pokémon 网页、活动页、会员中心、图鉴工具和电商体验，建立一套可落地的 UI 库。v3 在基础控件之上补齐 Team Builder、Evolution Chain、Move Data、Weakness Matrix、Battle Menu、Bag、Event 和 Reward 等产品专属组件。
+        </p>
+        <div class="hero-actions" aria-label="快速操作">
+          <a class="btn primary large" href="#controls"><span class="icon" aria-hidden="true">▶</span>查看控件库</a>
+          <a class="btn blue large" href="#pokemon-components"><span class="icon" aria-hidden="true">★</span>查看专属组件</a>
+          <a class="btn blue large" href="#templates"><span class="icon" aria-hidden="true">▦</span>查看页面模板</a>
+        </div>
+        <div class="quick-index" aria-label="规范索引">
+          <a href="#assets"><strong>Official Elements</strong><span>Logo / Poké Ball / Type</span></a>
+          <a href="#tokens"><strong>Design Tokens</strong><span>Color / Type / Radius</span></a>
+          <a href="#controls"><strong>Controls</strong><span>Form / Button / Tabs</span></a>
+          <a href="#pokemon-components"><strong>Product Components</strong><span>Team / Battle / Dex</span></a>
+        </div>
+      </div>
+
+      <aside class="pokedex-shell" aria-label="Pokédex UI 示例">
+        <div class="pokedex-head">
+          <div class="pokedex-lights" aria-hidden="true">
+            <span class="lens"></span>
+            <span class="signal red"></span>
+            <span class="signal yellow"></span>
+            <span class="signal green"></span>
+          </div>
+          <span class="pokedex-code">KANTO-025</span>
+        </div>
+        <div class="pokedex-body">
+          <div class="pokedex-screen">
+            <div class="screen-topline">
+              <span class="dex-number">NATIONAL DEX #025</span>
+              <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+            </div>
+            <div class="sprite-stage">
+              <div class="pikachu-face" role="img" aria-label="Pikachu 风格面部示意图"></div>
+            </div>
+            <div class="dex-title-row">
+              <div>
+                <h3>Pikachu</h3>
+                <p class="muted">Mouse Pokémon · Height 0.4 m · Weight 6.0 kg</p>
+              </div>
+              <span class="hp-pill">HP 35</span>
+            </div>
+            <p>
+              作为授权项目的核心示例，图鉴界面可以使用官方名称、类型、编号、HP 与 Pokédex 信息结构。视觉需要保证清晰可读，不能让装饰压过任务。
+            </p>
+            <div class="stat-list" aria-label="Pikachu 数值示意">
+              <div class="stat-row"><span>ATK</span><div class="stat-track"><span class="stat-fill" style="width: 55%;"></span></div><span>55</span></div>
+              <div class="stat-row"><span>SPD</span><div class="stat-track"><span class="stat-fill" style="width: 90%;"></span></div><span>90</span></div>
+              <div class="stat-row"><span>SP</span><div class="stat-track"><span class="stat-fill" style="width: 50%;"></span></div><span>50</span></div>
+            </div>
+            <div class="pokedex-controls">
+              <div class="screen-buttons">
+                <button class="btn small primary" type="button"><span class="icon" aria-hidden="true">⚡</span>Thunderbolt</button>
+                <button class="btn small blue" type="button"><span class="icon" aria-hidden="true">＋</span>Add Team</button>
+              </div>
+              <div class="dpad" aria-hidden="true"></div>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </section>
+
+    <section class="section band" id="foundation" aria-labelledby="foundation-title">
+      <div class="container">
+        <div class="section-header">
+          <span class="section-kicker">01 / Creative Direction</span>
+          <h2 id="foundation-title">设计方向</h2>
+          <p class="lead">旧版的问题是过度抽象成泛怪兽风。新版以授权 Pokémon 产品为前提，明确使用官方视觉元素，但把它们工程化为可复用的 UI 语言。</p>
+        </div>
+
+        <div class="grid four">
+          <article class="card padded foundation-card">
+            <span class="number-mark">01</span>
+            <h3>Official First</h3>
+            <p class="muted">可使用 Pokémon、Poké Ball、Pokédex、官方角色名、类型体系、HP/EXP、Gym Badge 等授权资产语言。</p>
+          </article>
+          <article class="card padded foundation-card">
+            <span class="number-mark">02</span>
+            <h3>Game UI, Web Quality</h3>
+            <p class="muted">借用游戏中的状态、收集、队伍、战斗和背包结构，但网页控件必须保持可访问、可扫描、可响应。</p>
+          </article>
+          <article class="card padded foundation-card">
+            <span class="number-mark">03</span>
+            <h3>Bright, Not Noisy</h3>
+            <p class="muted">黄色、蓝色、红色用于关键动作和品牌识别；大面积阅读区域仍使用白色、浅蓝灰和明确分割线。</p>
+          </article>
+          <article class="card padded foundation-card">
+            <span class="number-mark">04</span>
+            <h3>System Completeness</h3>
+            <p class="muted">从按钮、表单、筛选、Tab、弹窗、Toast 到图鉴卡、数据表、页面模板，全部使用同一套 tokens。</p>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="assets" aria-labelledby="assets-title">
+      <div class="container">
+        <div class="section-header">
+          <span class="section-kicker">02 / Official Elements</span>
+          <h2 id="assets-title">官方元素使用规范</h2>
+          <p class="lead">授权场景下可以使用官方元素，但需要把“品牌资产”和“UI 控件”分层管理。Logo 和角色图优先作为内容资产，Poké Ball、类型色、徽章和图鉴框架可以进入组件体系。</p>
+        </div>
+
+        <div class="asset-showcase">
+          <div class="brand-panel" aria-label="Pokémon wordmark treatment">
+            <span class="pokemon-word">Pokémon</span>
+            <div class="trainer-pass">
+              <div class="trainer-avatar">T</div>
+              <div>
+                <span>TRAINER PASS</span>
+                <strong>Ash Ketchum</strong>
+                <span>Pallet Town · Badge 08</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="asset-mini-grid">
+            <div class="asset-tile">
+              <span class="pokeball" style="--ball-size: 72px;" aria-hidden="true"></span>
+              <strong>Poké Ball</strong>
+              <span class="muted">用于图标、空状态、加载、徽章背景</span>
+            </div>
+            <div class="asset-tile">
+              <span class="gym-badge" aria-hidden="true">8</span>
+              <strong>Gym Badge</strong>
+              <span class="muted">用于等级、成就、会员权益</span>
+            </div>
+            <div class="asset-tile">
+              <span class="type-chip type-image-chip type-fire"><img src="frontend/public/types/10.png" alt="" loading="lazy" /><span class="sr-only">Fire</span></span>
+              <strong>Type System</strong>
+              <span class="muted">筛选、标签、属性、状态分类</span>
+            </div>
+            <div class="asset-tile">
+              <span class="dex-number">DEX #150</span>
+              <strong>Pokédex ID</strong>
+              <span class="muted">列表编号、详情标识、收藏序号</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid two" style="margin-top: 18px;">
+          <article class="card padded">
+            <div class="card-title"><h3>可进入 UI 库的元素</h3></div>
+            <ul class="rule-list">
+              <li>Poké Ball 作为系统图标、加载器、选择状态、空状态主符号。</li>
+              <li>使用 <code>frontend/public/types/</code> 中的 Type 图片资产作为筛选、标签、数值、卡片边缘和图表标识；CSS 类型色保留为 token 和兜底。</li>
+              <li>Pokédex 屏幕、训练家卡、Gym Badge、HP/EXP Bar 作为组件构型。</li>
+              <li>官方角色名和编号可用于样例数据，如 Pikachu #025、Charizard #006、Eevee #133。</li>
+            </ul>
+          </article>
+          <article class="card padded">
+            <div class="card-title"><h3>仍需控制的元素</h3></div>
+            <ul class="rule-list">
+              <li>Logo 不作为普通按钮图标反复出现，只用于品牌区域、授权说明和首屏识别。</li>
+              <li>角色官方插画不应被裁切到无法识别，也不应被当作装饰纹理平铺。</li>
+              <li>高饱和类型色必须配合文字对比策略，Electric、Ice、Ground、Steel 等浅色标签用深色字。</li>
+              <li>战斗 UI 可以借鉴状态结构，不建议直接把主机游戏画面一比一搬到网页任务流。</li>
+            </ul>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section band" id="tokens" aria-labelledby="tokens-title">
+      <div class="container">
+        <div class="section-header">
+          <span class="section-kicker">03 / Design Tokens</span>
+          <h2 id="tokens-title">视觉令牌</h2>
+          <p class="lead">Tokens 要覆盖品牌色、类型色、基础表面、描边、阴影、圆角和组件状态。这里采用 8px 卡片圆角，强调专业网页质感，而不是过度玩具化。</p>
+        </div>
+
+        <div class="grid six" aria-label="品牌色">
+          <div class="token-swatch light-text" style="--swatch: #ffcb05;"><strong>Pokémon Yellow</strong><span>Primary CTA / Logo fill</span><code>#FFCB05</code></div>
+          <div class="token-swatch" style="--swatch: #2a75bb;"><strong>Pokémon Blue</strong><span>Navigation / Links</span><code>#2A75BB</code></div>
+          <div class="token-swatch" style="--swatch: #003a70;"><strong>Deep Blue</strong><span>Header / Text contrast</span><code>#003A70</code></div>
+          <div class="token-swatch" style="--swatch: #ee1515;"><strong>Poké Red</strong><span>Urgent / Ball top</span><code>#EE1515</code></div>
+          <div class="token-swatch" style="--swatch: #202124;"><strong>Ball Black</strong><span>Icon stroke / Strong line</span><code>#202124</code></div>
+          <div class="token-swatch light-text" style="--swatch: #f2f5fa;"><strong>Map Mist</strong><span>Page background</span><code>#F2F5FA</code></div>
+        </div>
+
+        <div class="card padded" style="margin-top: 18px;">
+          <div class="card-title">
+            <h3>Type Badge Assets</h3>
+            <span class="status-badge info">large badges + small icons</span>
+          </div>
+          <div class="type-grid">
+            <span class="type-chip type-image-chip type-normal"><img src="frontend/public/types/1.png" alt="" loading="lazy" /><span class="sr-only">Normal</span></span>
+            <span class="type-chip type-image-chip type-fighting"><img src="frontend/public/types/2.png" alt="" loading="lazy" /><span class="sr-only">Fighting</span></span>
+            <span class="type-chip type-image-chip type-flying"><img src="frontend/public/types/3.png" alt="" loading="lazy" /><span class="sr-only">Flying</span></span>
+            <span class="type-chip type-image-chip type-poison"><img src="frontend/public/types/4.png" alt="" loading="lazy" /><span class="sr-only">Poison</span></span>
+            <span class="type-chip type-image-chip type-ground"><img src="frontend/public/types/5.png" alt="" loading="lazy" /><span class="sr-only">Ground</span></span>
+            <span class="type-chip type-image-chip type-rock"><img src="frontend/public/types/6.png" alt="" loading="lazy" /><span class="sr-only">Rock</span></span>
+            <span class="type-chip type-image-chip type-bug"><img src="frontend/public/types/7.png" alt="" loading="lazy" /><span class="sr-only">Bug</span></span>
+            <span class="type-chip type-image-chip type-ghost"><img src="frontend/public/types/8.png" alt="" loading="lazy" /><span class="sr-only">Ghost</span></span>
+            <span class="type-chip type-image-chip type-steel"><img src="frontend/public/types/9.png" alt="" loading="lazy" /><span class="sr-only">Steel</span></span>
+            <span class="type-chip type-image-chip type-fire"><img src="frontend/public/types/10.png" alt="" loading="lazy" /><span class="sr-only">Fire</span></span>
+            <span class="type-chip type-image-chip type-water"><img src="frontend/public/types/11.png" alt="" loading="lazy" /><span class="sr-only">Water</span></span>
+            <span class="type-chip type-image-chip type-grass"><img src="frontend/public/types/12.png" alt="" loading="lazy" /><span class="sr-only">Grass</span></span>
+            <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+            <span class="type-chip type-image-chip type-psychic"><img src="frontend/public/types/14.png" alt="" loading="lazy" /><span class="sr-only">Psychic</span></span>
+            <span class="type-chip type-image-chip type-ice"><img src="frontend/public/types/15.png" alt="" loading="lazy" /><span class="sr-only">Ice</span></span>
+            <span class="type-chip type-image-chip type-dragon"><img src="frontend/public/types/16.png" alt="" loading="lazy" /><span class="sr-only">Dragon</span></span>
+            <span class="type-chip type-image-chip type-dark"><img src="frontend/public/types/17.png" alt="" loading="lazy" /><span class="sr-only">Dark</span></span>
+            <span class="type-chip type-image-chip type-fairy"><img src="frontend/public/types/18.png" alt="" loading="lazy" /><span class="sr-only">Fairy</span></span>
+            <span class="type-chip type-image-chip type-stellar"><img src="frontend/public/types/19.png" alt="" loading="lazy" /><span class="sr-only">Stellar</span></span>
+          </div>
+          <p class="field-note" style="margin-top: 12px;">
+            横向徽章使用 <code>frontend/public/types/1.png</code> 至 <code>frontend/public/types/19.png</code>；紧凑网格、筛选器、矩阵和卡片内图标使用 <code>frontend/public/types/small/1.png</code> 至 <code>frontend/public/types/small/18.png</code>。文件映射：1 Normal, 2 Fighting, 3 Flying, 4 Poison, 5 Ground, 6 Rock, 7 Bug, 8 Ghost, 9 Steel, 10 Fire, 11 Water, 12 Grass, 13 Electric, 14 Psychic, 15 Ice, 16 Dragon, 17 Dark, 18 Fairy, 19 Stellar.
+          </p>
+        </div>
+
+        <div class="grid three" style="margin-top: 18px;">
+          <article class="card padded">
+            <div class="card-title"><h3>Typography</h3></div>
+            <p class="muted">标题使用圆润粗体，正文使用系统无衬线。Pokémon wordmark 只用于品牌展示，不替代正文或按钮文字。</p>
+            <div class="demo-surface" style="margin-top: 12px;">
+              <h3>Catch, Train, Explore</h3>
+              <p>正文保持 16px 以上，行高 1.55 至 1.7，保证儿童和成人用户都能快速阅读。</p>
+              <span class="dex-number">CAPTION / DEX ENTRY</span>
+            </div>
+          </article>
+          <article class="card padded">
+            <div class="card-title"><h3>Shape</h3></div>
+            <p class="muted">卡片半径 8px，控件半径 8px，Pill 只用于 type chips、HP、status badges。Poké Ball 和头像保持圆形。</p>
+            <div class="demo-surface" style="margin-top: 12px;">
+              <button class="btn primary" type="button">8px Button</button>
+              <span class="type-chip type-image-chip type-water"><img src="frontend/public/types/11.png" alt="" loading="lazy" /><span class="sr-only">Water</span></span>
+              <span class="pokeball mini-ball" aria-hidden="true"></span>
+            </div>
+          </article>
+          <article class="card padded">
+            <div class="card-title"><h3>Elevation</h3></div>
+            <p class="muted">主 CTA 和游戏化面板可使用硬阴影，普通信息卡使用柔和阴影。阴影不可替代清晰边框。</p>
+            <div class="demo-surface" style="margin-top: 12px;">
+              <button class="btn blue" type="button">Raised Action</button>
+              <div class="list-row"><span class="pokeball mini-ball"></span><strong>Soft row</strong><span class="status-badge success">Ready</span></div>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="controls" aria-labelledby="controls-title">
+      <div class="container">
+        <div class="section-header">
+          <span class="section-kicker">04 / Controls</span>
+          <h2 id="controls-title">控件库</h2>
+          <p class="lead">控件覆盖按钮、图标按钮、输入、选择、开关、范围、步进器、分段控制、Tabs 和筛选标签。所有控件最小点击高度不低于 44px。</p>
+        </div>
+
+        <div class="grid two">
+          <article class="card padded">
+            <div class="card-title"><h3>Buttons</h3><span class="status-badge info">Default / Hover / Active / Disabled</span></div>
+            <div class="demo-surface">
+              <div class="control-row">
+                <button class="btn primary" type="button"><span class="icon" aria-hidden="true">▶</span>Start Journey</button>
+                <button class="btn blue" type="button"><span class="icon" aria-hidden="true">＋</span>Add Team</button>
+                <button class="btn red" type="button"><span class="icon" aria-hidden="true">!</span>Battle</button>
+                <button class="btn ghost" type="button">Ghost</button>
+                <button class="btn" type="button" disabled>Disabled</button>
+              </div>
+              <div class="control-row">
+                <button class="btn small primary" type="button">Small</button>
+                <button class="btn primary" type="button">Medium</button>
+                <button class="btn large primary" type="button">Large</button>
+                <button class="btn icon-btn blue" type="button" title="搜索" aria-label="搜索"><span class="icon" aria-hidden="true">⌕</span></button>
+                <button class="btn icon-btn ghost" type="button" title="筛选" aria-label="筛选"><span class="icon" aria-hidden="true">☰</span></button>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>Inputs</h3><span class="status-badge success">A11y ready</span></div>
+            <div class="control-stack">
+              <div class="field search-field">
+                <label for="searchPokemon">Search Pokémon</label>
+                <input class="input" id="searchPokemon" type="search" placeholder="Pikachu, Eevee, Charizard" />
+              </div>
+              <div class="grid two">
+                <div class="field">
+                  <label for="trainerName">Trainer name</label>
+                  <input class="input is-valid" id="trainerName" type="text" value="Misty" />
+                  <span class="field-note">可用名称</span>
+                </div>
+                <div class="field">
+                  <label for="trainerRegion">Region</label>
+                  <select class="select" id="trainerRegion">
+                    <option>Kanto</option>
+                    <option>Johto</option>
+                    <option>Hoenn</option>
+                    <option>Sinnoh</option>
+                    <option>Paldea</option>
+                  </select>
+                </div>
+              </div>
+              <div class="field">
+                <label for="friendCode">Friend code</label>
+                <div class="input-group">
+                  <span class="input-addon">ID</span>
+                  <input class="input is-error" id="friendCode" type="text" value="025-133" />
+                  <span class="input-addon">GEN 1</span>
+                </div>
+                <span class="field-note error">需要 12 位数字代码。</span>
+              </div>
+              <div class="field">
+                <label for="dexNote">Dex note</label>
+                <textarea class="textarea" id="dexNote">Pikachu stores electricity in the electric sacs on its cheeks.</textarea>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>Selection Controls</h3></div>
+            <div class="demo-surface">
+              <div class="control-row">
+                <label class="check-control"><input type="checkbox" checked /> Show shiny form</label>
+                <label class="check-control"><input type="checkbox" /> Include regional forms</label>
+              </div>
+              <div class="control-row">
+                <label class="radio-control"><input name="starter" type="radio" checked /> Bulbasaur</label>
+                <label class="radio-control"><input name="starter" type="radio" /> Charmander</label>
+                <label class="radio-control"><input name="starter" type="radio" /> Squirtle</label>
+              </div>
+              <div class="control-row">
+                <label class="switch-control">
+                  <input type="checkbox" id="soundToggle" checked />
+                  <span class="switch-track" aria-hidden="true"></span>
+                  Battle sound
+                </label>
+                <label class="switch-control">
+                  <input type="checkbox" />
+                  <span class="switch-track" aria-hidden="true"></span>
+                  Compact mode
+                </label>
+              </div>
+              <div class="field">
+                <span class="field-label">Capture chance</span>
+                <div class="range-wrap">
+                  <input id="captureRange" type="range" min="0" max="100" value="64" />
+                  <output class="range-value" id="captureValue" for="captureRange">64</output>
+                </div>
+              </div>
+              <div class="control-row">
+                <span class="field-label">Potion count</span>
+                <div class="stepper" data-stepper>
+                  <button type="button" data-step="-1" aria-label="减少">−</button>
+                  <output>3</output>
+                  <button type="button" data-step="1" aria-label="增加">＋</button>
+                </div>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>Segmented / Tabs / Chips</h3></div>
+            <div class="demo-surface">
+              <div class="segmented" aria-label="Dex view mode">
+                <button type="button" aria-pressed="true">Grid</button>
+                <button type="button" aria-pressed="false">List</button>
+                <button type="button" aria-pressed="false">Map</button>
+              </div>
+
+              <div class="tabs" data-tabs>
+                <div class="tab-list" role="tablist" aria-label="Pokémon profile tabs">
+                  <button class="tab-button" role="tab" aria-selected="true" aria-controls="tab-base" id="tab-base-btn" type="button">Base</button>
+                  <button class="tab-button" role="tab" aria-selected="false" aria-controls="tab-moves" id="tab-moves-btn" type="button">Moves</button>
+                  <button class="tab-button" role="tab" aria-selected="false" aria-controls="tab-evo" id="tab-evo-btn" type="button">Evolution</button>
+                </div>
+                <div class="tab-panel is-active" role="tabpanel" id="tab-base" aria-labelledby="tab-base-btn">
+                  <p>Base tab 显示编号、分类、身高、体重、能力和基础数值。</p>
+                </div>
+                <div class="tab-panel" role="tabpanel" id="tab-moves" aria-labelledby="tab-moves-btn">
+                  <p>Moves tab 显示 Thunderbolt、Quick Attack、Iron Tail 等技能列表。</p>
+                </div>
+                <div class="tab-panel" role="tabpanel" id="tab-evo" aria-labelledby="tab-evo-btn">
+                  <p>Evolution tab 显示 Pichu → Pikachu → Raichu 的进化路径。</p>
+                </div>
+              </div>
+
+              <div class="control-row" aria-label="Type filters">
+                <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+                <span class="type-chip type-image-chip type-fire"><img src="frontend/public/types/10.png" alt="" loading="lazy" /><span class="sr-only">Fire</span></span>
+                <span class="type-chip type-image-chip type-water"><img src="frontend/public/types/11.png" alt="" loading="lazy" /><span class="sr-only">Water</span></span>
+                <span class="type-chip type-image-chip type-grass"><img src="frontend/public/types/12.png" alt="" loading="lazy" /><span class="sr-only">Grass</span></span>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section band" id="display" aria-labelledby="display-title">
+      <div class="container">
+        <div class="section-header">
+          <span class="section-kicker">05 / Data Display</span>
+          <h2 id="display-title">数据展示组件</h2>
+          <p class="lead">Pokémon 产品通常需要承载大量收集、列表、数值和状态。展示组件应优先保证对比和扫描效率，再加入品牌趣味。</p>
+        </div>
+
+        <div class="grid three">
+          <article class="pokemon-card">
+            <div class="pokemon-card-media">
+              <div class="avatar-symbol" aria-hidden="true">25</div>
+            </div>
+            <div class="pokemon-card-body">
+              <div class="pokemon-card-head">
+                <div class="pokemon-name">
+                  <span class="dex-number">#025</span>
+                  <strong>Pikachu</strong>
+                </div>
+                <span class="hp-pill">HP 35</span>
+              </div>
+              <div class="control-row">
+                <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+              </div>
+              <div class="progress">
+                <div class="progress-label"><span>EXP</span><span>68%</span></div>
+                <div class="progress-track"><span class="progress-fill" style="width: 68%;"></span></div>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>List Rows</h3></div>
+            <div class="control-stack">
+              <div class="list-row">
+                <span class="pokeball mini-ball" aria-hidden="true"></span>
+                <div><strong>Charizard</strong><p class="muted">Fire / Flying · #006</p></div>
+                <span class="status-badge warning">Rare</span>
+              </div>
+              <div class="list-row">
+                <span class="pokeball mini-ball" aria-hidden="true"></span>
+                <div><strong>Squirtle</strong><p class="muted">Water · #007</p></div>
+                <span class="status-badge success">Caught</span>
+              </div>
+              <div class="list-row">
+                <span class="pokeball mini-ball" aria-hidden="true"></span>
+                <div><strong>Mewtwo</strong><p class="muted">Psychic · #150</p></div>
+                <span class="status-badge danger">Locked</span>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>Stats / Progress</h3></div>
+            <div class="control-stack">
+              <div class="progress">
+                <div class="progress-label"><span>HP</span><span>82 / 100</span></div>
+                <div class="progress-track"><span class="progress-fill" style="width: 82%; background: var(--success);"></span></div>
+              </div>
+              <div class="progress">
+                <div class="progress-label"><span>EXP</span><span>44%</span></div>
+                <div class="progress-track"><span class="progress-fill" style="width: 44%; background: var(--pokemon-yellow);"></span></div>
+              </div>
+              <div class="progress">
+                <div class="progress-label"><span>Catch rate</span><span>18%</span></div>
+                <div class="progress-track"><span class="progress-fill" style="width: 18%; background: var(--danger);"></span></div>
+              </div>
+              <div class="battle-hud">
+                <div class="hud-row"><strong>Snorlax Lv. 42</strong><span>HP</span></div>
+                <div class="hp-track"><span class="hp-fill" style="width: 72%;"></span></div>
+              </div>
+            </div>
+          </article>
+        </div>
+
+        <div class="card padded" style="margin-top: 18px;">
+          <div class="card-title"><h3>Data Table</h3><span class="status-badge info">Sortable / Filterable</span></div>
+          <div class="data-table-wrap">
+            <table class="data-table">
+              <thead>
+                <tr>
+                  <th>Dex</th>
+                  <th>Name</th>
+                  <th>Type</th>
+                  <th>Region</th>
+                  <th>Status</th>
+                  <th>Action</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td><code>#001</code></td>
+                  <td>Bulbasaur</td>
+                  <td><span class="type-chip type-image-chip type-grass"><img src="frontend/public/types/12.png" alt="" loading="lazy" /><span class="sr-only">Grass</span></span></td>
+                  <td>Kanto</td>
+                  <td><span class="status-badge success">Caught</span></td>
+                  <td><button class="btn small ghost" type="button">View</button></td>
+                </tr>
+                <tr>
+                  <td><code>#004</code></td>
+                  <td>Charmander</td>
+                  <td><span class="type-chip type-image-chip type-fire"><img src="frontend/public/types/10.png" alt="" loading="lazy" /><span class="sr-only">Fire</span></span></td>
+                  <td>Kanto</td>
+                  <td><span class="status-badge warning">Seen</span></td>
+                  <td><button class="btn small ghost" type="button">View</button></td>
+                </tr>
+                <tr>
+                  <td><code>#007</code></td>
+                  <td>Squirtle</td>
+                  <td><span class="type-chip type-image-chip type-water"><img src="frontend/public/types/11.png" alt="" loading="lazy" /><span class="sr-only">Water</span></span></td>
+                  <td>Kanto</td>
+                  <td><span class="status-badge success">Caught</span></td>
+                  <td><button class="btn small ghost" type="button">View</button></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="pokemon-components" aria-labelledby="pokemon-components-title">
+      <div class="container">
+        <div class="section-header">
+          <span class="section-kicker">06 / Pokémon Product Components</span>
+          <h2 id="pokemon-components-title">Pokémon 专属组件</h2>
+          <p class="lead">v3 新增一组真正贴近 Pokémon 产品场景的组件：搜索联想、进阶 Type 筛选、进化链、技能数据、弱点矩阵、队伍构建、对比面板、战斗菜单、背包、活动和奖励体系。</p>
+        </div>
+
+        <div class="grid two">
+          <article class="card padded">
+            <div class="card-title">
+              <h3>Pokémon Autocomplete</h3>
+              <span class="status-badge info">Combobox</span>
+            </div>
+            <div class="demo-surface">
+              <div class="field search-field autocomplete demo-open">
+                <label for="pokemonCombobox">Search Pokémon</label>
+                <input class="input" id="pokemonCombobox" type="search" role="combobox" aria-controls="pokemonSuggestions" aria-expanded="true" aria-autocomplete="list" value="Pi" />
+                <ul class="suggestion-list is-open" id="pokemonSuggestions" role="listbox" aria-label="Pokémon 搜索建议">
+                  <li class="suggestion-item is-active" role="option" data-name="Pikachu" aria-selected="true">
+                    <span class="pokeball mini-ball" aria-hidden="true"></span>
+                    <div><strong>Pikachu</strong><span class="muted">#025 · Mouse Pokémon</span></div>
+                    <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+                  </li>
+                  <li class="suggestion-item" role="option" data-name="Raichu" style="display: none;">
+                    <span class="pokeball mini-ball" aria-hidden="true"></span>
+                    <div><strong>Raichu</strong><span class="muted">#026 · Mouse Pokémon</span></div>
+                    <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+                  </li>
+                  <li class="suggestion-item" role="option" data-name="Pichu">
+                    <span class="pokeball mini-ball" aria-hidden="true"></span>
+                    <div><strong>Pichu</strong><span class="muted">#172 · Tiny Mouse Pokémon</span></div>
+                    <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+                  </li>
+                  <li class="suggestion-item" role="option" data-name="Charizard" style="display: none;">
+                    <span class="pokeball mini-ball" aria-hidden="true"></span>
+                    <div><strong>Charizard</strong><span class="muted">#006 · Flame Pokémon</span></div>
+                    <span class="type-chip type-image-chip type-fire"><img src="frontend/public/types/small/10.png" alt="" loading="lazy" /><span class="sr-only">Fire</span></span>
+                  </li>
+                </ul>
+              </div>
+              <p class="field-note">用于 Pokédex、Team Builder、Shop search。结果项建议包含编号、名称、分类和 Type badge。</p>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title">
+              <h3>Advanced Type Filter</h3>
+              <span class="status-badge success">Multi-select</span>
+            </div>
+            <div class="control-stack">
+              <div class="filter-summary">
+                <div>
+                  <strong id="typeFilterSummary">Selected: Electric, Flying</strong>
+                  <p class="muted">支持多选、清空、组合筛选和弱点模式。</p>
+                </div>
+                <button class="btn small ghost" type="button" id="clearTypeFilters">Clear</button>
+              </div>
+              <div class="type-filter-grid" aria-label="Type filter demo">
+                <button class="type-toggle" type="button" aria-pressed="true" data-type-name="Electric" aria-label="Electric type">
+                  <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+                </button>
+                <button class="type-toggle" type="button" aria-pressed="true" data-type-name="Flying" aria-label="Flying type">
+                  <span class="type-chip type-image-chip type-flying"><img src="frontend/public/types/small/3.png" alt="" loading="lazy" /><span class="sr-only">Flying</span></span>
+                </button>
+                <button class="type-toggle" type="button" aria-pressed="false" data-type-name="Fire" aria-label="Fire type">
+                  <span class="type-chip type-image-chip type-fire"><img src="frontend/public/types/small/10.png" alt="" loading="lazy" /><span class="sr-only">Fire</span></span>
+                </button>
+                <button class="type-toggle" type="button" aria-pressed="false" data-type-name="Water" aria-label="Water type">
+                  <span class="type-chip type-image-chip type-water"><img src="frontend/public/types/small/11.png" alt="" loading="lazy" /><span class="sr-only">Water</span></span>
+                </button>
+                <button class="type-toggle" type="button" aria-pressed="false" data-type-name="Grass" aria-label="Grass type">
+                  <span class="type-chip type-image-chip type-grass"><img src="frontend/public/types/small/12.png" alt="" loading="lazy" /><span class="sr-only">Grass</span></span>
+                </button>
+                <button class="type-toggle" type="button" aria-pressed="false" data-type-name="Psychic" aria-label="Psychic type">
+                  <span class="type-chip type-image-chip type-psychic"><img src="frontend/public/types/small/14.png" alt="" loading="lazy" /><span class="sr-only">Psychic</span></span>
+                </button>
+                <button class="type-toggle" type="button" aria-pressed="false" data-type-name="Dragon" aria-label="Dragon type">
+                  <span class="type-chip type-image-chip type-dragon"><img src="frontend/public/types/small/16.png" alt="" loading="lazy" /><span class="sr-only">Dragon</span></span>
+                </button>
+                <button class="type-toggle" type="button" aria-pressed="false" data-type-name="Fairy" aria-label="Fairy type">
+                  <span class="type-chip type-image-chip type-fairy"><img src="frontend/public/types/small/18.png" alt="" loading="lazy" /><span class="sr-only">Fairy</span></span>
+                </button>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title">
+              <h3>Evolution Chain</h3>
+              <span class="status-badge info">Detail page</span>
+            </div>
+            <div class="evolution-chain" aria-label="Pichu to Pikachu to Raichu evolution chain">
+              <div class="evolution-node">
+                <div class="evolution-sprite">172</div>
+                <strong>Pichu</strong>
+                <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+                <p class="muted">High friendship</p>
+              </div>
+              <div class="evolution-node">
+                <div class="evolution-sprite">025</div>
+                <strong>Pikachu</strong>
+                <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+                <p class="muted">Thunder Stone</p>
+              </div>
+              <div class="evolution-node">
+                <div class="evolution-sprite">026</div>
+                <strong>Raichu</strong>
+                <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+                <p class="muted">Final form</p>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title">
+              <h3>Move Cards</h3>
+              <span class="status-badge info">Power / Accuracy / PP</span>
+            </div>
+            <div class="move-grid">
+              <div class="move-card">
+                <div class="move-head"><strong>Thunderbolt</strong><span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span></div>
+                <p class="muted">May leave the target with paralysis.</p>
+                <div class="move-meta"><span class="move-category">Special</span><span>Power 90</span><span>Acc 100</span><span>PP 15</span></div>
+              </div>
+              <div class="move-card">
+                <div class="move-head"><strong>Quick Attack</strong><span class="type-chip type-image-chip type-normal"><img src="frontend/public/types/small/1.png" alt="" loading="lazy" /><span class="sr-only">Normal</span></span></div>
+                <p class="muted">This move always goes first.</p>
+                <div class="move-meta"><span class="move-category">Physical</span><span>Power 40</span><span>Acc 100</span><span>PP 30</span></div>
+              </div>
+              <div class="move-card">
+                <div class="move-head"><strong>Iron Tail</strong><span class="type-chip type-image-chip type-steel"><img src="frontend/public/types/small/9.png" alt="" loading="lazy" /><span class="sr-only">Steel</span></span></div>
+                <p class="muted">May lower the target's Defense stat.</p>
+                <div class="move-meta"><span class="move-category">Physical</span><span>Power 100</span><span>Acc 75</span><span>PP 15</span></div>
+              </div>
+              <div class="move-card">
+                <div class="move-head"><strong>Electro Ball</strong><span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span></div>
+                <p class="muted">The faster the user, the greater the power.</p>
+                <div class="move-meta"><span class="move-category">Special</span><span>Variable</span><span>Acc 100</span><span>PP 10</span></div>
+              </div>
+            </div>
+          </article>
+        </div>
+
+        <div class="grid two" style="margin-top: 16px;">
+          <article class="card padded">
+            <div class="card-title">
+              <h3>Weakness Matrix</h3>
+              <span class="status-badge warning">Electric / Flying sample</span>
+            </div>
+            <div class="weakness-matrix" aria-label="Type effectiveness matrix">
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-ground"><img src="frontend/public/types/small/5.png" alt="" loading="lazy" /><span class="sr-only">Ground</span></span><span class="multiplier high">2x</span></div>
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-rock"><img src="frontend/public/types/small/6.png" alt="" loading="lazy" /><span class="sr-only">Rock</span></span><span class="multiplier high">2x</span></div>
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-ice"><img src="frontend/public/types/small/15.png" alt="" loading="lazy" /><span class="sr-only">Ice</span></span><span class="multiplier high">2x</span></div>
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-fighting"><img src="frontend/public/types/small/2.png" alt="" loading="lazy" /><span class="sr-only">Fighting</span></span><span class="multiplier low">0.5x</span></div>
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-flying"><img src="frontend/public/types/small/3.png" alt="" loading="lazy" /><span class="sr-only">Flying</span></span><span class="multiplier low">0.5x</span></div>
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-steel"><img src="frontend/public/types/small/9.png" alt="" loading="lazy" /><span class="sr-only">Steel</span></span><span class="multiplier low">0.5x</span></div>
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-bug"><img src="frontend/public/types/small/7.png" alt="" loading="lazy" /><span class="sr-only">Bug</span></span><span class="multiplier low">0.5x</span></div>
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-grass"><img src="frontend/public/types/small/12.png" alt="" loading="lazy" /><span class="sr-only">Grass</span></span><span class="multiplier low">0.5x</span></div>
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span><span class="multiplier low">0.5x</span></div>
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-ghost"><img src="frontend/public/types/small/8.png" alt="" loading="lazy" /><span class="sr-only">Ghost</span></span><span class="multiplier">1x</span></div>
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-dragon"><img src="frontend/public/types/small/16.png" alt="" loading="lazy" /><span class="sr-only">Dragon</span></span><span class="multiplier">1x</span></div>
+              <div class="weakness-cell"><span class="type-chip type-image-chip type-fairy"><img src="frontend/public/types/small/18.png" alt="" loading="lazy" /><span class="sr-only">Fairy</span></span><span class="multiplier">1x</span></div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title">
+              <h3>Team Builder Slots</h3>
+              <span class="status-badge success">6 slots</span>
+            </div>
+            <div class="team-slots" aria-label="Team builder slots">
+              <button class="team-slot is-filled is-selected" type="button">
+                <span class="avatar-symbol" style="width: 58px; height: 58px; font-size: 1.35rem;">25</span>
+                <strong>Pikachu</strong>
+                <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+              </button>
+              <button class="team-slot is-filled" type="button">
+                <span class="avatar-symbol" style="width: 58px; height: 58px; font-size: 1.35rem; background: var(--type-fire); color: #fff;">06</span>
+                <strong>Charizard</strong>
+                <span class="type-chip type-image-chip type-fire"><img src="frontend/public/types/small/10.png" alt="" loading="lazy" /><span class="sr-only">Fire</span></span>
+              </button>
+              <button class="team-slot is-filled" type="button">
+                <span class="avatar-symbol" style="width: 58px; height: 58px; font-size: 1.35rem; background: var(--type-water); color: #fff;">07</span>
+                <strong>Squirtle</strong>
+                <span class="type-chip type-image-chip type-water"><img src="frontend/public/types/small/11.png" alt="" loading="lazy" /><span class="sr-only">Water</span></span>
+              </button>
+              <button class="team-slot" type="button"><span class="pokeball" style="--ball-size: 42px;"></span><strong>Empty slot</strong><span class="muted">Add Pokémon</span></button>
+              <button class="team-slot" type="button"><span class="pokeball" style="--ball-size: 42px;"></span><strong>Empty slot</strong><span class="muted">Add Pokémon</span></button>
+              <button class="team-slot" type="button"><span class="pokeball" style="--ball-size: 42px;"></span><strong>Empty slot</strong><span class="muted">Add Pokémon</span></button>
+            </div>
+          </article>
+        </div>
+
+        <div class="grid two" style="margin-top: 16px;">
+          <article class="card padded">
+            <div class="card-title"><h3>Compare Panel</h3><span class="status-badge info">3-way compare</span></div>
+            <div class="compare-table" aria-label="Pokémon compare panel">
+              <div class="compare-row"><strong>Metric</strong><strong>Pikachu</strong><strong>Raichu</strong><strong>Jolteon</strong></div>
+              <div class="compare-row"><strong>Type</strong><span>Electric</span><span>Electric</span><span>Electric</span></div>
+              <div class="compare-row"><strong>HP</strong><span>35</span><span>60</span><span>65</span></div>
+              <div class="compare-row"><strong>Attack</strong><span>55</span><span>90</span><span>65</span></div>
+              <div class="compare-row"><strong>Speed</strong><span>90</span><span>110</span><span>130</span></div>
+              <div class="compare-row"><strong>Ability</strong><span>Static</span><span>Static</span><span>Volt Absorb</span></div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>Base Stats Radar</h3><span class="status-badge info">SVG tokenized</span></div>
+            <div class="radar-wrap">
+              <svg class="radar-chart" viewBox="0 0 260 240" role="img" aria-label="Pikachu base stats radar chart">
+                <polygon class="radar-grid-line" points="130,20 225,75 225,165 130,220 35,165 35,75"></polygon>
+                <polygon class="radar-grid-line" points="130,55 195,93 195,147 130,185 65,147 65,93"></polygon>
+                <polygon class="radar-grid-line" points="130,90 165,110 165,130 130,150 95,130 95,110"></polygon>
+                <line class="radar-axis" x1="130" y1="120" x2="130" y2="20"></line>
+                <line class="radar-axis" x1="130" y1="120" x2="225" y2="75"></line>
+                <line class="radar-axis" x1="130" y1="120" x2="225" y2="165"></line>
+                <line class="radar-axis" x1="130" y1="120" x2="130" y2="220"></line>
+                <line class="radar-axis" x1="130" y1="120" x2="35" y2="165"></line>
+                <line class="radar-axis" x1="130" y1="120" x2="35" y2="75"></line>
+                <polygon class="radar-shape" points="130,84 168,102 162,139 130,175 92,142 76,94"></polygon>
+                <text class="radar-label" x="130" y="13">HP</text>
+                <text class="radar-label" x="240" y="76">ATK</text>
+                <text class="radar-label" x="240" y="169">DEF</text>
+                <text class="radar-label" x="130" y="236">SPD</text>
+                <text class="radar-label" x="20" y="169">SP.DEF</text>
+                <text class="radar-label" x="20" y="76">SP.ATK</text>
+              </svg>
+              <p class="muted">雷达图适合详情页摘要；精确对比仍建议使用条形图或 Compare Panel。</p>
+            </div>
+          </article>
+        </div>
+
+        <div class="grid three" style="margin-top: 16px;">
+          <article class="card padded">
+            <div class="card-title"><h3>Battle Action Menu</h3></div>
+            <div class="battle-action-menu" aria-label="Battle actions">
+              <button class="btn primary" type="button"><span class="icon" aria-hidden="true">⚔</span>Fight</button>
+              <button class="btn blue" type="button"><span class="icon" aria-hidden="true">▣</span>Bag</button>
+              <button class="btn" type="button"><span class="icon" aria-hidden="true">★</span>Pokémon</button>
+              <button class="btn red" type="button"><span class="icon" aria-hidden="true">↗</span>Run</button>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>Bag Item Card</h3></div>
+            <div class="control-stack">
+              <div class="bag-card">
+                <span class="item-icon">＋</span>
+                <div><strong>Hyper Potion</strong><p class="muted">Restores 120 HP to one Pokémon.</p><span class="status-badge info">Qty 12</span></div>
+              </div>
+              <div class="bag-card">
+                <span class="item-icon"><span class="pokeball mini-ball" aria-hidden="true"></span></span>
+                <div><strong>Ultra Ball</strong><p class="muted">A high-performance Ball with a better catch rate.</p><span class="status-badge warning">Qty 4</span></div>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>Event / Reward</h3></div>
+            <div class="control-stack">
+              <div class="event-card">
+                <div>
+                  <strong>Electric Spotlight Weekend</strong>
+                  <p class="muted">Featured Pokémon, bonus candy, limited raid tasks.</p>
+                  <div class="control-row" style="margin-top: 8px;">
+                    <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/small/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+                    <span class="status-badge success">Open</span>
+                  </div>
+                </div>
+                <span class="countdown">18h</span>
+              </div>
+              <div class="reward-shelf" aria-label="Reward shelf">
+                <div class="reward"><span class="gym-badge">1</span><span>Badge</span></div>
+                <div class="reward"><span class="item-icon">＋</span><span>Potion</span></div>
+                <div class="reward"><span class="pokeball" style="--ball-size: 44px;"></span><span>Ball</span></div>
+                <div class="reward is-locked"><span class="gym-badge">?</span><span>Locked</span></div>
+                <div class="reward is-locked"><span class="item-icon">★</span><span>Secret</span></div>
+              </div>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="feedback" aria-labelledby="feedback-title">
+      <div class="container">
+        <div class="section-header">
+          <span class="section-kicker">07 / Feedback & Overlays</span>
+          <h2 id="feedback-title">反馈与覆盖层</h2>
+          <p class="lead">反馈组件需要清晰表达系统状态。Poké Ball 可以作为提示图标，但错误、成功、等待、解锁仍要配合文字和颜色。</p>
+        </div>
+
+        <div class="grid two">
+          <article class="card padded">
+            <div class="card-title"><h3>Alerts</h3></div>
+            <div class="control-stack">
+              <div class="alert success">
+                <span class="alert-icon">✓</span>
+                <div><strong>Pokémon caught!</strong><p class="muted">Pikachu has been added to your Pokédex.</p></div>
+                <button class="btn small ghost" type="button">Undo</button>
+              </div>
+              <div class="alert warning">
+                <span class="alert-icon">!</span>
+                <div><strong>Bag almost full</strong><p class="muted">You have 2 slots left. Transfer items before the next battle.</p></div>
+                <button class="btn small ghost" type="button">Manage</button>
+              </div>
+              <div class="alert danger">
+                <span class="alert-icon">×</span>
+                <div><strong>Connection lost</strong><p class="muted">Battle data will retry automatically.</p></div>
+                <button class="btn small ghost" type="button">Retry</button>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>Modal / Toast / Tooltip</h3></div>
+            <div class="demo-surface">
+              <div class="control-row">
+                <button class="btn primary" type="button" data-open-modal><span class="icon" aria-hidden="true">▣</span>Open Modal</button>
+                <button class="btn blue" type="button" id="toastButton"><span class="icon" aria-hidden="true">◒</span>Show Toast</button>
+                <span class="tooltip-demo">
+                  <button class="btn icon-btn ghost" type="button" aria-label="查看捕获率提示"><span class="icon" aria-hidden="true">?</span></button>
+                  <span class="tooltip-bubble" role="tooltip">捕获率提示需要解释公式来源和影响因素。</span>
+                </span>
+              </div>
+              <div class="empty-state">
+                <span class="pokeball" style="--ball-size: 62px;" aria-hidden="true"></span>
+                <div>
+                  <h3>No Pokémon found</h3>
+                  <p class="muted">调整类型筛选或搜索其它区域。</p>
+                </div>
+                <button class="btn primary" type="button">Reset filters</button>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>Loading States</h3></div>
+            <div class="demo-surface">
+              <div class="skeleton">
+                <div class="skeleton-box"></div>
+                <div class="skeleton-line" style="width: 72%;"></div>
+                <div class="skeleton-line" style="width: 92%;"></div>
+                <div class="skeleton-line" style="width: 48%;"></div>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>Motion Rules</h3></div>
+            <ul class="rule-list">
+              <li>按钮 hover 上浮 2px，active 下压 2px，时长 120ms 至 180ms。</li>
+              <li>捕获、升级、徽章解锁可使用 300ms 左右的弹性动效。</li>
+              <li>列表筛选和 Tab 切换不使用大幅移动，避免影响扫描。</li>
+              <li>必须支持 <code>prefers-reduced-motion</code>，关闭闪烁和持续动画。</li>
+            </ul>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section band" id="navigation" aria-labelledby="navigation-title">
+      <div class="container">
+        <div class="section-header">
+          <span class="section-kicker">08 / Navigation</span>
+          <h2 id="navigation-title">导航模式</h2>
+          <p class="lead">Pokémon 产品常见信息架构包括 Pokédex、Team、Bag、Battle、Events、Shop 和 Trainer Profile。桌面端可用侧边导航，移动端使用底部导航。</p>
+        </div>
+
+        <div class="grid two">
+          <article class="card padded">
+            <div class="card-title"><h3>Desktop Shell</h3></div>
+            <div class="side-nav-demo">
+              <nav class="side-rail" aria-label="桌面侧边导航示例">
+                <a href="#" class="is-active"><span class="pokeball mini-ball" aria-hidden="true"></span>Pokédex</a>
+                <a href="#"><span class="icon" aria-hidden="true">★</span>Team</a>
+                <a href="#"><span class="icon" aria-hidden="true">▣</span>Bag</a>
+                <a href="#"><span class="icon" aria-hidden="true">⚔</span>Battle</a>
+                <a href="#"><span class="icon" aria-hidden="true">◈</span>Shop</a>
+              </nav>
+              <div class="nav-preview">
+                <div class="breadcrumb" aria-label="面包屑示例">
+                  <span><a href="#">Home</a></span>
+                  <span><a href="#">Pokédex</a></span>
+                  <span>Pikachu</span>
+                </div>
+                <div class="list-row">
+                  <span class="pokeball mini-ball"></span>
+                  <div><strong>Current section</strong><p class="muted">Use blue fill for active destination.</p></div>
+                  <button class="btn small primary" type="button">Open</button>
+                </div>
+                <div class="pagination" aria-label="分页示例">
+                  <a class="page-link" href="#">‹</a>
+                  <a class="page-link is-active" href="#">1</a>
+                  <a class="page-link" href="#">2</a>
+                  <a class="page-link" href="#">3</a>
+                  <a class="page-link" href="#">…</a>
+                  <a class="page-link" href="#">9</a>
+                  <a class="page-link" href="#">›</a>
+                </div>
+              </div>
+            </div>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>Mobile Bottom Nav</h3></div>
+            <div class="demo-surface">
+              <nav class="bottom-nav" aria-label="移动端底部导航示例">
+                <a href="#" class="is-active"><span class="icon" aria-hidden="true">⌕</span><span>Dex</span></a>
+                <a href="#"><span class="icon" aria-hidden="true">★</span><span>Team</span></a>
+                <a href="#"><span class="icon" aria-hidden="true">▣</span><span>Bag</span></a>
+                <a href="#"><span class="icon" aria-hidden="true">◎</span><span>Profile</span></a>
+              </nav>
+              <ul class="rule-list">
+                <li>底部导航最多 5 项，当前项使用浅黄色背景和深蓝文字。</li>
+                <li>图标下方标签必须保留，不能只靠图标表达目的地。</li>
+                <li>一级导航和页面内 Tabs 分离，避免把筛选项放入全局导航。</li>
+                <li>活动页可使用顶部锚点导航，核心工具优先使用 App Shell。</li>
+              </ul>
+            </div>
+          </article>
+        </div>
+      </div>
+    </section>
+
+    <section class="section" id="templates" aria-labelledby="templates-title">
+      <div class="container">
+        <div class="section-header">
+          <span class="section-kicker">09 / Templates</span>
+          <h2 id="templates-title">页面模板</h2>
+          <p class="lead">以下模板把控件组合成可直接落地的页面结构，覆盖图鉴列表、详情页、战斗状态和背包网格。</p>
+        </div>
+
+        <div class="template-grid">
+          <article class="template-panel">
+            <div class="template-toolbar">
+              <strong>Pokédex Listing</strong>
+              <button class="btn small primary" type="button">Filter</button>
+            </div>
+            <div class="template-body">
+              <div class="field search-field">
+                <label for="templateSearch">Search</label>
+                <input class="input" id="templateSearch" type="search" placeholder="Search National Dex" />
+              </div>
+              <div class="control-row">
+                <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+                <span class="type-chip type-image-chip type-fire"><img src="frontend/public/types/10.png" alt="" loading="lazy" /><span class="sr-only">Fire</span></span>
+                <span class="type-chip type-image-chip type-water"><img src="frontend/public/types/11.png" alt="" loading="lazy" /><span class="sr-only">Water</span></span>
+                <span class="type-chip type-image-chip type-grass"><img src="frontend/public/types/12.png" alt="" loading="lazy" /><span class="sr-only">Grass</span></span>
+              </div>
+              <div class="dex-grid">
+                <div class="dex-mini-card"><span class="pokeball mini-ball"></span><strong>#025 Pikachu</strong><span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span></div>
+                <div class="dex-mini-card"><span class="pokeball mini-ball"></span><strong>#006 Charizard</strong><span class="type-chip type-image-chip type-fire"><img src="frontend/public/types/10.png" alt="" loading="lazy" /><span class="sr-only">Fire</span></span></div>
+                <div class="dex-mini-card"><span class="pokeball mini-ball"></span><strong>#007 Squirtle</strong><span class="type-chip type-image-chip type-water"><img src="frontend/public/types/11.png" alt="" loading="lazy" /><span class="sr-only">Water</span></span></div>
+                <div class="dex-mini-card"><span class="pokeball mini-ball"></span><strong>#133 Eevee</strong><span class="type-chip type-image-chip type-normal"><img src="frontend/public/types/1.png" alt="" loading="lazy" /><span class="sr-only">Normal</span></span></div>
+                <div class="dex-mini-card"><span class="pokeball mini-ball"></span><strong>#143 Snorlax</strong><span class="type-chip type-image-chip type-normal"><img src="frontend/public/types/1.png" alt="" loading="lazy" /><span class="sr-only">Normal</span></span></div>
+                <div class="dex-mini-card"><span class="pokeball mini-ball"></span><strong>#150 Mewtwo</strong><span class="type-chip type-image-chip type-psychic"><img src="frontend/public/types/14.png" alt="" loading="lazy" /><span class="sr-only">Psychic</span></span></div>
+              </div>
+            </div>
+          </article>
+
+          <div class="control-stack">
+            <article class="template-panel">
+              <div class="template-toolbar">
+                <strong>Pokémon Detail</strong>
+                <span class="dex-number">#025</span>
+              </div>
+              <div class="template-body">
+                <div class="detail-layout">
+                  <div class="detail-art"><div class="pikachu-face" role="img" aria-label="Pikachu 示例"></div></div>
+                  <div class="control-stack">
+                    <div>
+                      <h3>Pikachu</h3>
+                      <p class="muted">Mouse Pokémon · Electric</p>
+                    </div>
+                    <div class="control-row">
+                      <span class="type-chip type-image-chip type-electric"><img src="frontend/public/types/13.png" alt="" loading="lazy" /><span class="sr-only">Electric</span></span>
+                      <span class="hp-pill">HP 35</span>
+                    </div>
+                    <div class="progress">
+                      <div class="progress-label"><span>Friendship</span><span>84%</span></div>
+                      <div class="progress-track"><span class="progress-fill" style="width: 84%;"></span></div>
+                    </div>
+                    <button class="btn primary" type="button">Add to team</button>
+                  </div>
+                </div>
+              </div>
+            </article>
+
+            <article class="template-panel">
+              <div class="template-toolbar">
+                <strong>Battle & Bag</strong>
+                <span class="status-badge warning">Live</span>
+              </div>
+              <div class="template-body">
+                <div class="battle-hud">
+                  <div class="hud-row"><strong>Raichu Lv. 36</strong><span>HP 62/90</span></div>
+                  <div class="hp-track"><span class="hp-fill" style="width: 69%;"></span></div>
+                </div>
+                <div class="inventory-grid">
+                  <div class="item-slot"><span class="pokeball mini-ball"></span>Poké Ball</div>
+                  <div class="item-slot"><span class="icon">＋</span>Potion</div>
+                  <div class="item-slot"><span class="icon">★</span>Rare Candy</div>
+                  <div class="item-slot"><span class="icon">◈</span>Badge</div>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section class="section band" id="handoff" aria-labelledby="handoff-title">
+      <div class="container">
+        <div class="section-header">
+          <span class="section-kicker">10 / Delivery Guidelines</span>
+          <h2 id="handoff-title">交付规范</h2>
+          <p class="lead">设计稿和前端实现需要以 token 与官方资产目录为唯一来源，避免组件各自写死颜色和尺寸。Logo、角色图、商品图与 Type 图片必须有授权来源和版本记录。</p>
+        </div>
+
+        <div class="grid two">
+          <article class="card padded">
+            <div class="card-title"><h3>设计验收清单</h3></div>
+            <ul class="checklist">
+              <li><span>所有页面使用同一套 Pokémon brand tokens、type assets、type tokens、surface tokens。</span></li>
+              <li><span>Logo、角色图、官方插画、商品图均标注授权来源和使用范围。</span></li>
+              <li><span>核心控件覆盖 default、hover、active、focus、disabled、loading、error 状态。</span></li>
+              <li><span>图鉴列表、详情、Team Builder、Move Data、Weakness Matrix、背包、战斗状态、活动卡片均有桌面和移动端布局。</span></li>
+              <li><span>Type 展示优先使用 <code>frontend/public/types/</code> 图片资产，隐藏文本和 CSS 类型色作为语义与兜底。</span></li>
+            </ul>
+          </article>
+
+          <article class="card padded">
+            <div class="card-title"><h3>前端验收清单</h3></div>
+            <ul class="checklist">
+              <li><span>CSS 变量集中声明，不在组件内硬编码品牌色和类型色。</span></li>
+              <li><span>控件高度不低于 44px，键盘焦点清晰，弹窗有 focus 管理和 ESC 关闭。</span></li>
+              <li><span>Tab、Modal、Toast、Switch、Range、Combobox、Type Filter、Team Slot 等控件具备基础 ARIA 语义。</span></li>
+              <li><span>支持明暗主题与 reduced motion，动画不会阻塞主要任务流程。</span></li>
+              <li><span>表格、列表、图鉴网格在 320px 宽度下不产生内容重叠。</span></li>
+            </ul>
+          </article>
+        </div>
+
+        <div class="code-block" style="margin-top: 18px;">
+          <pre><code>:root {
+  --pokemon-yellow: #ffcb05;
+  --pokemon-blue: #2a75bb;
+  --pokemon-blue-deep: #003a70;
+  --pokemon-red: #ee1515;
+  --line-strong: #1f2a3b;
+  --radius-card: 8px;
+  --radius-control: 8px;
+  --shadow-control: 0 3px 0 var(--line-strong);
+}
+
+.btn.primary {
+  min-height: 44px;
+  border: 2px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--pokemon-yellow);
+  color: #172036;
+  box-shadow: var(--shadow-control);
+}</code></pre>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="container footer">
+    <p><strong>Pokémon UI Library Guidelines v3.0</strong>。本文件按“已获授权可使用 Pokémon 官方元素”的项目前提设计，适合用作网页产品、活动页、会员中心、图鉴工具、电商体验和 Team / Battle / Event 工具的 UI library 基线。</p>
+  </footer>
+
+  <div class="toast-stack" aria-live="polite" aria-atomic="true">
+    <div class="toast" id="toast">
+      <span class="pokeball mini-ball" aria-hidden="true"></span>
+      <div>
+        <strong>Item added</strong>
+        <p class="muted">Potion has been added to your Bag.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="modal-backdrop" id="guidelineModal" role="presentation">
+    <section class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
+      <div class="modal-header">
+        <h3 id="modalTitle">授权项目使用说明</h3>
+        <button class="btn icon-btn ghost" type="button" data-close-modal aria-label="关闭弹窗"><span class="icon" aria-hidden="true">×</span></button>
+      </div>
+      <div class="modal-body">
+        <p>这版 guidelines 默认项目已被允许使用 Pokémon 官方元素。落地时请把 Logo、角色图、商品图等官方素材作为独立资产管理，并在组件层使用 tokens、type 图片资产、Poké Ball、Pokédex、Team、Battle 和 Reward 结构保持一致性。</p>
+        <div class="alert warning">
+          <span class="alert-icon">!</span>
+          <div>
+            <strong>资产与组件分离</strong>
+            <p class="muted">官方插画不要直接写进组件 CSS；组件只依赖尺寸、颜色、状态和插槽。</p>
+          </div>
+          <span></span>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn ghost" type="button" data-close-modal>Cancel</button>
+        <button class="btn primary" type="button" data-close-modal>Got it</button>
+      </div>
+    </section>
+  </div>
+
+  <script>
+    const root = document.documentElement;
+    const themeToggle = document.getElementById('themeToggle');
+    const modal = document.getElementById('guidelineModal');
+    const toast = document.getElementById('toast');
+    const toastButton = document.getElementById('toastButton');
+    const captureRange = document.getElementById('captureRange');
+    const captureValue = document.getElementById('captureValue');
+    let lastFocused = null;
+    let toastTimer = null;
+
+    themeToggle?.addEventListener('click', () => {
+      const nextTheme = root.dataset.theme === 'night' ? '' : 'night';
+      if (nextTheme) {
+        root.dataset.theme = nextTheme;
+      } else {
+        delete root.dataset.theme;
+      }
+    });
+
+    document.querySelectorAll('[data-open-modal]').forEach((button) => {
+      button.addEventListener('click', () => {
+        lastFocused = document.activeElement;
+        modal.classList.add('is-open');
+        document.body.classList.add('lock-scroll');
+        modal.querySelector('[data-close-modal]')?.focus();
+      });
+    });
+
+    function closeModal() {
+      modal.classList.remove('is-open');
+      document.body.classList.remove('lock-scroll');
+      lastFocused?.focus();
+    }
+
+    document.querySelectorAll('[data-close-modal]').forEach((button) => {
+      button.addEventListener('click', closeModal);
+    });
+
+    modal?.addEventListener('click', (event) => {
+      if (event.target === modal) closeModal();
+    });
+
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && modal.classList.contains('is-open')) {
+        closeModal();
+      }
+    });
+
+    toastButton?.addEventListener('click', () => {
+      window.clearTimeout(toastTimer);
+      toast.classList.add('show');
+      toastTimer = window.setTimeout(() => {
+        toast.classList.remove('show');
+      }, 2800);
+    });
+
+    captureRange?.addEventListener('input', () => {
+      captureValue.value = captureRange.value;
+      captureValue.textContent = captureRange.value;
+    });
+
+    document.querySelectorAll('[data-stepper]').forEach((stepper) => {
+      const output = stepper.querySelector('output');
+      stepper.querySelectorAll('button').forEach((button) => {
+        button.addEventListener('click', () => {
+          const next = Math.max(0, Number(output.textContent) + Number(button.dataset.step));
+          output.textContent = next;
+        });
+      });
+    });
+
+    document.querySelectorAll('.segmented').forEach((group) => {
+      group.querySelectorAll('button').forEach((button) => {
+        button.addEventListener('click', () => {
+          group.querySelectorAll('button').forEach((item) => item.setAttribute('aria-pressed', 'false'));
+          button.setAttribute('aria-pressed', 'true');
+        });
+      });
+    });
+
+    document.querySelectorAll('[data-tabs]').forEach((tabs) => {
+      const buttons = tabs.querySelectorAll('[role="tab"]');
+      const panels = tabs.querySelectorAll('[role="tabpanel"]');
+      buttons.forEach((button) => {
+        button.addEventListener('click', () => {
+          buttons.forEach((item) => item.setAttribute('aria-selected', 'false'));
+          panels.forEach((panel) => panel.classList.remove('is-active'));
+          button.setAttribute('aria-selected', 'true');
+          tabs.querySelector(`#${button.getAttribute('aria-controls')}`)?.classList.add('is-active');
+        });
+      });
+    });
+
+    const pokemonCombobox = document.getElementById('pokemonCombobox');
+    const pokemonSuggestions = document.getElementById('pokemonSuggestions');
+    const suggestionItems = [...document.querySelectorAll('.suggestion-item')];
+
+    function updateSuggestions() {
+      const query = pokemonCombobox.value.trim().toLowerCase();
+      let visibleCount = 0;
+      suggestionItems.forEach((item) => {
+        const isMatch = item.dataset.name.toLowerCase().includes(query);
+        item.style.display = isMatch ? '' : 'none';
+        if (isMatch) visibleCount += 1;
+      });
+      pokemonSuggestions.classList.toggle('is-open', visibleCount > 0 && document.activeElement === pokemonCombobox);
+      pokemonCombobox.setAttribute('aria-expanded', String(visibleCount > 0 && document.activeElement === pokemonCombobox));
+    }
+
+    pokemonCombobox?.addEventListener('input', updateSuggestions);
+    pokemonCombobox?.addEventListener('focus', updateSuggestions);
+    pokemonCombobox?.addEventListener('blur', () => {
+      window.setTimeout(() => {
+        pokemonSuggestions.classList.remove('is-open');
+        pokemonCombobox.setAttribute('aria-expanded', 'false');
+      }, 120);
+    });
+
+    suggestionItems.forEach((item) => {
+      item.addEventListener('click', () => {
+        pokemonCombobox.value = item.dataset.name;
+        suggestionItems.forEach((option) => option.classList.remove('is-active'));
+        item.classList.add('is-active');
+        pokemonSuggestions.classList.remove('is-open');
+        pokemonCombobox.setAttribute('aria-expanded', 'false');
+      });
+    });
+
+    const typeFilterSummary = document.getElementById('typeFilterSummary');
+    const typeToggles = [...document.querySelectorAll('.type-toggle')];
+
+    function updateTypeSummary() {
+      const selectedTypes = typeToggles
+        .filter((button) => button.getAttribute('aria-pressed') === 'true')
+        .map((button) => button.dataset.typeName);
+      typeFilterSummary.textContent = selectedTypes.length ? `Selected: ${selectedTypes.join(', ')}` : 'Selected: none';
+    }
+
+    typeToggles.forEach((button) => {
+      button.addEventListener('click', () => {
+        const isPressed = button.getAttribute('aria-pressed') === 'true';
+        button.setAttribute('aria-pressed', String(!isPressed));
+        updateTypeSummary();
+      });
+    });
+
+    document.getElementById('clearTypeFilters')?.addEventListener('click', () => {
+      typeToggles.forEach((button) => button.setAttribute('aria-pressed', 'false'));
+      updateTypeSummary();
+    });
+
+    document.querySelectorAll('.team-slot').forEach((slot) => {
+      slot.addEventListener('click', () => {
+        document.querySelectorAll('.team-slot').forEach((item) => item.classList.remove('is-selected'));
+        slot.classList.add('is-selected');
+      });
+    });
+
+    const chipTooltip = document.createElement('div');
+    chipTooltip.className = 'chip-tooltip';
+    chipTooltip.setAttribute('role', 'tooltip');
+    document.body.appendChild(chipTooltip);
+
+    function getChipLabel(chip) {
+      return chip.dataset.tooltip || chip.querySelector('.sr-only')?.textContent.trim() || '';
+    }
+
+    function positionChipTooltip(chip) {
+      const rect = chip.getBoundingClientRect();
+      const viewportPadding = 12;
+      chipTooltip.style.left = `${Math.min(Math.max(rect.left + rect.width / 2, viewportPadding), window.innerWidth - viewportPadding)}px`;
+      chipTooltip.style.top = `${Math.max(rect.top - chipTooltip.offsetHeight - 8, viewportPadding)}px`;
+    }
+
+    function showChipTooltip(chip) {
+      const label = getChipLabel(chip);
+      if (!label) return;
+      chipTooltip.textContent = `${label} type`;
+      chipTooltip.classList.add('is-visible');
+      positionChipTooltip(chip);
+    }
+
+    function hideChipTooltip() {
+      chipTooltip.classList.remove('is-visible');
+    }
+
+    document.querySelectorAll('.type-image-chip').forEach((chip) => {
+      const label = getChipLabel(chip);
+      if (!label) return;
+      chip.dataset.tooltip = label;
+      chip.setAttribute('aria-label', `${label} type`);
+
+      const trigger = chip.closest('.type-toggle, .team-slot, .weakness-cell, .suggestion-item, .dex-mini-card, .move-head, .event-card') || chip;
+      trigger.addEventListener('mouseenter', () => showChipTooltip(chip));
+      trigger.addEventListener('mouseleave', hideChipTooltip);
+      trigger.addEventListener('focusin', () => showChipTooltip(chip));
+      trigger.addEventListener('focusout', hideChipTooltip);
+    });
+
+    window.addEventListener('scroll', hideChipTooltip, { passive: true });
+    window.addEventListener('resize', hideChipTooltip);
+  </script>
+</body>
+</html>
diff --git a/frontend/public/types/1.png b/frontend/public/types/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..bf9f3d1b78af67ada0719cafcc053d3c4dfa2e97
GIT binary patch
literal 2362
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

literal 0
HcmV?d00001

diff --git a/frontend/public/types/10.png b/frontend/public/types/10.png
new file mode 100644
index 0000000000000000000000000000000000000000..3add23c53e54b3ec558787db90f215bce2fbf032
GIT binary patch
literal 1446
zcmV;X1zGxuP)<h;3K|Lk000e1NJLTq0077U001Zm1^@s6yBxI~00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1v^PZK~#8N?VZnR
z6hRQi^9sI#Cv)(ScSznq?}{RkcnC<mh={kmf*8m#5Xo6do<WaZB-e--vIK+$FR{ON
zdQx3e)6=ul>-22b2R}%rdpf;a^-ceo+0EL;z4b-eH0&GB4CjU`!;PY30CEvIiQGhv
zB3Gpx?nFEo;I84lLCv5{4dg6x7db5DwupF80F53Sq(7`EQv<miWfbus<C#H63}w|o
zP9wLaoUaiN5_Hs1RvqNHl=~L(py7@I3mmDzg_wW(eB*?lXS=&%Jw+J-<T`S`;f2P5
zilpXnP?JFTU8<)jBY>Q5c%gB?u+(W4*Y)9nSWi(#pfTO@elcLtBAu9w`RQq8jay0e
zCd<Y~n6CO=<z4XeInp^Hq&8L?Z{beOfo-p)?^a0$S%viori&Ky`hryT>ep<Nke2fi
zb+-4)D{lk!LJ1w+KSH4ffd}d>U}}*6vSTG_RSeQc)F4#z@87(3k@$Ud`Sgi*zN2sd
z3N{F+r&`V&aEw$jDQ!VggWPJULHPL&HArvlDB=u)Tkuk);owa+gaYmAOfn!<zmZUV
zL@x?dLk$AK40Rg|_RnjhOyG&yAj?~OnBathTwkdiQX4r_^_wQ3_nM@07*t&b;iD~n
zmqv%WPJ;dw3Or#Af+roN3Q6d?0;1dn3qQ|~Pi`(BJQUl?lB(}x8N|U&LZ@&;`&TfV
zFbEz8mI?=hAaw~rqDgT5_MO;Pwj@YEsznXL-)l8U682$`rQ9`-F~{!@2R2AlZM!hp
z!V~b<%yMzxlmY1+29+8lE6!jLe6U0+97K#@5S{>P5S?OW#Q9Pd=#5~RAkzRj{rU2>
zkpMhFvWF+&NCx4m%Xt4Pp<Rn<PlC2xFjp{$RIo63bE(|biU-;W$7%48Ad`ANtHmJm
zk0<{y7Yhnr8y_X9x(tFgcrtULPTfX}K|=D*FP!8C;el|+r9g&+`n26_Ss(%VYoqEi
zNQ}Jp`}Xh0g@yK^WRgy?usutK;L`HGnuJL*Gf3m=uLc={onj?hq+^Sg$_9s&BY1r@
ziJ?9tgV<d`a;~MNe|T?2j*cvicFM#q(vxlT;wGOH0>TXfurTkV?02<V5)g?kB8-Yu
zT?Vl`f6sR;_?ar!ATUCso+4qld6V5J^bFD#1QV=2LYrbcxgaH=yEp*p90paFL1ud|
zy>c#EW=YV$g0VLWlRaue4br-P5CRsG8YFBG{ysLQM+y2@F!oUskYu4w*C1U6;X!MY
z8YFBG{0&chft{d#g;GDP2$DSRPIs|l3<A1Lq6X<Ui1!{EgUq(Kz4D>`D-`c>_hcWK
zayQCmFLvVYB%2_Gbouy^d|oajNI<II20<NjF{1L;e+l|mDBcIAK$4H#!WiyOa;!mU
z@VLZtaw0(jQY~T-z*UdnLjPjbIty5R8Xvg@aLn+vh%tp5MPd!YlfY>b0TL2$41-|Q
zpsGg^p?|R|)FAMH9X$Xw2pImgKQKjQ5<AV3>QGGZB!f(5uU<&NF$}_|S&%Ig`WLH0
z4bu9xKaM0*E!^NkuzzlCiRBcoDFy})A>#Fdz7Jcv^DOMb;NC|^XibK5y}INkEA3w_
z+25p1Pd&AAc)t*m-Cdu(dEIIfe$_*O3%zP7;}iYWqagX0S5sgDn8BGsjiHPTa=q7=
zS38nSw-hB~8q+F@c#wfbOR`7e6(tjp)82wyLOdvdZ7&^7lvM$_TyN!u5Dx}GqqqgH
zBZ@LLkh93$C}TLpgOTXJfmU(_xtQSJK(DX;1&cBrkURL?MgRZ+07*qoM6N<$g6ay4
Ag#Z8m

literal 0
HcmV?d00001

diff --git a/frontend/public/types/11.png b/frontend/public/types/11.png
new file mode 100644
index 0000000000000000000000000000000000000000..a35f2efd14f739a8d5c3502949cc40ef17a3887e
GIT binary patch
literal 2053
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

literal 0
HcmV?d00001

diff --git a/frontend/public/types/12.png b/frontend/public/types/12.png
new file mode 100644
index 0000000000000000000000000000000000000000..893e8ce32dd245f46592f5d449979c8b2c9b66fa
GIT binary patch
literal 3026
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

literal 0
HcmV?d00001

diff --git a/frontend/public/types/13.png b/frontend/public/types/13.png
new file mode 100644
index 0000000000000000000000000000000000000000..e555254876155f25d444a2e5c708f3c0dce7327c
GIT binary patch
literal 2204
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

literal 0
HcmV?d00001

diff --git a/frontend/public/types/14.png b/frontend/public/types/14.png
new file mode 100644
index 0000000000000000000000000000000000000000..8839cce947341bbe4a8d38380677c26b80940600
GIT binary patch
literal 2413
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%0AN^VB(6`1qGlF*?ML
znt=Voim9D9s9xZyz1#wZqITn{0ID|{V+>1*w?QDtp_L!Fdgs$P#<l@#rxXb1i+<}5
zY+mt%6R>TZ55vd5go@Fid{_}&^vB&t1yaNTEAMxt@l*iT4iyMsYuy4u9Jjy!5y!Ad
ztesLIYHzRJ{mjKE`I=`IFOoVZi#_%=s2C00$K5ab52n08gpWfXZ~2@0bZj6Ny|Fk(
z#4BS>yg7~^&u3+rE6m_yi!GZiI%`K4NXI{0S4e4HTgT5FAb=&@A54LZ{gYe#TsBPk
zIHo+fptGU9^ilsLpmp(bJCAq8MAlsMU~|0l3dCJ)$z;A^4X_ri<7ZAJkm^rv0Ti?0
zS!7=LNG`O*^Zca^*|rD-aQ@L6$2VVLbiB0!L5@9<DC7HjYo`_n=Ie>1vakj=*E*i(
z1OkBu;?)CKfq;wo+Mi<xBwhvC8pjup?MMOvYemB10M^bS5U^GxqjwA^5J>ZDe=-|y
zwHl-im6y|GV+DFB)57P1#K!rDSmo2h6t`fh082g(!bv1NR4?UYW8s0fD!erBe4FC^
z(H0-x6ZJ#B$Bspgc5M7o3Db`k2H2m+kLP<<%B@w#{bG25zj_pN^iV!MX5aj5l|h>=
zXwdW5`0;hTX&kN;k;OBx?NhJPjgI&I?B5!{KHsyk`m0C53;gBPn4^dC>7ioG)CE1}
z&*STO%E#jUxxX&p(eb{Y{g=lx-v3OX)`z~lI&=8#77Jhr72~L2jvmUVhl(*%7xb7v
zkFVn?AB*?r{<?ri$NPTvUmnkR|1(hCR#{{tfrpmEJ`#UI>J8Z0Sp{m^J&-G8qW~{^
z9rxk=NbCaH*#K&}yp-ERHg-TzyaoT<Tv2v`?5qSei`rc!jErnt$#eN{pw*b2ivzWI
fgnt8l_oaUUBY{Mw?ivQy00000NkvXXu0mjfR!Wrk

literal 0
HcmV?d00001

diff --git a/frontend/public/types/15.png b/frontend/public/types/15.png
new file mode 100644
index 0000000000000000000000000000000000000000..d65f95471fb6636f42e8794c05d73335ce0dca02
GIT binary patch
literal 1422
zcmV;91#$X`P)<h;3K|Lk000e1NJLTq0077U001Zm1^@s6yBxI~00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D1tUpBK~#8N?VUl2
z)j$x2y@FTpB7)4ygLnj&f*YBI7w`(R6x=unf``ySMi2!zGJ=9GpZ)i<GWGuaopkb&
znZ#7V$INtBS2~^gU%HdL%$@rmc4Ik7oF>i_mx-&yE(jI?auGR++(eEdS5*%8A`3gX
zmw1r~F$8M^Ig8vy4y)Xj$U*^vo+Z?VgJ5kSm#c&#3yDXGIAa9=8^~$ow#xYiS?D<W
ztnuK2cu!EhiV*}ef*e=5pOJ-$y9q3CRKP*703eFjKlg+{f`x!wN6xpj&?@-HB;o)p
z00`sHZci2o)vFjma04LcTUuxpBqm*q`{aN1<60aB%Dj(?5d=3xYr1vtM*@o$)v(CH
zdP3lR-~397AVZn=Q87H;cZsMzdusfje!Yh4YT6Hh;{}HccP|cH_8NS(N)5V){ogr}
z;CHT9F+A+QG<;vrzVCK#(=^gh{rCP)k|0WEV&V2E_uHt!Z<FH%Sp&@_U@wqSQ!78%
z3if~aaW4#j-??7J@UZ{V@O}M+IixeyfAh5|XO|(lxjo8;nr&0{C&)BYEfWV6qa1s&
zfkrZT9)H#cphh5Q%kgYG?7uXup8);#ruvUExEX!MQ_>K~Y~-_u2?V#`l~XS^&}?e{
zjH^~`e98xC%Vu?|4@<)DhY|?$GEKw0`40tdZ|29A+t--izS@T%15Gpn8GWbR2Aa(u
zM9i&mtP96GoA=*}K-7Msjh%fBK1=uy6&8qZSA*JzAOlTgf#69;<xqtUG#d^+Fku*0
zt_%mhRKJ!3YW)O#0^!8J_}%s~%-4$pgg|EH1Omb1z^bwe8)zIj24=!&?wmXSl5reh
z?NlF@gx|+Lfv`RQ()RKAaWFz4vvLZ7Om^2C*udjpn&FIK<@nv#DO-~u80$Ca5(u9q
zZJ$-lE`|z3#R!U=Lm>EKiK-lh9S9SFPxd}xm~BBIJQlXkDrOfUkXgArYJsk>17QhZ
zXAiZmDA^VTV&kM@cEJKcoGw(1pvV;jqAEti34nuwzwxuywkQxQS24R_f%KV*5tNx-
zAkV(-ZwTUNt%X4934zSZ>{F}|$hG;p5XdUXQ><AR>3F0B;=s>Z3xU+b0zup^RE(fV
zUZl@{nRlq6?bw95ZLHtmHWulA8wwR8D3UMp&U&M8jHy^_Il$IWFhn3W743?rV1aP^
z;3)Eq!dV|R;Y8>%_*y$Q+m7nPlCXY)E`jhqj(z+;1Tri6Q4=uh!-^{5+4}sgPW53)
zSU*9RKmc2xK=1*=4>E>8W}|sn5!}e*?&@rUGWOewK-74Y;@OxWrjHQ<nT><T-Qx>W
z6Jh-X=(jgt2h<0FO*6e83(0?|3|*u%Y9E5k!55}LeC2imd|&$n0x%9GQ)d{M7Z3}i
z#=OAPJ_PNr+yW?O@LI$Mx&-_Cguw4yuVQ%Ee`)x>)(8Y25<|=<Hwb}D4m6O@9>5C(
z#A|<!#P_vUAhjZ4aexrW<P=}~V~m<=mGCcx+uDocAbyC%=u1fT0b*v;DsF>U3;Au-
zfHolzNi(%F4*qb&t4Alo60tTR;R7)keeJn^C>(FYRKI!@#LKHE!Y3n8J|6aGhWhux
z@iq!_ebCFRjiaYqEP&QQqIwl$&G7yz9}oL8L;d^UcpIcOt@6l10*jVOABhiw1%RAB
zSdc4Zp#Yb?CSAM-!7YMZZZ73^AqzV|P~3u#GfJ>Fkh93$Dq$G1u#)&U(7{qcE>7@o
cpm%rv0wvq3j+c5}{Qv*}07*qoM6N<$f~wn(;s5{u

literal 0
HcmV?d00001

diff --git a/frontend/public/types/16.png b/frontend/public/types/16.png
new file mode 100644
index 0000000000000000000000000000000000000000..65b05ff0ff9e5cc60978617dafd9bddae4d484a0
GIT binary patch
literal 2542
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
Ef<rXu+W-In

literal 0
HcmV?d00001

diff --git a/frontend/public/types/17.png b/frontend/public/types/17.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae8dee20d13b38c3e41dc5f249382254a8e2dea5
GIT binary patch
literal 2171
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

literal 0
HcmV?d00001

diff --git a/frontend/public/types/18.png b/frontend/public/types/18.png
new file mode 100644
index 0000000000000000000000000000000000000000..55e510bead7b1bdd85750aeeb60b8a8e10b76c8e
GIT binary patch
literal 2037
zcmZWqdpHwp8=pfX%pr?4`<z0m*P`B4bYSGLG@=tW#puIUvsuk7hge>xQBmv-k^0_=
zy$oS;W@f$0>r7c;PVGWgt(s%+df)H5zCXS{?&o*i&-46#_w&21=eqB-(_Zc%4X6eH
z005ypPWUQNs0eFypki%=)xs2@MDcZZ22}LIB#J~e42ebp09Cg&*Mqkx@~tEfe+mGg
z-T5Pwx+6<N0RXjh)CuHS+Qp?pbe8BWIJss^U0Xo4fxtFM=e1Ij(l(qxnWcKLP2Hex
z=Ujv<ez&jw)0pldO4gr8mPae984Dgo154kc<Knzm*kult#;q~1+3S<&$*YrQQn)mV
z@GfCvvp0>5&~vgWvGU0;^%*KFpV~tWN!+J0p+>c1bXqR;#*h$ql@J+kTtSU*>c%pG
zr&c}NY?}7MBcgj5<!QjvJ!rQoqvT5E6#EeC|8BaS9xT0j;qw9NPO`AZZEGGM!9#qQ
zA=@`u!hh2!C0|(6r-n>s0Ei^fEzO7DW8-~-jcBWq7g@U#?Z{0U<06Q_@+yd!c_ap_
z9hsK#RB6ZofBd6!^^|kIeY|(Z*wg=T3(X3+zZsd3Q5Xhh+RHev6C=jqRS`urv)8)e
zEgbsFns04pR2cZmg0J71`5^4T$m9qwr+ZeK%VRls!0QcKRY`+lU;rJYd~8Gh!b0AF
zaX%oe-!5Vi#JC_4%h+L_V*gg(@G+N14x>y~T^JoK(_=Kn%Fj+JuBzF3G`T;Jmpi|I
z9Ol*XXF9K@yd>mGV@9H|uq);r?x%KehCLd_?2$a=LAKC>;#FS)CGj`}{?5FkGft(b
z21$RiWnM6<0peo68%LbtC>W-k01=#hLyY_RWnMr(jKo~<3mr1mq<?X=_3#pPw+9e(
zQ>O>w#4*3Ji}LciDs-l!p6`MSv<CexpsJDWjb2-u#!@c1?};s>CZu0);J?>16sMSc
zvUeHB*(4@IWX8o824Q(s-V@0kY{R3F_O~I@md|n+obBGx6|3}+1saH5ex%7%Pn$jQ
zP1wZ`k0qc+bQwc%yL<B!pVl%D9<u6qkX{p{YiP(UOR~cqG2*{+{9=Z-%BFVB$~<_i
zeQo+VNGZyFw7o=Ac9H0GMy%4jDwp;P{*m&F&|P!^$B#_BWvLVRrcV3r%9)&Hf@Gb}
zseL;YMYq7d<P#vOCTi47gTS`tJ@<budagp};>!Y)0GW|CFQ8^05WwImW;-xZq)-?#
zg>>Q=r}F$Qj=6B7!XW>=A?=W@$6(`}rR=_IGPT*~a^J}Q6r%+y-7_1}Wm=m8WVWy-
zqvP&c&!!=++yQtlOJs-nOVG7vb#|#eQ+NC2$@RACEq-EXqxE*0q}W{s;GR?)Uy|io
z5Grg_ZCY$i${V<9ppuyLjPM&rsi?(yTcOJ+hz>%VmxpHiPyqFVm~2i%hiO?vBSdw8
ztT$4MltDhC>9@Ae2Y<X=ops&*=zeIcR2xVJbrz3N-1-^k7cl$J@&7IXWlWwstakhI
ztA@UnB$`$y-cJ2fHxK(+p89ogB8(zjZJU(}!`Dv^n>On!!<e-lFe1@)di+5s`b?i?
z*G6B#%QeF}LbFcru+~7y>nFbyoD8|Ca7A8gJG-xnzDpJJ;??irv6vi=efXW3bF4WP
z4py&v1p4IsduZgng&rQvct^bs|61C)Ce(6)ZT^_vu(o-hyw1v>(r3!)iVxH(q4X}P
z5;BnipUT3TtVi?63O7WPREbryoK;Wh@PyXqU>N;B7-!OVEQd^P{Hm^z(ayqF-3NE?
z=R80LDQ7W;ak|9=-&|qv6nDXriruj}n-(9x{L|z0xxJS#3509SGs7)k!Fy$+H<$*m
zywk(s=QEHzP-{(r()OdFK@G>#|90ebDiUnqi1$?xF;7gYtWooozqcZuze`0LY#5zG
zII)p#z2?!3^>04<cba`F(WOfj5R$DNFtyWQ{n4>!lD)874c9i`tYRK7WI|3Pf7Bk%
z1@==t#_#7Cg>G`qh4G^1gTVt?3;}kv3Mu|V9}-{NH=VN*(yIBU1@YV%7XYSonZDR5
zqDexzaS`y5RHW>uYGLEl4A4JT6!%{9%rWT>b7Dr>zpMpIGYAw;-Su^d?gp)Kp_3~c
zZ06`O!cBx<(w;&1vx`DroRBN;0Keb-<El=-Y3!t^4oYNKqPDrPk@Ab4n(rR{QJV?1
zm^)e~6JNtIEG{){A-()}QIBtl{HAnw(ONF)NE|vF;sEL>i!;->*L#@b!yxrO8ps$#
zfs}Plh3T{bl>!sKvhQc>m7J^$WsXY-+5Em>T^l!1bVIz>L_V^>Q1MM~?#Wxrfm*DE
zC79=5!lNewzwZKj$m`i4Ug3|P{gjkschkW9cH!5hfyz*e%XSHJd*XZpZB1nS$q#>9
zx_;BKf85CNo1-#ZpgreVE)*N$zT}m%!j(sX#}6^?`5lRmq)(4--k8Q+d9vbtJ891G
z;#=i($1uQYd^C!usIZODy^M}rf0Gc2WrB)F8aHXzXUe?m0!aUNx;?vRkAMg!4Mx?n
zF$nCoulz2W71m1uW9oQ1+2sS*2t-?~?Rm|&yzGr-hIPz_DgacRJMZ3Lxu_VI;K=rg
zMW#5rTG2iaOhx?wty2FXVve0THDu?ZmB`{i-~Wk1oNS2F2`9&vRl^ublmkp2@QY$p
O15mDBCn}tSlKujuV(BRW

literal 0
HcmV?d00001

diff --git a/frontend/public/types/19.png b/frontend/public/types/19.png
new file mode 100644
index 0000000000000000000000000000000000000000..e901bcaad447fe3196ccd86c6455b0e5519e7efc
GIT binary patch
literal 11060
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

literal 0
HcmV?d00001

diff --git a/frontend/public/types/2.png b/frontend/public/types/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..09caf9df9c8dc95ac471178160d1d0ab588a206c
GIT binary patch
literal 2357
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
bzI5q-+)eNrg36Wn00000NkvXXu0mjfA~&IE

literal 0
HcmV?d00001

diff --git a/frontend/public/types/3.png b/frontend/public/types/3.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0bbaeb083944530e8b850ad73871999ae055bd6
GIT binary patch
literal 1858
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

literal 0
HcmV?d00001

diff --git a/frontend/public/types/4.png b/frontend/public/types/4.png
new file mode 100644
index 0000000000000000000000000000000000000000..c54865c034cdf5719c66c222445fae50fe7ab310
GIT binary patch
literal 2601
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
LNkvXXu0mjfrAz1+

literal 0
HcmV?d00001

diff --git a/frontend/public/types/5.png b/frontend/public/types/5.png
new file mode 100644
index 0000000000000000000000000000000000000000..ebb3e424977fff8455628441928f7ec4c3faa4cf
GIT binary patch
literal 2534
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

literal 0
HcmV?d00001

diff --git a/frontend/public/types/6.png b/frontend/public/types/6.png
new file mode 100644
index 0000000000000000000000000000000000000000..129097089e2d2b3e22988ba4f326d4a484224044
GIT binary patch
literal 1949
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

literal 0
HcmV?d00001

diff --git a/frontend/public/types/7.png b/frontend/public/types/7.png
new file mode 100644
index 0000000000000000000000000000000000000000..dae43fd74680951f17206fd7a01c46e7dd5c493a
GIT binary patch
literal 1998
zcmV;<2Qm1GP)<h;3K|Lk000e1NJLTq0077U001Zm1^@s6yBxI~00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D2V+S@K~#8N?VZ7@
z97Pm{^9nAr)E5xnArB#ftDqbAZrr-a!i^9RAqZx9Ap|Z2LgJOU&_x6hh2Z7p8bQcL
zNfue$MHXZI-E(^W`ukLORnJ_fr&9+$GPkPhRCU$)tE;+uCRe`v_Ucrw1#Sc$2F?R7
z0;@`81|Sv@lZZ{kC}P!%;ZfYg0p1CG9jIcc92$sO#4cjki)|M-(E(160$#<H%AtW+
z&Jv27D102KSB%QiKujaHy_oNC6N%!h#?9Nx+l9pCy*etD9fBD5V!y#n47?S<2FG(a
zhz7U?{{0_5S)KiLZ>5Gb<W+%G_6TAfG2hcdFJa9jaR3c)PZTM`v0C1%qf)s95c54P
z^b!JFZN@FI?>=~c_57bF>(I|PltI}lkjftDEw`dS0@$>81+%f`)V5~JF0YO`W5PDR
z_@<08e`EQZrD{w6_&6V+uZ@0w>|gyYkZ9x1;=paMt?yRtLL6rB<<&7~IGBF^?W@)4
z)8j#ozyD}ZAiw@`d-d|w^9Fp@e60`5R09FtKYk;M)bbbU8?nT7sJ{gQ4Rp7FSs+_2
zt&A#=4b2ksbvThBf}K9w2u1ywI1J72)wi}Gf#i-+E0VYl^|w&ErIv{Uit!FC1_O|q
znMy1*z;lO#DOVt7|A#<IC$N*ppGS45zXj7=MNA-g1n(U*3NH@;1|^!MUSGthIr;6(
z)%sEYUK{2F2NMTuX9EI3Q0w`!4}8w8&jiB0?tXWDol6$lz)L>0i!df!ht|JfpovZ(
zllLCzcq|WWnP7o!oIbr11|b$eWR!<vwLJSqU0xgJ1P9Ytz<L46`Cyj<`TaDEh1l^)
zyaz%Vlr@7u?mfER)uHt-7-*sq2;Ow`4#)zX%Eq%l576<+^+o{bd<JRA;{h^sIe>hx
z4RfL-U;)zEG+=in5L`VjF5(Fa{mXR$>w9b0lXFa3n>w`qg>wx8!Rx?YW)_&))zG;n
zl+*wiUOvid;J{Fq*M>R4!IUEqodhmRAh>$4KvL~Nn$aE;*P-<<oEs2G(NlBnFfWkJ
zkY_?M`u;X~DPfo$!hmtxrU--|lB$m>0x`ONUGIHVh`DI}3+EvOf-jbMnJzpaAlEQJ
z2nO{xCJHsJU;XVHZd;B(^xV0;`q)Mwovj6;?Z`#zUpVK*8+0BJ%yy-w{z^?}SoODW
zxNRJ;FiZwmCK|Z;z}5zJ+Q+U0f|~<g@aLfQFPs+;h?kLs2c%RW7&P^#Gw7HdvOtDx
z6VPcNQw0(&;}QbFl4}S%PU~MfTL}aYkxK03r%!wSkXB-k9)A|KLH+F;Zrc=raL|Iw
z7Kj})G*PiHt$*okwZtkF$gQLIdj61BVoMc>8H)o{f$WuLi8XnXULue`|9+4Z2=a36
zkOhK3RWvYl`BMe5SDH=w<lDR@0>M%$C6JP3)}ac7gG`BnGXyZN`F9}@&{;wtCRWCb
zeQEs*r@75r^q`Oj<j#W+)?Ju3ysE&jE7-tn2Iy*&XUC1%p>EPG$n<#hLG-Xy1oH38
zvvtO*`ON-XHX`tX+We?ly4N0nHlQuAH&`IegTkU$O?Yr_9lhK3;DA}+TN%7s!dQB)
zK<s$KYvVrQw&e;0bS5+Wt^}gDlp#u_r`l5m($KtW0<t&iIzT*to+0S@eI9-}5m-8o
z854*XAYL2y3Ab(P6@&$H`t1HXqc!&5vJnW|m_YD1(!KV8Dv-^~iXi)ScO9S~f4SNA
zV!{ygw!Ff>DiF>a6A0?!x`EfmeZp<a6-X4kA`tCg{eFf8ZnO~(rUHpXxHhDD?Ez@R
z8!nLOb@$0%m_nxw8G=3@&{hm43}#FqhcG~VK0}*kLuYn;DeCy-!;shdNCmb9GJNP=
zDq#DVRC~-&R@=n>?2B6F!#n4N5`AF`O!~?#IuwJSGJRco2ppTT)C@c~_<X#895W6^
z(9Gr{A{f#@ukYmw#J*B*KEMaVhW6mQ@aDri=LORH$}NCmiXIvQn{`sAODKqd=`Fz$
zX7zY&m=hLAV2VKa>H!es-c=-NK_Dg$6$sF!*qEtcy>ng|&_Hwb04xwt{Ifq6xT%h}
zjx{lOAkU8TjF$mk8|H+a2PhQ?guvy21$wSX_!hAzkfE{iOv`)cyfBhK`(qR>wYc-}
zvooo{KMSARjd|#GftLg-B>3byyf(}U4o;jGL^1}Sqvw<9Ew`i(y)ulpkH-P%*m*t{
zOt-W$qCbf2r|UMb1_!ve5y!w_mNR(3fGx#%kQlEGb3)HY+dqcqlQF-zqBKY!dSw_s
z*5L6dZO?+p{^?PW{o~czp}>ON%ku_^!7(Xu0j~{n!aJW5JfDpESG+QeSB5EV&q6?~
z7yWp(F}mE+4jscA6vivVcx{*yrRSq~J{k3|cx4!`3{%>k1<+eoF>a!OO-u3Jtx9F)
zAf}@YxrdwRfZJY0oA*j(#vqovTe(BHi37kX9>LcuO6AZ%%p!KPgkiXenbiLVx-wS~
gi#zylps!x}53}#GJU_Z0VE_OC07*qoM6N<$f@IsR0{{R3

literal 0
HcmV?d00001

diff --git a/frontend/public/types/8.png b/frontend/public/types/8.png
new file mode 100644
index 0000000000000000000000000000000000000000..d46358ec5123cb91b9d637900f7ce603e6b97294
GIT binary patch
literal 2147
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
Z<$u5xdsUjqF(Uu~002ovPDHLkV1j_S1MdI;

literal 0
HcmV?d00001

diff --git a/frontend/public/types/9.png b/frontend/public/types/9.png
new file mode 100644
index 0000000000000000000000000000000000000000..7ad921d7b33c74078d4b6481f29d57d6949c9dde
GIT binary patch
literal 1757
zcmV<31|s>1P)<h;3K|Lk000e1NJLTq0077U001Zm1^@s6yBxI~00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D269P6K~#8N?VaDM
z-9!||`wG5-&(f#xN)UU~NALxDAxNPhO0j6~3Pli(6x)i@B83BoN-snXr>zK;-n5s!
z+|HNo6~C-}NoF$H*-4xQKh8OmSu2y->&wjK&pwwv{`THjE(fj!?guUcZvwkQVF4f)
zk(0<x<S24g<?tY~u!j!=Uj>R73Tp#7i`+#HtK62zLIHx_38)<x3Tp$o93>Q4=(rLn
zBSv9sAg7VrD(7otA(1?4eDdAHCf}T7q4rTIObBvZ<$i@M415s40!Ibx1)})!*JuCn
z^Vw*MKngQ~Tu08gw9qQpGfEub^yTZ_RCfB}mE1?6Z~&0=EiJSP0$Gc3GYAEv36gxQ
z6@e6HrZwGa{1L#SMLBlD>jg}U%y=CVJF1}GFMs~EyZ+#`5tmVIm=iv(ihaBM)UXrp
zKZJ_GC?7`oFv^EfKFqDqCxq&=mC;zZvp8_sEBR^_cNUKp+{t|gQDChS`+=x7%n2VC
z=o%qWuG){|O(MhrCOrJKvI^zHknbV<KfC*AYXX4=>Px^ZkWo`B>o~xM&PC$mr?<1e
zU+-@I_H1|cPBYmmC?4Ps2dFm8iM12Q7Gt0P_@vQ()gLit{eYjT<`X>C`uuPF6t-<k
zAfTRVnK+;rRdJBij)y3ihB!cog(()MT5sRIt9)!9K(%2`tevs;{GYdt_7{PyhH4Zs
zf#4Rrsx-)_x8L)_@8|n2>o@D@ntj4`jW#gEw*9C!%n90zsf9P5c6j3i8*3Kh`h&a#
zpW6S6a57W<v;m-rS|FqElw0D)nsqe5^dt6+x+H;k<6{E;EDO=tHXjei<WDXf%i|N2
zlNb2-ybVn4zhQwu6O};lq@$`3MXEq}PLAK%AQl@@yl|Ex5TE=$!3?X%;s8Eg5y+ys
z41wTrV6`y{^#S+U$=P|`*<K(f4kZ$sW~nyJNvuGC7YFe1ia-|4H3($%U2}jBIK_O@
znBmG+wP>epJfFAistt4EuU_$}S3&IuDh8tjqUsq#3GO+x|HcJ!9|FOPC2C_7sRDuV
z2Y|#k>k|lU2?Bu#yfs8Z?FT9bQv|YTF0vNrAZ2=G#vcmqhnPVu*ao~fV5qCwFeea!
zUmuyF+$Wrh!Av2LJ`U}_ae=&nK-7k4QVdCtPUi%|s1R!qkZQx6*hn#CcAP2(lPi!R
z^9ek)|HcKfOBM(xw_ju{tInzekCLRAYSWxpn<0Q9!wEsfU=A%1e<N>d|NnzPlBQUk
z*tjC)ttAN0KDjuKnof1ut;ffmW^ub?+pgjmMIei&nqnm_(m6Ts7zL~`byA`T_&en+
zl9;ox8TP5#H5b-q500TrEZ;vpm$5*uK%QK@YJgabf0%G;|BVZzTBIjk=H;Z|n|?JN
zg7Ai9V!v2hsz8h`v8z}hS0MQNqpweD5Rc*HRtcW#zj1+7mwB^p6!wi0eTI7M8{-F2
zsW!}s7es6O{&>7uBKrDB!W@C5Cg`#KS4MTCFzZnhBm;yo#w?j)V%U^SwP8+77&Zd7
zws#y)5y&d39yI}@?}c!Z$BrImNFw%E=BHw+4RgX%DE#iX+p!dZte*N|MKJntcTRAX
z7=1Q0&8h@M;#h(}y!q{2{ZIt5IvS6=kA7jwgCy=+s48QDAgS<@6tMTw)jp1i8YM0H
zfgOuCEBEno1!7art`i7v1BdWuu$}Q2a(w&+(|BPDWPO{7!JW}{*^{jrCHBb!@FpS0
zQ2RJ0XrnT_OsWLLBc+d*E07rDY3khm{*6j?Obev-$}NCmvYyKV+!=tMwNmD%S>9jm
z<Cvh0Dbq+8AD@p`1hP1wfok*sED(_VwLc#241i~?06(?sjT6ZGt9=|3Yo{71l=%_T
z$14I^9GzeLV@xvDQs9oVw}*c`mvz?w7N|%bWtLRR&x6NjkVuBAV_;6tbz|@^si``B
z<oK`b^R1^=M&l16>m{l_u#hvu@2bw4u*Bhos+9rdlLN<&iSO%sln<kP80E84qQ80+
zjQ;ZKA-2}R{&+mfCx_JdzP?BKFv^EfJ}U&dp7iC_#^lqjt#z<J9*^?LAvM0Q?@>OC
z@?n(E%4kii7+L7Rq9yz4R-v#kkkgF?xk45SaM|l%i}yldW{}JErQAMbVGjt3TkvH>
zDXb0TEOIwW7=|p2r2HG`!csvlPVjG_?_K&AIF`3si59-900000NkvXXu0mjf()2~~

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/1.png b/frontend/public/types/small/1.png
new file mode 100644
index 0000000000000000000000000000000000000000..eb814ca74c40f7208c32952d8d65c143394923eb
GIT binary patch
literal 1485
zcmV;;1v2`HP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000GoNkl<ZcmeF1
zO-o!?7{?!HicCotp%$qv)eKq#t=&mo)F`z(=^}(KLcnbN6#WGK6oYAmG!RT&71D*!
zAQW3clxb7L6caHUX<?w1ie$9scbhvsbLX6U=G+%+Cei!%p7Xr?pXYy%<9)Lr>Z@|I
zGQRNj!jeKm;iSuerX@5gsZwB2I4P{D$rXj*0H}R8ZD_iJ#z3nYe5ur7RJ*R;3TQ>>
z<*t_5D(*6ZL94lYXN8wZY_N>41P6zqi+^~paHG)>9lbrhqC<|=(bAy%l8hTYs$L9K
zHLuNEuowFo3{EU~aA;62O<j^}bJv=foSKxe55^?=MJ&K?0zP2Mo0*!C`MLQfn3spj
z(a?_Pi3B4QM4M!e;HzI;4TQ7jfP^CPn-KcLSYkq3R2*|egN{{dflk5t=auoq_=JoO
zk4ovaQUHxB7?$2pc7^ee$AxiV^!O2qWgnM@@Y&C1<3fx+r(ivcCdNK$|CQBaPIEl)
z&VY=4=+}>z;Gv<R)6~;Zty~4O!X0%H6Lj$Bfz*Gm2Vfi%nv2W1!o5Xxo_!8Jx4vD}
z>vgIAT$TIZ-IvNjMef|YBg@||2Vjg1A2D?m>&ss%m1N|?Nb_32kuOfcE`m7!>Vs8T
zy0;{2Kd#B%(>-e_K4OR^#~PS{BNxHDPj=<j;w@qC+ao!?x#V<O$4l_$=BAUE6#~vc
zM*tka5$1hR-GX~m$>-SG+ENqyMuWA-H90ytYNA*yijHWu?qjUy!UbnEN1yNR?KW$X
ztNTpjg2|Y~#;+Afk{g!;C$PoTeyiDBM!T2b(UDOj2}ajS5R(*f+#|yyUbJ3<FTQ`#
zNFLXaF(HA`R%3X0*o)06xG4X9pMUFo8#(9BoyR-UI8pbl3T*)?4IwWzs1>Cfczd9E
z4(5J4>W|I~QG;!6yUN<$-nOM=ZnxF4^=4`ywctnFk4(I|*le|O5uA&H|AExG!bc5t
zPF3iCw_gsQ9k#T%|Hr<lPi_lZ0y3CH`KhVX(i6Rfed<2b*eTeQ6xt5{J_v`Wwoh9#
zmEcoTnPH(+g3rBvF2hzjqe@%TDLA|z-haB^_6)1PufMY{GmMJX<Q|>g!aiN4oPu2h
zFP2|Ae*j>+fcL$YO>=;3wQRkaYIVHAHd5bfSyL08+HAFKy_tBOg2VG0`@_Fl&%+RM
zEj#$$VDo(wwk*N3a6k=eMY-vT-a<tE(YaHwo>2Xzs!yBaayj{{k0yy@V5?#4$wrrr
z;0t9bE7*#pwZjceJh=*{;KN@ZvTMW4r!%>TMkw5E1(m_pi*i{v_X-oCVdJL_D;bUH
z&xpA{Eo%4EjHAiebdVDQE;yq(;XLT2pk_MMG;Sj_&TsVDo<0!FTR)%MHF8XV11^&f
zTU-zLZAc`T(*UrM(kQU`U3PMTEsom2=8v-{5)2_nIIbuwq`&VaCl16Tk{rgiSZY$+
z=6Bh>1@r7T#LD+8&IjTA(V3o}mbvS5GW+?gOnx%i0&Mt*AvUgI#8NY?&ps~R<ntCB
zCE;k(NYrkc_r2LCTpsGcW{Qp4s6nl$-FKc^Fa>D@FwO&TgDki+5lkbj058F6HNQ6j
z<k|oioN(J>eC??P^EuM7`opT+SiB+Y8|(i*1AC@g(xIj;o9<I%o>7qt2V6Qg<Cfe6
zlhlH3HLKOC-2UdatUOqeohLg1Y_XxASaQg<#iq6ACOB*iF$e*b#fmK6Tx<b0e1O<6
zFPFU{&0Vmnai+HH1)nH=8hGccBl?_K_c0bNHyA6rEVt|hXW3m2T(1P@a8S<_B`eH-
zH=n7da%|=p!OJ-oIBV3)h2x&%uT)nr!zv%6wJ?8ueq9YFl<2z(-6$MQchQK}e*gdg
n|Nn>pqw@d&00v1!K~w_(cE&lbQvQ9300000NkvXXu0mjfL#Eq9

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/10.png b/frontend/public/types/small/10.png
new file mode 100644
index 0000000000000000000000000000000000000000..e35f93913f5cc3a608b8e471c90cfc5e8a8c603a
GIT binary patch
literal 1326
zcmV+}1=0G6P)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000EzNkl<ZcmeF1
z&ubl36vvO#Hryd4%;2Wa2DfQk2ueg0F(frfX*cC9ihqJ#RC!noN?RdTC6F5GTHIAv
zEkz|Zc}Z)i2x95d7+eIT?dw9x5L)KaG^yu%-;cgGKi_+EXDIIn_sl)_+#hp3b7tn=
zJBdO3yEim6a_`XaWtJV5CmkkWx(r4}B||CC8NYKO&!R2>=be<mlqY5ctHH|0OlPok
zdNROjFy(QUZb`=h4CxkNqnlt=P<z1YGIa2v7vT;Lu0rcYSX~B<hdl!W)OT=@%;8~`
zYaF_*p;C|V&ej&~d1;ue?=I2vKm9<twLi(eI8WxWDWZLC`JAYek*If*o!w%QoR6k!
zt;OUNS#$Gbv($_kDVYF+1<;bgp;raqx#CK-m`R=)Flc0P8JSP)v*&!av<#U7Bg#II
z12%~hneAUFQ($v+)W@5(AyZ)Sb`Ln~0B3MZn}UeN{`w-(V9pP?SCG7MQ?)@me*?Xi
zOm1m=c9z7%M5yOsZ|~3!2`W+tj)R5o?s5@XCXy<!{rUOG$b!(j7{Q#3#RziL>lXdM
zSRb=sy)5$iSbych0+A~TQ&#TwZ4yV15bZZ<^Rt=QzU?&756oVeyjI4tk=5w*V2j*q
zi)0?*we|dbt*yL%y{79{v;zYc8-u1Cy?<9V6H^>jrKNw+3f%YNpxOm_-F`TC!D}j)
z_YahF&rytzdo22jT7mmNIOX%qdA~s0|J?D}mEpiaGT(TUb~ZLtQ5`Ic$g<RJuF9GZ
z+JMce2@;cybFEV-ko)suq|5y$-=pn6Zu#0+{7mE7_EjV_Xalz9W*c0Q{4&A|3C1Ys
zeXos>_3byI(0zOdU<_TN1sKuwIwTjbHJD^fqygU0p;G8Cd|1)+WLkj5<U0-C$fZSc
zSNK-u`Iz={6^mS|T!6=1t`{ywCBYy6?5}vr!dQ@~#!b{|0rsA!23J>s+Z(reovCS6
zOz;Q4rdvlfBt5$&;dxoP9O0nTZt_bk$li?2p5-Vv(=et@DiMx4r;|SxRh@cWa$r1<
zB-qii$b}z?wz*gpR_l}d_XatqP7?iFDocH3kp5T_v4}DLT7ofy+O%Lx4$LQO_1ScP
zS*6n0VeXlI(gNJB+koD_k={lj$S*Cx-Z?kuL}9jvpPmh?YOs6v%?*_;6p{n;9P2Lg
zocq8bg0ygQG<8dxg!MM`KoR_IV3DhQCp=5@uyf{&^4B{>DPzn5OV7BKSlCn-GqkTd
zd4wxNx+@%kiXODotW>p?Ij0M4^$Y5x4H$zzjdJ5s6Lsy1<VB3G=)woBz=$%QNAdCq
znV2_Qc;?hRD|ya^R~5l@r&eb>Y^VyWNs?AzIO6`gO3oKEWPNfD#iqo*(73fkry48@
z8bv!Wd;@gp=wUM78l}ENLokI3VC!FW0L6y`71_{U?N_7%Ty+QFkN#S(7HhdVHcs};
zdCJ}Vt@f2fE)~f+Jxu_`&Wcj{=?BJow_ZGs;~!k;eu?Dwm*~HDPf+QVSCwo|PxBr+
z;4cunJV3p0F-g)79OKQSyLZT4TT=o(rn&a&%z?ENv@#&K?E&*e=;+joa7Txi;kq)y
znB|zgE7C3^e6=f3%aB(Mdb0Z^>)jCLU9cK2tgqi<<#mR>!qSQ0V7dZEu>KDK0RR6G
k3(MsI000I_L_t&o0GK?~fa?oA>Hq)$07*qoM6N<$f`8qLivR!s

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/11.png b/frontend/public/types/small/11.png
new file mode 100644
index 0000000000000000000000000000000000000000..60a891bee076431ae6bfc585a47b6b599e91d191
GIT binary patch
literal 1206
zcmV;n1WEgeP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000DQNkl<ZcmeEL
zO=uHA6n@#-5(#3iJrz&3^&|*6)KhI~kNweuH&33;L8Q<^!9x)b0dE#Oi$9G;6bwp>
zhaLo}9<-%;@L2HDLRpZ8q`q&nKa<^UvYUMqW7@J`=grJ}-@I>Mc6YKdi2p7w?q3;N
z+*@H(7)M<OXj*|rmP!T;gN{CNXNF;&0B*bKfTkH}w6wA@$LcW1O;;ZVv_j}qSIevy
zHwD2!{c!j8xXRrtE>zh`s;+ecP6b=1LF2!4ACU@;ONCOORyg#u2oFA(&JZ9>8;S0p
zRCs)_mw-qa3Onf+j1?5z8p*g4EL)i)*zT+zqYX>cC!QPdmQ?L}FMU04b$x5pG3N$)
z+`ekNgPM)D3ch-wHy|f$EZ`(KpkHvAv$ZjKi66q;RS#>-o+q^Gq`cjZ+k}_(=uoi2
zVPjr|yrsXwcFv82HJY=-#hUgB9t?h*9TlSu<{TfXR=eQzS>8J{W-j+qHXTeGW0-UN
zf*!IX+65!sD7&gCKHy4<wg`^0Z;s-VR4n4P3yxE{IKD`}703$)qk=e<vwW3U9S=>=
zw{oH)#S~_}FA9+Y*r}Bm4vTzf6FkA2jEUjkMx$9~h(T;KzgFk937#B2{<+&M*(9;e
zxCI1*LIn{jgi1AA{J43<f}=LCa>K5Tw)#IgL&(a7>+!E$KaB*3pA&s?!IC!}NiK*5
zL<RSs?;(5~K`a4qfm4FZ;Ycpns1n(@bFK9om6MRawK#2lYaPEs%zkpg%7WwkC{ns2
zrYtAdMkFgH(YY;@<QA*&n8xq4lH6i~xyb*;AtqS*T2s%SB)6DgHNj4{#RR|K_TI7X
z9#j%*RykDeq{L!^`}hZi^ckZ4KSU!B59sz&lU{uBPD0c~5rbH8fD4@9jvC+0PfYN;
zt;4#tK5)hFy)tR|{yybjnifi1WeS5c4`0L}RweUut8;N}F~KDk=qzr%xo|q%Vh+f!
zu<#II4q#XJP&xc_u2Tz!m|(1p>Y>G5bu7WI3$fq;m%|BL0?7qenZm}Sj}^juW?=bd
zhWgJ1Q^c!j6@CxIEZ@jb_6%77C)xZ~>ko+8H)8rXbpQ4Hkmg^TuFuBZEKTsQ{q8^$
z1HK#itm`%Z#w2jM0|JJqVC1vDQ>HZrY@jfmp{=<r6{a$w;vo`qmJj<P23Y%1ruCok
z@A8Ok1aZMwY=Nt+RvKe?Wdre>3t3WuG0efo0V=!j*88M5;}WfaVE#T#9`;OwfZ}F_
zW*?hWLbdsNBnSSiopEmAJNv|>;@67B0UlDgYqp;tUSB})@e6M6Rw)0BA4Shu_;-E=
zGyL8q9s~0117F1WeI)x@1v`nBzLjgjSv)ouDj*VokK?bcW#YC7=5;#ekQbcd>sdt)
zYgNJ1b(f_&2V0GW&Eb-VykN=fG;o~?)^JigiV_vZRn<{RX-o#Ya$2R6^S8?H^ixZ$
z_as!gTBX#Iv9p-{%tnqy7a3JXw;j+_tWqimt$zUk0RR66PgcGF000I_L_t&o0Hl7}
Ue&%k`$N&HU07*qoM6N<$f@&r?i2wiq

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/12.png b/frontend/public/types/small/12.png
new file mode 100644
index 0000000000000000000000000000000000000000..398f92050452828d07f4eab8bd4c584386bb4b83
GIT binary patch
literal 1614
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
M07*qoM6N<$f;@mI+5i9m

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/13.png b/frontend/public/types/small/13.png
new file mode 100644
index 0000000000000000000000000000000000000000..123567f2f6338907932781bc903b6eb8a3d1068d
GIT binary patch
literal 1132
zcmV-y1e5!TP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000CbNkl<ZcmeF1
zL2DC16o6lLI<h^sX<F(*5uqd$J%}J89z2L5R6?bt(o^x^#XrzLpufRWPtwxTQYd<D
zp->SE9>lhacvR7pdJwvFyNT~@GGRB_WH&prQ@c&sm)UvqX6AkKGCQ-=7=V9A>u}xP
zfaRkNa8N2K6USvkMnnaJU?BtVDgfiCa0dX>G+l<vhK$5&WHK;|bZG=dEZ^m_5`EF9
zPH_e!U8Km8q!`nOW}GEhm%Iz?4nvARv`5%6Oz?{CvDFT&8?dpzE^y<BsLr!o5zN~M
zzzcJ#n~v08;t_VR2O%&t4m>}Pj+wv)rV#uPjL~`DoEEksMPsEGx}&tcwvF-ptEO@`
zP>nc6zNs()g*ISbXomIj@cbM``~X;P!mCz(uLYRp#(@pc%UHPoJiiFMuo!L_(?U70
zn0q3Ho?+nmWpvN12`0Wv=tT-RI1?D{3YZt4gHr~d_^NiE0p-ArKJby3jjHJR3$qCR
z9S2}6dYur<M1fiV7_h9ov%DZNXbl69C@{aQ#!-9sX@lGGvk3rK=OQoQyfug8dseII
ze0~N_X|0x%PZ9vGIu-S)T(u7VwD%^#{<RWZ7*m@FaM+p~#aE}a1kUfJD5f3RC<pFj
z&28l=!P>i%t%{}e(!gT96=~4+vAu^D7JKB+7I<M9dgv82mb$PxsrtUkd_?{Y$ohE8
z*QV->Qec)XO8IAP_DR)`Qdt?WY;^6tnJE5B+sFeSqYo%-XbPZ*)?mzcbm19S=?y-S
zSF5$KE$~WJtL)QI)siEzUecPaVkwKlq72ynGz}zCIt{YX1+5I2AlxW_i2sx&X!GVb
zeBpRN%_Snzz}_{I?ybLDU~Oh_|0{M$o;4QeK7_-(1pMl2V1w0@k5ltLOq&PV3y0vf
zEasz&b?BBx9Tz~d2LQAemYLTC%?I)69|Npa73r^ZtA>T1=C!rn3zQ1oNv6ty8J<CT
zMZi&{ohX}&W1QzTv3DLrxwHWEY!D*ai<>G3Zs&;oV*%j(wRR@;GW*L6IQzBDNL?#`
zqZK%+yVl#jL}00Z{lNWqso!8Z{0amcT&PB?ANc%}K+m1h3Rv4$fR!zu1R6^ywF0y3
zJ%HYkCU*(e-komJC!x>^Y-H~@G3bP)&b0!&5vE>+?62W*j-JShF0}!(LHuVL?vq8w
zbWmsQJoL?1n!lnvsZ<-Vk$Y5UAXwUK*A*IXv;hmIlY}K7v;ossn)cHt6<LBM(E?0A
zYjA!pxF;gseKy^b6FNl;uv1#ar?H+>$*{rG0vzUqwsP#K3yg!H^b+r}B30UWjK;bV
zjxlJbs>+#+FrGr4svyZYTQ)KP>JN_K|NJ9Xqf&tv=-yd~a+z3-b9Z1HDsTho>E|+O
y1TVX6$VjaJ00030|3A0qBme*a21!IgR09A6aKtp@({h#o0000<MNUMnLSTZjz8Ovc

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/14.png b/frontend/public/types/small/14.png
new file mode 100644
index 0000000000000000000000000000000000000000..a747e4555dc62f7bd86fad3da9d176a33e036ac9
GIT binary patch
literal 1368
zcmV-e1*iInP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000FINkl<ZcmeEL
zO^6gn6n^&F%Sc})2!SNzoNSPIh!7AHcXLP}5RkoO5j-WQ1ait{;}9{d@sd*@IVC4S
z%)vzn1d>Bs6A=VGD2uCSQ9%&r(l~58v%c@m^mJ8sHC<gjJz(!F{cXK^|6kP>J6+=u
z|8y5m9(ua8dXdp*>@*DEbP*hxDtQog_6)A`WSJogz+;mha9RdOaP?SNWp+^V(CA0F
zg6OeE)6~fw17Sc{H+SakCbF`PGs3bA4gNLT;RbK6P@C<rEJK5T)xX1gxrBn&+iy^C
z{HOpjDK?R7UTp5B<_b#sptC})U%w{*%TEN5p;KIH7pF!T#QYBrWC%eATgFh6Vk(3|
z3drLC8<1z8q`o@g%o#+=1pb?^lD31-xqTHp#RDJs5+$)BXY#|_8Is*Sx**a&dVqr8
zzbWua%<x4_qM5ve<(zm{G##8;A;6S8{QevPCL3Y^<S^N*>M9e)*~6b>`=2!u{JSPZ
z^BRsW-=b(^1eQ$%5DU_6&LufHH)^1k$-j)wfiOab2u>ZB^J&{i^xr0hXa68-%?lty
zXVWlhfHZ2#*_P9YK5U{BpYjo-SnL8YnidY>+64mAj?e*Vecl{3fjoPW-kI?HV)lQk
zsTg*!`*DXbn(WZQR^$V}7`C-ze|2;wtR_+A=-L*AKdlS8%V&(cs`{%kc3NUa@yMmx
zCn38N-j0ZRJ*|h{pV#PF=N$F_x*_noA<^@J4lRNwDLZ1~c;rG(_DUYqMD0XVN^&N=
z{r^^`kpJFW8C_L{DW|EnZ5?OA(bYSd8gsAjr@5tfGkRAAav^6r-c&p7lQ(xJjD+Ej
z>lif5Egsb7RVJofrkZ7HI1uJDNkc?eH;JC<=eV`-8e6?F$}|Jt0snuEfn3my!L_6&
zXQwg7Rx81Qa4PSUrzu5^(+Sk7PPj&Xb)>FNc>gPP^kvRDfm#lP5i*2-gg<TVYiZ5(
zwjL>`5NBO87fzDXKOp4N0=Smc<O(!~=2197=Y>vr4#9W$N?Et|`AtaIxX(<vOf~H*
z440{l|Jc_*^3GU}h5o}Q)W3W?o>m@_3pvw?OtsTKd2{C-p8sGWlQX(`FQcofFy%DW
zwyon#nC5+cr`6AI>$AhOZ|wxleR@bRXa^*B&FZ~Wx--?rGGgL*<U&p@q{TH+TT|Lk
zJbPC=Pyg@&1>Y_U+UqCfg1|14#8+ZQ@yKNxYwPDsczc6CWm#0gO$DxLFy^_#R^+3`
z+SXQMV%eE+bY+u(I8o6k*E5}!j9Z>Q<2X{FCNP?o9vlecf9nw8>GSe}j~fe{%Gk+Z
z^>coY-WEWH&L$Q$a6y2Y$>(VFVH2JBI1o;PA;pd0ibn8Jhr-hra(CZfI!HdhQ3+T^
zjx?}?$kF9ol9R89Ko+&qzGdf?37ZPW4Wnt3J^0}S0VW$_0OT;)tLkbY95;og!!Lf0
zr-dVY5mV?`!J#_g)SZ-mz6KQCe=O&G+~Z!BRPYp!{K>L!I==8u48bK(ov=kQoIN1V
z6*eHxK1uyl2%}-yLH_0evI-D|P1V&YPmM50fLQOVUnu(RZvkZJV4D`|C!9Lty}J)6
zJby(1dD3UJXyNK7T-3po?YoOGFYb&mFG8cA*$y{)dzsv>+~M*smAq0f=`+9%UwTQK
zcWL{Qw`a#Y%aOZbmj~eLwKvY(VBvixjW2tfNF1Ej!4X_v00030{}&=i-T(jq21!Ig
aR09A``hIQqMf>{z0000<MNUMnLSTZi8I7C(

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/15.png b/frontend/public/types/small/15.png
new file mode 100644
index 0000000000000000000000000000000000000000..f1a0c59b9553d6c3dbda481e8915b432ef4c5a06
GIT binary patch
literal 1289
zcmV+k1@`)hP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000EONkl<ZcmeF0
zPm3Hy7{;IJRax*~PLi05ph!M|AV|WB$;n(oyqTjP!Alll#RW+&egu#47Re<!88Jiz
z!4I&Cf|r=!X*CIiB(t6O*VC1)t*P#w>gnzcon7Xcdh7jLPuF%=RZk}S`*16NZ|(Q|
z^4eBDHRL116mD=ds>%>@=~v}CYl`9mSUaXq1~)juHOnVjH+EwrYP9xz3a+p}vqwGV
zPOdY|EEqFQpIi1kku8WH5H2pmh`$D(;T2mSd<=bU2PZr<!LZ)G5dQqI1j4}#(I1>J
zL_c^%0?0#<^lS7^*uP)DdQ<xNkaXyU8IZp)o$uoht`9luBWWz>#!+eQ)p^Sa)15cl
zyrmz_V1)Y_etOoy2yfn!Zrq(8;7!wAG~2wTA5Ai0|9*?fbHk)UiOt*6&-ZpckT04}
zrM+l(&4m=J;p+;g#lK=D5~5qUUbr(O4O!$CDV7T1+O|r-Lnww;$!daPHPF?B)S6lo
z=7}4kwvrh?dqcYVj&$7CVStRzOtqh|4*lAI8e=lyRa-+rEGO&h%8KM;)hc}Snh||h
zI%{ii8272^uAA+Y`K+3+AB#-RFor&30LUq@5-IL!zH2s<mu*HD*-@?Ac9R(=Cap@E
zcW;C@i~#V5^NT&9PyZ>^J*<cUeq5Jw=Y*M|>o%*j{y@L6r!zpu6PmUP#Kv+|`KRcU
z3E$t5z`4Jr0)JUs;)nmFaCX>OoZgat+?F0Z-W^&KX*@UVzl5CU%KSxJ)@2L;zZ4`B
zcFAu&l)#-wlEZD&IXf-8t8f?P?p2=B_%wl>E<Y_bK~r3ny*1%j!Xq#3YS~5tr#Wti
zgsaD9OOn$q()u|U@o)0!lyFrs$gU4~BB~k(`gFqfPRf3|&{L45ge}3PWNYz6a_c1P
z@TysWHAx>oXAxLazpyuar4w#Q=*%~533BqY)b>XBSt99=<$$n%HKMZJoATi~O+C3Q
zaW1D{8#%F1Z!>(t_R*}l9Oafd-6Zm9a96i40N5nBifk;vvSj_7F84BR>lr?3n+$OH
zMaiM-O#;No>GIQ36JTqDWWq071i18;RN!rEOPqRL+O$JLn}Nh)$VJXeW&WZq>oNuq
zi>uSw@axR!wi~wop0pz%ZF=-9g4ktq%reb?cTU)qV0M7(FWM3V7WGf{>y0o2VWvK@
z*>>k(bXC9yUt+3!y3i*R=1dD>#kcLeJGF(=$F`lHul+Bb{6qTA&ctCHI&Aph>&GIK
zGmN3n7yxn#k_o%y9Q{H#TUGn*zY?!_IQ#=-bXERNAJ(DoY^iN)!W`~nNF6|vf2;<&
zrnoA5Yr<6toAm6y*pL9^CjYMO$%Lm9sSa}kw0l@3HjeCl;{oaOrgQe94HDGV!WOtU
zc9RJ=W~^|i+EX9=K3s9Zx>64|!#rqWPgh>!hHo~zA{WckJ7MlKhcEw;uGw15+6s`r
zHl4H6#s=A?u6M%WVA)aelM6r&?S1zLCk!Eo0^~tq#rB1;)!nzx;DotPeGJWfaKb|q
z4C@^b4zI}A`phsp-Ldhi;<J<4OZ6*N*3s!Fx{^(DT`*$L!z}N>HT&t<<hP0RzRmRa
zBPG5AH#oxe2><{9|Nr)0RRjP400v1!K~w_(=>RbwRzPo?00000NkvXXu0mjfsQG_Z

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/16.png b/frontend/public/types/small/16.png
new file mode 100644
index 0000000000000000000000000000000000000000..e8bb7569614715b7fe77367ad0ea4b5d51cc9de6
GIT binary patch
literal 1542
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

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/17.png b/frontend/public/types/small/17.png
new file mode 100644
index 0000000000000000000000000000000000000000..abe9ad82db665ffe26298230aed28d296a2dfa78
GIT binary patch
literal 1187
zcmV;U1YG-xP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000D7Nkl<ZcmeEK
z%}Z2K6hFNRhKd;IgUX2dA1rgSMyG-(2&rYzszpJIK&ghl@GEU0fkZ^$E;oiELT!Z7
zm<&TQLK1>-Qv|LvhRU(?yLI)>eRtmHSoG$}JMW%*K7Qx??(y-STEssm>+7o<8`1+T
z3oMHf6L1;;N2W>^6l>Mu1aD5Uhy&m?N*6et0!P7>l`OM^k(Wqc7Px|FW29*olWPQF
zNU=G(JFAk&iZRB7#W6(q7Ed_B!xhxx35#Qh@GYKjgoi7r#S<3C5aC;;O_*ZB5&mr!
z)Zz(?V{o`xw3?rTWogQ0Y2W@7eb4_8qWc}7j4nN2;-Us>>3$=KgVA#Exw_6bH&I<f
znzF4osjfcl8Xq(O*rEp4Ld~E!$O}xkI#o-1Qz>8wK||S=n?f(=4Vb`|n5bFJwdLOL
z8kq2f=4M+hOuKh@fX-iTqUr;+HosQ`a)ALXVCs3M+Imc>y??@M5|qjup=2^Cgm|w?
zazm1i9y?CiwsuOT(?!p_#n1ni&09$o*i=Cda)ALX6&rf;PhIqYeJNt4?EVQeQthFG
ze0RUb$Hr_y5BvK`6+OU|qsL(HwFkti5{Pi>P@Rfl)J=^aY{=MRO*T`mp6I0qJqLT=
zgo74Bv0c0OU?~!ltth}@6Qmd4gsZByI<&Ct`aCyBt2b|2Hn6sB=Qh3<U%CxB$SsaC
z@4WV+X8R_rCjXCmOxSH|(^FG!Atn7E-p|;4CYvp&gds>Tz9&30ZExDt&#oQYX>ER<
z3hb0J`*D`?`FxSUCjD5EgIrE?y}b6K0{JG4WG}CcngjM%*Soj&-wu<_l#9Bmc<Din
z|E&{$2uaPy`fAkvL19WaHQsZ(b178SrO}iled_A92Q>$J;0b#<;hH-87uiHEM`w<o
z5CR=dsA9@d{m@Yx0^P3!B8(#4Ev-a9p_LX)E1k*Ex<q103WWtyMfD*TIi(TV!!<>1
zR)buD38Pqddn*=4@$>hqmsl?~of-;7c>Ki}<(@xt!WX{Y!2z*4-Mqx07HT@-xcNd6
z26*SK8=gt;<$oBg+qfQSLZHLul`LwB#1J>%gbTF5@785W@ZZCC+d61$WJJ7Q^<EPE
z{7SiW{TlTRKcV}N`h-A-P5QCw`FL*w8#Pc%udm0u?R^t21=!QsMW)w`DSrFTDuS4N
zx(%4X*6l&}Wh0CR@R~Vu@&rx1%wZc!fFZDQ;jz?4%1T%Q_uT0u(QE+Xk|;1FUOCs$
zg!O0Y+t+!L(skoHoz5Jlj;mMb>EL7f@@ZB)=Xfrqzy=>;5Q`j{k5$JHOFlGVFAcnT
zJxRUy9?-?J=foG5{L;b-8+?fIf)zIAuMiH~WI6L=!sR?oVCm1G+a5V9De;6?@^t?>
zHa8GYm=7V+S3KcJkC(|+<b(@Myi%?LCOlLrY?<efRajhwe-u~3lndZ$4UdjavQoqB
z2U(&>9GnKh5nO)(00960BtZns00006Nkl<Z0|2DF3p?u2(x(6b002ovPDHLkV1i~X
BGtK}2

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/18.png b/frontend/public/types/small/18.png
new file mode 100644
index 0000000000000000000000000000000000000000..48032219e5d30f27517920ef6b5c1e8ec60676b1
GIT binary patch
literal 1227
zcmV;+1T_1JP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000DlNkl<ZcmeEL
zO{*M56ur}9je$1MyNG`wnrIXRe}D^DAsZ1?&|hHO_<<`I21F1SB8UjOQ%KC(ZB~Im
zJ|PJqkgSqj23{H_Q_M`xsdUZM^y`_auC5*){pL|;>ejut&aKlmJySg|5&R9$4&Qn5
z#gp^E1ekRU)O4O2AypC@v)Sx224?_s0nm4;QPUY}q}Bw+H&90>x=uHvl|oN<TIRC2
z(-cfBySqC|4wG23jXS~SGIaQ5x5FLYTqA9_!{#z{_+_`l9o}3cZMVbbGIaQ*{towW
zH43P=l%$`fa`fw?b8xKQRzippk$wpnF12zTb2yhE*FJ94lpYu?VAg0-UvR;$-c*u)
znu<E1q<^eG2gm8hsSw$ZnH+ili1_|7mvcCmAlE)_)<kVz&T?K-cKD75CkI}sM#N9+
zh5O{V#e8eKbF3XKSe?Xs&$4**6h)L%=_AVib>q6VU9MokG6D^O&bLum`bjGC3^M@Q
z^kL-RSd;Ldv6LAuc!|b;piU`q;XgA@=GFys*@II9A!u(K!GiTo9lTb%!=VICY6lA*
z-yVzjf8#8)@&0qMi1=BkX=?jr@5>4ntgnUdu)d^)*tZ%_hi*_iSTNV7uZM{qUm6QR
zj=Bh~Y3no+Jid;%wPo_`^B?kgrfbig8;p>eE@geeGfXd_uWH$N#h;4k%Ube3a~Xa)
z6upNz4(MZyIf7iUuWYQvno`s^{mSg>Kz+d_p8T(Tqv-q}<lI{Q_Sc9pr$oIpq*&Hk
zas~_<3ua9&gbSiwh4e$5uBrl#Z(R<#S;I*WHlqk;buK9XdvSl#XQ7TO$-d7-y{@cl
z-qUAd$eBAGgPi1cT#d|Vg1HKfuZ!WgxKG_f$t#EyNIy>{JC{lJRRP%aNf9?a(%CdP
z3>P>#j)ka#xhVAp&dLDoO5oriuOdRwhFR4%@>EUQ=#%gt0IIl?V~M06ZN6Wt=2rR0
zMb4^Ns4wac4^H^~C{Smyu{om(?!VTrqs1#XHfL19zQ06F9#4euQS8g<!^NDaf=Rdv
zllzl-X!>X>gmvgUs}ChMCsrR-Fuyb9fr!|zWAqd{`fVio|Ai>-E`dzb^8a!njBw0(
z;lwMr3@6N3t+`<5T+4Ir@Ry+szXQ$!==XlzlhM7A^xrG)Z=9DW5Al`;?AbZ}AT^JR
z`S1DCTyl}qoSAK%hRT}@4p@M`p@j&T+IY&=1ltcESE#jZtg#vof~^Qv&VLHVHx|#(
zuI=V{tUEZReZen@436VKQv8mk@8ZMjWvmx4cHuWU$VH^p*1lk8`T4*0BY5Gg@-3qA
zt*r>=;~|&M2YvP~tk34Su{P|j2<F1q?c}-`=f*_qf)kxc{zop8s}rGJUOat_F^6_J
z9(&xnU@n-aE%xi+le2EVZ)_`qeHYVu9t!LP<03?DcrFqbWpX!0yBv=_-tBPgD|*oQ
z4&@F{585uYxSlC@_+pC%4jT2vq}S`6!>SI$E>Ed7$$rkRz<3v;F92N>PE8l6ky@Vv
p00960V#eqs00006Nkl<Z0|01ePtk*2*slNp002ovPDHLkV1jLpSd#z%

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/2.png b/frontend/public/types/small/2.png
new file mode 100644
index 0000000000000000000000000000000000000000..4625a16485b63dbee6cf5a226916105f82947827
GIT binary patch
literal 1116
zcmV-i1f%<jP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000CLNkl<ZcmeF0
zOGp(_9LB${6}GEgw8)4^je-KjMN))|R*6Qq35swT1#JSUg<v7kqD?KTMQ&<gz9?u_
z5fy<D6d`J1t}3KW(JIPE-*@GB&y4pmbLKiX=8l}-J+J?HeCI!B=FFG@|CV~uM25)%
zSxOkvByCNUiVVdmG0x0!l3f7CNea>=ZR66aOb^v5W|Zh4jXnD5NVH6^xDE*x-s0ru
zGSwtD>&8@Yb{P`<lX^J8&do|oJ)B*J1pkEh@B&vu?B;o;{T|SIF~_z8fa(nOJkcGx
z1lVXq8@o<vwK44#t516jjj6F!CpeujK|_bJ&)IfTY$HXtT?1^4#U6@1aUVEx#Y^*f
zV*x1buU8wjHCA@tN^4AwZR$hD?t()O^uL&=f=ha011-e*T0k(n5^6RA^UR4w#;!qa
z)rU}@c0U?ZXb!@zE1gCrfK8%IQo)IGXC5)Bhx05-qKZ-vC(509#KiC6CF=k@^8~oD
z)63vVU}7XU)sZv4`YvFQ{H2Lt6eh$k*q+^w89TR}w#6=&cz>rK1HxMxI9FN0`KGy-
zFC8|1n}%b6@RtY7S6=YBNx-IyZ&)@LW&xY_+kglt&~N50c>Xuf%|3p81vYUA@tONj
zHq3g0&c~);$5CX@<2oA`!q}R)b_*bMjuxgoV4MkPx7zGF2Y$pG$`pl(QQmCEh;6C*
zA>Lpn9|DTS`&&7S&AW2xm{RV7HNlT#fJBOE3Rjtp>Zd4nxC>A$?D`6%qY19Sgrg1_
zU2vhjSE$^c@!T6bx183#FUGQ!^RK($dVbFm4SbA*!Jg{eJ7o8^_V^0i8k0rP{X*FN
z1WqHu2LOFN6rFsGgkgWTcY4~_+T(^H-uQ~4`-SlK5;*7X;lM-q47c)AuCFN0Z2W?o
z&jP1k<v8^Mu<2&L7#+N#gySm3FIW@Z-U=A%4g+-|XyiRZs2>L^BiLc0<!X`&F4sz~
zSwDKdf8r~m;{fg+*0IrX&`8bnyw)Sku@iT}dNGJo^fb@yqkLJ3AXaPSE?BK4T5m~8
zuLa*H0Ez79o0(#XjyO(u!TP_C&BOzsZylgZO_TATgH;xWFFaqryb27o0XO#n9|nLw
zKXce)D;=h9+J+a*MtOrSHNEfVtt?Tfv$Kwqef)B8=OFO(GBEqRL?gHA@(I@XIv4kI
z(xndfx*CKQNFs-MelFEU{g;9A3N{nc;a<YEzn{@thP(8hE`MDOLJMTt#1uyttbJ4n
zU8=9S9}VBQKUdlEyV#;d4VBw4Th0(&a5-laLtoV;m<yT;<{~6Iq#jPRdnv9eJ*+1q
zwO2)0l!y7=RTW|-a!i8znW_daOJjd#T`%5Ja0}t*eyEViL<MP*wiapq2LJ&7|1v;*
i)c^nh21!IgR09AIFZ$M0i9`AT0000<MNUMnLSTYlUJSPY

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/3.png b/frontend/public/types/small/3.png
new file mode 100644
index 0000000000000000000000000000000000000000..100cdbcad72e7c238abf66406315057a6286fdc5
GIT binary patch
literal 1191
zcmV;Y1X%ltP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000DBNkl<ZcmeF0
zT}u>E7{{L--4HftFDff93JPT_5+m`di!KU+1TlgT`UG9tO>|>nc;(mVMwCDiR4PI#
zqA2Wzbg>r-q9k%}mKL|2?fH*;^vp23J2U6Zw#}~0f6mL!Ip_J!b6!V-_-|xBbLP(c
z#^mj}jRLC}F%`fDMn)wAkyx?#tXQN$&ahqphf%r=uz?Y*hC#)fOczB^#<E=&E9eJo
z*%3~#rw8C!D8iUFH1@JB9sNWjdDrr06WDqU5xzA&9AW2LXiX1Wui+owHVZ_R)Dk0t
zP9BI8)VViKWU}9cs@Tp?R(Yb1eg@#+sRZ3RpCp8kU-Rl77?4+c5;S@-NeENz>`{p_
zz0O@iN>_{4C2$va)BaR~Zk*kM1hgB-)a$HUcE!BVfid2^2vAqL6P72h^(LtANSu<p
z%iI3`N1h-uOtPtb5&S}-16!@Q+|V^K1~DEX#F6LnsB2ab@1mlb0e9|?)1?zz6HX97
z7%LPM7UgRKJbW%m{S4d1&}dXefVH}Ez)G|OJI5=$+15%V6wpqq7+~Li&r_jD+p>P}
zanlYgw~a0=r&Z#BRq?E7J2YU7Ssh&%karg{TQjn-S|JP#7-Lq!F01J5N{--JE1~HY
z3NV%zuVXg%hsderZ+U`OUwzGK!rZAQB;Z{;E%=C``;I@#(9Apg4hq8q^8rF1)ww<z
z60m*0>)LWD6Oib(qdZP0rL7|104XnN>Ggc6RPaDMFuJoBbJ9QaG`^T20ePGc1(*3G
z<b)J;O*_0U^8JR&z|M8I?{J$Z8#?)bFwBPooPvf<CkX24h*S5W`1YEOd4PC~Pru2M
z4)4M+Wnfeyt7A`#oK%jZ7oayNS5&G%E3nt@Txz>wu=FuUV-GSFp9%7#X5e76vuwBk
zUHqhfNkTj7z&yq<&Y++k7Be;0-p8vsGB^1%RY~%`8F3h`B6Z+W>nZ-IR*F^(zWgc>
zwDciQ_nzmh4F;AaK#PJ$HJqwMUG|XleE>)utlpimg90c7Xc&WDfx|z9lht)TN*>!+
zy)KjuB5fY_(m0l!q24x<1yDdksAG*c7jv4{T-4{3I&dpj$@1Ez`DxoF@1rMPW@&aM
zO9fupglrFMNT>s|5yCqh^?j}K$GB<UQjRZVD9v%-75FTm1=wqwn3y0;QV?e48HTL|
zsIXBBaH`#Xl9^b}TC*^~AV5NZhJ+Ed43&X@^ExbdX)z`ruH~%#FV@bAlEy2>ZP@V2
zz~u~l8q!XwTzg*gm4Wde17~A6#5?oqC9MqX1bOl~oIS9!ouFxD;Dj_^;mnH7zdUAx
z8WvVLWnf_#V0C?!5OszTY6JcsVDSQ#f#KPDo}>UNOBp!J9};EBmDgij8Mq#yD%sRn
z!2Bkf!2A*-eKkECY4<W*LweX`@J6{zBNn6k)F6LgHB5?)F|Wyr`emBTYK&Y+z9`0G
zeM~>a#3n0hmkBm7g7q%|00960)f>Y500006Nkl<Z0{|NcSZ|O9LEQiV002ovPDHLk
FV1i%{Aoc(N

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/4.png b/frontend/public/types/small/4.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a67490ce4fa034f0605341cbc940e46657da5ec
GIT binary patch
literal 1446
zcmV;X1zGxuP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000GBNkl<ZcmeEL
zU1%It7(JQELLhBeNvW2IFu0@?3ME)tiPba#jY^}jZ$9)z$y13Ke<~HV2!$fPC=w9G
zA5f}R41yp=P;148&_YnuU`UA+LP{YRiowv$Zu*@`W_x#bcV_P1o!w>Abk5Fq@BMzx
znY(jmd&h$Oy>oDK?_0eWzIwa&LPoIGV8~D#HHuVNG_p<BWD{^$I@}8&=SDg#YNJMK
zwK7fCaZ%TZLPb{I;cBJ&!MyGUZpcgza%PDJmYFBb+Du|y<+lX8m!W|_jAuA27e_^U
z)kYp5Z3W_9)5BPBP1%=GJQl&74<zB??t8bEK`XwHiVEKMWCx!Az6%4dI5|B0+?_aj
zW*7QLI^t8Ik=a=A)}#&M@slZZ5A6V2q`HEZZ7m>n4{XPg_c~!W+j$W0svcG)s`b6#
z!0AqgrrMrr#nWS5p?+~X7z?IQLWd+TkdA*PeT@Z|Ltgg+)l{%8&r}b0?Q7HK(y~Qv
zb3sa0a_wOA09YnD+By;@;Wddh5?m9;hDD78Uz<-Gmal%ew%`nI{=4$m|G=t{Rw2#6
zW5aj$+)`0DTUjG$7j-h|v<zZ#{l7Fy5f92c`%7`LK{1sYGZIV^<0t2M(!%&D{TQtR
z0nWyPnOjG66tNxmv|`sl5<D}1C1EUhMcDiy_v7ayGnku@uj<A<n!C4UoCm-9qYq8t
z@1GWtS(SBQ1GaL{rVg~@$Y;AT_+}^iMjZG2%#VBF^t2-_egt!wz%mI|W9R=|#@LBD
zj6OOA&LZzqg0oMdJgff2?7o*BwB26#Y#%t`ptC3Zw|cRh{=SL{Ruj8I<vw+V%j~OT
zrR=`rPN^Zcf9Jv5+_ULNEP~4+<=h`UgLN~*33)E7Q18!TcBzZe(hLv<<I0*)bi5!S
zxT9`nn2TC4)yj<4jo?e?{tZ;b^&rq8;$Ynf<_wow$tji#VMI-VZm|ni_pE8#@;p_M
z&Sv0Y`s^Y;erg)$KUv7(w6v#xSVa1|_z42lL>ROp_*B(p@t+k;d~_v;tCyE6SRZB^
z02O6YrDRo|;nr;lbUu<q_wXGqXt%Z}sw8#2OzeUavJXuhdNqZi(|hpXiw?S;*x`cq
z&=-4f=(Q9Qmc0(&bDb}ARjku4|1);Mq}DG#8&d(lq`0BiFK;X88#iJXOrb=W5Q-+k
z{7lDV7tGm>O0pWW96_)xd~d@4Zm6KW#fGf_%@VFcnt6vhCbk;u+Oh@|)KK~$&-Hxd
zWiM!01w95G{7R<oOM>Ws$pN98jxhvtxTx@ky`@XY^QSm|1&O2bij<&DvV==k#C!fx
z&t4pJxRAw+xd}JFv{^f9KEI!q;GMlmu&7s@g$aMsxZ12ms2s>ir(URFZnYDA#~k#?
zJ`)S-6o}K8T*!&s$dL%E7b@6GkU9{&BjNeg;;h3hvf%IDsNG(2*hSRg7FqD6UzafY
z*c8T&O=I%YdCdQQEsRHO<E%{%<U&s57PVNYV0FKW_T`JqnD}r3Up_m7_YePuvEdn<
ze|H{p^7@2Wk&S8<x&3KxZ_3Zi>)$x5v9y_!U=7w{P1Ys{av>)b{`CHKs9=A9+Fo8t
zV?p+#r_Nl(x3VWqd?5SMD!zGr4l2f_twJ56t;W)3PJ%U9YguZl9CU3X!BL9M{JaDe
zv(i?fj?s>ivuqy;j9swQsH;O;FauP`TO#=%Z0XNLa|SB>p6VEF|G2-c)~2m{HOq<7
ztx;G0w*=SKbi_c0GtBMc7*f||%B-~pe2q==N3E8<mOUkUH^VGvsnr@jyZ@rKmfbJv
z#~M_4mfEP1T5kXV0RR6^_lxWR000I_L_t&o065{(ttqcaJ^%m!07*qoM6N<$f)jeh
A4FCWD

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/5.png b/frontend/public/types/small/5.png
new file mode 100644
index 0000000000000000000000000000000000000000..2c7328e72f0e8d188d7eea925f57e481bbc69cf9
GIT binary patch
literal 1423
zcmV;A1#tR_P)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000F<Nkl<ZcmeF0
z-)mcC7{{NTc96^d0aEN1s@sL&oP;{CSd9sV!B%nLE*&T%9kp{(2J=RQGOev+EyZCO
zC=QuyD1&O4Rzzs2&U!O?Q9^e!@wOKZ18q~E&udQi_B2a!a&k&{lJb7@zVGuszrOF&
zb8^lbNA&OVYx@p=di=>7myUO=D>fpAb-2M%sfxp(P}rE?BYXN(U^YPeC^ZLeaD=O~
zUMQSbc2Oj%w6-+E752xrh$B4FN*|-LAi^}aP;(lItYO|HY_=i7AI%C!xVVN|v%+Q@
zBK#4!!cRQiB{n(|y#iL(M8Iy_yTF9|KKM#(932`Lu-k~b`2;5HI(l6CCSl)|YE=sx
zI;F)_1{nLn>RMi}{k*h4*Zn^Z^+<aWtNFYiSEY1i*H$<^FeV1)#wA@uNd`WJfeGhk
zr==8p=CNbyfeB|v`lS?hjDgQUfeEi`z;ZbJ#=DY!Z_<FVs+VuAF%gjeSHwWCTdrMz
zyu5YARi~mxK!vBeQqoxj<7(aI?))qUzulHx5!Kq3(+iz&x!~p2vR5vM!T6A5izugG
z?b@y-TrB~=dZ82k`s}MRablkV;}*@Z9QNw^7U=i+UJJS$sD(~AP<A00HwlNZshci4
zkMv1OpPDi^mjy8He2E`CHdR6&1g`M5>rt<_77OjqbW5^-R5I6>B{?u6@fUhGNij~I
z88PIO?~Lj*bGO*GW~|zF44npQP9W<t#;E}%d2LaSUbrfqFIN6>108fTYJ+VV*MXMm
zO1LAD5|Sn9cp_bMV%XvXU-+!qQ3=Dk5GJWpTA3bw!y(xcacUCb3!nHVMomsUM!pH#
z*Hdrt2Glz=DY010z&r=H7N3XdJpn6Dv9aL#B?dP-V%j-W^yg9VO&EJ_HUy_<zLOwk
z?XhL|9sq>3i8WQ27k=J>>BCCwQGSUTB(`tD`gSVduAX#!$IJi6{gV52T4YUA1lrZL
z;Zs43ti~cHvB?4Wjpg_?@apI0rX@SpZ(a@<d)I@`@yW{vF&GE+R}<mXz(v`gcx78`
zlA1VqP_mZ>B{!elwqC6OTYMN_x|v=(Vv~bcUd`M$VS>dINl6cUB$;aq67PEWsOSc?
z6aMr2FI{oP9$iE75gSG<ViKDi$fcrFkAiQ)f6f0W_ZMa*7Hcy|4UU`V<O46iF0r;Y
z$^Vnzg4wIX`tPn)AJeMOY1Q@ISuEsKmesY169)xduRT8T&9gYM+_>aGF5>ggH(~r|
zxmhW=V=@OlZ(o#CR~95SI4b+~3=5eJn-~NEB<WeRbs6IWU--l~GC)i>K6AgQi7-Lj
zz*BD>l6!yLMr080N=tfhOsl?V$Qz;O1A@RKHd9Dut}hxN_%cHMAO^7@OKcU@)M_Sd
zN1OR<NJxg>mXk2ar*s42C93Y~vW5=2*tl|fe3tUfS}pKR*n0;3U}Z&I-2LernbN!T
zFPG2B{oiLK)*92Z<-Ek7?UvN(Vaa^4Aid{5mjlU@28@xVbPXNRvuA9u#RtCd>H4Sl
z#`jCwH{ogm@O^2%qV(|YmfnzTn~vvur04X928``BbSKmXTYT7S^%{pl*iLRq@4}zx
z9T+l8b3e#Et-QO=7#VBmEUB)$7FHiRVK;He+!{M8Gn4Pj)SE{P7$alN)eF0?J7MoN
zW}hiDez5YlUh@xu%!b##-WyPN!u3wD-u@bku<l-yux>)6TeHHEF0Ybn$O;#fc%!s}
zvmqPbHVRv~IxUVftb`k($_2POXKpOtahyE~Wq&iG#0zkPBV7Lj00960%U+Na00006
dNkl<Z0|3UKxzjn;v*rK*002ovPDHLkV1g{Ztpor7

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/6.png b/frontend/public/types/small/6.png
new file mode 100644
index 0000000000000000000000000000000000000000..1461096fa98ceef9dffb7bbc4b9de3b197c7d716
GIT binary patch
literal 1308
zcmV+%1>^dOP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000EhNkl<ZcmeF0
z&x>1C6vt0qBpY#|Ge*axl~U*!I~%LD{-_FFX*Z683w7n*zd!`3g7_D>cV|_cQG}wK
zf>2wc;(*kt9q6W=m@;(eq7>TDy!3qD^geFV*G%raH-)|=yl?Kg=ic)@=lgE%OY&YM
z`ugdcV=t_H_xTSi-+tCr^a_S9+R&&{CBlfKQd4@pC3PexK-(f65!%p*)+jDVAFH||
z3RPKsN1_$=i+%1QcY3`=Ru&XlrmZcSB(aI`so>-^6!>kr!UbO3MA~$PlhaV(H~$rm
zyCN3iZb!QvnXB!SgD)+~v-{t00x`rI9wqDJ_gxEr!5J0Qb}z`GSKkxbeJa=m#F*F&
zYHwF?!KPr}%El!+sNiaCK3Q2`u_hkTaGHLI)?Ki*U)f)AuPb0~S3_QT?E~+cPON+(
zVD*n>X}8YFfrCe-uH2P!MF2Vb;FeL`1!p7(^)ZI}=sTb21+S5aMfAy^zrr01-hxAl
zHL9L_aVZgP`kVh>km^%=6Bu9K)=Mz^i+z?i`LMVw(F@PNDdZd$x6_!jVD>8rwP%MF
zn23J5A@Y#UQe53?C)WvbQv=Wurz3KjeP{AGKE`*b?`jg!H5IKRm-Qm1P4Z1Z4cM-5
z7EGdXeT?r_yb;Y++svT`YBBv$TW7)bT??af2c3uLLBc$>I19dhZEG;^ee3g;Whcv1
zi?d)m;e%*T1wV+Z=2CNx6)wB*k9n?pEja{_S;Ls=r-Da4!CRXbW&Ph%qfQStkDTPr
zOX$ABaYy9V4VihYD(BaJOa8{?P3{`UFD-JCn;L{#97)^-4<z6}D}@ZWgLlb6E<a)k
za|0kmAv*~PmBVX==bw2wt&`g_X(zB@bK5!dq;VGf@FS0=d9XV-yJB$a<k#s~C<9Kz
zPfJe2ZQI7TQ|l~v<I=g5vsT~!pK2Ue^vd1*{kZ9Rw{XE}6WKZKTI@N)Y-ho(jWubW
zSxz};tGiPhqjmADP$;$!;DF2KuyauZwb<jM*v^6>B@qd+XCChtjE_Po7&{M$g<~+*
z<RUjU433Y|cNQF#$^zQ0^Kx2Ode5E%dcU}wA}UpMydv#O>%#sM#}_fg8lFnIEC%Ev
zC%LHsh~q1AoZmNnQ$?R${Y9!z?(OrN4*So(!W#d*TILdyHBJt4kuz(2RG*h%l5AeS
zAb^7CX8|GnaL5|N#~5?4vj8_aK-Rd6&s(sa?8sXm$^8DqVqaX$I6oW^X8NYZ$C&Ax
z77n=JG`<k6yWmLwgIeh5^I)){w^09HJt2+85jp(&hqCzYr;<GDeL}ywZfU8C)zize
z{$Eo&+Xps2(J?TmbBQ4q4!Gcin;bx_+=;zSHS)W=;33rPujZNK>5N)^LAcw<%{PEO
zGh0u`vGFkmu!%7f;DXciL$pB!Q&4L|zlSZ+_zdRshWgBG&2$ADU+S<7#KL8{f|$Vt
zQx%1pg4v@s_!!%;$FS{KxI)8U@W7sm^f@kQx7X!Qea72telIrG{`pmG*kjnl5DN!L
z_Nkr2^9=Y4_AKCjhfkJZJ-buEdJ+nKOjo$j%d6rha)o0RJ}E~WNvZVXq^Lz}6m{b-
zRq!ONa*WpK?e~xU6~(<ns-8P@MHC*R4UK5M4FCZD|CxhHG5`Po21!IgR09A{bHPgx
SO^X`<0000<MNUMnLSTX#V}_gn

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/7.png b/frontend/public/types/small/7.png
new file mode 100644
index 0000000000000000000000000000000000000000..0cb98aa3fb69dbfcae2639b1c7c5b0c45cf35c4c
GIT binary patch
literal 1482
zcmV;*1vUDKP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000GlNkl<ZcmeEM
zO=w(I6h4`DF~yDBP;i>`F}iUPh!reGnl1)P0;Q-Rs0f9+NZh!SstaAXRkVu)BD4yw
zT16!og@FcJuqy71DU*z;#L$J%g@FM(6VG?w+?n&<yYJ_|_ojt6GkM?KbI(2JJNKJA
zcis;v5x+jZGCuv`<?*W@T^?^U4hn`gv_T_Fr4o$J0sS;abdDYB1K_quM+w@X5n4;_
z1A2?q6;UY5@*GMl)SvaZ3*6zAK8uwF3M|tjtu#zxmGY5b^)VFqZM4D#UR)(@w8H9R
zDDYeEEBs%ZNa7Hm?KK`hHb>J>E_eW+9!D#4VdwqX=PuYkL8mfDwV5Sac;#<ym+6_Q
ziyqWwmb+t1gjj!m-u;0IuJUTmpITBPoyt7Ly$}QO$f<HJ4d^ux!Bw8{{HbNC9*Y-B
zzE_oV+}t@D#4EF4>^q6s>5GI3XPqoKz$Lk1XXK^Kg5?Ap-mg>qqa=M<Y;b`y3x_{9
zSHakW{sLM1d2{9}xUut1R(*l|yg97}V;@P#8Lq9rPK}*w>}m<HX?65-!39p4E^EV<
zV@Ygl!EvN(>x%@$#l?+-1Bi>W9nU1#dF%`=ytGYdW#PuoDqZ?)GL>+ML@qcaCu*2#
z$(ST|Cc(9npQsvW0o4(2nDok*Ckd$EdYhWNb-H(NgZB4#6=1`MF~k7K5fsV<H-L_A
zVW&X~!DX&fCa1zrbq}-Mg)@1MUVHvm_IocFTK_f)*x3A(R_ia*m9J0J%GIY7V8e$o
z!~jg*J8();oXkz#I%rjG;@S$m@I*!m!7guY#$8>v=e|F3WL#ZJ;@TOLb-niQ$OQ*Z
zN#OJ|m}>iD!uqKNhY`Z>@U=50t8N(hYmfa0e-sddudB-88wzkl#it!hCD^H)NnEcd
z#PH(=5{%==2x4KwmjpI*kbEfwx9E7KCOM*QvG<No@V@s&E1!t*4TpB!IpCZf8e$ws
zA=t>1$hq~`Y9P+!3k2opc%XtCcY=aVz8v)hs8R_|^Mev4ENUz;<E|sk9FUqyFx}_9
zqXCu#*!q)K_r4*JeQL}wWOV7eXpI5U&UAvKIgO*HD<~ZpHKt?oX(`<U0Nbx%5<y8~
zq-fhY=-dag!drYZp$mq!Nn*lsZT!}PTfFBsupbjv!41NG>mO?Io&)Aje@@SycwYfF
zd;nq)n~;_;2h1gDypFRLtP^e8=I(VBK6~O_nm9U3Q%{^%fDIo8bqwr5B9-9V3BICw
z(o)F8(dV?g*Giv^?FEDwHgk{^sRV-{X+bHXe(OE@?T;08UyS=;*zkc5kg@28A!%(>
zzO~@;VIts%n~T)qzaS}}qm|!n_wHU-@yLOF^XGTeeKGEXVZ(<p05*wS*Y;LGP1Hs_
z;2n+cSqqkw%{$-8Zot01-G7Sd@H6W`K-VG1WKMV3)5O*E1RFY;1lMo8X`t-8Hk*CH
z`u_O*3%`?uzW>!(GDrJl8&^}tn(R!1L3r)^7tt7@S4*y-F_4`)M(40Aa75J#1cx}R
z1-B1~B=+w9$WJFP^y&FLO^n9&DwWGey8aHg?w&4}A7y_Z?mopBV)*xgbC3%T1<u5=
zwtj(7OV);sF&kJ5Hjy`WzV(XcAbFpQ%SJqU#Uoe~FoqaTQ-{oj17cAFc2?vf7?Z$+
zFfrJG=~@?}OhCMZ%mpX7<#-l5H^G<$CU)tINm{$Hh;Al;16<(DMC41(EExO9k4?T3
z^ZWY!7XJoF5ch)!<M7Sjx|><Bb;XCAFkFK9!yXCd524V<XoU;Cyew`gSJ=IXW%WaF
zbV__L@YN6qRT81KbZCq|;NCE-atB&VZ@jwqOKFUrX7%`gqaq6LKpQkd>;C`%0RR7j
k6wRjq000I_L_t&o01l7oA%6iF8vp<R07*qoM6N<$f@tc<mjD0&

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/8.png b/frontend/public/types/small/8.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fb59c7f4aa398d12c738ed27582017658a44af5
GIT binary patch
literal 1311
zcmV+)1>pLLP)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000EkNkl<ZcmeEL
zPiPZa82>tvCE%X-;=zMZ_Yl$z$nK$8w}M?f$kG**fCvk{2xY~BC_)q}m7)k0@!&BK
z3b`nv;8E17pyU!6(5rV39y|=#q<+8GPJHv`-<!;vK_;p5%X{zpe&3(pyqS)fTEsug
zbIXU$A31-Y(PwNI4A68R8d)k?m~2mNzv0CRhByH{7U_Vd6VM2)7Edm-Iv9B<^dYoD
z=t7}odc`e3FyJ*8cV&%}Sh0;0!QwO&_+zre1>RgCZL-7SG!*#5_zn*S1Cmi9@4vm}
zy(GiyEqP**$Mm_kOeg%&^W`GAGFzd>#RjcDTBX$|3fKl8IF!Rrrh=!d(?Vq9QiCe>
zN~j$8z`+SQ@Y{h<o(V^K!2@nXLiv|60mqk))6$(KD*w!D3C#8!s{h>WbA(vr06gUM
z3ra6Ipoya=kJ9|f`2dfe39-nb$4<sFE*OoX;bd+2*~o!heos1!QNfkpE2(x?l>*TR
z4;@s^sn)3lmwqadi__OmdzxvlwW+nzBFAxt@DO+*`@lsEn}^5Qn`f!ChimL&=ooQg
zjTq+(Qy(j6ytmmS`;|@2f0{nNY5)gZ#2{Ao&m5kSm#OB)1mm$1)k)_@C)6F~Ls0c_
z6@w8N6CBqKb}x(*<wMMmwZmIPGqW>PF7xx2fd+x<Ebj{YNW%Ng_i%Y2Y!U~25$j>?
z)PPShCte!a;p!ZVQ%VQz%Eu2M6&6vDEhsjqhA)|h!HD3nI%k?^!d#*DQDQ=q1voMl
zjGe0gTOXF)|LgwY+?~iaa1rDBvKV6pmz3|bU!AWc!`X6Zu*LtGcJD)_%Z2|JX!+i<
zKyALJc!^+h{owityLnLqwdC5EtNr=n6@#U$wU)KH8r6286R>Z39|2)p_<%6KY<KHo
zl<m6n#DW)B7HRR?cieq?SGQJb9%{+8(M!^#i3HbA)v0zQ;IjP7Z%f)p9KRM&1HGW9
zxLDbrNbs@$juGwQ@F=j`=n++meWIrX1ub1}<8ninnmbRwH`0FrQ28_b6;196m4Zon
z)81j!us8Xe&#5ML*2BLDfR_i*Lz8<!Pf6;<3hod31Z-U0ppEMr<a~0d`?yQJ=RIGY
z-V49YM@nc2%8A<O0llCn^oAaRxb(4t-30bq+ntK>-LrRMbU)Bod$moSHFLX<@5RW8
z+-@C=YHhVQaKfN1SWSSl++JxDnn6<lIJm?B%+mlb0s!PdZa~yR&48;5JROWI7|Dfb
z-c>Y$wF?uwjNNtfVMGlfI)zx|i5Cop1iqumgDqZ3aNkk2uI{|cLXjkJzBtsn(jsy=
ziqV&Hi@CS@&T~fUkE0?FP$LPWI_;M>jdE#=IDQW{YTdZF%mkw_E^S=)nCk%C&drVv
zb!1Mag3*=u#inuJK`gk4$r8o|^BwKE%g{W8bf0v|`OG&Z3=&|24;+|-;$b%h<ATE)
z>)h%PfZw(*2Xoi}*Ov8|n_vjBU)zL7%Z0x$5P&&s@a2VE1?MFys!ryD)q7GrOXX*)
z=Z^13^=ibIxnLt*8cZ@?g89Tv1oKHK^fB4tLT@jN8_ON$KMb+-@i+$9;fLd)Rj7Pu
zO>IxD@pK$^c>t}}`m^;ePyS%h4;V!h4owfB5n8_i00960P|?0!00006Nkl<Z0{{Sm
Vo13A#y`2C6002ovPDHLkV1g7!gV+E7

literal 0
HcmV?d00001

diff --git a/frontend/public/types/small/9.png b/frontend/public/types/small/9.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6b3e9dfede41cb557f7b50ae506fee4914f9041
GIT binary patch
literal 1651
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

literal 0
HcmV?d00001

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 0415d99..8a0e36e 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
+import AppShell from './components/AppShell.vue';
 import { api, getAuthToken, onAuthTokenChange, setAuthToken, type AuthUser } from './services/api';
 
 const navItems = [
@@ -54,31 +55,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="app-shell">
-    <header class="topbar">
-      <div class="topbar-main">
-        <RouterLink class="brand" to="/pokemon">Pokopia Wiki</RouterLink>
-        <nav class="nav-tabs" aria-label="主导航">
-          <RouterLink v-for="item in navItems" :key="item.to" :to="item.to">
-            {{ item.label }}
-          </RouterLink>
-        </nav>
-      </div>
-
-      <div class="auth-actions">
-        <template v-if="currentUser">
-          <span class="auth-user">{{ currentUser.displayName || currentUser.email }}</span>
-          <button class="plain-button" type="button" @click="logout">退出</button>
-        </template>
-        <template v-else>
-          <RouterLink to="/login">登录</RouterLink>
-          <RouterLink to="/register">注册</RouterLink>
-        </template>
-      </div>
-    </header>
-
-    <main class="page">
-      <RouterView />
-    </main>
-  </div>
+  <AppShell :current-user="currentUser" :nav-items="navItems" @logout="logout">
+    <RouterView />
+  </AppShell>
 </template>
diff --git a/frontend/src/components/AppShell.vue b/frontend/src/components/AppShell.vue
new file mode 100644
index 0000000..1fd82d1
--- /dev/null
+++ b/frontend/src/components/AppShell.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import type { AuthUser } from '../services/api';
+import PokeBallMark from './PokeBallMark.vue';
+
+defineProps<{
+  currentUser: AuthUser | null;
+  navItems: Array<{ label: string; to: string }>;
+}>();
+
+defineEmits<{
+  logout: [];
+}>();
+</script>
+
+<template>
+  <div class="app-shell">
+    <header class="site-header">
+      <div class="container top-nav">
+        <RouterLink class="brand-lockup" to="/pokemon" aria-label="Pokopia Wiki">
+          <PokeBallMark size="42px" />
+          <span>
+            <span class="pokemon-word">Pokopia</span>
+            <span class="brand-subtitle">Community Wiki</span>
+          </span>
+        </RouterLink>
+
+        <nav class="nav-links" aria-label="主导航">
+          <RouterLink v-for="item in navItems" :key="item.to" :to="item.to">
+            {{ item.label }}
+          </RouterLink>
+        </nav>
+
+        <div class="auth-actions">
+          <template v-if="currentUser">
+            <span class="auth-user">{{ currentUser.displayName || currentUser.email }}</span>
+            <button class="ui-button ui-button--ghost ui-button--small" type="button" @click="$emit('logout')">退出</button>
+          </template>
+          <template v-else>
+            <RouterLink class="ui-button ui-button--ghost ui-button--small" to="/login">登录</RouterLink>
+            <RouterLink class="ui-button ui-button--primary ui-button--small" to="/register">注册</RouterLink>
+          </template>
+        </div>
+      </div>
+    </header>
+
+    <main class="page">
+      <slot></slot>
+    </main>
+  </div>
+</template>
diff --git a/frontend/src/components/DetailSection.vue b/frontend/src/components/DetailSection.vue
new file mode 100644
index 0000000..cfe9dd8
--- /dev/null
+++ b/frontend/src/components/DetailSection.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+}>();
+</script>
+
+<template>
+  <section class="detail-section">
+    <div class="detail-section__header">
+      <h2>{{ title }}</h2>
+      <slot name="actions"></slot>
+    </div>
+    <div class="detail-section__body">
+      <slot></slot>
+    </div>
+  </section>
+</template>
diff --git a/frontend/src/components/EntityCard.vue b/frontend/src/components/EntityCard.vue
new file mode 100644
index 0000000..6c76a49
--- /dev/null
+++ b/frontend/src/components/EntityCard.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import PokeBallMark from './PokeBallMark.vue';
+
+defineProps<{
+  title: string;
+  subtitle?: string;
+  to?: string;
+  marker?: string;
+}>();
+</script>
+
+<template>
+  <RouterLink v-if="to" class="entity-card entity-card--link" :to="to">
+    <span class="entity-card__mark">
+      <PokeBallMark v-if="!marker" size="30px" />
+      <span v-else>{{ marker }}</span>
+    </span>
+    <div class="entity-card__content">
+      <span class="entity-card__title">{{ title }}</span>
+      <span v-if="subtitle" class="entity-card__subtitle">{{ subtitle }}</span>
+      <slot></slot>
+    </div>
+  </RouterLink>
+
+  <article v-else class="entity-card">
+    <span class="entity-card__mark">
+      <PokeBallMark v-if="!marker" size="30px" />
+      <span v-else>{{ marker }}</span>
+    </span>
+    <div class="entity-card__content">
+      <span class="entity-card__title">{{ title }}</span>
+      <span v-if="subtitle" class="entity-card__subtitle">{{ subtitle }}</span>
+      <slot></slot>
+    </div>
+  </article>
+</template>
diff --git a/frontend/src/components/FilterPanel.vue b/frontend/src/components/FilterPanel.vue
new file mode 100644
index 0000000..ea5d58d
--- /dev/null
+++ b/frontend/src/components/FilterPanel.vue
@@ -0,0 +1,5 @@
+<template>
+  <section class="filter-panel" aria-label="筛选">
+    <slot></slot>
+  </section>
+</template>
diff --git a/frontend/src/components/PageHeader.vue b/frontend/src/components/PageHeader.vue
new file mode 100644
index 0000000..20e800f
--- /dev/null
+++ b/frontend/src/components/PageHeader.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  subtitle?: string;
+}>();
+</script>
+
+<template>
+  <div class="page-header">
+    <div class="page-header__copy">
+      <span class="page-kicker">
+        <slot name="kicker">Pokopia Wiki</slot>
+      </span>
+      <h1 class="page-title">{{ title }}</h1>
+      <p v-if="subtitle" class="page-subtitle">{{ subtitle }}</p>
+      <slot name="meta"></slot>
+    </div>
+    <div v-if="$slots.actions" class="page-header__actions">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/PokeBallMark.vue b/frontend/src/components/PokeBallMark.vue
new file mode 100644
index 0000000..f94a169
--- /dev/null
+++ b/frontend/src/components/PokeBallMark.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    size?: string;
+  }>(),
+  {
+    size: '34px'
+  }
+);
+</script>
+
+<template>
+  <span class="pokeball-mark" :style="{ '--ball-size': size }" aria-hidden="true"></span>
+</template>
diff --git a/frontend/src/components/StatusMessage.vue b/frontend/src/components/StatusMessage.vue
new file mode 100644
index 0000000..27affd9
--- /dev/null
+++ b/frontend/src/components/StatusMessage.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'info' | 'success' | 'warning' | 'danger';
+    duration?: number;
+  }>(),
+  {
+    variant: 'info',
+    duration: 3800
+  }
+);
+
+const visible = ref(true);
+let timer: number | null = null;
+
+function clearTimer() {
+  if (!timer) return;
+  window.clearTimeout(timer);
+  timer = null;
+}
+
+function scheduleDismiss() {
+  visible.value = true;
+  clearTimer();
+  if (props.duration <= 0) return;
+
+  timer = window.setTimeout(() => {
+    visible.value = false;
+  }, props.duration);
+}
+
+onMounted(scheduleDismiss);
+onBeforeUnmount(clearTimer);
+watch(() => props.duration, scheduleDismiss);
+</script>
+
+<template>
+  <p class="status-message" :class="[`status-message--${variant}`, { 'status-message--hidden': !visible }]">
+    <slot></slot>
+  </p>
+</template>
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index d9732f0..e861d69 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -1,8 +1,42 @@
 :root {
-  color: #17211b;
-  background: #f6f4ee;
-  font-family:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  color-scheme: light;
+  --pokemon-yellow: #ffcb05;
+  --pokemon-yellow-soft: #ffe46b;
+  --pokemon-blue: #2a75bb;
+  --pokemon-blue-deep: #003a70;
+  --pokemon-red: #ee1515;
+  --pokemon-red-deep: #cc0000;
+  --pokeball-black: #202124;
+  --pokeball-white: #f7f8fb;
+  --bg: #f2f5fa;
+  --bg-alt: #eaf1fb;
+  --surface: #ffffff;
+  --surface-raised: #ffffff;
+  --surface-soft: #f8fafd;
+  --ink: #151923;
+  --ink-soft: #354052;
+  --muted: #687487;
+  --line: #d8deea;
+  --line-strong: #1f2a3b;
+  --focus: #0b63ce;
+  --success: #2eb872;
+  --warning: #ffb800;
+  --danger: #df2f2f;
+  --radius-card: 8px;
+  --radius-control: 8px;
+  --radius-small: 6px;
+  --shadow-control: 0 3px 0 var(--line-strong);
+  --shadow-soft: 0 8px 22px rgba(23, 35, 54, 0.09);
+  --shadow-raised: 0 14px 32px rgba(23, 35, 54, 0.13);
+  --container: 1240px;
+  --font-sans:
+    Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei",
+    sans-serif;
+  --font-display: "Arial Rounded MT Bold", "Nunito", "Avenir Next Rounded", var(--font-sans);
+
+  color: var(--ink);
+  background: var(--bg);
+  font-family: var(--font-sans);
   font-synthesis: none;
   text-rendering: optimizeLegibility;
 }
@@ -11,9 +45,25 @@
   box-sizing: border-box;
 }
 
+html {
+  scroll-behavior: smooth;
+  scrollbar-gutter: stable;
+}
+
+@supports not (scrollbar-gutter: stable) {
+  html {
+    overflow-y: scroll;
+  }
+}
+
 body {
   min-width: 320px;
   margin: 0;
+  color: var(--ink);
+  background:
+    linear-gradient(90deg, rgba(42, 117, 187, 0.08) 1px, transparent 1px) 0 0 / 32px 32px,
+    linear-gradient(rgba(42, 117, 187, 0.08) 1px, transparent 1px) 0 0 / 32px 32px,
+    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
 }
 
 a {
@@ -23,97 +73,139 @@ a {
 
 button,
 input,
-select {
+select,
+textarea {
   font: inherit;
 }
 
+button {
+  border: 0;
+}
+
+img,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 3px;
+}
+
 .app-shell {
   min-height: 100vh;
 }
 
-.topbar {
+.container {
+  width: min(100%, var(--container));
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.site-header {
   position: sticky;
   top: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 24px;
-  padding: 16px clamp(16px, 4vw, 48px);
-  border-bottom: 1px solid #d7d2c4;
-  background: rgba(246, 244, 238, 0.94);
-  backdrop-filter: blur(12px);
+  z-index: 50;
+  border-bottom: 1px solid rgba(31, 42, 59, 0.12);
+  background: color-mix(in srgb, var(--surface) 88%, transparent);
+  backdrop-filter: blur(18px);
 }
 
-.topbar-main {
-  display: flex;
+.top-nav {
+  min-height: 70px;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
-  gap: 24px;
-  min-width: 0;
+  gap: 22px;
 }
 
-.brand {
-  flex: 0 0 auto;
-  font-size: 20px;
+.brand-lockup {
+  min-width: 216px;
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.pokemon-word {
+  display: inline-block;
+  color: var(--pokemon-yellow);
+  font-family: var(--font-display);
+  font-size: 28px;
+  font-weight: 900;
+  line-height: 0.9;
+  -webkit-text-stroke: 2px var(--pokemon-blue-deep);
+  text-shadow: 2px 3px 0 var(--pokemon-blue);
+}
+
+.brand-subtitle {
+  display: block;
+  margin-top: 2px;
+  color: var(--muted);
+  font-size: 12px;
   font-weight: 800;
-  color: #1d3b2b;
+  text-transform: uppercase;
 }
 
-.nav-tabs {
+.nav-links {
   display: flex;
-  gap: 8px;
+  justify-content: center;
+  gap: 4px;
   overflow-x: auto;
 }
 
-.nav-tabs a {
-  min-width: max-content;
-  padding: 8px 12px;
-  border-radius: 8px;
-  color: #4e5c52;
-  font-weight: 700;
+.nav-links a {
+  min-height: 38px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 10px;
+  border-radius: var(--radius-control);
+  color: var(--ink-soft);
+  font-size: 14px;
+  font-weight: 850;
+  white-space: nowrap;
 }
 
-.nav-tabs a.router-link-active {
-  background: #1f6f50;
+.nav-links a:hover {
+  background: rgba(255, 203, 5, 0.24);
+  color: var(--ink);
+}
+
+.nav-links a.router-link-active {
+  background: var(--pokemon-blue);
   color: #ffffff;
 }
 
 .auth-actions {
   display: flex;
   align-items: center;
+  justify-content: flex-end;
   gap: 8px;
-  flex: 0 0 auto;
-}
-
-.auth-actions a,
-.auth-actions .plain-button {
-  min-height: 36px;
-  padding: 7px 12px;
-  border: 1px solid #c7c0b2;
-  border-radius: 8px;
-  background: #fffdfa;
-  color: #4e5c52;
-  font-weight: 800;
-}
-
-.auth-actions a.router-link-active {
-  border-color: #1f6f50;
-  color: #1f5c40;
 }
 
 .auth-user {
   max-width: 180px;
   overflow: hidden;
-  color: #566156;
-  font-weight: 800;
+  color: var(--ink-soft);
+  font-size: 14px;
+  font-weight: 850;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .page {
-  width: min(1180px, calc(100% - 32px));
+  position: relative;
+  --page-padding-x: 24px;
+  width: min(100%, var(--container));
   margin: 0 auto;
-  padding: 28px 0 56px;
+  padding: 30px var(--page-padding-x) 58px;
+}
+
+.page-stack {
+  position: relative;
+  display: grid;
+  gap: 18px;
 }
 
 .page-header {
@@ -121,51 +213,233 @@ select {
   align-items: end;
   justify-content: space-between;
   gap: 16px;
-  margin-bottom: 20px;
+}
+
+.page-header__copy {
+  display: grid;
+  gap: 8px;
+  min-width: 0;
+}
+
+.page-header__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.page-kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  width: fit-content;
+  color: var(--pokemon-blue);
+  font-size: 13px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.page-kicker::before {
+  content: "";
+  width: 18px;
+  height: 18px;
+  border: 3px solid var(--line-strong);
+  border-radius: 50%;
+  background:
+    linear-gradient(to bottom, var(--pokemon-red) 0 44%, var(--line-strong) 44% 56%, var(--surface) 56% 100%);
 }
 
 .page-title {
   margin: 0;
-  font-size: clamp(28px, 4vw, 40px);
-  line-height: 1.1;
+  color: var(--ink);
+  font-family: var(--font-display);
+  font-size: 42px;
+  font-weight: 950;
+  line-height: 1.08;
 }
 
 .page-subtitle {
-  margin: 8px 0 0;
-  color: #657067;
+  margin: 0;
+  color: var(--ink-soft);
 }
 
+.pokeball-mark {
+  position: relative;
+  width: var(--ball-size, 34px);
+  height: var(--ball-size, 34px);
+  display: inline-block;
+  flex: 0 0 auto;
+  border: calc(var(--ball-size, 34px) * 0.07) solid var(--pokeball-black);
+  border-radius: 50%;
+  background:
+    linear-gradient(
+      to bottom,
+      var(--pokemon-red) 0 45%,
+      var(--pokeball-black) 45% 55%,
+      var(--pokeball-white) 55% 100%
+    );
+  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), 0 3px 0 rgba(0, 0, 0, 0.18);
+}
+
+.pokeball-mark::after {
+  content: "";
+  position: absolute;
+  inset: 50% auto auto 50%;
+  width: calc(var(--ball-size, 34px) * 0.34);
+  height: calc(var(--ball-size, 34px) * 0.34);
+  transform: translate(-50%, -50%);
+  border: calc(var(--ball-size, 34px) * 0.055) solid var(--pokeball-black);
+  border-radius: 50%;
+  background: var(--pokeball-white);
+  box-shadow: inset 0 0 0 calc(var(--ball-size, 34px) * 0.055) #dfe5ef;
+}
+
+.ui-button,
+.primary-button,
+.link-button,
+.plain-button,
+.row-actions button,
+.inline-row button,
+.appearance-row button {
+  --btn-bg: var(--surface);
+  --btn-fg: var(--ink);
+  --btn-border: var(--line-strong);
+  min-height: 42px;
+  width: fit-content;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 9px 13px;
+  border: 2px solid var(--btn-border);
+  border-radius: var(--radius-control);
+  background: var(--btn-bg);
+  color: var(--btn-fg);
+  box-shadow: var(--shadow-control);
+  font-weight: 900;
+  line-height: 1.1;
+  cursor: pointer;
+  transition:
+    transform 0.14s ease,
+    box-shadow 0.14s ease,
+    background 0.14s ease,
+    border-color 0.14s ease;
+  white-space: nowrap;
+}
+
+.ui-button:hover,
+.primary-button:hover,
+.link-button:hover,
+.plain-button:hover,
+.row-actions button:hover,
+.inline-row button:hover,
+.appearance-row button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 0 var(--line-strong);
+}
+
+.ui-button:active,
+.primary-button:active,
+.link-button:active,
+.plain-button:active,
+.row-actions button:active,
+.inline-row button:active,
+.appearance-row button:active {
+  transform: translateY(2px);
+  box-shadow: 0 1px 0 var(--line-strong);
+}
+
+.ui-button--primary,
+.primary-button {
+  --btn-bg: var(--pokemon-yellow);
+  --btn-fg: #172036;
+}
+
+.ui-button--blue,
+.link-button {
+  --btn-bg: var(--pokemon-blue);
+  --btn-fg: #ffffff;
+}
+
+.ui-button--red {
+  --btn-bg: var(--pokemon-red);
+  --btn-fg: #ffffff;
+}
+
+.ui-button--ghost,
+.plain-button,
+.row-actions button,
+.inline-row button,
+.appearance-row button {
+  --btn-bg: var(--surface);
+  --btn-border: var(--line);
+  box-shadow: none;
+}
+
+.ui-button--small {
+  min-height: 36px;
+  padding: 7px 10px;
+  font-size: 14px;
+  box-shadow: 0 2px 0 var(--line-strong);
+}
+
+button:disabled,
+.ui-button:disabled,
+.primary-button:disabled,
+.link-button:disabled,
+.plain-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.54;
+  transform: none;
+  box-shadow: 0 2px 0 var(--line);
+}
+
+.filter-panel,
 .toolbar {
   display: grid;
-  grid-template-columns: repeat(4, minmax(150px, 1fr));
-  gap: 12px;
-  margin-bottom: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 14px;
   padding: 16px;
-  border: 1px solid #d7d2c4;
-  border-radius: 8px;
-  background: #ffffff;
+  border: 2px solid var(--line-strong);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  box-shadow: var(--shadow-control);
 }
 
 .field {
   display: grid;
-  gap: 6px;
+  gap: 7px;
+  align-content: start;
 }
 
-.field label {
-  font-size: 12px;
-  font-weight: 800;
-  color: #566156;
+.field label,
+.field-label {
+  color: var(--ink-soft);
+  font-size: 14px;
+  font-weight: 850;
 }
 
 .field input,
-.field select {
+.field select,
+.tags-select__search {
   width: 100%;
-  min-height: 40px;
-  padding: 8px 10px;
-  border: 1px solid #c7c0b2;
-  border-radius: 8px;
-  background: #fffdfa;
-  color: #17211b;
+  min-height: 44px;
+  padding: 10px 12px;
+  border: 2px solid var(--line);
+  border-radius: var(--radius-control);
+  background: var(--surface);
+  color: var(--ink);
+  transition:
+    border-color 0.14s ease,
+    box-shadow 0.14s ease;
+}
+
+.field input:focus,
+.field select:focus,
+.tags-select__search:focus {
+  border-color: var(--pokemon-blue);
+  box-shadow: 0 0 0 4px rgba(42, 117, 187, 0.16);
+  outline: none;
 }
 
 .tags-select {
@@ -178,19 +452,19 @@ select {
   justify-content: space-between;
   gap: 8px;
   width: 100%;
-  min-height: 40px;
-  padding: 6px 10px;
-  border: 1px solid #c7c0b2;
-  border-radius: 8px;
-  background: #fffdfa;
-  color: #17211b;
+  min-height: 44px;
+  padding: 7px 10px;
+  border: 2px solid var(--line);
+  border-radius: var(--radius-control);
+  background: var(--surface);
+  color: var(--ink);
   text-align: left;
   cursor: pointer;
 }
 
 .tags-select__trigger.open {
-  border-color: #1f6f50;
-  box-shadow: 0 0 0 3px rgba(31, 111, 80, 0.12);
+  border-color: var(--pokemon-blue);
+  box-shadow: 0 0 0 4px rgba(42, 117, 187, 0.16);
 }
 
 .tags-select__selected {
@@ -205,72 +479,61 @@ select {
   align-items: center;
   justify-content: center;
   gap: 6px;
-  min-height: 26px;
-  padding: 3px 7px;
-  border-color: #9fc9a5;
-  border: 1px solid #9fc9a5;
+  min-height: 28px;
+  padding: 4px 8px;
+  border: 1px solid rgba(42, 117, 187, 0.28);
   border-radius: 999px;
-  background: #edf7ef;
-  color: #1f5c40;
+  background: rgba(42, 117, 187, 0.1);
+  color: var(--pokemon-blue-deep);
   font-size: 13px;
-  font-weight: 800;
+  font-weight: 850;
 }
 
 .tags-select__remove {
+  min-width: 18px;
+  min-height: 18px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 18px;
-  min-height: 18px;
   border-radius: 999px;
-  color: #4e5c52;
+  color: var(--ink-soft);
   cursor: pointer;
 }
 
 .tags-select__remove:hover {
-  background: rgba(31, 111, 80, 0.12);
+  background: rgba(42, 117, 187, 0.14);
 }
 
 .tags-select__placeholder {
-  color: #8a8275;
+  color: var(--muted);
 }
 
 .tags-select__arrow {
   flex: 0 0 auto;
-  color: #657067;
-  font-size: 16px;
+  color: var(--muted);
+  font-size: 18px;
   line-height: 1;
 }
 
 .tags-select__dropdown {
   position: absolute;
-  top: calc(100% + 4px);
+  top: calc(100% + 6px);
   left: 0;
   z-index: 40;
   display: grid;
   gap: 8px;
   width: 100%;
-  min-width: 220px;
+  min-width: 240px;
   padding: 8px;
-  border: 1px solid #d7d2c4;
-  border-radius: 8px;
-  background: #ffffff;
-  box-shadow: 0 12px 28px rgba(23, 33, 27, 0.16);
-}
-
-.tags-select__search {
-  width: 100%;
-  min-height: 40px;
-  padding: 8px 10px;
-  border: 1px solid #c7c0b2;
-  border-radius: 8px;
-  background: #fffdfa;
-  color: #17211b;
+  border: 2px solid var(--line-strong);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  box-shadow: var(--shadow-raised);
 }
 
 .tags-select__options {
   display: grid;
-  max-height: 220px;
+  max-height: 240px;
   overflow: auto;
 }
 
@@ -283,9 +546,9 @@ select {
   min-height: 40px;
   padding: 8px 10px;
   border: 0;
-  border-radius: 6px;
+  border-radius: var(--radius-small);
   background: transparent;
-  color: #17211b;
+  color: var(--ink);
   text-align: left;
   cursor: pointer;
 }
@@ -293,27 +556,23 @@ select {
 .tags-select__option:hover,
 .tags-select__option.active,
 .tags-select__option.selected {
-  background: #edf7ef;
-  color: #1f5c40;
+  background: rgba(255, 203, 5, 0.22);
+  color: var(--pokemon-blue-deep);
 }
 
 .tags-select__option.active {
-  box-shadow: inset 0 0 0 2px rgba(31, 111, 80, 0.18);
+  box-shadow: inset 0 0 0 2px rgba(42, 117, 187, 0.2);
 }
 
 .tags-select__option.selected {
-  font-weight: 800;
+  font-weight: 850;
 }
 
 .tags-select__create {
-  border-top: 1px solid #ebe6da;
+  border-top: 1px solid var(--line);
   border-radius: 0;
-  color: #1f6f50;
-  font-weight: 800;
-}
-
-.tags-select__create:hover {
-  background: #edf7ef;
+  color: var(--pokemon-blue);
+  font-weight: 850;
 }
 
 .tags-select__option:disabled {
@@ -323,80 +582,143 @@ select {
 
 .tags-select__state {
   flex: 0 0 auto;
-  color: #1f6f50;
+  color: var(--pokemon-blue);
   font-size: 12px;
-  font-weight: 800;
+  font-weight: 850;
 }
 
 .tags-select__empty {
   margin: 0;
   padding: 8px 10px;
-  color: #657067;
+  color: var(--muted);
   font-size: 13px;
 }
 
 .segmented {
   display: inline-flex;
+  flex-wrap: wrap;
   width: fit-content;
-  padding: 3px;
-  border: 1px solid #c7c0b2;
-  border-radius: 8px;
-  background: #f1eee5;
+  gap: 4px;
+  padding: 4px;
+  border: 2px solid var(--line);
+  border-radius: var(--radius-control);
+  background: var(--surface-soft);
 }
 
 .segmented button {
   min-width: 52px;
-  min-height: 32px;
-  border: 0;
-  border-radius: 6px;
+  min-height: 34px;
+  padding: 6px 10px;
+  border-radius: var(--radius-small);
   background: transparent;
-  color: #566156;
+  color: var(--ink-soft);
+  font-weight: 850;
   cursor: pointer;
 }
 
 .segmented button.active {
-  background: #ffffff;
-  color: #1f6f50;
-  font-weight: 800;
-  box-shadow: 0 1px 4px rgba(31, 111, 80, 0.16);
+  background: var(--pokemon-blue);
+  color: #ffffff;
 }
 
+.tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.tabs button {
+  min-height: 42px;
+  padding: 9px 13px;
+  border: 2px solid var(--line);
+  border-radius: var(--radius-control);
+  background: var(--surface);
+  color: var(--ink-soft);
+  font-weight: 900;
+  cursor: pointer;
+}
+
+.tabs button.active {
+  border-color: var(--line-strong);
+  background: var(--pokemon-yellow);
+  color: #172036;
+  box-shadow: 0 2px 0 var(--line-strong);
+}
+
+.entity-grid,
 .grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 14px;
-}
-
-.entity-card,
-.detail-section {
-  border: 1px solid #d7d2c4;
-  border-radius: 8px;
-  background: #ffffff;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
 }
 
 .entity-card {
+  min-height: 164px;
   display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
   gap: 12px;
   padding: 16px;
+  border: 2px solid var(--line-strong);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  box-shadow: var(--shadow-control);
+  color: var(--ink);
 }
 
-.entity-card h2,
-.entity-card h3,
-.detail-section h2 {
-  margin: 0;
-  font-size: 18px;
+.entity-card--link {
+  transition:
+    transform 0.16s ease,
+    box-shadow 0.16s ease,
+    border-color 0.16s ease;
 }
 
+.entity-card--link:hover {
+  transform: translateY(-2px);
+  border-color: var(--pokemon-blue);
+  box-shadow: 0 5px 0 var(--line-strong);
+}
+
+.entity-card__mark {
+  width: 42px;
+  height: 42px;
+  display: inline-grid;
+  place-items: center;
+  border: 2px solid var(--line-strong);
+  border-radius: var(--radius-control);
+  background: var(--pokemon-yellow);
+  box-shadow: 0 3px 0 var(--line-strong);
+  color: #172036;
+  font-family: var(--font-display);
+  font-weight: 950;
+}
+
+.entity-card__content {
+  display: grid;
+  align-content: start;
+  gap: 10px;
+  min-width: 0;
+}
+
+.entity-card__title {
+  color: var(--ink);
+  font-family: var(--font-display);
+  font-size: 21px;
+  font-weight: 950;
+  line-height: 1.12;
+  overflow-wrap: anywhere;
+}
+
+.entity-card__subtitle,
 .meta-line {
   margin: 0;
-  color: #657067;
+  color: var(--muted);
 }
 
 .edit-meta {
   margin: 0;
-  color: #7b766a;
+  color: var(--muted);
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 750;
 }
 
 .chips {
@@ -410,31 +732,60 @@ select {
   align-items: center;
   min-height: 28px;
   padding: 4px 8px;
-  border: 1px solid #cddfce;
+  border: 1px solid rgba(42, 117, 187, 0.28);
   border-radius: 999px;
-  background: #edf7ef;
-  color: #1f5c40;
+  background: rgba(42, 117, 187, 0.1);
+  color: var(--pokemon-blue-deep);
   font-size: 13px;
-  font-weight: 700;
+  font-weight: 800;
 }
 
 .detail-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 14px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
 }
 
 .detail-section {
+  display: grid;
+  gap: 12px;
   padding: 18px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  box-shadow: var(--shadow-soft);
+}
+
+.detail-section__header,
+.detail-section > h2 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
 .detail-section h2 {
-  margin-bottom: 12px;
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--font-display);
+  font-size: 21px;
+  font-weight: 950;
+  line-height: 1.12;
+}
+
+.detail-section__body {
+  display: grid;
+  gap: 12px;
+}
+
+.detail-section a:not(.ui-button) {
+  color: var(--pokemon-blue-deep);
+  font-weight: 850;
 }
 
 .row-list {
   display: grid;
-  gap: 8px;
+  gap: 0;
   margin: 0;
   padding: 0;
   list-style: none;
@@ -445,8 +796,8 @@ select {
   align-items: center;
   justify-content: space-between;
   gap: 12px;
-  padding: 10px 0;
-  border-bottom: 1px solid #ebe6da;
+  padding: 11px 0;
+  border-bottom: 1px solid var(--line);
 }
 
 .row-list li:last-child {
@@ -469,7 +820,7 @@ select {
   gap: 4px;
   width: 100%;
   margin: 0;
-  color: #657067;
+  color: var(--muted);
   text-align: left;
 }
 
@@ -485,67 +836,84 @@ select {
 }
 
 .appearance-summary dt {
-  color: #566156;
-  font-weight: 800;
+  color: var(--ink-soft);
+  font-weight: 850;
 }
 
-.link-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 36px;
-  width: fit-content;
-  padding: 7px 12px;
-  border-radius: 8px;
-  background: #a83f39;
-  color: #ffffff;
+.status-message {
+  position: absolute;
+  right: 0;
+  left: 0;
+  z-index: 80;
+  display: flex;
+  align-items: start;
+  gap: 10px;
+  width: auto;
+  margin: 0;
+  padding: 14px;
+  border: 1px solid var(--status-line, var(--line));
+  border-left: 6px solid var(--status-accent, var(--pokemon-blue));
+  border-radius: var(--radius-card);
+  background: var(--status-bg, var(--surface));
+  box-shadow: var(--shadow-raised);
+  color: var(--ink-soft);
   font-weight: 800;
+  pointer-events: none;
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+  transition:
+    opacity 0.18s ease,
+    transform 0.18s ease,
+    visibility 0.18s ease;
 }
 
-.primary-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: fit-content;
-  min-height: 40px;
-  padding: 8px 14px;
-  border: 0;
-  border-radius: 8px;
-  background: #1f6f50;
-  color: #ffffff;
-  font-weight: 800;
-  cursor: pointer;
+.page > .status-message {
+  right: var(--page-padding-x);
+  left: var(--page-padding-x);
+}
+
+.status-message--hidden {
+  opacity: 0;
+  transform: translateY(-6px);
+  visibility: hidden;
+}
+
+.status-message::before {
+  content: "";
+  width: 12px;
+  height: 12px;
+  flex: 0 0 auto;
+  margin-top: 6px;
+  border-radius: 50%;
+  background: var(--status-accent, var(--pokemon-blue));
+}
+
+.status-message--success {
+  --status-accent: var(--success);
+  --status-line: color-mix(in srgb, var(--success) 38%, var(--line));
+  --status-bg: color-mix(in srgb, var(--success) 10%, var(--surface));
+}
+
+.status-message--warning {
+  --status-accent: var(--warning);
+  --status-line: color-mix(in srgb, var(--warning) 42%, var(--line));
+  --status-bg: color-mix(in srgb, var(--warning) 12%, var(--surface));
+}
+
+.status-message--danger {
+  --status-accent: var(--danger);
+  --status-line: color-mix(in srgb, var(--danger) 38%, var(--line));
+  --status-bg: color-mix(in srgb, var(--danger) 10%, var(--surface));
 }
 
 .status {
-  padding: 18px;
-  border: 1px solid #d7d2c4;
-  border-radius: 8px;
-  background: #ffffff;
-  color: #657067;
-}
-
-.tabs {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 16px;
-}
-
-.tabs button {
-  min-height: 40px;
-  padding: 8px 14px;
-  border: 1px solid #c7c0b2;
-  border-radius: 8px;
-  background: #fffdfa;
-  color: #566156;
-  cursor: pointer;
-}
-
-.tabs button.active {
-  border-color: #1f6f50;
-  background: #1f6f50;
-  color: #ffffff;
-  font-weight: 800;
+  margin: 0;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  color: var(--muted);
 }
 
 .auth-page {
@@ -555,54 +923,60 @@ select {
 }
 
 .auth-panel {
+  position: relative;
+  width: min(480px, 100%);
   display: grid;
   gap: 18px;
-  width: min(460px, 100%);
   padding: 22px;
-  border: 1px solid #d7d2c4;
-  border-radius: 8px;
-  background: #ffffff;
+  border: 2px solid var(--line-strong);
+  border-radius: var(--radius-card);
+  background: var(--surface);
+  box-shadow: var(--shadow-control);
 }
 
 .auth-panel .page-header {
-  margin-bottom: 0;
+  display: block;
+}
+
+.auth-panel .page-title {
+  font-size: 34px;
 }
 
 .auth-form {
+  position: relative;
   display: grid;
   gap: 14px;
 }
 
+.auth-switch {
+  margin: 0;
+  color: var(--muted);
+}
+
+.auth-switch a {
+  color: var(--pokemon-blue-deep);
+  font-weight: 900;
+}
+
 .auth-message {
   margin: 0;
   padding: 10px 12px;
-  border: 1px solid #b9d8bd;
-  border-radius: 8px;
-  background: #edf7ef;
-  color: #1f5c40;
+  border: 1px solid color-mix(in srgb, var(--success) 38%, var(--line));
+  border-radius: var(--radius-card);
+  background: color-mix(in srgb, var(--success) 10%, var(--surface));
+  color: var(--ink-soft);
   font-weight: 800;
 }
 
 .auth-message.error {
-  border-color: #e0b0ac;
-  background: #fff0ee;
-  color: #a83f39;
-}
-
-.auth-switch {
-  margin: 0;
-  color: #657067;
-}
-
-.auth-switch a {
-  color: #1f6f50;
-  font-weight: 800;
+  border-color: color-mix(in srgb, var(--danger) 38%, var(--line));
+  background: color-mix(in srgb, var(--danger) 10%, var(--surface));
 }
 
 .admin-layout {
   display: grid;
-  grid-template-columns: minmax(320px, 420px) 1fr;
-  gap: 14px;
+  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
+  gap: 16px;
   align-items: start;
 }
 
@@ -623,34 +997,28 @@ select {
 
 .row-actions {
   flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
 }
 
 .row-actions button,
-.plain-button,
 .inline-row button,
 .appearance-row button {
   min-height: 34px;
   padding: 6px 10px;
-  border: 1px solid #c7c0b2;
-  border-radius: 8px;
-  background: #fffdfa;
-  color: #4e5c52;
-  cursor: pointer;
-}
-
-.plain-button {
-  width: fit-content;
+  font-size: 14px;
 }
 
 .inline-row {
   align-items: center;
 }
 
-.inline-row select {
+.inline-row .tags-select {
   flex: 1;
+  min-width: 180px;
 }
 
-.inline-row .tags-select {
+.inline-row select {
   flex: 1;
 }
 
@@ -658,40 +1026,56 @@ select {
   width: 90px;
 }
 
+.check-row label {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 36px;
+  color: var(--ink-soft);
+  font-weight: 850;
+  cursor: pointer;
+}
+
+.check-row input {
+  width: 18px;
+  height: 18px;
+  accent-color: var(--pokemon-blue);
+}
+
 .appearance-row {
   display: grid;
   grid-template-columns: 1fr;
   padding: 12px;
-  border: 1px solid #ebe6da;
-  border-radius: 8px;
-  background: #faf8f1;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-card);
+  background: var(--surface-soft);
 }
 
 .appearance-row input {
   min-width: 64px;
 }
 
-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-@media (max-width: 760px) {
-  .topbar {
-    align-items: start;
-    flex-direction: column;
+@media (max-width: 900px) {
+  .top-nav {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding-top: 14px;
+    padding-bottom: 14px;
   }
 
-  .topbar-main {
-    align-items: start;
-    flex-direction: column;
-    gap: 12px;
+  .brand-lockup,
+  .auth-actions,
+  .nav-links {
+    justify-content: flex-start;
+    min-width: 0;
+  }
+
+  .nav-links {
     width: 100%;
   }
 
   .auth-actions {
     flex-wrap: wrap;
-    width: 100%;
   }
 
   .page-header {
@@ -699,22 +1083,63 @@ button:disabled {
     flex-direction: column;
   }
 
-  .toolbar,
+  .page-header__actions {
+    justify-content: flex-start;
+  }
+
   .detail-grid,
   .admin-layout {
     grid-template-columns: 1fr;
   }
+}
 
-  .appearance-row {
+@media (max-width: 640px) {
+  .container,
+  .page {
+    --page-padding-x: 16px;
+    padding-right: var(--page-padding-x);
+    padding-left: var(--page-padding-x);
+  }
+
+  .page {
+    padding-top: 22px;
+    padding-bottom: 44px;
+  }
+
+  .page-title {
+    font-size: 32px;
+  }
+
+  .pokemon-word {
+    font-size: 25px;
+  }
+
+  .filter-panel,
+  .toolbar,
+  .entity-grid,
+  .grid {
+    grid-template-columns: 1fr;
+  }
+
+  .entity-card {
     grid-template-columns: 1fr;
   }
 
   .appearance-list li {
-    align-items: start;
     grid-template-columns: 1fr;
   }
 
-  .appearance-list {
-    overflow-x: auto;
+  .appearance-summary div {
+    grid-template-columns: 68px minmax(0, 1fr);
+  }
+
+  .inline-row {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .inline-row input,
+  .inline-row .tags-select {
+    width: 100%;
   }
 }
diff --git a/frontend/src/views/AdminView.vue b/frontend/src/views/AdminView.vue
index d23b2a8..6f478ac 100644
--- a/frontend/src/views/AdminView.vue
+++ b/frontend/src/views/AdminView.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import TagsSelect from '../components/TagsSelect.vue';
 import {
   api,
@@ -467,13 +469,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <section>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">管理</h1>
-        <p class="page-subtitle">维护 Wiki 数据和系统配置。</p>
-      </div>
-    </div>
+  <section class="page-stack">
+    <PageHeader title="管理" subtitle="维护 Wiki 数据和系统配置。">
+      <template #kicker>Admin</template>
+    </PageHeader>
 
     <div v-if="canEdit" class="tabs" role="tablist" aria-label="管理模块">
       <button v-for="tab in tabs" :key="tab.key" :class="{ active: activeTab === tab.key }" type="button" @click="setTab(tab.key)">
@@ -481,7 +480,7 @@ onMounted(() => {
       </button>
     </div>
 
-    <p v-if="message" class="status">{{ message }}</p>
+    <StatusMessage v-if="message" variant="warning">{{ message }}</StatusMessage>
 
     <section v-if="canEdit && activeTab === 'config'" class="admin-layout">
       <form class="detail-section" @submit.prevent="saveConfig">
diff --git a/frontend/src/views/HabitatDetail.vue b/frontend/src/views/HabitatDetail.vue
index 93bc416..3991637 100644
--- a/frontend/src/views/HabitatDetail.vue
+++ b/frontend/src/views/HabitatDetail.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, type HabitatDetail } from '../services/api';
 
 const route = useRoute();
@@ -78,25 +81,24 @@ onMounted(async () => {
 </script>
 
 <template>
-  <p v-if="!habitat" class="status">加载中</p>
-  <section v-else>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">{{ habitat.name }}</h1>
-        <p class="page-subtitle">栖息地详情</p>
+  <StatusMessage v-if="!habitat" :duration="0">加载中</StatusMessage>
+  <section v-else class="page-stack">
+    <PageHeader :title="habitat.name" subtitle="栖息地详情">
+      <template #kicker>Habitat Detail</template>
+      <template #meta>
         <EditMeta :entity="habitat" />
-      </div>
-      <RouterLink class="link-button" to="/habitats">返回列表</RouterLink>
-    </div>
+      </template>
+      <template #actions>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/habitats">返回列表</RouterLink>
+      </template>
+    </PageHeader>
 
     <div class="detail-grid">
-      <section class="detail-section">
-        <h2>配方列表</h2>
+      <DetailSection title="配方列表">
         <EntityChips :items="habitat.recipe" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>可能出现的宝可梦</h2>
+      <DetailSection title="可能出现的宝可梦">
         <ul class="row-list appearance-list">
           <li v-for="item in pokemonRows" :key="`${item.id}-${item.rarity}`">
             <RouterLink class="appearance-name" :to="`/pokemon/${item.id}`">{{ item.name }}</RouterLink>
@@ -120,7 +122,7 @@ onMounted(async () => {
             </dl>
           </li>
         </ul>
-      </section>
+      </DetailSection>
     </div>
   </section>
 </template>
diff --git a/frontend/src/views/HabitatList.vue b/frontend/src/views/HabitatList.vue
index 29db5da..7d4225d 100644
--- a/frontend/src/views/HabitatList.vue
+++ b/frontend/src/views/HabitatList.vue
@@ -2,6 +2,9 @@
 import { onMounted, ref } from 'vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import EntityCard from '../components/EntityCard.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, type Habitat } from '../services/api';
 
 const habitats = ref<Habitat[]>([]);
@@ -14,22 +17,18 @@ onMounted(async () => {
 </script>
 
 <template>
-  <section>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">栖息地</h1>
-        <p class="page-subtitle">查看配方和可能出现的宝可梦。</p>
-      </div>
-    </div>
+  <section class="page-stack">
+    <PageHeader title="栖息地" subtitle="查看配方和可能出现的宝可梦。">
+      <template #kicker>Habitats</template>
+    </PageHeader>
 
-    <p v-if="loading" class="status">加载中</p>
-    <div v-else class="grid">
-      <RouterLink v-for="item in habitats" :key="item.id" class="entity-card" :to="`/habitats/${item.id}`">
-        <h2>{{ item.name }}</h2>
+    <StatusMessage v-if="loading" :duration="0">加载中</StatusMessage>
+    <div v-else class="entity-grid">
+      <EntityCard v-for="item in habitats" :key="item.id" :title="item.name" :to="`/habitats/${item.id}`" marker="◎">
         <EditMeta :entity="item" />
         <EntityChips :items="item.recipe" />
         <EntityChips :items="item.pokemon ?? []" />
-      </RouterLink>
+      </EntityCard>
     </div>
   </section>
 </template>
diff --git a/frontend/src/views/ItemDetail.vue b/frontend/src/views/ItemDetail.vue
index bb59d09..bc446f0 100644
--- a/frontend/src/views/ItemDetail.vue
+++ b/frontend/src/views/ItemDetail.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, type ItemDetail } from '../services/api';
 
 const route = useRoute();
@@ -26,54 +29,50 @@ onMounted(async () => {
 </script>
 
 <template>
-  <p v-if="!item" class="status">加载中</p>
-  <section v-else>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">{{ item.name }}</h1>
-        <p class="page-subtitle">{{ item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name }}</p>
+  <StatusMessage v-if="!item" :duration="0">加载中</StatusMessage>
+  <section v-else class="page-stack">
+    <PageHeader :title="item.name" :subtitle="item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name">
+      <template #kicker>Item Detail</template>
+      <template #meta>
         <EditMeta :entity="item" />
-      </div>
-      <RouterLink class="link-button" to="/items">返回列表</RouterLink>
-    </div>
+      </template>
+      <template #actions>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/items">返回列表</RouterLink>
+      </template>
+    </PageHeader>
 
     <div class="detail-grid">
-      <section class="detail-section">
-        <h2>入手方式</h2>
+      <DetailSection title="入手方式">
         <EntityChips :items="item.acquisitionMethods" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>自定义</h2>
+      <DetailSection title="自定义">
         <div v-if="customization.length" class="chips">
           <span v-for="entry in customization" :key="entry" class="chip">{{ entry }}</span>
         </div>
         <p v-else class="meta-line">无</p>
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>标签</h2>
+      <DetailSection title="标签">
         <EntityChips :items="item.tags" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>材料单信息</h2>
+      <DetailSection title="材料单信息">
         <template v-if="item.recipe">
           <RouterLink :to="`/recipes/${item.recipe.id}`">{{ item.recipe.name }}</RouterLink>
           <EntityChips :items="item.recipe.materials" />
         </template>
         <p v-else class="meta-line">无</p>
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>相关栖息地</h2>
+      <DetailSection title="相关栖息地">
         <ul class="row-list">
           <li v-for="habitat in item.relatedHabitats" :key="habitat.id">
             <RouterLink :to="`/habitats/${habitat.id}`">{{ habitat.name }}</RouterLink>
             <span>× {{ habitat.quantity }}</span>
           </li>
         </ul>
-      </section>
+      </DetailSection>
     </div>
   </section>
 </template>
diff --git a/frontend/src/views/ItemsList.vue b/frontend/src/views/ItemsList.vue
index 55378fd..80354bd 100644
--- a/frontend/src/views/ItemsList.vue
+++ b/frontend/src/views/ItemsList.vue
@@ -2,6 +2,10 @@
 import { computed, onMounted, ref, watch } from 'vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import EntityCard from '../components/EntityCard.vue';
+import FilterPanel from '../components/FilterPanel.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import TagsSelect from '../components/TagsSelect.vue';
 import { api, type Item, type Options, type Recipe } from '../services/api';
 
@@ -41,20 +45,17 @@ watch([tab, itemQuery], loadItems);
 </script>
 
 <template>
-  <section>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">物品 / 材料单</h1>
-        <p class="page-subtitle">按分类、用途、标签查看物品，并浏览材料单。</p>
-      </div>
-    </div>
+  <section class="page-stack">
+    <PageHeader title="物品 / 材料单" subtitle="按分类、用途、标签查看物品，并浏览材料单。">
+      <template #kicker>Bag</template>
+    </PageHeader>
 
     <div class="tabs" role="tablist" aria-label="物品和材料单">
       <button :class="{ active: tab === 'items' }" type="button" @click="tab = 'items'">物品</button>
       <button :class="{ active: tab === 'recipes' }" type="button" @click="tab = 'recipes'">材料单</button>
     </div>
 
-    <div v-if="tab === 'items' && options" class="toolbar">
+    <FilterPanel v-if="tab === 'items' && options">
       <div class="field">
         <label for="item-search">搜索</label>
         <input id="item-search" v-model="search" type="search" placeholder="名称" />
@@ -88,24 +89,28 @@ watch([tab, itemQuery], loadItems);
         <label for="tags">标签</label>
         <TagsSelect id="tags" v-model="tagIds" :options="options.itemTags" placeholder="搜索标签" />
       </div>
-    </div>
+    </FilterPanel>
 
-    <p v-if="loading" class="status">加载中</p>
-    <div v-else-if="tab === 'items'" class="grid">
-      <RouterLink v-for="item in items" :key="item.id" class="entity-card" :to="`/items/${item.id}`">
-        <h2>{{ item.name }}</h2>
-        <p class="meta-line">{{ item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name }}</p>
+    <StatusMessage v-if="loading" :duration="0">加载中</StatusMessage>
+    <div v-else-if="tab === 'items'" class="entity-grid">
+      <EntityCard
+        v-for="item in items"
+        :key="item.id"
+        :title="item.name"
+        :subtitle="item.usage ? `${item.category.name} · ${item.usage.name}` : item.category.name"
+        :to="`/items/${item.id}`"
+        marker="＋"
+      >
         <EditMeta :entity="item" />
         <EntityChips :items="item.tags" />
-      </RouterLink>
+      </EntityCard>
     </div>
 
-    <div v-else class="grid">
-      <RouterLink v-for="item in recipes" :key="item.id" class="entity-card" :to="`/recipes/${item.id}`">
-        <h2>{{ item.name }}</h2>
+    <div v-else class="entity-grid">
+      <EntityCard v-for="item in recipes" :key="item.id" :title="item.name" :to="`/recipes/${item.id}`" marker="▦">
         <EditMeta :entity="item" />
         <EntityChips :items="item.materials" />
-      </RouterLink>
+      </EntityCard>
     </div>
   </section>
 </template>
diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue
index f71a5d2..332a295 100644
--- a/frontend/src/views/LoginView.vue
+++ b/frontend/src/views/LoginView.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, setAuthToken } from '../services/api';
 
 const route = useRoute();
@@ -37,12 +39,9 @@ async function submitLogin() {
 <template>
   <section class="auth-page">
     <div class="auth-panel">
-      <div class="page-header">
-        <div>
-          <h1 class="page-title">登录</h1>
-          <p class="page-subtitle">使用已验证邮箱进入 Pokopia Wiki</p>
-        </div>
-      </div>
+      <PageHeader title="登录" subtitle="使用已验证邮箱进入 Pokopia Wiki">
+        <template #kicker>Trainer Pass</template>
+      </PageHeader>
 
       <form class="auth-form" @submit.prevent="submitLogin">
         <div class="field">
@@ -55,9 +54,9 @@ async function submitLogin() {
           <input id="login-password" v-model="password" autocomplete="current-password" required type="password" />
         </div>
 
-        <p v-if="errorMessage" class="auth-message error">{{ errorMessage }}</p>
+        <StatusMessage v-if="errorMessage" variant="danger">{{ errorMessage }}</StatusMessage>
 
-        <button class="primary-button" :disabled="busy" type="submit">
+        <button class="ui-button ui-button--primary" :disabled="busy" type="submit">
           {{ busy ? '登录中' : '登录' }}
         </button>
       </form>
diff --git a/frontend/src/views/PokemonDetail.vue b/frontend/src/views/PokemonDetail.vue
index b86201a..d3b59ed 100644
--- a/frontend/src/views/PokemonDetail.vue
+++ b/frontend/src/views/PokemonDetail.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, type PokemonDetail } from '../services/api';
 
 const route = useRoute();
@@ -78,30 +81,28 @@ onMounted(async () => {
 </script>
 
 <template>
-  <p v-if="!pokemon" class="status">加载中</p>
-  <section v-else>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">#{{ pokemon.id }} {{ pokemon.name }}</h1>
-        <p class="page-subtitle">喜欢的环境：{{ pokemon.environment.name }}</p>
+  <StatusMessage v-if="!pokemon" :duration="0">加载中</StatusMessage>
+  <section v-else class="page-stack">
+    <PageHeader :title="`#${pokemon.id} ${pokemon.name}`" :subtitle="`喜欢的环境：${pokemon.environment.name}`">
+      <template #kicker>Pokédex Detail</template>
+      <template #meta>
         <EditMeta :entity="pokemon" />
-      </div>
-      <RouterLink class="link-button" to="/pokemon">返回列表</RouterLink>
-    </div>
+      </template>
+      <template #actions>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/pokemon">返回列表</RouterLink>
+      </template>
+    </PageHeader>
 
     <div class="detail-grid">
-      <section class="detail-section">
-        <h2>特长</h2>
+      <DetailSection title="特长">
         <EntityChips :items="pokemon.skills" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>喜欢的东西</h2>
+      <DetailSection title="喜欢的东西">
         <EntityChips :items="pokemon.favorite_things" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>栖息地</h2>
+      <DetailSection title="栖息地">
         <ul class="row-list appearance-list">
           <li v-for="habitat in habitatRows" :key="`${habitat.id}-${habitat.rarity}`">
             <RouterLink class="appearance-name" :to="`/habitats/${habitat.id}`">{{ habitat.name }}</RouterLink>
@@ -125,7 +126,7 @@ onMounted(async () => {
             </dl>
           </li>
         </ul>
-      </section>
+      </DetailSection>
     </div>
   </section>
 </template>
diff --git a/frontend/src/views/PokemonList.vue b/frontend/src/views/PokemonList.vue
index 32987a1..2efdf36 100644
--- a/frontend/src/views/PokemonList.vue
+++ b/frontend/src/views/PokemonList.vue
@@ -2,6 +2,10 @@
 import { computed, onMounted, ref, watch } from 'vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import EntityCard from '../components/EntityCard.vue';
+import FilterPanel from '../components/FilterPanel.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import TagsSelect from '../components/TagsSelect.vue';
 import { api, type Options, type Pokemon } from '../services/api';
 
@@ -39,15 +43,12 @@ watch(query, loadPokemon);
 </script>
 
 <template>
-  <section>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">Pokemon</h1>
-        <p class="page-subtitle">搜索宝可梦，并按特长、环境、喜欢的东西筛选。</p>
-      </div>
-    </div>
+  <section class="page-stack">
+    <PageHeader title="Pokemon" subtitle="搜索宝可梦，并按特长、环境、喜欢的东西筛选。">
+      <template #kicker>Pokédex</template>
+    </PageHeader>
 
-    <div v-if="options" class="toolbar">
+    <FilterPanel v-if="options">
       <div class="field">
         <label for="pokemon-search">搜索</label>
         <input id="pokemon-search" v-model="search" type="search" placeholder="名字" />
@@ -86,17 +87,21 @@ watch(query, loadPokemon);
           </button>
         </div>
       </div>
-    </div>
+    </FilterPanel>
 
-    <p v-if="loading" class="status">加载中</p>
-    <div v-else class="grid">
-      <RouterLink v-for="item in pokemon" :key="item.id" class="entity-card" :to="`/pokemon/${item.id}`">
-        <h2>#{{ item.id }} {{ item.name }}</h2>
-        <p class="meta-line">喜欢的环境：{{ item.environment.name }}</p>
+    <StatusMessage v-if="loading" :duration="0">加载中</StatusMessage>
+    <div v-else class="entity-grid">
+      <EntityCard
+        v-for="item in pokemon"
+        :key="item.id"
+        :title="`#${item.id} ${item.name}`"
+        :subtitle="`喜欢的环境：${item.environment.name}`"
+        :to="`/pokemon/${item.id}`"
+      >
         <EditMeta :entity="item" />
         <EntityChips :items="item.skills" />
         <EntityChips :items="item.favorite_things" />
-      </RouterLink>
+      </EntityCard>
     </div>
   </section>
 </template>
diff --git a/frontend/src/views/RecipeDetail.vue b/frontend/src/views/RecipeDetail.vue
index 37a1926..980d4d6 100644
--- a/frontend/src/views/RecipeDetail.vue
+++ b/frontend/src/views/RecipeDetail.vue
@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import DetailSection from '../components/DetailSection.vue';
 import EditMeta from '../components/EditMeta.vue';
 import EntityChips from '../components/EntityChips.vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api, type RecipeDetail } from '../services/api';
 
 const route = useRoute();
@@ -14,27 +17,26 @@ onMounted(async () => {
 </script>
 
 <template>
-  <p v-if="!recipe" class="status">加载中</p>
-  <section v-else>
-    <div class="page-header">
-      <div>
-        <h1 class="page-title">{{ recipe.name }}</h1>
-        <p class="page-subtitle">材料单详情</p>
+  <StatusMessage v-if="!recipe" :duration="0">加载中</StatusMessage>
+  <section v-else class="page-stack">
+    <PageHeader :title="recipe.name" subtitle="材料单详情">
+      <template #kicker>Recipe Detail</template>
+      <template #meta>
         <EditMeta :entity="recipe" />
-      </div>
-      <RouterLink class="link-button" to="/items">返回列表</RouterLink>
-    </div>
+      </template>
+      <template #actions>
+        <RouterLink class="ui-button ui-button--blue ui-button--small" to="/items">返回列表</RouterLink>
+      </template>
+    </PageHeader>
 
     <div class="detail-grid">
-      <section class="detail-section">
-        <h2>入手方式</h2>
+      <DetailSection title="入手方式">
         <EntityChips :items="recipe.acquisition_methods" />
-      </section>
+      </DetailSection>
 
-      <section class="detail-section">
-        <h2>需要材料</h2>
+      <DetailSection title="需要材料">
         <EntityChips :items="recipe.materials" />
-      </section>
+      </DetailSection>
     </div>
   </section>
 </template>
diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue
index 35b0ac7..76fa56f 100644
--- a/frontend/src/views/RegisterView.vue
+++ b/frontend/src/views/RegisterView.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api } from '../services/api';
 
 const email = ref('');
@@ -32,12 +34,9 @@ async function submitRegister() {
 <template>
   <section class="auth-page">
     <div class="auth-panel">
-      <div class="page-header">
-        <div>
-          <h1 class="page-title">注册</h1>
-          <p class="page-subtitle">创建账号后需要完成邮箱验证</p>
-        </div>
-      </div>
+      <PageHeader title="注册" subtitle="创建账号后需要完成邮箱验证">
+        <template #kicker>Trainer Pass</template>
+      </PageHeader>
 
       <form class="auth-form" @submit.prevent="submitRegister">
         <div class="field">
@@ -62,10 +61,10 @@ async function submitRegister() {
           />
         </div>
 
-        <p v-if="message" class="auth-message">{{ message }}</p>
-        <p v-if="errorMessage" class="auth-message error">{{ errorMessage }}</p>
+        <StatusMessage v-if="message" variant="success">{{ message }}</StatusMessage>
+        <StatusMessage v-if="errorMessage" variant="danger">{{ errorMessage }}</StatusMessage>
 
-        <button class="primary-button" :disabled="busy" type="submit">
+        <button class="ui-button ui-button--primary" :disabled="busy" type="submit">
           {{ busy ? '发送中' : '发送验证邮件' }}
         </button>
       </form>
diff --git a/frontend/src/views/VerifyEmailView.vue b/frontend/src/views/VerifyEmailView.vue
index 6de6f34..3eb2bb7 100644
--- a/frontend/src/views/VerifyEmailView.vue
+++ b/frontend/src/views/VerifyEmailView.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
+import PageHeader from '../components/PageHeader.vue';
+import StatusMessage from '../components/StatusMessage.vue';
 import { api } from '../services/api';
 
 const route = useRoute();
@@ -31,18 +33,15 @@ onMounted(async () => {
 <template>
   <section class="auth-page">
     <div class="auth-panel">
-      <div class="page-header">
-        <div>
-          <h1 class="page-title">邮箱验证</h1>
-          <p class="page-subtitle">完成验证后即可登录</p>
-        </div>
-      </div>
+      <PageHeader title="邮箱验证" subtitle="完成验证后即可登录">
+        <template #kicker>Trainer Pass</template>
+      </PageHeader>
 
-      <p v-if="busy" class="auth-message">正在验证邮箱</p>
-      <p v-else-if="message" class="auth-message">{{ message }}</p>
-      <p v-else class="auth-message error">{{ errorMessage }}</p>
+      <StatusMessage v-if="busy" :duration="0">正在验证邮箱</StatusMessage>
+      <StatusMessage v-else-if="message" variant="success">{{ message }}</StatusMessage>
+      <StatusMessage v-else variant="danger">{{ errorMessage }}</StatusMessage>
 
-      <RouterLink class="primary-button" to="/login">去登录</RouterLink>
+      <RouterLink class="ui-button ui-button--primary" to="/login">去登录</RouterLink>
     </div>
   </section>
 </template>