/* * Shared chrome for the Admin-hosted Kratos self-service pages: * Login, Recovery, Verification, Settings. Loaded by each view's * . Visually matches the existing Consent/AuthError pages so * the whole /auth/* surface reads as one suite. */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: #f3f4f6; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; color: #111827; } .card { background: white; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); max-width: 420px; width: 100%; overflow: hidden; } .card-header { padding: 1.5rem 1.5rem 1rem; text-align: center; border-bottom: 1px solid #e5e7eb; } .card-header img { height: 40px; margin-bottom: 0.75rem; } .card-header h1 { font-size: 1.125rem; font-weight: 600; color: #111827; line-height: 1.4; } .card-header p { margin-top: 0.25rem; color: #6b7280; font-size: 0.875rem; } .card-body { padding: 1.5rem; } .field { display: flex; flex-direction: column; margin-bottom: 1rem; } .field label { font-size: 0.8125rem; font-weight: 500; color: #374151; margin-bottom: 0.375rem; } .field input { width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9375rem; background: white; color: #111827; transition: border-color 0.15s, box-shadow 0.15s; } .field input:focus { outline: none; border-color: #0EA5E9; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); } .field input:disabled { background: #f9fafb; color: #6b7280; cursor: not-allowed; } .actions { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; } .btn { width: 100%; padding: 0.75rem 1rem; border-radius: 8px; font-weight: 500; font-size: 0.9375rem; cursor: pointer; border: none; background: #0EA5E9; color: white; transition: background 0.15s; } .btn:hover { background: #0284c7; } .messages { margin-bottom: 1rem; } .message { padding: 0.625rem 0.75rem; border-radius: 8px; font-size: 0.8125rem; margin-bottom: 0.5rem; } .message-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } .message-info { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; } .message-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; } .field-error { color: #b91c1c; font-size: 0.75rem; margin-top: 0.375rem; } .card-footer { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; text-align: center; } .card-footer p { color: #9ca3af; font-size: 0.75rem; line-height: 1.5; } .unavailable-note { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; padding: 0.875rem 1rem; border-radius: 8px; font-size: 0.875rem; line-height: 1.5; } .unavailable-note strong { color: #78350f; }