.medals-page-wrapper {
      max-width: 1240px;
      margin: 0 auto;
      padding: 1.5rem 1rem 4rem;
      box-sizing: border-box;
    }

    /* Dual Vault Master Switcher */
    .vault-master-switcher {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    @media (max-width: 680px) {
      .vault-master-switcher {
        grid-template-columns: 1fr;
      }
    }

    .vault-switch-card {
      background: rgba(15, 23, 42, 0.75);
      border: 1.5px solid rgba(255, 255, 255, 0.08);
      border-radius: 1rem;
      padding: 1.25rem 1.5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
    }

    .vault-switch-card:hover {
      border-color: rgba(56, 189, 248, 0.4);
      background: rgba(30, 41, 59, 0.6);
      transform: translateY(-2px);
    }

    .vault-switch-card.active {
      background: radial-gradient(circle at top left, rgba(245, 158, 11, 0.18), rgba(15, 23, 42, 0.95) 75%);
      border-color: #F59E0B;
      box-shadow: 0 0 25px rgba(245, 158, 11, 0.25), inset 0 0 15px rgba(245, 158, 11, 0.08);
    }

    .vault-switch-card.active.switch-badges {
      background: radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), rgba(15, 23, 42, 0.95) 75%);
      border-color: #38BDF8;
      box-shadow: 0 0 25px rgba(56, 189, 248, 0.25), inset 0 0 15px rgba(56, 189, 248, 0.08);
    }

    .switch-icon-box {
      font-size: 2.2rem;
      line-height: 1;
      flex-shrink: 0;
    }

    .switch-info {
      flex-grow: 1;
    }

    .switch-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: #FFFFFF;
      margin-bottom: 0.2rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .switch-subtitle {
      font-size: 0.82rem;
      color: #94A3B8;
    }

    .switch-status-pill {
      font-size: 0.8rem;
      font-weight: 800;
      font-family: monospace;
      padding: 0.35rem 0.75rem;
      border-radius: 0.5rem;
      background: rgba(0, 0, 0, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #FFFFFF;
      white-space: nowrap;
    }

    .vault-switch-card.active .switch-status-pill {
      background: rgba(245, 158, 11, 0.2);
      border-color: #F59E0B;
      color: #F59E0B;
    }

    .vault-switch-card.active.switch-badges .switch-status-pill {
      background: rgba(56, 189, 248, 0.2);
      border-color: #38BDF8;
      color: #38BDF8;
    }

    /* Hero Vault Banner */
    .medals-hero-card {
      background: radial-gradient(circle at top right, rgba(30, 58, 138, 0.2), rgba(15, 23, 42, 0.95) 70%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 1.25rem;
      padding: clamp(1.5rem, 3.5vw, 2.25rem);
      margin-bottom: 2rem;
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.55);
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .medals-hero-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 1.25rem;
    }

    .medals-hero-title-group h1 {
      font-size: clamp(1.75rem, 3.2vw, 2.3rem);
      font-weight: 800;
      color: #FFFFFF;
      margin: 0.25rem 0 0.5rem;
      letter-spacing: -0.02em;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .medals-hero-title-group p {
      color: #94A3B8;
      font-size: 0.92rem;
      max-width: 680px;
      margin: 0;
      line-height: 1.5;
    }

    /* Fade-To-Inspire Protocol Banner */
    .inspire-protocol-banner {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(56, 189, 248, 0.25);
      border-radius: 0.65rem;
      font-size: 0.82rem;
      color: #BAE6FD;
      line-height: 1.45;
    }

    .inspire-protocol-banner strong {
      color: #38BDF8;
    }

    /* Summary Bar */
    .medals-summary-bar {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
      background: rgba(15, 23, 42, 0.75);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 0.85rem;
      padding: 1.25rem;
    }

    @media (max-width: 860px) {
      .medals-summary-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 500px) {
      .medals-summary-bar {
        grid-template-columns: 1fr;
      }
    }

    .summary-metric-box {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
    }

    .summary-metric-label {
      font-size: 0.74rem;
      color: #94A3B8;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 700;
    }

    .summary-metric-value {
      font-size: 1.55rem;
      font-weight: 800;
      color: #FFFFFF;
    }

    .progress-bar-track {
      width: 100%;
      height: 6px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 999px;
      overflow: hidden;
      margin-top: 0.35rem;
    }

    .progress-bar-fill {
      height: 100%;
      background: linear-gradient(90deg, #F59E0B, #10B981);
      border-radius: 999px;
      transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    }

    /* Controls Strip: Search + Filter Tabs */
    .vault-controls-strip {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      margin-bottom: 2rem;
    }

    .controls-row-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .search-input-wrap {
      position: relative;
      flex-grow: 1;
      max-width: 420px;
    }

    .search-input-field {
      width: 100%;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 0.5rem;
      padding: 0.55rem 0.85rem 0.55rem 2.2rem;
      color: #FFFFFF;
      font-family: inherit;
      font-size: 0.88rem;
      box-sizing: border-box;
      outline: none;
      transition: all 0.2s ease;
    }

    .search-input-field:focus {
      border-color: #38BDF8;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.35);
    }

    .search-icon {
      position: absolute;
      left: 0.75rem;
      top: 50%;
      transform: translateY(-50%);
      color: #64748B;
      pointer-events: none;
    }

    .medals-filter-strip {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      flex-wrap: wrap;
    }

    .filter-tab-btn {
      background: rgba(15, 23, 42, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.08);
      color: #94A3B8;
      padding: 0.45rem 0.85rem;
      border-radius: 0.5rem;
      font-family: inherit;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .filter-tab-btn:hover {
      border-color: rgba(56, 189, 248, 0.4);
      color: #FFFFFF;
    }

    .filter-tab-btn.active {
      background: rgba(14, 165, 233, 0.2);
      border-color: #38BDF8;
      color: #38BDF8;
      box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
    }

    /* High-Density Vault Grid */
    .vault-grid-container {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 1.25rem;
      margin-bottom: 3rem;
    }

    @media (max-width: 1080px) {
      .vault-grid-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 640px) {
      .vault-grid-container {
        grid-template-columns: 1fr;
      }
    }

    /* THE FADE-TO-INSPIRE CARD ARCHITECTURE */
    .vault-card {
      border-radius: 1rem;
      padding: 1.35rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 235px;
      box-sizing: border-box;
      position: relative;
      cursor: pointer;
      overflow: hidden;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* 1. Gained State (SHINE): Radiant cyber-glow, 100% opacity, crisp borders */
    .vault-card.shining {
      background: radial-gradient(circle at top left, rgba(245, 158, 11, 0.12), rgba(17, 24, 39, 0.95) 75%);
      border: 1.5px solid rgba(245, 158, 11, 0.55);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 18px rgba(245, 158, 11, 0.25);
      opacity: 1 !important;
      filter: none !important;
    }

    .vault-card.shining.card-badge-type {
      background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), rgba(17, 24, 39, 0.95) 75%);
      border: 1.5px solid rgba(56, 189, 248, 0.55);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 18px rgba(56, 189, 248, 0.25);
    }

    .vault-card.shining:hover {
      transform: translateY(-4px) scale(1.01);
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 28px rgba(245, 158, 11, 0.45);
      border-color: #F59E0B;
    }

    .vault-card.shining.card-badge-type:hover {
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7), 0 0 28px rgba(56, 189, 248, 0.45);
      border-color: #38BDF8;
    }

    .vault-card.shining .vault-card-icon {
      filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.75));
    }

    .vault-card.shining.card-badge-type .vault-card-icon {
      filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.75));
    }

    /* 2. Awaiting State (FADE): Enforce explicit CSS fade variables */
    .vault-card.faded {
      background: rgba(17, 24, 39, 0.65);
      border: 1px dashed rgba(255, 255, 255, 0.1);
      opacity: 0.25 !important;
      filter: grayscale(100%) !important;
      position: relative;
    }

    .vault-card.faded:hover {
      opacity: 0.45 !important;
      filter: grayscale(80%) !important;
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.2);
    }

    /* Locked Toast Overlay Node */
    .locked-legacy-toast {
      position: absolute;
      inset: 0;
      background: rgba(15, 23, 42, 0.96);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1.5px solid rgba(245, 158, 11, 0.75);
      border-radius: 1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 1.25rem;
      color: #FBBF24;
      font-weight: 800;
      font-size: 0.95rem;
      line-height: 1.45;
      z-index: 50;
      box-shadow: 0 0 30px rgba(245, 158, 11, 0.5), inset 0 0 15px rgba(245, 158, 11, 0.2);
      pointer-events: none;
      animation: lockedToastIn 0.25s ease-out forwards;
    }

    .locked-legacy-toast .toast-icon {
      font-size: 1.6rem;
      margin-bottom: 0.4rem;
    }

    @keyframes lockedToastIn {
      from { opacity: 0; transform: scale(0.92); }
      to { opacity: 1; transform: scale(1); }
    }

    /* Card Elements */
    .vault-card-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 0.65rem;
    }

    .vault-card-icon {
      font-size: 2.2rem;
      line-height: 1;
      transition: transform 0.2s ease;
    }

    .vault-card:hover .vault-card-icon {
      transform: scale(1.08);
    }

    .vault-badge-tag {
      font-size: 0.7rem;
      font-weight: 800;
      padding: 0.22rem 0.55rem;
      border-radius: 0.35rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .tag-shining-gold {
      background: rgba(245, 158, 11, 0.18);
      color: #FBBF24;
      border: 1px solid rgba(245, 158, 11, 0.5);
      box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
    }

    .tag-shining-cyan {
      background: rgba(14, 165, 233, 0.18);
      color: #38BDF8;
      border: 1px solid rgba(56, 189, 248, 0.5);
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
    }

    .tag-faded-lock {
      background: rgba(148, 163, 184, 0.1);
      color: #94A3B8;
      border: 1px solid rgba(148, 163, 184, 0.2);
    }

    .vault-card-meta {
      font-size: 0.7rem;
      font-weight: 700;
      color: #F59E0B;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 0.25rem;
    }

    .card-badge-type .vault-card-meta {
      color: #38BDF8;
    }

    .vault-card-title {
      font-size: 1.1rem;
      font-weight: 800;
      color: #FFFFFF;
      margin: 0.2rem 0 0.4rem;
      line-height: 1.3;
    }

    .vault-card-desc {
      font-size: 0.84rem;
      color: #94A3B8;
      line-height: 1.45;
      margin-bottom: 0.85rem;
      flex-grow: 1;
    }

    .vault-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 0.65rem;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 0.78rem;
    }

    .vault-card-points {
      font-family: monospace;
      font-weight: 800;
      color: #F59E0B;
    }

    .card-badge-type .vault-card-points {
      color: #38BDF8;
    }

    .vault-card-prompt {
      font-weight: 700;
      color: #38BDF8;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    .vault-card-progress-hint {
      font-size: 0.74rem;
      color: #94A3B8;
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
      width: 100%;
    }

    .mini-progress-track {
      width: 100%;
      height: 4px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 999px;
      overflow: hidden;
    }

    .mini-progress-bar {
      height: 100%;
      background: #38BDF8;
      border-radius: 999px;
    }

    /* Modal Inspection Dialog */
    .medal-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(3, 7, 18, 0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .medal-modal-overlay.active {
      opacity: 1;
      pointer-events: auto;
    }

    .medal-modal-box {
      background: radial-gradient(circle at top, rgba(30, 58, 138, 0.35), rgba(15, 23, 42, 0.98) 75%);
      border: 1.5px solid rgba(56, 189, 248, 0.45);
      border-radius: 1.25rem;
      max-width: 580px;
      width: 100%;
      padding: clamp(1.5rem, 4vw, 2.25rem);
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(56, 189, 248, 0.2);
      position: relative;
      box-sizing: border-box;
      transform: scale(0.95);
      transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      max-height: 90vh;
      overflow-y: auto;
    }

    .medal-modal-overlay.active .medal-modal-box {
      transform: scale(1);
    }

    /* Red Close Control Node [X] */
    .medal-modal-close {
      position: absolute;
      top: 1.15rem;
      right: 1.25rem;
      background: rgba(239, 68, 68, 0.15);
      border: 1.5px solid rgba(239, 68, 68, 0.55);
      color: #EF4444;
      font-size: 1.1rem;
      font-weight: 800;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      line-height: 1;
      transition: all 0.2s ease;
      box-shadow: 0 0 12px rgba(239, 68, 68, 0.3);
    }

    .medal-modal-close:hover {
      background: #EF4444;
      color: #FFFFFF;
      box-shadow: 0 0 22px rgba(239, 68, 68, 0.7);
      transform: scale(1.08);
    }