:root {
        --primary: #14B8B8;
        --secondary: #A78BFA;
      }
      .bg-mesh {
        background-color: #f8fafc;
        background-image: 
          radial-gradient(at 0% 0%, rgba(20, 184, 184, 0.08) 0px, transparent 50%),
          radial-gradient(at 100% 100%, rgba(167, 139, 250, 0.08) 0px, transparent 50%);
      }
      .glass {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.5);
      }
      .connection-card {
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .connection-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(20, 184, 184, 0.08);
      }
      .lock-overlay {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(4px);
      }
      #modal-add-connection {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(8px);
        align-items: center;
        justify-content: center;
      }
      .input-premium {
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid rgba(0, 0, 0, 0.05);
        border-radius: 16px;
        transition: all 0.2s ease;
      }
      .input-premium:focus {
        border-color: #14B8B8;
        background: white;
        box-shadow: 0 0 0 4px rgba(20, 184, 184, 0.1);
      }
      .rel-tag {
        cursor: pointer;
        transition: all 0.2s ease;
      }
      .rel-tag input:checked + div {
        background-color: #14B8B8;
        color: white;
        border-color: #14B8B8;
      }