:root {
      --brand: #7c3aed;
    }


    html, body { 
      height: 100%; 
    }

    body {
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: radial-gradient(1200px 600px at 10% -10%, rgba(124,58,237,.12), transparent 60%),
                  radial-gradient(1200px 600px at 90% 110%, rgba(59,130,246,.12), transparent 60%),
                  #0f172a;
      color: #e5e7eb;
    }


    .glass {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 8px 24px rgba(2,6,23,0.35);
      backdrop-filter: blur(8px);
    }

    .card-desc {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .text-gradient {
      background: linear-gradient(92deg, #a78bfa 0%, #60a5fa 50%, #34d399 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .focus-ring { 
      outline: none; 
      box-shadow: 0 0 0 3px rgba(124,58,237,.35); 
    }


    #nav-cards, #config-page {
      transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    }
    
    #nav-cards {
      opacity: 1;
      transform: translateY(0);
    }
    
    #config-page {
      opacity: 0;
      transform: translateY(20px);
    }


    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(255,255,255,0.05);
    }

    ::-webkit-scrollbar-thumb {
      background: linear-gradient(135deg, #7c3aed, #60a5fa);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    }