@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); :host { --naw-primary: #4f46e5; --naw-primary-hover: #4338ca; --naw-bg: #ffffff; --naw-text: #1f2937; --naw-text-secondary: #6b7280; --naw-border: #d1d5db; --naw-input-bg: #f9fafb; --naw-error: #ef4444; --naw-radius: 8px; --naw-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; display: block; font-family: var(--naw-font); } :host([theme="dark"]) { --naw-primary: #818cf8; --naw-primary-hover: #6366f1; --naw-bg: #1f2937; --naw-text: #f9fafb; --naw-text-secondary: #9ca3af; --naw-border: #374151; --naw-input-bg: #374151; --naw-error: #f87171; } .naw-container { max-width: 400px; margin: 0 auto; padding: 32px 24px; background: var(--naw-bg); border-radius: 16px; } .naw-title { text-align: center; font-size: 24px; font-weight: 600; color: var(--naw-text); margin: 0 0 32px 0; } .naw-form { display: flex; flex-direction: column; gap: 16px; } .naw-field { display: flex; flex-direction: column; gap: 6px; } .naw-label { font-size: 14px; font-weight: 500; color: var(--naw-text); } .naw-input { width: 100%; box-sizing: border-box; padding: 10px 14px; font-size: 15px; border: 1px solid var(--naw-border); border-radius: var(--naw-radius); background: var(--naw-input-bg); color: var(--naw-text); outline: none; transition: border-color 0.2s; font-family: var(--naw-font); } .naw-input:focus { border-color: var(--naw-primary); } .naw-input::placeholder { color: var(--naw-text-secondary); } .naw-button { width: 100%; padding: 12px; font-size: 15px; font-weight: 600; color: #ffffff; background: var(--naw-primary); border: none; border-radius: var(--naw-radius); cursor: pointer; transition: background 0.2s; font-family: var(--naw-font); } .naw-button:hover { background: var(--naw-primary-hover); } .naw-button:disabled { opacity: 0.6; cursor: not-allowed; } .naw-error-msg { color: var(--naw-error); font-size: 13px; text-align: center; margin: 0; min-height: 20px; }