components/auth-header.js

class AuthHeader extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .logo {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-weight: 700;
          font-size: 1.5rem;
          color: #4F46E5;
        }
        .logo-icon {
          width: 2rem;
          height: 2rem;
          color: white;
          background: #4F46E5;
          border-radius: 0.5rem;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      </style>
      <div class="logo">
        <div class="logo-icon">
          <i data-feather="check-circle"></i>
        </div>
        <span>TodoTastic</span>
      </div>
    `;
  }
}
customElements.define('auth-header', AuthHeader);