.class-filter-bar {
      display: flex; align-items: center; gap: 10px;
      flex-wrap: wrap; margin-bottom: 32px;
    }
    .filter-chip {
      padding: 7px 16px; border-radius: 20px; font-size: .78rem; font-weight: 600;
      cursor: pointer; border: 1px solid var(--bg5); color: var(--text-muted);
      background: var(--bg2); transition: all .2s ease; user-select: none;
      font-family: 'Cinzel', serif; letter-spacing: .04em;
    }
    .filter-chip:hover  { border-color: var(--gold-border); color: var(--text-bright); }
    .filter-chip.active { background: rgba(200,148,42,.12); border-color: rgba(200,148,42,.4); color: var(--gold); }

    .class-card-v2 {
      background: var(--panel);
      border: 1px solid rgba(200,148,42,.12);
      border-radius: var(--radius-xl);
      overflow: hidden; cursor: pointer;
      transition: all .3s cubic-bezier(.2,.8,.2,1);
      text-decoration: none; display: block;
      position: relative;
    }
    .class-card-v2::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(200,148,42,.2), transparent);
    }
    .class-card-v2:hover { transform: translateY(-6px); box-shadow: var(--shadow-gold); border-color: rgba(200,148,42,.35); }
    .class-card-v2:hover .cc-header { opacity: .9; }

    .cc-header {
      height: 120px; position: relative;
      display: flex; align-items: center; justify-content: center;
      transition: opacity .3s;
    }
    .cc-icon {
      font-size: 3.5rem; z-index: 2; position: relative;
      filter: drop-shadow(0 0 16px currentColor);
      transition: transform .3s ease;
    }
    .class-card-v2:hover .cc-icon { transform: scale(1.12); }

    .cc-body { padding: 20px 22px 22px; }
    .cc-name { font-family: 'Cinzel', serif; font-size: 1.08rem; font-weight: 700; color: var(--text-bright); margin-bottom: 3px; }
    .cc-role { font-size: .72rem; color: var(--gold-dim); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
    .cc-desc { font-size: .82rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 16px; }

    .cc-stats { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
    .cc-stat-row { display: flex; align-items: center; gap: 10px; }
    .cc-stat-label { font-size: .7rem; color: var(--text-dim); width: 56px; flex-shrink: 0; }
    .cc-stat-bar { flex: 1; height: 4px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
    .cc-stat-fill { height: 100%; border-radius: 2px; transition: width .8s ease; }
    .cc-stat-val { font-size: .7rem; color: var(--text-muted); width: 24px; text-align: right; }

    .cc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
    .cc-tag {
      padding: 3px 10px; border-radius: 10px; font-size: .67rem; font-weight: 600;
      background: rgba(200,148,42,.08); border: 1px solid rgba(200,148,42,.18);
      color: var(--gold-dim); letter-spacing: .05em;
    }

    .class-grid-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }

    .synergy-section { margin-top: 56px; }
    .synergy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .synergy-card {
      background: var(--panel); border: 1px solid var(--bg5);
      border-radius: var(--radius-lg); padding: 20px;
      transition: all .25s ease;
    }
    .synergy-card:hover { border-color: var(--gold-border); transform: translateY(-2px); }
    .synergy-classes { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
    .synergy-class-icon { font-size: 1.6rem; }
    .synergy-plus { font-size: .8rem; color: var(--text-dim); }
    .synergy-arrow { font-size: .8rem; color: var(--gold); margin: 0 4px; }
    .synergy-effect { font-family: 'Cinzel', serif; font-size: .82rem; font-weight: 700; color: var(--gold); margin-bottom: 6px; }
    .synergy-desc { font-size: .78rem; color: var(--text-muted); line-height: 1.55; }
    .synergy-bonus { font-size: .72rem; color: var(--ok); font-weight: 600; margin-top: 8px; }

    @media (max-width: 900px) {
      .class-grid-v2 { grid-template-columns: repeat(2, 1fr); }
      .synergy-grid   { grid-template-columns: 1fr; }
    }
    @media (max-width: 580px) {
      .class-grid-v2 { grid-template-columns: 1fr; }
    }