components/auth-panel.js

class AuthPanel extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          background: rgba(40, 42, 54, 0.8);
          backdrop-filter: blur(10px);
          border-radius: 8px;
          padding: 2rem;
          max-width: 400px;
          margin: 2rem auto;
          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        h2 {
          color: #f8f8f2;
          margin-top: 0;
        }
        .auth-buttons {
          display: flex;
          flex-direction: column;
          gap: 1rem;
        }
        button {
          background: #6272a4;
          color: #f8f8f2;
          border: none;
          border-radius: 4px;
          padding: 1rem;
          cursor: pointer;
          transition: background 0.2s;
          font-size: 1rem;
        }
        button:hover {
          background: #7f8fb1;
        }
        .admin-btn {
          background: #ff5555;
        }
        .admin-btn:hover {
          background: #ff6e6e;
        }
      </style>
      <h2>AI CLI Fusion IDE</h2>
      <div class="auth-buttons">
        <button id="user-login">Developer Access</button>
        <button id="admin-login" class="admin-btn">Admin Access</button>
      </div>
    `;
  }
}
customElements.define('auth-panel', AuthPanel);