body {
      font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      background: #f7fafc;
      overflow-x: hidden;
    }

    .table-card {
      position: relative;
      background: #ffffff;
      border-radius: 1rem;
      overflow: hidden;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    }

    .table-card::before {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: 1rem;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(168, 85, 247, 0.25));
      filter: blur(12px);
      opacity: 0.65;
      z-index: -1;
    }

    .gradient-ring {
      background: radial-gradient(500px 100px at 5% -5%, rgba(59, 130, 246, 0.12), transparent),
                  radial-gradient(500px 100px at 95% 105%, rgba(168, 85, 247, 0.12), transparent);
    }

    .row {
      position: relative;
      transition: background 0.3s ease, transform 0.2s ease;
      background: #ffffff;
    }

    .row:hover {
      background: #e0f2fe;
      transform: translateY(-2px);
    }

    .row-active {
      background: linear-gradient(0deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.12)) !important;
      transform: translateY(-1px);
    }

    .row-active td {
      box-shadow: inset 0 1px 0 rgba(59, 130, 246, 0.25), inset 0 -1px 0 rgba(59, 130, 246, 0.25);
    }

    td.font-mono {
      position: relative;
    }

    td.font-mono::after {
      content: "";
      position: absolute;
      left: 1rem;
      right: 1rem;
      bottom: 0.5rem;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.35), transparent);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.3s ease;
    }

    tr.row:hover td.font-mono::after {
      transform: scaleX(1);
    }

    .table-glow {
      position: absolute;
      left: 5%;
      right: 5%;
      bottom: -15px;
      height: 30px;
      filter: blur(15px);
      background: radial-gradient(60% 100% at 50% 0%, rgba(59, 130, 246, 0.35), transparent);
    }

    thead tr::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    }

    pre {
      background: #f8fafc;
      border-radius: 0.5rem;
      padding: 1rem;
      overflow-x: auto;
    }

    code {
      font-family: 'Fira Code', monospace;
    }

    @media (prefers-reduced-motion: reduce) {
      .row, td.font-mono::after {
        transition: none;
      }
    }