/* Loading icon, extracted from the logo, gently animated */
  .loading-icon-wrap {
      margin: 0 auto 20px;
      display: flex;
      justify-content: center;
  }

  .loading-icon-img {
      width: 64px;
      height: 64px;
      animation: loading-icon-pulse 2.4s ease-in-out infinite;
      filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.18));
  }

  @keyframes loading-icon-pulse {

      0%,
      100% {
          transform: scale(1);
          opacity: 0.9;
      }

      50% {
          transform: scale(1.08);
          opacity: 1;
      }
  }

  /* =========================================================
     Search loading page
     ========================================================= */
  .search-loading {
      padding: 80px 0 96px;
      background: linear-gradient(180deg, #fff 0%, var(--ink-50) 100%);
      min-height: 70vh;
  }

  .loading-inner {
      max-width: 1300px;
      margin: 0 auto;
      text-align: center;
  }

  .loading-eyebrow {
      color: var(--blue-600);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      margin-bottom: 14px;
      text-transform: uppercase;
  }

  .loading-title {
      font-family: 'Source Serif 4', Georgia, serif;
      font-size: 36px;
      line-height: 1.2;
      letter-spacing: -0.02em;
      font-weight: 600;
      color: var(--ink-900);
      margin-bottom: 12px;
  }

  .loading-title em {
      font-style: italic;
      color: var(--blue-600);
      font-weight: 600;
  }

  .loading-title span {
      color: var(--blue-600);
      font-style: normal;
      text-transform: capitalize;
  }

  .loading-sub {
      font-size: 16px;
      color: var(--ink-500);
      margin-bottom: 40px;
  }

  /* Progress bar */
  .loading-bar-wrap {
      height: 8px;
      background: var(--ink-100);
      border-radius: 4px;
      overflow: hidden;
      margin: 0 auto 48px;
      max-width: 720px;
  }

  .loading-bar {
      height: 100%;
      width: 0%;
      background: var(--blue-600);
      border-radius: 4px;
      animation: bar-fill 15s linear forwards;
  }

  @keyframes bar-fill {
      from {
          width: 0%;
      }

      to {
          width: 100%;
      }
  }

  /* Category grid */
  .loading-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      text-align: left;
      max-width: 1300px;
      margin: 0 auto;
      width: 100%;
  }

  .loading-card {
      min-width: 0;
  }

  .loading-card {
      background: #fff;
      border: 1px solid var(--ink-200);
      border-radius: var(--radius-md);
      padding: 16px 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      transition: all 0.32s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0.55;
      box-shadow: var(--shadow-sm);
  }

  .loading-card .lc-label {
      font-size: 13px;
      line-height: 1.25;
  }

  .loading-card .lc-icon {
      width: 32px;
      height: 32px;
  }

  .loading-card.searching {
      opacity: 1;
      border-color: var(--blue-500);
      background: var(--blue-50);
      box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
  }

  .loading-card.done {
      opacity: 1;
      border-color: var(--green-500);
      background: #fff;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.10);
  }

  .loading-card.done .lc-icon {
      background: var(--green-500);
      color: #fff;
  }

  .lc-icon {
      width: 36px;
      height: 36px;
      border-radius: 8px;
      background: var(--ink-100);
      color: var(--ink-500);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.32s;
  }

  .loading-card.searching .lc-icon {
      background: var(--blue-600);
      color: #fff;
  }

  .loading-card.done .lc-icon {
      background: var(--green-500);
      color: #fff;
  }

  .lc-label {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
      color: var(--ink-700);
      transition: color 0.32s;
  }

  .loading-card.searching .lc-label,
  .loading-card.done .lc-label {
      color: var(--ink-900);
  }

  .lc-status {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink-300);
      position: relative;
  }

  .lc-spinner,
  .lc-check {
      position: absolute;
      transition: opacity 0.32s;
  }

  .lc-check {
      opacity: 0;
      color: var(--green-500);
  }

  .loading-card:not(.done):not(.searching) .lc-spinner {
      opacity: 0.4;
  }

  .loading-card.searching .lc-spinner {
      opacity: 1;
      color: var(--blue-600);
      animation: spin 1s linear infinite;
  }

  .loading-card.done .lc-spinner {
      opacity: 0;
  }

  .loading-card.done .lc-check {
      opacity: 1;
  }

  @keyframes spin {
      from {
          transform: rotate(0deg);
      }

      to {
          transform: rotate(360deg);
      }
  }

  @media (max-width: 600px) {
      .loading-grid {
          grid-template-columns: 1fr 1fr;
      }

      .loading-title {
          font-size: 26px;
      }
  }