:root {
      --jinx-blue: #00eaff;
      --jinx-purple: #b300ff;
      --jinx-pink: #ff007c;
      --bg-dark: #0b0f14;
    }
    body {
      background: var(--bg-dark) !important;
      color: #d1e6ff;
      margin: 0;
      display: flex;
    }
    /* Painel esquerdo */
    .left {
      width: 40%;
      overflow-y: auto;
      padding: 1rem 2rem;
      border-right: 2px solid rgba(255,255,255,0.1);
    }
    /* Painel direito */
    .right {
      flex: 1;
      padding: 1rem 2rem;

      gap: 0.5rem;
    }
    .endpoint {
      border-left: 4px solid var(--jinx-purple);
      padding: 0.8rem 1rem;
      background: rgba(255,255,255,0.03);
      border-radius: 6px;
      margin-bottom: 1rem;
      transition: 0.2s;
    }
    .endpoint:hover {
      border-left-color: var(--jinx-blue);
      transform: translateX(3px);
    }
    h1 {
      color: var(--jinx-pink);
      text-shadow: 0 0 6px var(--jinx-pink);
      font-weight: bold;
    }
    a {
      color: var(--jinx-blue) !important;
      font-weight: bold;
    }
    a:hover {
      color: var(--jinx-pink) !important;
      text-decoration: underline;
    }
    .tagline {
      color: var(--jinx-purple);
      margin-bottom: 1rem;
      font-style: italic;
      font-size: 0.9rem;
      text-shadow: 0 0 4px var(--jinx-purple);
    }
    #test-form input {
      width: 400px;
      padding: 0.5rem;
      border-radius: 4px;
      border: none;
      background: rgba(255,255,255,0.05);
      color: #fff;
    }
    #result {
      flex: 1;
      
      background: rgba(255,255,255,0.05);
      border-radius: 6px;
      padding: 1rem;
      overflow-y: auto;
      white-space: pre-wrap;
      font-family: monospace;
      font-size: 0.8rem;
    }
code {
            background: rgba(255,255,255,0.05);
            padding: 2px 6px;
            border-radius: 4px;
            color: var(--jinx-blue);
        }